Minor Risk fixes

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"
     }
 }

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 */
                 <div className={styles.windSpeedChart}>
-                    {stormPoints.map(
-                        (point) => (
-                            <div
-                                key={point.id}
-                                className={styles.bar}
-                                // FIXME: Use percent function
-                                style={{ height: `${getPercentage(point.windSpeed, maxWindSpeed)}%` }}
-                                title={resolveToString(
-                                    strings.wfpEventDetailsKm,
-                                    {
-                                        point: point.windSpeed,
-                                        pontDate: point.date.toLocaleString(),
-                                    },
-                                )}
-                            />
-                        ),
-                    )}
+                    <div className={styles.barListContainer}>
+                        {stormPoints.map(
+                            (point) => (
+                                <div
+                                    key={point.id}
+                                    className={styles.barContainer}
+                                >
+                                    <Tooltip
+                                        description={resolveToString(
+                                            strings.wfpEventDetailsKm,
+                                            {
+                                                point: point.windSpeed ?? '--',
+                                                pointDate: point.date.toLocaleString() ?? '--',
+                                            },
+                                        )}
+                                    />
+                                    <div
+                                        style={{ height: `${getPercentage(point.windSpeed, maxWindSpeed)}%` }}
+                                        className={styles.bar}
+                                    />
+                                </div>
+                            ),
+                        )}
+                    </div>
+                    <div className={styles.chartLabel}>
+                        {strings.wfpChartLabel}
+                    </div>
                 </div>
             )}
             {isDefined(eventDetails)

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);
             }
         }
 

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

src/utils/domain/risk.ts

@@ -77,7 +77,7 @@ export interface RiskDataItem {
     annual_average?: number | null,
 }
 
-export const monthNumberToNameMap: Record<number, keyof RiskDataItem> = {
+const monthToKeyMap: Record<number, keyof RiskDataItem> = {
     0: 'january',
     1: 'february',
     2: 'march',
@@ -90,6 +90,10 @@ export const monthNumberToNameMap: Record<number, keyof RiskDataItem> = {
     9: 'october',
     10: 'november',
     11: 'december',
+};
+
+export const monthNumberToNameMap: Record<number, keyof RiskDataItem> = {
+    ...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;
     }
 

src/views/CountryProfileRiskWatch/PossibleEarlyActionTable/index.tsx

@@ -143,6 +143,10 @@ function PossibleEarlyActionTable(props: Props) {
         },
     });
 
+    if (!filtered && possibleEarlyActionResponse?.count === 0) {
+        return null;
+    }
+
     return (
         <Container
             className={styles.possibleEarlyActionTable}

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 (
         <div className={styles.countryRiskWatch}>
-            {countryResponse && isDefined(countryResponse.iso3) && (
+            {pendingImminentEventCounts && (
+                <BlockLoading />
+            )}
+            {hasImminentEvents && isDefined(countryResponse) && isDefined(countryResponse.iso3) && (
                 <RiskImminentEvents
                     variant="country"
                     iso3={countryResponse.iso3}