feat: Add learning by sector,regions bar chart and Map for learning #1577

roshni73 · 2024-12-05T10:48:46Z

Addresses:

Changes

Add learning by sector, region, and source overtime chart.
Add Map view for operational learning

This PR doesn't introduce:

changeset-bot · 2024-12-05T10:48:51Z

⚠️ No Changeset found

Latest commit: 10a77b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

app/src/views/OperationalLearning/index.tsx

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

app/src/views/OperationalLearning/index.tsx

AdityaKhatri · 2024-12-27T08:06:18Z

app/src/views/OperationalLearning/index.tsx

+    emergencyAppeal: styles.emergencyAppeal,
+};
+const now = new Date();
+const startDate = new Date(now.getFullYear() - 20, 0, 1);


Add FIXME to decide start date properly

AdityaKhatri · 2024-12-27T08:07:01Z

app/src/views/OperationalLearning/index.tsx

+        query: {
+            ...query,
+        },


Suggested change

query: {

...query,

},

query,

AdityaKhatri · 2024-12-27T08:07:25Z

app/src/views/OperationalLearning/index.tsx

+    const transformSourcesOvertimeData = (data: {
+        date: string;
+        type_display: string;
+        count: number;
+    }[]) => {
+        const groupedData: Record<string, { dref: number; emergencyAppeal: number }> = {};
+
+        data.forEach((entry: {
+            date: string | number | Date;
+            type_display: string;
+            count: number;
+        }) => {
+            const year = new Date(entry.date).getFullYear().toString();
+            if (!groupedData[year]) {
+                groupedData[year] = { dref: 0, emergencyAppeal: 0 };
+            }
+            if (entry.type_display === 'DREF') {
+                groupedData[year].dref = entry.count;
+            } else if (entry.type_display === 'Emergency Appeal') {
+                groupedData[year].emergencyAppeal += entry.count;
+            }
+        });
+
+        return groupedData;
+    };


use useMemo

Or can be moved outside if this is a pure function

AdityaKhatri · 2024-12-27T08:09:38Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+interface Props {
+   className?: string;
+   learning: learningStatsResponse | undefined;
+}


move props next to the main function

AdityaKhatri · 2024-12-27T08:10:37Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+    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]);


both of these can go inside calculation of bluePointHaloCirclePaint

Also, handle case when array length is zero.

