Skip to content

Commit 6fb9542

Browse files
matthewsmawfieldfrozenhelium
matthewsmawfield
authored and
frozenhelium
committed
Implement PER dashboard
1 parent 6732ef6 commit 6fb9542

File tree

102 files changed

+11462
-37
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+11462
-37
lines changed

‎app/src/views/PERDashboard/PERPerformanceDashboard/dataHandler.ts‎

Lines changed: 695 additions & 0 deletions
Large diffs are not rendered by default.

‎app/src/views/PERDashboard/PERPerformanceDashboard/i18n.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"namespace": "PERDashboard",
3+
"strings": {
4+
"performanceLastUpdate": "Last updated:",
5+
"performanceResetFilter": "Clear Filter",
6+
"performanceResetFilterAriaLabel": "Reset all active filters",
7+
"performanceContainerAriaLabel": "PER Performance Dashboard",
8+
"performanceHeaderDescription": "This dashboard contains a summary of the overall preparedness and response capacity among National Societies engaged in the PER Approach. The values presented represent the ratings for each component within National Societies' PER Mechanism aggregated at global and regional levels. The visualisations show average rating, the changes in capacity over time, as well as top and bottom-rated components. You can filter the components by region.",
9+
"overviewHeading": "Performance Overview",
10+
"overviewDescription": "Click on a PER assessment cycle to filter",
11+
"globalRatingsHeading": "Global Performance Ratings",
12+
"globalRatingsDescription": "Overview of PER ratings and performance metrics",
13+
"performanceFetchFailedError": "Failed to load dashboard data"
14+
}
15+
}

