From b7517463cc95a403a81c88f6831d052a3d5d0b4a Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Thu, 19 Dec 2024 11:06:54 +0545
Subject: [PATCH] Add api integration for keyfigures,charts

---
 app/src/views/OperationalLearning/i18n.json   |   4 +-
 app/src/views/OperationalLearning/index.tsx   | 123 ++++--------------
 .../OperationalLearning/styles.module.css     |   7 +-
 3 files changed, 29 insertions(+), 105 deletions(-)

diff --git a/app/src/views/OperationalLearning/i18n.json b/app/src/views/OperationalLearning/i18n.json
index dc1279b74..9f40ddebd 100644
--- a/app/src/views/OperationalLearning/i18n.json
+++ b/app/src/views/OperationalLearning/i18n.json
@@ -25,8 +25,8 @@
         "sourcesUsed": "Sources Used",
         "learningExtract": "Learning Extracts",
         "sectorsCovered": "Sectors Covered",
-        "learningBySector": "learnings by sectors",
-        "learningByRegions": "learnings by regions",
+        "learningBySector": "Learning by sectors",
+        "learningByRegions": "Learning by regions",
         "sourceOvertime": "Sources Overtime"
     }
 }
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
index f741143ca..65f65aae0 100644
--- a/app/src/views/OperationalLearning/index.tsx
+++ b/app/src/views/OperationalLearning/index.tsx
@@ -94,7 +94,6 @@ type QueryType = Pick<
     | 'per_component_validated__in'
     | 'search_extracts'
 >;
-
 const regionKeySelector = (region: RegionOption) => region.key;
 const countryKeySelector = (country: Country) => country.id;
 const sectorKeySelector = (d: SecondarySector) => d.key;
@@ -103,86 +102,7 @@ const perComponentKeySelector = (option: PerComponent) => option.id;
 const disasterTypeKeySelector = (type: DisasterType) => type.id;
 const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';
 
-const responseData = {
-    operations_included: 9,
-    learning_extracts: 6,
-    sectors_covered: 6,
-    sources_used: 8,
-    learning_by_region: [
-        {
-            region_name: 'Americas',
-            region_id: 1,
-            count: 2,
-        },
-        {
-            region_name: 'Asia Pacific',
-            region_id: 2,
-            count: 5,
-        },
-        {
-            region_name: 'Europe',
-            region_id: 3,
-            count: 2,
-        },
-    ],
-    learning_by_sector: [
-        {
-            id: 17,
-            count: 1,
-            title: 'health',
-        },
-        {
-            id: 18,
-            count: 1,
-            title: 'education',
-        },
-        {
-            id: 19,
-            count: 3,
-            title: 'Livelihoods and basic needs',
-        },
-        {
-            id: 20,
-            count: 4,
-            title: 'Migration',
-        },
-        {
-            id: 21,
-            count: 1,
-            title: 'WASH',
-        },
-        {
-            id: 22,
-            count: 1,
-            title: 'Shelter',
-        },
-    ],
-    sources_overtime: {
-        DREF: [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 3 },
-        ],
-        'Emergency Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'International Appeal': [
-            { year: 2023, count: 1 },
-            { year: 2024, count: 1 },
-        ],
-        'Forecast Based Action': [
-            { year: 2022, count: 1 },
-        ],
-    },
-};
-
-const timeSeriesDataKeys = Object.entries(
-    responseData.sources_overtime,
-).flatMap(([source, entries]) => entries.map((entry) => ({
-    date: `${entry.year}-01-01`,
-    value: entry.count,
-    source,
-})));
+const timeSeriesDataKeys = ['Learnings'];
 
 const oneYearAgo = new Date();
 oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
@@ -394,14 +314,26 @@ export function Component() {
         setQuery(undefined);
     }, [resetFilter]);
 
+    const {
+        response: learningStatsResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/stats/',
+        query: {
+            ...query,
+        },
+    });
     const timeSeriesValueSelector = useCallback(
         (_: string, date: Date) => {
-            const entry = timeSeriesDataKeys?.find(
-                (source) => getFormattedDateKey(source.date) === getFormattedDateKey(date),
-            );
-            return entry ? entry.value : undefined;
+            if (!Array.isArray(learningStatsResponse)) {
+                return 0;
+            }
+            return learningStatsResponse.find(
+                (source: { date: number; }) => (
+                    getFormattedDateKey(source.date) === getFormattedDateKey(date)
+                ),
+            )?.count ?? 0;
         },
-        [],
+        [learningStatsResponse],
     );
 
     return (
@@ -566,45 +498,42 @@ export function Component() {
                     </>
                 )}
             />
-            <div
-                className={styles.keyFigureCardList}
-            >
+            <div className={styles.keyFigureCardList}>
                 <div className={styles.keyFigureCard}>
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.operations_included}
+                        value={learningStatsResponse?.operations_included}
                         label={strings.operationsIncluded}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sources_used}
+                        value={learningStatsResponse?.sources_used}
                         label={strings.sourcesUsed}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.learning_extracts}
+                        value={learningStatsResponse?.learning_extracts}
                         label={strings.learningExtract}
                         labelClassName={styles.keyFigureDescription}
                     />
                     <div className={styles.separator} />
                     <KeyFigure
                         className={styles.keyFigure}
-                        value={responseData.sectors_covered}
+                        value={learningStatsResponse?.sectors_covered}
                         label={strings.sectorsCovered}
                         labelClassName={styles.keyFigureDescription}
                     />
                 </div>
             </div>
-
             <div
                 className={styles.learningOverview}
             >
                 <OperationalLearningMap
-                    className={styles.mapConatiner}
+                    className={styles.mapContainer}
                 />
                 <div className={styles.charts}>
                     <Container
@@ -614,7 +543,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_sector}
+                            data={learningStatsResponse?.learning_by_sector}
                             keySelector={sectorsKeySelector}
                             valueSelector={sectorsValueSelector}
                             labelSelector={sectorsLabelSelector}
@@ -627,7 +556,7 @@ export function Component() {
                         withInternalPadding
                     >
                         <BarChart
-                            data={responseData.learning_by_region}
+                            data={learningStatsResponse?.learning_by_region}
                             keySelector={regionsKeySelector}
                             valueSelector={regionValueSelector}
                             labelSelector={regionLabelSelector}
diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
index 5cd7bdaf4..25abefdc2 100644
--- a/app/src/views/OperationalLearning/styles.module.css
+++ b/app/src/views/OperationalLearning/styles.module.css
@@ -89,7 +89,7 @@
             border-radius: var(--go-ui-border-radius-lg);
             box-shadow: var(--go-ui-box-shadow-md);
             background-color: var(--go-ui-color-white);
-            padding: var(--go-ui-spacing-md);
+            padding: var(--go-ui-spacing-xl);
     
             .separator {
                 flex-shrink: 0;
@@ -111,11 +111,6 @@
         display: grid;
         grid-gap: var(--go-ui-spacing-md);
         grid-template-columns: 5fr 2fr;
-        
-        .map-container {
-            grid-column: 1 / 2;
-            grid-row: 1 / 2;
-        }
     
         .charts {
             display: grid;