From 89e0a012a9011b40e6b25bc948000e92e474f2e3 Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Thu, 5 Dec 2024 16:33:17 +0545
Subject: [PATCH] Add learning by  sector and regions bar chart

---
 app/src/views/OperationalLearning/index.tsx   | 72 +++++++++++++++++++
 .../OperationalLearning/styles.module.css     | 16 +++++
 2 files changed, 88 insertions(+)

diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
index e60659bc0..379bcfec7 100644
--- 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
index 122baa2e4..ea7f05e5d 100644
--- 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);
+            }
+        }
+    }
 }