Skip to content

Commit 8084089

Browse files
frozenheliumfrozenhelium
committed
Update risk sources
1 parent e9552b4 commit 8084089

File tree

9 files changed

+141
-136
lines changed

9 files changed

+141
-136
lines changed

‎app/src/components/domain/RiskImminentEvents/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@ function RiskImminentEvents(props: Props) {
289289
)}
290290
</>
291291
)}
292+
headingLevel={2}
292293
>
293294
{CurrentView && (
294295
<CurrentView

‎app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/i18n.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"namespace": "countryRiskSourcesOutput",
3+
"strings": {
4+
"source": "Source",
5+
"inform": "INFORM",
6+
"idmc": "IDMC",
7+
"ipc": "IPC",
8+
"undrr": "UNDRR",
9+
"sourceINFORM": "{link} for each country's level of risk",
10+
"sourceUNDRR": "{link} for the population exposure",
11+
"sourceIDMC": "{link} for the expected displacements",
12+
"sourceIPC": "{link} for food insecurity"
13+
}
14+
}

‎app/src/views/CountryProfileRiskWatch/CountryRiskSourcesOutput/index.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { useMemo } from 'react';
2+
import { TextOutput } from '@ifrc-go/ui';
3+
import { useTranslation } from '@ifrc-go/ui/hooks';
4+
import { resolveToComponent } from '@ifrc-go/ui/utils';
5+
6+
import Link from '#components/Link';
7+
8+
import i18n from './i18n.json';
9+
10+
function CountryRiskSourcesOutput() {
11+
const strings = useTranslation(i18n);
12+
13+
const riskByMonthSources = useMemo(
14+
() => [
15+
{
16+
link: 'https://drmkc.jrc.ec.europa.eu/inform-index/INFORM-Risk',
17+
label: strings.inform,
18+
description: strings.sourceINFORM,
19+
},
20+
{
21+
link: 'https://www.undrr.org/',
22+
label: strings.undrr,
23+
description: strings.sourceUNDRR,
24+
},
25+
{
26+
link: 'https://www.internal-displacement.org/',
27+
label: strings.idmc,
28+
description: strings.sourceIDMC,
29+
},
30+
{
31+
link: 'https://www.ipcinfo.org/',
32+
label: strings.ipc,
33+
description: strings.sourceIPC,
34+
},
35+
],
36+
[strings],
37+
);
38+
39+
return (
40+
<TextOutput
41+
label={strings.source}
42+
value={
43+
riskByMonthSources.map((source) => (
44+
<>
45+
{resolveToComponent(
46+
source.description,
47+
{
48+
link: (
49+
<Link
50+
variant="tertiary"
51+
href={source.link}
52+
external
53+
withUnderline
54+
>
55+
{source.label}
56+
</Link>
57+
),
58+
},
59+
)}
60+
<br />
61+
</>
62+
))
63+
}
64+
/>
65+
);
66+
}
67+
68+
export default CountryRiskSourcesOutput;

‎app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/i18n.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
"returnPeriodTableEconomicLossesDescription": "Figures taken from {source}",
1212
"returnPeriodTableEconomicLossesSource": "World Bank Disaster Risk Country Profiles",
1313
"returnPeriodSource": "Source",
14-
"returnPeriodIfrcMontandon": "IFRC Montandon, Global Crisis Data Bank"
14+
"returnPeriodIfrcMontandon": "UNDRR, World Bank / GFDRR and IDMC"
1515
}
1616
}

‎app/src/views/CountryProfileRiskWatch/ReturnPeriodTable/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,8 +193,8 @@ function ReturnPeriodTable(props: Props) {
193193
withHeaderBorder
194194
footerActions={(
195195
<TextOutput
196-
label={strings.source}
197-
value={strings.ifrcMontandon}
196+
label={strings.returnPeriodSource}
197+
value={strings.returnPeriodIfrcMontandon}
198198
strongValue
199199
/>
200200
)}
@@ -209,6 +209,7 @@ function ReturnPeriodTable(props: Props) {
209209
nonClearable
210210
/>
211211
)}
212+
headingLevel={2}
212213
>
213214
<Table
214215
filtered={false}

‎app/src/views/CountryProfileRiskWatch/RiskBarChart/i18n.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
"riskBarChartDisplacementLabel": "People at Risk of Displacement",
1010
"currentYearTooltipLabel": "Year {currentYear}",
1111
"averageTooltipLabel": "Average (2003-{currentYear})",
12-
"minMaxLabel": "Min-Max (2003-{currentYear})",
13-
"sourceLabel": "Source",
14-
"ifrcMontandon": "IFRC Montandon, Global Crisis Data Bank"
12+
"minMaxLabel": "Min-Max (2003-{currentYear})"
1513
}
1614
}

