Add learning by sector and regions bar chart

IFRCGo · Dec 5, 2024 · 89e0a01 · 89e0a01
1 parent cbe00a9
commit 89e0a01
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
@@ -5,6 +5,7 @@ import {
 } from 'react';
 import { InfoIcon } from '@ifrc-go/icons';
 import {
+    BarChart,
     Button,
     Chip,
     Container,
@@ -282,6 +283,30 @@ export function Component() {
         setQuery(undefined);
     }, [resetFilter]);
 
+    const sectorData = [
+        {
+            id: 1,
+            name: 'Health',
+            value: 23,
+        },
+        {
+            id: 2,
+            name: 'Recovery',
+            value: 55,
+        },
+        {
+            id: 3,
+            name: 'Education',
+            value: 60,
+        },
+        {
+            id: 4,
+            name: 'DRR',
+            value: 35,
+        },
+
+    ];
+
     return (
         <Page
             className={styles.operationalLearning}
@@ -444,6 +469,53 @@ export function Component() {
                     </>
                 )}
             />
+            <div className={styles.learningOverview}>
+                <div>map</div>
+                <div className={styles.charts}>
+                    <Container
+                        heading="learnings by sectors"
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        <BarChart
+                            data={sectorData}
+                            keySelector={(item) => item.id}
+                            valueSelector={(item) => item.value}
+                            labelSelector={(item) => item.name}
+                        />
+                    </Container>
+                    <Container
+                        heading="learnings by regions"
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        <BarChart
+                            data={sectorData}
+                            keySelector={(item) => item.id}
+                            valueSelector={(item) => item.value}
+                            labelSelector={(item) => item.name}
+                        />
+                    </Container>
+                    <Container
+                        heading="Source overtime"
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        {/* <TimeSeriesChart
+                            className={styles.timelineChart}
+                            timePoints={dateList}
+                            dataKeys={timeSeriesDataKeys}
+                            // valueSelector={chartValueSelector}
+                            // classNameSelector={classNameSelector}
+                            // xAxisFormatter={xAxisFormatter}
+                        /> */}
+
+                    </Container>
+                </div>
+            </div>
             {showKeyInsights && (
                 <KeyInsights
                     opsLearningSummaryResponse={opsLearningSummaryResponse}

diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
@@ -73,5 +73,21 @@
             display: inline;
         }
     }
+    .learning-overview{
+        display: flex;
+        flex-direction: row;
+        .charts {
+            display: grid;
+            grid-gap: var(--go-ui-spacing-md);
+            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+            @media screen and (max-width: 30rem) {
+                grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+            }
+            .learning-chart{
+                border-radius: var(--go-ui-border-radius-lg);
+                box-shadow: var(--go-ui-box-shadow-md);
+            }
+        }
+    }
 }