From 1b813b623fc5ad1da020c37a9186c6fed7fd83f2 Mon Sep 17 00:00:00 2001 From: roshni73 Date: Thu, 19 Dec 2024 11:06:54 +0545 Subject: [PATCH] Add api integration for keyfigures,charts --- .../OperationalLearningMap/i18n.json | 3 +- .../OperationalLearningMap/index.tsx | 82 ++++++----- .../OperationalLearningMap/styles.module.css | 1 + app/src/views/OperationalLearning/i18n.json | 6 +- app/src/views/OperationalLearning/index.tsx | 134 ++++-------------- .../OperationalLearning/styles.module.css | 14 +- 6 files changed, 77 insertions(+), 163 deletions(-) diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json b/app/src/views/OperationalLearning/OperationalLearningMap/i18n.json index 4f8b0c457..acb106275 100644 --- 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 index 345c5121d..a3f3f5575 100644 --- a/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx +++ b/app/src/views/OperationalLearning/OperationalLearningMap/index.tsx @@ -9,6 +9,7 @@ import { TextOutput, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; +import { maxSafe } from '@ifrc-go/ui/utils'; import { _cs, isDefined, @@ -32,13 +33,18 @@ 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 DEFAULT_MAX_LEARNING = 1000; + const sourceOptions: mapboxgl.GeoJSONSourceRaw = { type: 'geojson', }; + interface CountryProperties { country_id: number; name: string; @@ -50,64 +56,47 @@ interface ClickedPoint { } interface Props { className?: string; + learning: learningStatsResponse | undefined; } - const LEARNINGS_LOW_COLOR = COLOR_LIGHT_BLUE; const LEARNINGS_HIGH_COLOR = COLOR_BLUE; +function getMaxLearning(learning: learningStatsResponse) { + const learningData = learning?.learning_by_country.filter( + ({ count }: { count: number }) => isDefined(count), + ); + + const maxLearning = maxSafe( + learningData?.map(({ count }: { count: number }) => count), + ); + return maxLearning; +} + function OperationalLearningMap(props: Props) { const strings = useTranslation(i18n); const { className, + learning: learningFromProps, } = props; + + const learning = learningFromProps; const [ clickedPointProperties, setClickedPointProperties, ] = useState(); + const countryResponse = useCountry(); const countryCentroidGeoJson = useMemo( (): GeoJSON.FeatureCollection => { - 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 +116,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 +163,10 @@ function OperationalLearningMap(props: Props) { }, [setClickedPointProperties], ); + const maxLearning = useMemo(() => ( + getMaxLearning(learning) ?? DEFAULT_MAX_LEARNING + ), [learning]); + return ( @@ -239,6 +242,7 @@ function OperationalLearningMap(props: Props) { > diff --git a/app/src/views/OperationalLearning/OperationalLearningMap/styles.module.css b/app/src/views/OperationalLearning/OperationalLearningMap/styles.module.css index 9170cbd26..9194647d9 100644 --- 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 index dc1279b74..8df6507b3 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", - "sourceOvertime": "Sources Overtime" + "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..ac0f18d2f 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 = ['Source']; const oneYearAgo = new Date(); oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1); @@ -199,8 +119,6 @@ const startDate = oneYearAgo; const endDate = new Date(); const dateList = getDatesSeparatedByMonths(startDate, endDate); -const dateSelector = (d: { date: string }) => d.date; - const sectorsKeySelector = (datum: { id: number }) => datum.id; const sectorsValueSelector = (datum: { count: number }) => datum.count; const sectorsLabelSelector = (datum: { title: string }) => datum.title; @@ -394,16 +312,23 @@ export function Component() { setQuery(undefined); }, [resetFilter]); - const timeSeriesValueSelector = useCallback( - (_: string, date: Date) => { - const entry = timeSeriesDataKeys?.find( - (source) => getFormattedDateKey(source.date) === getFormattedDateKey(date), - ); - return entry ? entry.value : undefined; + const { + response: learningStatsResponse, + } = useRequest({ + url: '/api/v2/ops-learning/stats/', + query: { + ...query, }, - [], - ); + }); + const timeSeriesValueSelector = useCallback( + (_: string, date: Date) => learningStatsResponse?.sources_overtime.find( + (source) => ( + getFormattedDateKey(source.date) === getFormattedDateKey(date) + ), + )?.count ?? 0, + [learningStatsResponse], + ); return ( )} /> -
+
-
-
-
- - )} >