Add api integration for keyfigures,charts

IFRCGo · Dec 20, 2024 · a659b2e · a659b2e
1 parent 9976005
commit a659b2e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 160 deletions.
diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json b/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json
@@ -2,6 +2,7 @@
     "namespace": "operationalLearning",
     "strings": {
         "downloadMapTitle": "Operational learning map",
-        "learningLegendLabel": "Learnings"
+        "learningLegendLabel": "Learnings",
+        "learningCountLegendLabel":"Learning count"
     }
 }
diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx b/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx
@@ -32,13 +32,17 @@ import {
     adminFillLayerOptions,
     getPointCircleHaloPaint,
 } from '#utils/map';
+import { GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type learningStatsResponse = GoApiResponse<'/api/v2/ops-learning/stats/'>;
+
 const sourceOptions: mapboxgl.GeoJSONSourceRaw = {
     type: 'geojson',
 };
+
 interface CountryProperties {
     country_id: number;
     name: string;
@@ -50,64 +54,36 @@ interface ClickedPoint {
 }
 interface Props {
    className?: string;
+   learning: learningStatsResponse | undefined;
 }
-
 const LEARNINGS_LOW_COLOR = COLOR_LIGHT_BLUE;
 const LEARNINGS_HIGH_COLOR = COLOR_BLUE;
 
 function OperationalLearningMap(props: Props) {
     const strings = useTranslation(i18n);
     const {
         className,
+        learning: learningFromProps,
     } = props;
+
+    const learning = learningFromProps;
     const [
         clickedPointProperties,
         setClickedPointProperties,
     ] = useState<ClickedPoint | undefined>();
+
     const countryResponse = useCountry();
     const countryCentroidGeoJson = useMemo(
         (): GeoJSON.FeatureCollection<GeoJSON.Geometry> => {
-            const learning_by_country = [
-                {
-                    country_name: 'Afghanistan',
-                    country_id: 14,
-                    operation_count: 40,
-                },
-                {
-                    country_name: 'Albania',
-                    country_id: 15,
-                    operation_count: 10,
-                },
-                {
-                    country_name: 'Argentina',
-                    country_id: 20,
-                    operation_count: 29,
-                },
-                {
-                    country_name: 'Australia',
-                    country_id: 22,
-                    operation_count: 11,
-                },
-                {
-                    country_name: 'Belgium',
-                    country_id: 30,
-                    operation_count: 222,
-                },
-                {
-                    country_name: 'Canada',
-                    country_id: 42,
-                    operation_count: 1,
-                },
-            ];
             const features = countryResponse
                 ?.map((country) => {
-                    const learningList = learning_by_country.find(
-                        (item) => item.country_id === country.id,
+                    const learningList = learning?.learning_by_country?.find(
+                        (item: { country_id: number; }) => item.country_id === country.id,
                     );
                     if (isNotDefined(learningList)) {
                         return undefined;
                     }
-                    const units = learningList.operation_count;
+                    const units = learningList.count;
                     return {
                         type: 'Feature' as const,
                         geometry: country.centroid as {
@@ -127,10 +103,20 @@ function OperationalLearningMap(props: Props) {
                 features,
             };
         },
-        [countryResponse],
+        [countryResponse, learning],
     );
+    const learningCount = useMemo(() => (
+        learning?.learning_by_country
+            .filter((country) => country.count > 0)
+    ), [learning?.learning_by_country]);
+
+    const maxScaleValue = useMemo(() => (
+        Math.max(
+            ...(learningCount
+                ?.map((activity: { count: number; }) => activity.count)
+                .filter(isDefined) ?? []),
+        )), [learningCount]);
 
-    const maxScaleValue = 10; // FIX ME
     const {
         bluePointHaloCirclePaint,
     } = useMemo(
@@ -164,6 +150,7 @@ function OperationalLearningMap(props: Props) {
         },
         [setClickedPointProperties],
     );
+
     return (
         <Container
             className={_cs(styles.learningMap, className)}
@@ -181,7 +168,7 @@ function OperationalLearningMap(props: Props) {
                                 value={0}
                             />
                             <NumberOutput
-                                value={100} // FIXME:ADD MAX LEARNINGS
+                                value={100}
                             />
                         </div>
                     </div>
@@ -239,6 +226,7 @@ function OperationalLearningMap(props: Props) {
                         >
                             <TextOutput
                                 value={clickedPointProperties.feature.properties.operation_count}
+                                label={strings.learningCountLegendLabel}
                                 valueType="number"
                             />
                         </Container>

diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/styles.module.css b/app/src/views/OperationalLearning/OperationalLearningMap/styles.module.css
@@ -37,6 +37,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
+
 
     .popup-appeal {
         gap: var(--go-ui-spacing-xs);

diff --git 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",
-        "sourceOvertime": "Sources Overtime"
+        "learningBySector": "Learning by sectors",
+        "learningByRegions": "Learning by regions",
+        "sourceOvertime": "Sources overtime"    
     }
 }