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..814fc924b 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 = 1000000; + 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..aaa749c45 100644 --- a/app/src/views/OperationalLearning/index.tsx +++ b/app/src/views/OperationalLearning/index.tsx @@ -35,7 +35,9 @@ import { } from '@ifrc-go/ui/utils'; import { isDefined, + isNotDefined, isTruthyString, + listToMap, sum, } from '@togglecorp/fujs'; import { EntriesAsList } from '@togglecorp/toggle-form'; @@ -81,8 +83,8 @@ const SUMMARY_STATUS_FAILED = 5 satisfies SummaryStatusEnum; type OpsLearningSummaryResponse = GoApiResponse<'/api/v2/ops-learning/summary/'>; type OpsLearningSectorSummary = OpsLearningSummaryResponse['sectors'][number]; type OpsLearningComponentSummary = OpsLearningSummaryResponse['components'][number]; - type OpsLearningQuery = GoApiUrlQuery<'/api/v2/ops-learning/'>; + type QueryType = Pick< OpsLearningQuery, | 'appeal_code__region' @@ -94,7 +96,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,93 +104,25 @@ 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 }, - ], - }, -}; +type DATA_KEY = 'dref' | 'emergencyAppeal'; -const timeSeriesDataKeys = Object.entries( - responseData.sources_overtime, -).flatMap(([source, entries]) => entries.map((entry) => ({ - date: `${entry.year}-01-01`, - value: entry.count, - source, -}))); +const dataKeys: DATA_KEY[] = [ + 'dref', + 'emergencyAppeal', +]; const oneYearAgo = new Date(); oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1); oneYearAgo.setDate(1); oneYearAgo.setMonth(oneYearAgo.getMonth() + 1); oneYearAgo.setHours(0, 0, 0, 0); -const timeseriesChartClassNameSelector = () => styles.sourceChart; + +const dataKeyToClassNameMap = { + dref: styles.dref, + emergencyAppeal: styles.emergencyAppeal, +}; + +const classNameSelector = (dataKey: DATA_KEY) => dataKeyToClassNameMap[dataKey]; const xAxisFormatter = (date: Date) => date.toLocaleString( navigator.language, { month: 'short' }, @@ -199,9 +132,8 @@ 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 sectorsKeySelector = (datum: + { count: number; title: string; sector_id: number; }) => datum.sector_id; const sectorsValueSelector = (datum: { count: number }) => datum.count; const sectorsLabelSelector = (datum: { title: string }) => datum.title; @@ -327,7 +259,7 @@ export function Component() { }); const [ - pendingExport,, + pendingExport, , triggerExportStart, ] = useRecursiveCsvExport({ disableProgress: true, @@ -394,14 +326,60 @@ export function Component() { setQuery(undefined); }, [resetFilter]); + const { + pending: learningStatsLoading, + response: learningStatsResponse, + } = useRequest({ + url: '/api/v2/ops-learning/stats/', + query: { + ...query, + }, + }); + + const [activePointKey, setActivePointKey] = useState( + () => getFormattedDateKey(dateList[dateList.length - 1]), + ); + + const combinedData = useMemo(() => { + if (isNotDefined(learningStatsResponse)) { + return undefined; + } + + const drefData = learningStatsResponse?.sources_overtime + ?.find((source) => source?.type === 0); + + const emergencyAppealData = learningStatsResponse?.sources_overtime + ?.find((source) => source?.type === 1); + + const data = { + dref: drefData, + emergencyAppeal: emergencyAppealData, + }; + + return data; + }, [learningStatsResponse]); + + const chartValueSelector = useCallback( + (dataKey: DATA_KEY, date: Date) => { + const formattedDateKey = getFormattedDateKey(date); + return combinedData?.[dataKey]?.[formattedDateKey]?.count; + }, + [combinedData], + ); + const timeSeriesValueSelector = useCallback( - (_: string, date: Date) => { - const entry = timeSeriesDataKeys?.find( - (source) => getFormattedDateKey(source.date) === getFormattedDateKey(date), + (key: DATA_KEY, date: Date) => { + const formattedDate = getFormattedDateKey(date); + const source = learningStatsResponse?.sources_overtime.find( + (sourceOvertime) => ( + getFormattedDateKey(sourceOvertime.date) === formattedDate + && ((key === 'dref' && sourceOvertime.type_display === 'DREF') + || (key === 'emergencyAppeal' && sourceOvertime.type_display === 'Emergency Appeal')) + ), ); - return entry ? entry.value : undefined; + return source?.count ?? 0; }, - [], + [learningStatsResponse], ); return ( @@ -566,45 +544,42 @@ export function Component() { )} /> -
+
-
-
-
- - )} > diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css index 5cd7bdaf4..bf8eff21d 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,23 +111,16 @@ 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; - grid-gap: var(--go-ui-spacing-md); - - .learning-chart { + .learning-chart { border-radius: var(--go-ui-border-radius-lg); box-shadow: var(--go-ui-box-shadow-md); .time-series-chart { - width: 100%; - height: 10rem; + flex-basis: 40rem; + flex-grow: 2; + --path-stroke-width: 1pt; .source-chart { color: var(--go-ui-color-primary-blue);