AdityaKhatri · 2024-12-27T08:10:58Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+    const {
+        bluePointHaloCirclePaint,
+    } = useMemo(


Suggested change

const {

bluePointHaloCirclePaint,

} = useMemo(

const bluePointHaloCirclePaint = useMemo(

AdityaKhatri · 2024-12-27T08:12:06Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+function getMaxLearning(learning: learningStatsResponse) {
+    const learningData = learning?.learning_by_country.filter(
+        ({ count }) => isDefined(count),
+    );
+
+    const maxLearning = maxSafe(
+        learningData?.map(({ count }) => count),
+    );
+    return maxLearning;
+}


Move this function inside to directly calculate getMaxLearning

Agree. We do not need a separate function that cannot be reused anywhere else.

tnagorra · 2024-12-27T09:14:10Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+            <BaseMap
+                baseLayers={(
+                    <MapLayer
+                        layerKey="admin-0"
+                        hoverable
+                        layerOptions={adminFillLayerOptions}
+                        onClick={handleCountryClick}
+                    />
+                )}
+            >


Please use GlobalMap instead of BaseMap.
We are deprecating the use of BaseMap in the future.

tnagorra · 2024-12-27T09:15:30Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+function getMaxLearning(learning: learningStatsResponse) {
+    const learningData = learning?.learning_by_country.filter(
+        ({ count }) => isDefined(count),
+    );
+
+    const maxLearning = maxSafe(
+        learningData?.map(({ count }) => count),
+    );
+    return maxLearning;
+}


Agree. We do not need a separate function that cannot be reused anywhere else.

tnagorra · 2024-12-27T09:16:23Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+            const features = countryResponse
+                ?.map((country) => {
+                    const learningList = learning?.learning_by_country?.find(
+                        (item: { country_id: number; }) => item.country_id === country.id,
+                    );
+                    if (isNotDefined(learningList)) {
+                        return undefined;
+                    }
+                    const units = learningList.count;
+                    return {
+                        type: 'Feature' as const,
+                        geometry: country.centroid as {
+                        type: 'Point',
+                        coordinates: [0, 0],
+                    },
+                        properties: {
+                            country_id: country.id,
+                            name: country.name,
+                            operation_count: units,
+                        },
+                    };
+                })
+                .filter(isDefined) ?? [];


Mapping should be done the other way around and use a dict/map to find elements on a loop.

tnagorra · 2024-12-27T09:17:12Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+    const learningCount = useMemo(() => (
+        learning?.learning_by_country
+            .filter((country) => country.count > 0)
+    ), [learning?.learning_by_country]);


The variable learningCount does not hold count of learnings. Rename this to something appropriate.

tnagorra · 2024-12-27T09:17:47Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+    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]);


Also, handle case when array length is zero.

tnagorra · 2024-12-27T09:18:47Z

app/src/views/OperationalLearning/OperationalLearningMap/index.tsx

+    const handleCountryClick = useCallback(
+        (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLatLike) => {
+            setClickedPointProperties({
+                feature: feature as unknown as ClickedPoint['feature'],
+                lngLat,
+            });
+            return false;
+        },
+        [],
+    );
+    const handlePointClose = useCallback(() => {
+        setClickedPointProperties(undefined);
+    }, []);
+
+    const handlePointClick = useCallback(
+        (feature: mapboxgl.MapboxGeoJSONFeature, lngLat: mapboxgl.LngLatLike) => {
+            setClickedPointProperties({
+                feature: feature as unknown as ClickedPoint['feature'],
+                lngLat,
+            });
+            return true;
+        },
+        [setClickedPointProperties],
+    );


Not sure if handleCountryClick and handlePointClick can be handled the same way. Do we even need handleCountryClick?

tnagorra · 2024-12-27T09:19:27Z

app/src/views/OperationalLearning/index.tsx

+};
+const now = new Date();
+
+// FIX ME : ADD START DATE PROPERLY


Suggested change

// FIX ME : ADD START DATE PROPERLY

// FIXME: ADD START DATE PROPERLY

tnagorra · 2024-12-27T09:20:46Z

app/src/views/OperationalLearning/index.tsx

+    const {
+        error: learningStatsResponseError,
+        response: learningStatsResponse,
+    } = useRequest({
+        url: '/api/v2/ops-learning/stats/',
+        query,
+    });


Let's also handle pending state.

roshni73 temporarily deployed to test December 5, 2024 10:48 — with GitHub Actions Inactive

roshni73 marked this pull request as draft December 5, 2024 10:48

roshni73 temporarily deployed to test December 5, 2024 10:49 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 5, 2024 10:50 — with GitHub Actions Inactive

roshni73 force-pushed the feature/add-charts-learnings branch from 89e0a01 to e80e0a5 Compare December 6, 2024 08:48

roshni73 temporarily deployed to test December 6, 2024 08:48 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 6, 2024 08:49 — with GitHub Actions Inactive

samshara requested changes Dec 9, 2024

View reviewed changes

samshara self-requested a review December 10, 2024 09:58

roshni73 force-pushed the feature/add-charts-learnings branch from e80e0a5 to 3bde6b9 Compare December 11, 2024 04:21

roshni73 temporarily deployed to test December 11, 2024 04:21 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 04:22 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 04:23 — with GitHub Actions Inactive

roshni73 force-pushed the feature/add-charts-learnings branch from 3bde6b9 to 3ef7309 Compare December 11, 2024 05:44

roshni73 temporarily deployed to test December 11, 2024 05:44 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 05:45 — with GitHub Actions Inactive

roshni73 force-pushed the feature/add-charts-learnings branch from 3ef7309 to a9f5ebb Compare December 11, 2024 05:55

