Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix risk issues #347

Merged
merged 8 commits into from
Dec 13, 2023
Merged

Fix risk issues #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b069158
Hide imminent events in country if there are no events from any source
frozenhelium Dec 1, 2023
1c72bfc
Improve calculation of yearly average for risk by month
frozenhelium Dec 1, 2023
7d3ae9c
Hide possible early action when empty on country risk
frozenhelium Dec 1, 2023
d43c12f
Add label to windspeed chart on wfp adam risk
frozenhelium Dec 1, 2023
4275c9b
Add non-empty source as default in country imminent event
frozenhelium Dec 12, 2023
f9801e2
Replace useful links section by more details in gdacs evemt details
frozenhelium Dec 12, 2023
c19aa6d
Improve tooltip in risk seasonal map
frozenhelium Dec 12, 2023
88dd801
Fix info icon being stretched in the table
frozenhelium Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/MapPopup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function MapPopup(props: Props) {
// eslint-disable-next-line react/jsx-props-no-spreading
{...containerProps}
className={styles.container}
ellipsizeHeading
withoutWrapInHeading
childrenContainerClassName={_cs(styles.content, childrenContainerClassName)}
withHeaderBorder
withInternalPadding
Expand Down
1 change: 1 addition & 0 deletions src/components/Table/HeaderCell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ function HeaderCell(props: HeaderCellProps) {
</div>
{infoTitle && infoDescription && (
<InfoPopup
className={styles.infoPopupIcon}
title={infoTitle}
description={infoDescription}
/>
Expand Down
5 changes: 5 additions & 0 deletions src/components/Table/HeaderCell/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
}

.icon {
flex-shrink: 0;
font-size: var(--go-ui-height-icon-multiplier);
}

.info-popup-icon {
flex-shrink: 0;
}
}
3 changes: 0 additions & 3 deletions src/components/domain/RiskImminentEvents/Gdacs/EventDetails/i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
"namespace": "common",
"strings": {
"eventStartOnLabel": "Started on",
"usefulLinksHeading": "Useful links:",
"eventMoreDetailsLink": "More Details",
"eventGeometryLink": "Geometry",
"eventReportLink": "Report",
"eventSourceLabel": "Source",
"eventDeathLabel": "Estimated deaths",
"eventDisplacedLabel": "Estimated number of people displaced",
Expand Down
48 changes: 12 additions & 36 deletions src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,42 +103,6 @@ function EventDetails(props: Props) {
)}
>
{pending && <BlockLoading />}
{isDefined(eventDetails?.url) && (
<Container
heading={strings.usefulLinksHeading}
headingLevel={5}
childrenContainerClassName={styles.usefulLinksContent}
spacing="compact"
>
{isDefined(eventDetails?.url.details) && (
<Link
href={eventDetails?.url.details}
external
withLinkIcon
>
{strings.eventMoreDetailsLink}
</Link>
)}
{isDefined(eventDetails?.url.geometry) && (
<Link
href={eventDetails?.url.geometry}
external
withLinkIcon
>
{strings.eventGeometryLink}
</Link>
)}
{isDefined(eventDetails?.url.report) && (
<Link
href={eventDetails?.url.report}
external
withLinkIcon
>
{strings.eventReportLink}
</Link>
)}
</Container>
)}
<div className={styles.eventDetails}>
{isDefined(eventDetails?.source) && (
<TextOutput
Expand Down Expand Up @@ -190,6 +154,18 @@ function EventDetails(props: Props) {
/>
)}
</div>
{isDefined(eventDetails)
&& isDefined(eventDetails.url)
&& isDefined(eventDetails.url.report)
&& (
<Link
href={eventDetails?.url.report}
external
withLinkIcon
>
{strings.eventMoreDetailsLink}
</Link>
)}
</Container>
);
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
47 changes: 29 additions & 18 deletions src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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)
Expand Down
43 changes: 35 additions & 8 deletions src/components/domain/RiskImminentEvents/WfpAdam/EventDetails/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
13 changes: 9 additions & 4 deletions src/components/domain/RiskImminentEvents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,14 @@ import MeteoSwiss from './MeteoSwiss';
import i18n from './i18n.json';
import styles from './styles.module.css';

type ActiveView = 'pdc' | 'wfpAdam' | 'gdacs' | 'meteoSwiss';
export type ImminentEventSource = 'pdc' | 'wfpAdam' | 'gdacs' | 'meteoSwiss';
type HazardType = components<'read'>['schemas']['HazardTypeEnum'];

type BaseProps = {
className?: string;
title: React.ReactNode;
bbox: LngLatBoundsLike | undefined;
defaultSource?: ImminentEventSource;
}

type Props = BaseProps & ({
Expand All @@ -47,8 +48,12 @@ type Props = BaseProps & ({
})

function RiskImminentEvents(props: Props) {
const [activeView, setActiveView] = useState<ActiveView>('pdc');
const { className, ...otherProps } = props;
const {
className,
defaultSource = 'pdc',
...otherProps
} = props;
const [activeView, setActiveView] = useState<ImminentEventSource>(defaultSource);

const strings = useTranslation(i18n);

Expand All @@ -75,7 +80,7 @@ function RiskImminentEvents(props: Props) {
[activeView],
);

const handleRadioClick = useCallback((key: ActiveView) => {
const handleRadioClick = useCallback((key: ImminentEventSource) => {
setActiveView(key);
}, []);

Expand Down
Loading