Add label to windspeed chart on wfp adam risk

Author: frozenhelium

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