Implement PER dashboard

Author: matthewsmawfield

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

@@ -0,0 +1,17 @@
+{
+    "namespace": "pERDashboard",
+    "strings": {
+        "performanceTitle": "PER Performance Dashboard",
+        "performanceLastUpdate": "Last updated:",
+        "performanceResetFilter": "Clear Filter",
+        "performanceResetFilterAriaLabel": "Reset all active filters",
+        "performanceRegionToggleAriaLabel": "Toggle region filter for {region}",
+        "performanceContainerAriaLabel": "PER Performance Dashboard",
+        "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.",
+        "overviewHeading": "Performance Overview",
+        "overviewDescription": "Click on a PER assessment cycle to filter",
+        "globalRatingsHeading": "Global Performance Ratings",
+        "globalRatingsDescription": "Overview of PER ratings and performance metrics",
+        "performanceFetchFailedError": "Failed to load dashboard data"
+    }
+}

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

@@ -0,0 +1,211 @@
+import {
+    type Component,
+    useEffect,
+    useState,
+} from 'react';
+import {
+    BlockLoading,
+    Button,
+    Container,
+    PERAnalysis,
+    PERRatingAnalysis,
+    PERRegionToggle,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import {
+    getComponentRatings,
+    getCycles,
+    getLastUpdateDate,
+    groupDataByRegion,
+    initializeData,
+    summarizeData,
+} from './dataHandler';
+import { type AssessmentRecord } from './types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const PER_DASHBOARD_DATA_URL = 'https://api.github.com/repos/matthewsmawfield/ifrc-per-data-fetcher/contents/data/per-dashboard-data.json';
+const LAST_UPDATE_DATA_URL = 'https://api.github.com/repos/matthewsmawfield/ifrc-per-data-fetcher/contents/data/last-update.json';
+const GITHUB_TOKEN = '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';
+
+interface ActiveFilters {
+    id: number | null;
+    region: string | null;
+    year: number | null;
+    cycle: number | undefined;
+}
+
+function PERPerformanceDashboard() {
+    const strings = useTranslation(i18n);
+    const [activeFilters, setActiveFilters] = useState<ActiveFilters>({
+        id: null,
+        region: null,
+        year: null,
+        cycle: undefined,
+    });
+
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    interface DashboardData {
+        assessments: Record<string, Component>;
+    }
+    const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
+    const [lastUpdateData, setLastUpdateData] = useState<AssessmentRecord[]| null>(null);
+
+    useEffect(() => {
+        async function fetchData() {
+            setIsLoading(true);
+            setError(null);
+            try {
+                const [dashboardResponse, lastUpdateResponse] = await Promise.all([
+                    fetch(PER_DASHBOARD_DATA_URL, {
+                        headers: {
+                            Authorization: `Bearer ${GITHUB_TOKEN}`,
+                            Accept: 'application/vnd.github.v3.raw',
+                        },
+                    }),
+                    fetch(LAST_UPDATE_DATA_URL, {
+                        headers: {
+                            Authorization: `Bearer ${GITHUB_TOKEN}`,
+                            Accept: 'application/vnd.github.v3.raw',
+                        },
+                    }),
+                ]);
+
+                if (!dashboardResponse.ok || !lastUpdateResponse.ok) {
+                    throw new Error(strings.performanceFetchFailedError);
+                }
+
+                const [dashboardResponseData, lastUpdateResponseData] = await Promise.all([
+                    dashboardResponse.json(),
+                    lastUpdateResponse.json(),
+                ]);
+
+                setDashboardData(dashboardResponseData);
+                setLastUpdateData(lastUpdateResponseData);
+                initializeData(dashboardResponseData, lastUpdateResponseData);
+            } catch {
+                setError(strings.performanceFetchFailedError);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchData();
+    }, [strings.performanceFetchFailedError]);
+
+    if (isLoading) {
+        return (
+            <Container
+                className={styles.perPerformanceDashboard}
+                childrenContainerClassName={styles.loadingContainer}
+                aria-label={strings.performanceContainerAriaLabel}
+            >
+                <BlockLoading />
+            </Container>
+        );
+    }
+
+    if (error) {
+        return (
+            <Container
+                className={styles.perPerformanceDashboard}
+                childrenContainerClassName={styles.content}
+                aria-label={strings.performanceContainerAriaLabel}
+            >
+                {error}
+            </Container>
+        );
+    }
+
+    if (!dashboardData || !lastUpdateData) {
+        return null;
+    }
+
+    const updateFilter = (
+        filterType: keyof ActiveFilters,
+        value: ActiveFilters[keyof ActiveFilters],
+    ): void => {
+        setActiveFilters((prev) => ({
+            ...prev,
+            [filterType]: prev[filterType] === value ? null : value,
+        }));
+    };
+
+    const handleCycleClick = (cycle: number | null): void => {
+        updateFilter('cycle', cycle);
+    };
+
+    const handleRegionClick = (region: string | null): void => {
+        updateFilter('region', region);
+    };
+
+    const ratings = getComponentRatings(activeFilters);
+
+    return (
+        <>
+            <div className={styles.lastUpdate}>
+                {strings.performanceLastUpdate}
+                {' '}
+                {new Date(getLastUpdateDate()).toLocaleString()}
+            </div>
+            <div className={styles.headerDescription}>
+                {strings.performanceHeaderDescription}
+            </div>
+            <div className={styles.content}>
+                <PERRegionToggle
+                    activeRegion={activeFilters?.region}
+                    onRegionClick={handleRegionClick}
+                    regions={groupDataByRegion()}
+                    precision={1}
+                    showCount={false}
+                />
+                <Container
+                    heading={strings.overviewHeading}
+                    headerDescription={
+                        strings.overviewDescription
+                    }
+                    className={_cs(styles.container, styles.perAnalysis)}
+                    withHeaderBorder
+                    actions={activeFilters.cycle !== undefined ? (
+                        <Button
+                            name={undefined}
+                            onClick={() => updateFilter('cycle', undefined)}
+                            aria-label={
+                                strings.performanceResetFilterAriaLabel
+                            }
+                        >
+                            {strings.performanceResetFilter}
+                        </Button>
+                    ) : undefined}
+                >
+                    <PERAnalysis
+                        data={getCycles(activeFilters)}
+                        summary={summarizeData(activeFilters, true)}
+                        onCycleClick={handleCycleClick}
+                        activeCycle={activeFilters.cycle}
+                    />
+                </Container>
+                <Container
+                    heading={strings.globalRatingsHeading}
+                    headerDescription={
+                        strings.globalRatingsDescription
+                    }
+                    withHeaderBorder
+                    className={_cs(styles.container, styles.ratingAnalysis)}
+                >
+                    <PERRatingAnalysis
+                        overallRating={ratings.overallRating}
+                        areaData={ratings.areaData}
+                        componentData={ratings.componentData}
+                    />
+                </Container>
+            </div>
+        </>
+    );
+}
+
+export default PERPerformanceDashboard;

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

@@ -0,0 +1,77 @@
+.per-performance-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+    margin: 0;
+    /* background-color: var(--go-ui-color-background); */
+    padding: var(--go-ui-spacing-2xl) 0;
+    overflow-x: hidden;
+}
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    min-height: 500px;
+}
+
+.lastUpdate {
+    position: absolute;
+    top: 20px;
+    margin-bottom: var(--go-ui-spacing-md);
+    padding: 0 var(--go-ui-spacing-md);
+    color: var(--go-ui-color-gray-60);
+    font-size: var(--go-ui-font-size-sm);
+}
+
+.header-body {
+    line-height: var(--go-ui-line-height-md);
+    color: var(--go-ui-color-text);
+    font-size: var(--go-ui-font-size-md);
+}
+
+.headerDescription {
+    margin-bottom: var(--go-ui-spacing-md);
+    background-color: var(--go-ui-color-background);
+    padding: var(--go-ui-spacing-xl);
+    width: auto;
+    text-align: center;
+    font-size: var(--go-ui-font-size-md);
+
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+    margin: 0;
+    background-color: var(--go-ui-color-white);
+    padding: var(--go-ui-spacing-md);
+}
+
+.container {
+    width: 100%;
+    max-width: 100%;
+}
+
+.perAnalysis {
+    margin-bottom: var(--go-ui-spacing-md);
+}
+
+.ratingAnalysis {
+    width: 100%;
+    max-width: 100%;
+}
+
+.ratingAnalysis > div {
+    padding: 0px !important;
+    max-width: 100% !important;
+    --max-width: 100% !important;
+}
+
+.ratingAnalysis :global(.content) {
+    width: 100%;
+    max-width: 100%;
+}

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

@@ -0,0 +1,50 @@
+// Base interfaces
+export interface Assessment {
+    assessment_id: number;
+    assessment_number: number;
+    country_id: number;
+    country_name: string;
+    region_id: number;
+    region_name: string;
+    date_of_assessment: string;
+    rating_value: number;
+    rating_title: string;
+}
+
+export interface ComponentSummary {
+    name: string;
+    value: number;
+    children?: ComponentSummary[];
+}
+
+export interface AssessmentRecord {
+    id: number;
+    country_id: number;
+    country_name: string;
+    region_name: string;
+    date_of_assessment: string;
+    phase: number;
+    phase_display: string;
+    assessment_number: number;
+    type_of_assessment_name: string;
+    prioritized_components: {
+        areaTitle: string;
+        componentTitle: string;
+    }[];
+    epi_considerations: boolean;
+    climate_environmental_considerations: boolean;
+    urban_considerations: boolean;
+    migration_considerations: boolean;
+}
+
+export interface Filters {
+    region?: string | null;
+    year?: number | null;
+    phase?: number | null;
+    id?: number | null;
+    perConsiderations?: string | null;
+    completedAssessment?: boolean | null;
+    highPriorityComponent?: string | null;
+    assessmentType?: string | null;
+    numberOfCycles?: number | null;
+}