‎app/src/views/PERDashboard/PERPerformanceDashboard/index.tsx‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import {
2+
type Component,
3+
useEffect,
4+
useState,
5+
} from 'react';
6+
import {
7+
BlockLoading,
8+
Button,
9+
Container,
10+
PERAnalysis,
11+
PERRatingAnalysis,
12+
PERRegionToggle,
13+
} from '@ifrc-go/ui';
14+
import { useTranslation } from '@ifrc-go/ui/hooks';
15+
import { _cs } from '@togglecorp/fujs';
16+
17+
import {
18+
getComponentRatings,
19+
getCycles,
20+
getLastUpdateDate,
21+
groupDataByRegion,
22+
initializeData,
23+
summarizeData,
24+
} from './dataHandler';
25+
import { type AssessmentRecord } from './types';
26+
27+
import i18n from './i18n.json';
28+
import styles from './styles.module.css';
29+
30+
const PER_DASHBOARD_DATA_URL = 'https://raw.githubusercontent.com/IFRCGo/ifrc-per-data-fetcher/refs/heads/main/data/per-dashboard-data.json';
31+
const LAST_UPDATE_DATA_URL = 'https://raw.githubusercontent.com/IFRCGo/ifrc-per-data-fetcher/refs/heads/main/data/last-update.json';
32+
33+
interface ActiveFilters {
34+
id: number | null;
35+
region: string | null;
36+
year: number | null;
37+
cycle: number | undefined;
38+
}
39+
40+
function PERPerformanceDashboard() {
41+
const strings = useTranslation(i18n);
42+
const [activeFilters, setActiveFilters] = useState<ActiveFilters>({
43+
id: null,
44+
region: null,
45+
year: null,
46+
cycle: undefined,
47+
});
48+
49+
const [isLoading, setIsLoading] = useState(true);
50+
const [error, setError] = useState<string | null>(null);
51+
interface DashboardData {
52+
assessments: Record<string, Component>;
53+
}
54+
const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
55+
const [lastUpdateData, setLastUpdateData] = useState<AssessmentRecord[]| null>(null);
56+
57+
useEffect(() => {
58+
async function fetchData() {
59+
setIsLoading(true);
60+
setError(null);
61+
try {
62+
const [dashboardResponse, lastUpdateResponse] = await Promise.all([
63+
fetch(PER_DASHBOARD_DATA_URL, {
64+
headers: {
65+
Accept: 'application/vnd.github.v3.raw',
66+
},
67+
}),
68+
fetch(LAST_UPDATE_DATA_URL, {
69+
headers: {
70+
Accept: 'application/vnd.github.v3.raw',
71+
},
72+
}),
73+
]);
74+
75+
if (!dashboardResponse.ok || !lastUpdateResponse.ok) {
76+
throw new Error(strings.performanceFetchFailedError);
77+
}
78+
79+
const [dashboardResponseData, lastUpdateResponseData] = await Promise.all([
80+
dashboardResponse.json(),
81+
lastUpdateResponse.json(),
82+
]);
83+
84+
setDashboardData(dashboardResponseData);
85+
setLastUpdateData(lastUpdateResponseData);
86+
initializeData(dashboardResponseData, lastUpdateResponseData);
87+
} catch {
88+
setError(strings.performanceFetchFailedError);
89+
} finally {
90+
setIsLoading(false);
91+
}
92+
}
93+
94+
fetchData();
95+
}, [strings.performanceFetchFailedError]);
96+
97+
if (isLoading) {
98+
return (
99+
<Container
100+
className={styles.perPerformanceDashboard}
101+
aria-label={strings.performanceContainerAriaLabel}
102+
>
103+
<BlockLoading />
104+
</Container>
105+
);
106+
}
107+
108+
if (error) {
109+
return (
110+
<Container
111+
className={styles.perPerformanceDashboard}
112+
aria-label={strings.performanceContainerAriaLabel}
113+
>
114+
{error}
115+
</Container>
116+
);
117+
}
118+
119+
if (!dashboardData || !lastUpdateData) {
120+
return null;
121+
}
122+
123+
const updateFilter = (
124+
filterType: keyof ActiveFilters,
125+
value: ActiveFilters[keyof ActiveFilters],
126+
): void => {
127+
setActiveFilters((prev) => ({
128+
...prev,
129+
[filterType]: prev[filterType] === value ? null : value,
130+
}));
131+
};
132+
133+
const handleCycleClick = (cycle: number | null): void => {
134+
updateFilter('cycle', cycle);
135+
};
136+
137+
const handleRegionClick = (region: string | null): void => {
138+
updateFilter('region', region);
139+
};
140+
141+
const ratings = getComponentRatings(activeFilters);
142+
143+
return (
144+
<>
145+
<div className={styles.lastUpdate}>
146+
{strings.performanceLastUpdate}
147+
{' '}
148+
{new Date(getLastUpdateDate()).toLocaleString()}
149+
</div>
150+
<div className={styles.headerDescription}>
151+
{strings.performanceHeaderDescription}
152+
</div>
153+
<div className={styles.content}>
154+
<PERRegionToggle
155+
activeRegion={activeFilters?.region}
156+
onRegionClick={handleRegionClick}
157+
regions={groupDataByRegion()}
158+
precision={1}
159+
showCount={false}
160+
/>
161+
<Container
162+
heading={strings.overviewHeading}
163+
headerDescription={
164+
strings.overviewDescription
165+
}
166+
className={_cs(styles.container, styles.perAnalysis)}
167+
withHeaderBorder
168+
headerActions={activeFilters.cycle !== undefined ? (
169+
<Button
170+
name={undefined}
171+
onClick={() => updateFilter('cycle', undefined)}
172+
aria-label={
173+
strings.performanceResetFilterAriaLabel
174+
}
175+
>
176+
{strings.performanceResetFilter}
177+
</Button>
178+
) : undefined}
179+
>
180+
<PERAnalysis
181+
data={getCycles(activeFilters)}
182+
summary={summarizeData(activeFilters, true)}
183+
onCycleClick={handleCycleClick}
184+
activeCycle={activeFilters.cycle}
185+
/>
186+
</Container>
187+
<Container
188+
heading={strings.globalRatingsHeading}
189+
headerDescription={
190+
strings.globalRatingsDescription
191+
}
192+
withHeaderBorder
193+
className={_cs(styles.container, styles.ratingAnalysis)}
194+
>
195+
<PERRatingAnalysis
196+
overallRating={ratings.overallRating}
197+
areaData={ratings.areaData}
198+
componentData={ratings.componentData}
199+
/>
200+
</Container>
201+
</div>
202+
</>
203+
);
204+
}
205+
206+
export default PERPerformanceDashboard;

