Add learning by sector and regions bar chart

Author: roshni73

app/src/views/OperationalLearning/i18n.json

@@ -20,6 +20,9 @@
         "failedToCreateExport": "Failed to generate export.",
         "disclaimerMessage": "This is an updated implementation of the Operational Learning project started by the DREF and PER teams at IFRC. The previous dashboard can be found {link}.",
         "here": "here",
-        "beta": "beta"
+        "beta": "beta",
+        "learningBySector": "learnings by sectors",
+        "learningByRegions": "learnings by regions",
+        "sourceOvertime": "Sources Overtime"
     }
 }

app/src/views/OperationalLearning/index.tsx

@@ -5,6 +5,7 @@ import {
 } from 'react';
 import { InfoIcon } from '@ifrc-go/icons';
 import {
+    BarChart,
     Button,
     Chip,
     Container,
@@ -18,9 +19,12 @@ import {
     TabPanel,
     Tabs,
     TextOutput,
+    TimeSeriesChart,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
+    getDatesSeparatedByMonths,
+    getFormattedDateKey,
     hasSomeDefinedValue,
     numericIdSelector,
     resolveToComponent,
@@ -98,6 +102,83 @@ const disasterTypeKeySelector = (type: DisasterType) => type.id;
 const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
 
 /** @knipignore */
+
+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,
+    },
+
+];
+
+const timeSeriesDataKeys = [
+    {
+        date: '2024-12',
+        count: 2,
+    },
+    {
+        date: '2024-11',
+        count: 8,
+    },
+    {
+        date: '2024-10',
+        count: 27,
+    },
+    {
+        date: '2024-09',
+        count: 48,
+    },
+    {
+        date: '2024-01',
+        count: 23,
+    },
+    {
+        date: '2024-08',
+        count: 70,
+    },
+    {
+        date: '2024-07',
+        count: 85,
+    },
+    {
+        date: '2024-06',
+        count: 84,
+    },
+    {
+        date: '2024-05',
+        count: 73,
+    },
+];
+const oneYearAgo = new Date();
+oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
+oneYearAgo.setDate(1);
+oneYearAgo.setMonth(oneYearAgo.getMonth() + 1);
+oneYearAgo.setHours(0, 0, 0, 0);
+const timeseriesChartClassNameSelector = () => styles.sourceChart;
+const xAxisFormatter = (date: Date) => date.toLocaleString(
+    navigator.language,
+    { month: 'short' },
+);
+const keySelector = (item) => item.id;
+const valueSelector = (item) => item.value;
+const labelSelector = (item) => item.name;
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
@@ -281,7 +362,22 @@ export function Component() {
         setFilterPristine(true);
         setQuery(undefined);
     }, [resetFilter]);
-
+    const dateList = useMemo(
+        () => {
+            const startDate = oneYearAgo;
+            const endDate = new Date();
+            return getDatesSeparatedByMonths(startDate, endDate);
+        },
+        [],
+    );
+    const timeSeriesValueSelector = useCallback(
+        (_: string, date: Date) => timeSeriesDataKeys?.find(
+            (source) => (
+                getFormattedDateKey(source.date) === getFormattedDateKey(date)
+            ),
+        )?.count ?? 0,
+        [],
+    );
     return (
         <Page
             className={styles.operationalLearning}
@@ -444,6 +540,55 @@ export function Component() {
                     </>
                 )}
             />
+            <div className={styles.learningOverview}>
+                <Container
+                    heading="Map"
+
+                />
+                <div className={styles.charts}>
+                    <Container
+                        heading={strings.learningBySector}
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        <BarChart
+                            data={sectorData}
+                            keySelector={keySelector}
+                            valueSelector={valueSelector}
+                            labelSelector={labelSelector}
+                        />
+                    </Container>
+                    <Container
+                        heading={strings.learningByRegions}
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        <BarChart
+                            data={sectorData}
+                            keySelector={keySelector}
+                            valueSelector={valueSelector}
+                            labelSelector={labelSelector}
+                        />
+                    </Container>
+                    <Container
+                        heading={strings.sourceOvertime}
+                        className={styles.learningChart}
+                        withHeaderBorder
+                        withInternalPadding
+                    >
+                        <TimeSeriesChart
+                            className={styles.timeSeriesChart}
+                            timePoints={dateList}
+                            dataKeys={timeSeriesDataKeys}
+                            valueSelector={timeSeriesValueSelector}
+                            classNameSelector={timeseriesChartClassNameSelector}
+                            xAxisFormatter={xAxisFormatter}
+                        />
+                    </Container>
+                </div>
+            </div>
             {showKeyInsights && (
                 <KeyInsights
                     opsLearningSummaryResponse={opsLearningSummaryResponse}

app/src/views/OperationalLearning/styles.module.css

@@ -73,5 +73,34 @@
             display: inline;
         }
     }
+    .learning-overview{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .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);
+
+                .time-series-chart {
+                    width: 100%;
+                    height: 10rem;
+    
+                    .source-chart {
+                        color: var(--go-ui-color-primary-red);
+                        stroke: var(--go-ui-color-primary-red);
+                        stroke-width: var(1pt);
+                        fill: none;
+                    }
+                }
+            }
+        }
+    }
 }