‎app/src/views/CountryProfileRiskWatch/RiskBarChart/index.tsx‎

Lines changed: 49 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ import {
33
useMemo,
44
} from 'react';
55
import {
6-
BlockLoading,
76
Checkbox,
87
Container,
98
LegendItem,
109
SelectInput,
11-
TextOutput,
1210
} from '@ifrc-go/ui';
1311
import { useTranslation } from '@ifrc-go/ui/hooks';
1412
import {
@@ -47,6 +45,7 @@ import {
4745
} from '#utils/domain/risk';
4846
import { type RiskApiResponse } from '#utils/restRequest';
4947

48+
import CountryRiskSourcesOutput from '../CountryRiskSourcesOutput';
5049
import CombinedChart from './CombinedChart';
5150
import FoodInsecurityChart from './FoodInsecurityChart';
5251
import WildfireChart from './WildfireChart';
@@ -275,13 +274,7 @@ function RiskBarChart(props: Props) {
275274
className={styles.riskBarChart}
276275
withHeaderBorder
277276
withGridViewInFilter
278-
footerActions={(
279-
<TextOutput
280-
label={strings.sourceLabel}
281-
value={strings.ifrcMontandon}
282-
strongValue
283-
/>
284-
)}
277+
footerActions={<CountryRiskSourcesOutput />}
285278
filters={(
286279
<>
287280
<SelectInput
@@ -320,72 +313,71 @@ function RiskBarChart(props: Props) {
320313
)}
321314
</>
322315
)}
316+
pending={pending}
317+
headingLevel={2}
323318
>
324-
{pending && <BlockLoading />}
325-
{!pending && selectedHazardType === 'FI' && (
319+
{selectedHazardType === 'FI' && (
326320
<FoodInsecurityChart
327321
showHistoricalData={showFiHistoricalData}
328322
showProjection={showFiProjection}
329323
ipcData={seasonalRiskData?.ipc_displacement_data}
330324
/>
331325
)}
332-
{!pending && selectedHazardType === 'WF' && (
326+
{selectedHazardType === 'WF' && (
333327
<WildfireChart
334328
gwisData={seasonalRiskData?.gwis}
335329
/>
336330
)}
337-
{!pending && selectedHazardType !== 'FI' && selectedHazardType !== 'WF' && (
331+
{selectedHazardType !== 'FI' && selectedHazardType !== 'WF' && (
338332
<CombinedChart
339333
riskData={seasonalRiskData}
340334
selectedRiskMetricDetail={selectedRiskMetricDetail}
341335
selectedHazardType={selectedHazardType}
342336
hazardListForDisplay={hazardListForDisplay}
343337
/>
344338
)}
345-
{!pending && (
346-
<div className={styles.legend}>
347-
{hazardListForDisplay.map(
348-
(hazard) => (
349-
<LegendItem
350-
key={hazard.hazard_type}
351-
label={hazard.hazard_type_display}
352-
color={hazardTypeToColorMap[hazard.hazard_type]}
353-
/>
354-
),
355-
)}
356-
{selectedHazardType === 'WF' && (
357-
<>
358-
<LegendItem
359-
className={styles.legendItem}
360-
colorClassName={styles.color}
361-
label={resolveToString(
362-
strings.currentYearTooltipLabel,
363-
{ currentYear },
364-
)}
365-
color={COLOR_PRIMARY_RED}
366-
/>
367-
<LegendItem
368-
className={styles.legendItem}
369-
colorClassName={styles.color}
370-
label={resolveToString(
371-
strings.averageTooltipLabel,
372-
{ currentYear },
373-
)}
374-
color={COLOR_PRIMARY_BLUE}
375-
/>
376-
<LegendItem
377-
className={styles.legendItem}
378-
colorClassName={styles.color}
379-
label={resolveToString(
380-
strings.minMaxLabel,
381-
{ currentYear },
382-
)}
383-
color={COLOR_LIGHT_GREY}
384-
/>
385-
</>
386-
)}
387-
</div>
388-
)}
339+
<div className={styles.legend}>
340+
{hazardListForDisplay.map(
341+
(hazard) => (
342+
<LegendItem
343+
key={hazard.hazard_type}
344+
label={hazard.hazard_type_display}
345+
color={hazardTypeToColorMap[hazard.hazard_type]}
346+
/>
347+
),
348+
)}
349+
{selectedHazardType === 'WF' && (
350+
<>
351+
<LegendItem
352+
className={styles.legendItem}
353+
colorClassName={styles.color}
354+
label={resolveToString(
355+
strings.currentYearTooltipLabel,
356+
{ currentYear },
357+
)}
358+
color={COLOR_PRIMARY_RED}
359+
/>
360+
<LegendItem
361+
className={styles.legendItem}
362+
colorClassName={styles.color}
363+
label={resolveToString(
364+
strings.averageTooltipLabel,
365+
{ currentYear },
366+
)}
367+
color={COLOR_PRIMARY_BLUE}
368+
/>
369+
<LegendItem
370+
className={styles.legendItem}
371+
colorClassName={styles.color}
372+
label={resolveToString(
373+
strings.minMaxLabel,
374+
{ currentYear },
375+
)}
376+
color={COLOR_LIGHT_GREY}
377+
/>
378+
</>
379+
)}
380+
</div>
389381
</Container>
390382
);
391383
}

‎app/src/views/CountryProfileRiskWatch/i18n.json‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,6 @@
77
"eapHeading": "Early Action Protocols (EAPs)",
88
"eapDownloadButtonLabel": "Download the EAP",
99
"eapDescription": "EAPs are a formal plan that guide timely and effective implementation of early actions for extreme weather events, based on pre-agreed triggers.",
10-
"riskWatchDescription": "The following dataset displays information about the modeled impact of specific forecasted or detected natural hazards.",
11-
"source": "Source",
12-
"inform": "INFORM",
13-
"idmc": "IDMC",
14-
"ipc": "IPC",
15-
"sourceINFORM": "{link} for each country's level of risk",
16-
"sourceIDMC": "{link} for the expected displacements",
17-
"sourceIPC": "{link} for food insecurity"
10+
"riskWatchDescription": "The following dataset displays information about the modeled impact of specific forecasted or detected natural hazards."
1811
}
1912
}

‎app/src/views/CountryProfileRiskWatch/index.tsx‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,8 @@ import {
33
useOutletContext,
44
useParams,
55
} from 'react-router-dom';
6-
import {
7-
Container,
8-
TextOutput,
9-
} from '@ifrc-go/ui';
6+
import { Container } from '@ifrc-go/ui';
107
import { useTranslation } from '@ifrc-go/ui/hooks';
11-
import { resolveToComponent } from '@ifrc-go/ui/utils';
128
import {
139
isDefined,
1410
isNotDefined,
@@ -23,6 +19,7 @@ import useInputState from '#hooks/useInputState';
2319
import type { CountryOutletContext } from '#utils/outletContext';
2420
import { useRiskRequest } from '#utils/restRequest';
2521

22+
import CountryRiskSourcesOutput from './CountryRiskSourcesOutput';
2623
import MultiMonthSelectInput from './MultiMonthSelectInput';
2724
import PossibleEarlyActionTable from './PossibleEarlyActionTable';
2825
import ReturnPeriodTable from './ReturnPeriodTable';
@@ -155,66 +152,7 @@ export function Component() {
155152
headerDescription={strings.risksByMonthDescription}
156153
withHeaderBorder
157154
childrenContainerClassName={styles.riskByMonthContent}
158-
footerActions={(
159-
<TextOutput
160-
label={strings.source}
161-
value={(
162-
<>
163-
<div>
164-
{resolveToComponent(
165-
strings.sourceINFORM,
166-
{
167-
link: (
168-
<Link
169-
variant="tertiary"
170-
href="https://drmkc.jrc.ec.europa.eu/inform-index/INFORM-Risk"
171-
external
172-
withUnderline
173-
>
174-
{strings.inform}
175-
</Link>
176-
),
177-
},
178-
)}
179-
</div>
180-
<div>
181-
{resolveToComponent(
182-
strings.sourceIDMC,
183-
{
184-
link: (
185-
<Link
186-
variant="tertiary"
187-
href="https://www.internal-displacement.org/"
188-
external
189-
withUnderline
190-
>
191-
{strings.idmc}
192-
</Link>
193-
),
194-
},
195-
)}
196-
</div>
197-
<div>
198-
{resolveToComponent(
199-
strings.sourceIPC,
200-
{
201-
link: (
202-
<Link
203-
variant="tertiary"
204-
href="https://www.ipcinfo.org/"
205-
external
206-
withUnderline
207-
>
208-
{strings.ipc}
209-
</Link>
210-
),
211-
},
212-
)}
213-
</div>
214-
</>
215-
)}
216-
/>
217-
)}
155+
footerActions={<CountryRiskSourcesOutput />}
218156
>
219157
<MultiMonthSelectInput
220158
name={undefined}

0 commit comments

Comments
 (0)