From 6814fc6c2be942b0821e995f70123cf907df65d4 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Fri, 1 Dec 2023 10:44:34 +0545 Subject: [PATCH 1/4] Hide imminent events in country if there are no events from any source --- src/views/CountryProfileRiskWatch/index.tsx | 37 +++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/src/views/CountryProfileRiskWatch/index.tsx b/src/views/CountryProfileRiskWatch/index.tsx index 6e2b7651e..39b92f88a 100644 --- a/src/views/CountryProfileRiskWatch/index.tsx +++ b/src/views/CountryProfileRiskWatch/index.tsx @@ -1,12 +1,13 @@ import { useMemo } from 'react'; import { useParams, useOutletContext } from 'react-router-dom'; -import { isDefined } from '@togglecorp/fujs'; +import { isDefined, isNotDefined, mapToList } from '@togglecorp/fujs'; import getBbox from '@turf/bbox'; import Container from '#components/Container'; import Link from '#components/Link'; import RiskImminentEvents from '#components/domain/RiskImminentEvents'; import HistoricalDataChart from '#components/domain/HistoricalDataChart'; +import BlockLoading from '#components/BlockLoading'; import useTranslation from '#hooks/useTranslation'; import useInputState from '#hooks/useInputState'; import type { CountryOutletContext } from '#utils/outletContext'; @@ -43,6 +44,35 @@ export function Component() { }, }); + const { + pending: pendingImminentEventCounts, + response: imminentEventCountsResponse, + } = useRiskRequest({ + apiType: 'risk', + url: '/api/v1/country-imminent-counts/', + query: { + iso3: countryResponse?.iso3?.toLowerCase(), + }, + }); + + const hasImminentEvents = useMemo( + () => { + if (isNotDefined(imminentEventCountsResponse)) { + return false; + } + + const eventCounts = mapToList( + imminentEventCountsResponse, + (value) => value, + ).filter(isDefined).filter( + (value) => value > 0, + ); + + return eventCounts.length > 0; + }, + [imminentEventCountsResponse], + ); + // NOTE: we always get 1 child in the response const riskResponse = countryRiskResponse?.[0]; const bbox = useMemo( @@ -52,7 +82,10 @@ export function Component() { return (
- {countryResponse && isDefined(countryResponse.iso3) && ( + {pendingImminentEventCounts && ( + + )} + {hasImminentEvents && isDefined(countryResponse) && isDefined(countryResponse.iso3) && ( Date: Fri, 1 Dec 2023 11:44:40 +0545 Subject: [PATCH 2/4] Improve calculation of yearly average for risk by month - Add test for risk utils --- src/utils/domain/risk.test.ts | 20 +++++++++++++++ src/utils/domain/risk.ts | 46 ++++++++++++++++++++++++++++++++--- 2 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 src/utils/domain/risk.test.ts diff --git a/src/utils/domain/risk.test.ts b/src/utils/domain/risk.test.ts new file mode 100644 index 000000000..92397fad2 --- /dev/null +++ b/src/utils/domain/risk.test.ts @@ -0,0 +1,20 @@ +import { expect, test } from 'vitest'; + +import { CATEGORY_RISK_LOW, CATEGORY_RISK_VERY_LOW } from '#utils/constants'; + +import { riskScoreToCategory } from './risk.ts'; + +test('Risk score to category', () => { + expect( + riskScoreToCategory( + 0, + 'FL', + ), + ).toEqual(CATEGORY_RISK_VERY_LOW); + expect( + riskScoreToCategory( + 3, + 'FL', + ), + ).toEqual(CATEGORY_RISK_LOW); +}); diff --git a/src/utils/domain/risk.ts b/src/utils/domain/risk.ts index 2fef90818..d90f0b6a0 100644 --- a/src/utils/domain/risk.ts +++ b/src/utils/domain/risk.ts @@ -77,7 +77,7 @@ export interface RiskDataItem { annual_average?: number | null, } -export const monthNumberToNameMap: Record = { +const monthToKeyMap: Record = { 0: 'january', 1: 'february', 2: 'march', @@ -90,6 +90,10 @@ export const monthNumberToNameMap: Record = { 9: 'october', 10: 'november', 11: 'december', +}; + +export const monthNumberToNameMap: Record = { + ...monthToKeyMap, // FIXME: we should not have these different // class of data into same list 12: 'annual_average', @@ -100,8 +104,42 @@ export function getValueForSelectedMonths( riskDataItem: RiskDataItem | undefined, aggregationMode: 'sum' | 'max' = 'sum', ) { - if (isNotDefined(selectedMonths)) { - return riskDataItem?.annual_average ?? undefined; + let annualValue; + + if (aggregationMode === 'sum') { + annualValue = sumSafe([ + riskDataItem?.january, + riskDataItem?.february, + riskDataItem?.march, + riskDataItem?.april, + riskDataItem?.may, + riskDataItem?.june, + riskDataItem?.july, + riskDataItem?.august, + riskDataItem?.september, + riskDataItem?.october, + riskDataItem?.november, + riskDataItem?.december, + ]); + } else if (aggregationMode === 'max') { + annualValue = maxSafe([ + riskDataItem?.january, + riskDataItem?.february, + riskDataItem?.march, + riskDataItem?.april, + riskDataItem?.may, + riskDataItem?.june, + riskDataItem?.july, + riskDataItem?.august, + riskDataItem?.september, + riskDataItem?.october, + riskDataItem?.november, + riskDataItem?.december, + ]); + } + + if (isNotDefined(selectedMonths) || selectedMonths[12] === true) { + return riskDataItem?.annual_average ?? annualValue ?? undefined; } const monthKeys = Object.keys( @@ -269,7 +307,7 @@ export function riskScoreToCategory( score: number | undefined | null, hazardType: HazardType, ) { - if (isNotDefined(score) || score <= 0) { + if (isNotDefined(score) || score < 0) { return undefined; } From aef24d178012579eb604ed719a4a033d5c9e2ad5 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Fri, 1 Dec 2023 11:48:57 +0545 Subject: [PATCH 3/4] Hide possible early action when empty on country risk --- .../PossibleEarlyActionTable/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx b/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx index b4079b8e4..644faa503 100644 --- a/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx +++ b/src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx @@ -143,6 +143,10 @@ function PossibleEarlyActionTable(props: Props) { }, }); + if (!filtered && possibleEarlyActionResponse?.count === 0) { + return null; + } + return ( Date: Fri, 1 Dec 2023 14:21:56 +0545 Subject: [PATCH 4/4] Add label to windspeed chart on wfp adam risk --- .../WfpAdam/EventDetails/i18n.json | 3 +- .../WfpAdam/EventDetails/index.tsx | 47 ++++++++++++------- .../WfpAdam/EventDetails/styles.module.css | 43 +++++++++++++---- 3 files changed, 66 insertions(+), 27 deletions(-) diff --git a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/i18n.json b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/i18n.json index 08af8f59c..934b05122 100644 --- a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/i18n.json +++ b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/i18n.json @@ -24,6 +24,7 @@ "wfpExposed90": "Exposed (90km/h)", "wfpExposed120": "Exposed (120km/h)", "wfpFloodArea": "Flood Area", - "wfpFloodCropland": "Flood Cropland" + "wfpFloodCropland": "Flood Cropland", + "wfpChartLabel": "Windspeed over time" } } diff --git a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx index 6f614f7f2..e7418a31d 100644 --- a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx +++ b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx @@ -10,9 +10,10 @@ import Link from '#components/Link'; import BlockLoading from '#components/BlockLoading'; import Container from '#components/Container'; import TextOutput from '#components/TextOutput'; +import Tooltip from '#components/Tooltip'; +import useTranslation from '#hooks/useTranslation'; import { getPercentage, maxSafe, roundSafe } from '#utils/common'; import { type RiskApiResponse } from '#utils/restRequest'; -import useTranslation from '#hooks/useTranslation'; import { isValidFeatureCollection, isValidPointFeature } from '#utils/domain/risk'; import { resolveToString } from '#utils/translation'; @@ -167,23 +168,33 @@ function EventDetails(props: Props) { {stormPoints && stormPoints.length > 0 && isDefined(maxWindSpeed) && ( /* TODO: use proper svg charts */
- {stormPoints.map( - (point) => ( -
- ), - )} +
+ {stormPoints.map( + (point) => ( +
+ +
+
+ ), + )} +
+
+ {strings.wfpChartLabel} +
)} {isDefined(eventDetails) diff --git a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/styles.module.css b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/styles.module.css index 07a8064c8..20c79cf7d 100644 --- a/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/styles.module.css +++ b/src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/styles.module.css @@ -6,15 +6,42 @@ .wind-speed-chart { display: flex; - align-items: flex-end; - justify-content: space-around; - height: 10rem; + flex-direction: column; + gap: var(--go-ui-spacing-xs); - .bar { - border-top-left-radius: 2pt; - border-top-right-radius: 2pt; - background-color: var(--go-ui-color-primary-red); - width: 4pt; + .bar-list-container { + display: flex; + align-items: stretch; + height: 10rem; + + .bar-container { + display: flex; + align-items: flex-end; + flex-basis: 0; + flex-grow: 1; + justify-content: center; + transition: var(--go-ui-duration-transition-medium) background-color ease-in-out; + border-top-left-radius: 2pt; + border-top-right-radius: 2pt; + background-color: transparent; + + .bar { + background-color: var(--go-ui-color-primary-red); + width: 4pt; + height: 100%; + } + + &:hover { + background-color: var(--go-ui-color-background-hover); + } + } + } + + .chart-label { + text-align: center; + color: var(--go-ui-color-text-light); + font-size: var(--go-ui-font-size-sm); + font-weight: var(--go-ui-font-weight-medium); } }