‎app/src/views/PERDashboard/PERPerformanceDashboard/styles.module.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.per-performance-dashboard {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--go-ui-spacing-md);
5+
margin: 0;
6+
/* background-color: var(--go-ui-color-background); */
7+
padding: var(--go-ui-spacing-2xl) 0;
8+
overflow-x: hidden;
9+
}
10+
11+
.loading-container {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
margin: 0;
16+
padding: 0;
17+
min-height: 500px;
18+
}
19+
20+
.lastUpdate {
21+
position: absolute;
22+
top: 20px;
23+
margin-bottom: var(--go-ui-spacing-md);
24+
padding: 0 var(--go-ui-spacing-md);
25+
color: var(--go-ui-color-gray-60);
26+
font-size: var(--go-ui-font-size-sm);
27+
}
28+
29+
.header-body {
30+
line-height: var(--go-ui-line-height-md);
31+
color: var(--go-ui-color-text);
32+
font-size: var(--go-ui-font-size-md);
33+
}
34+
35+
.headerDescription {
36+
margin-bottom: var(--go-ui-spacing-md);
37+
background-color: var(--go-ui-color-background);
38+
padding: var(--go-ui-spacing-xl);
39+
width: auto;
40+
text-align: center;
41+
font-size: var(--go-ui-font-size-md);
42+
43+
}
44+
45+
.content {
46+
display: flex;
47+
flex-direction: column;
48+
gap: var(--go-ui-spacing-md);
49+
margin: 0;
50+
background-color: var(--go-ui-color-white);
51+
padding: var(--go-ui-spacing-md);
52+
}
53+
54+
.container {
55+
width: 100%;
56+
max-width: 100%;
57+
}
58+
59+
.perAnalysis {
60+
margin-bottom: var(--go-ui-spacing-md);
61+
}
62+
63+
.ratingAnalysis {
64+
width: 100%;
65+
max-width: 100%;
66+
}
67+
68+
.ratingAnalysis > div {
69+
padding: 0px !important;
70+
max-width: 100% !important;
71+
--max-width: 100% !important;
72+
}
73+
74+
.ratingAnalysis :global(.content) {
75+
width: 100%;
76+
max-width: 100%;
77+
}

‎app/src/views/PERDashboard/PERPerformanceDashboard/types.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { type PERRatingAnalysisProps } from '@ifrc-go/ui';
2+
3+
// Base interfaces
4+
export interface Assessment {
5+
component_num: number;
6+
component_name: string;
7+
area_id: number;
8+
area_name: string;
9+
10+
assessment_id: number;
11+
assessment_number: number;
12+
country_id: number;
13+
country_name: string;
14+
region_id: number;
15+
region_name: string;
16+
date_of_assessment: string;
17+
rating_value: number;
18+
rating_title: string;
19+
}
20+
21+
export interface AssessmentRecord {
22+
id: number;
23+
country_id: number;
24+
country_name: string;
25+
region_name: string;
26+
date_of_assessment: string;
27+
phase: number;
28+
phase_display: string;
29+
assessment_number: number;
30+
type_of_assessment_name: string;
31+
prioritized_components: {
32+
areaTitle: string;
33+
componentTitle: string;
34+
}[];
35+
epi_considerations: boolean;
36+
climate_environmental_considerations: boolean;
37+
urban_considerations: boolean;
38+
migration_considerations: boolean;
39+
}
40+
41+
export interface Filters {
42+
region?: string | null;
43+
year?: number | null;
44+
phase?: number | null;
45+
cycle?: number | null;
46+
id?: number | null;
47+
perConsiderations?: string | null;
48+
completedAssessment?: boolean | null;
49+
highPriorityComponent?: string | null;
50+
assessmentType?: string | null;
51+
numberOfCycles?: number | null;
52+
}
53+
54+
interface CycleRating {
55+
cycle: number;
56+
rating: number;
57+
rating_display: string;
58+
rating_color: string;
59+
}
60+
61+
export interface AreaSummary {
62+
name: string;
63+
rating: number;
64+
status: string;
65+
change: number;
66+
changeDirection: string;
67+
cycleRatings: CycleRating[];
68+
components: ComponentRating[];
69+
areaColor: string;
70+
}
71+
72+
export interface ComponentRating {
73+
component_num: number,
74+
component_name: string,
75+
area_id: number,
76+
area_name: string,
77+
cycleRatings: CycleRating[],
78+
total: number,
79+
count: number,
80+
}
81+
82+
export interface ComponentRatingsResult {
83+
overallRating: PERRatingAnalysisProps['overallRating'],
84+
areaData: PERRatingAnalysisProps['areaData'],
85+
componentData: PERRatingAnalysisProps['componentData'],
86+
}
87+
88+
export interface RegionData {
89+
name: string;
90+
count: number;
91+
totalComponents: number;
92+
}

0 commit comments

Comments
 (0)