roshni73 temporarily deployed to test December 11, 2024 05:55 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 05:56 — with GitHub Actions Inactive

roshni73 force-pushed the feature/add-charts-learnings branch from a9f5ebb to 3071d1b Compare December 11, 2024 06:39

roshni73 temporarily deployed to test December 11, 2024 06:39 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 06:40 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 11, 2024 06:41 — with GitHub Actions Inactive

roshni73 force-pushed the feature/add-charts-learnings branch from 8ee38d7 to 6af5950 Compare December 12, 2024 05:27

Add learning by sector and regions bar chart

6a70d50

roshni73 force-pushed the feature/add-charts-learnings branch from 6af5950 to 087c25b Compare December 12, 2024 05:38

roshni73 force-pushed the feature/add-charts-learnings branch from 0d21ba8 to ba0314f Compare December 26, 2024 11:03

roshni73 temporarily deployed to test December 26, 2024 11:03 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 26, 2024 11:04 — with GitHub Actions Inactive

roshni73 marked this pull request as ready for review December 26, 2024 11:04

roshni73 temporarily deployed to test December 26, 2024 11:05 — with GitHub Actions Inactive

shreeyash07 requested changes Dec 27, 2024

View reviewed changes

tnagorra changed the title ~~Add learning by sector,regions bar chart and Map for learning~~ feat: Add learning by sector,regions bar chart and Map for learning Dec 27, 2024

roshni73 force-pushed the feature/add-charts-learnings branch from ba0314f to 3d5b4bf Compare December 27, 2024 05:56

roshni73 temporarily deployed to test December 27, 2024 05:57 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 27, 2024 05:58 — with GitHub Actions Inactive

roshni73 requested review from shreeyash07, subinasr, tnagorra and frozenhelium December 27, 2024 06:01

roshni73 assigned AdityaKhatri and samshara Dec 27, 2024

AdityaKhatri requested changes Dec 27, 2024

View reviewed changes

roshni73 force-pushed the feature/add-charts-learnings branch from 3d5b4bf to 34e3d93 Compare December 27, 2024 09:18

roshni73 temporarily deployed to test December 27, 2024 09:18 — with GitHub Actions Inactive

roshni73 requested a review from AdityaKhatri December 27, 2024 09:19

roshni73 temporarily deployed to test December 27, 2024 09:19 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 27, 2024 09:20 — with GitHub Actions Inactive

tnagorra requested changes Dec 27, 2024

View reviewed changes

shreeyash07 approved these changes Dec 27, 2024

View reviewed changes

roshni73 force-pushed the feature/add-charts-learnings branch from 34e3d93 to 10a77b8 Compare December 27, 2024 10:32

roshni73 temporarily deployed to test December 27, 2024 10:32 — with GitHub Actions Inactive

Add api integration for keyfigures,charts

10a77b8

roshni73 temporarily deployed to test December 27, 2024 10:33 — with GitHub Actions Inactive

roshni73 temporarily deployed to test December 27, 2024 10:34 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add learning by sector,regions bar chart and Map for learning #1577

feat: Add learning by sector,regions bar chart and Map for learning #1577

roshni73 commented Dec 5, 2024 •

edited

Loading

changeset-bot bot commented Dec 5, 2024 •

edited

Loading

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

tnagorra Dec 27, 2024

AdityaKhatri Dec 27, 2024

AdityaKhatri Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

tnagorra Dec 27, 2024

	// FIX ME : ADD START DATE PROPERLY
	// FIXME: ADD START DATE PROPERLY

feat: Add learning by sector,regions bar chart and Map for learning #1577

Are you sure you want to change the base?

feat: Add learning by sector,regions bar chart and Map for learning #1577

Conversation

roshni73 commented Dec 5, 2024 • edited Loading

Addresses:

Changes

This PR doesn't introduce:

changeset-bot bot commented Dec 5, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roshni73 commented Dec 5, 2024 •

edited

Loading

changeset-bot bot commented Dec 5, 2024 •

edited

Loading