diff --git a/app/components/PercentageStats/index.tsx b/app/components/PercentageStats/index.tsx index 6fd26b4d..4a0ae6bd 100644 --- a/app/components/PercentageStats/index.tsx +++ b/app/components/PercentageStats/index.tsx @@ -26,6 +26,7 @@ export interface Props { totalDeaths?: string | null; newCases?: string | null; newDeathsPerMillion?: string | null; + statValueLoading?: boolean; } function PercentageStats(props: Props) { @@ -43,6 +44,7 @@ function PercentageStats(props: Props) { totalDeaths, newCases, newDeathsPerMillion, + statValueLoading, } = props; const empty = statValue === '0'; @@ -95,6 +97,8 @@ function PercentageStats(props: Props) { } + pending={statValueLoading} + pendingContainerClassName={styles.pendingMessage} /> ) : ( <> diff --git a/app/components/PercentageStats/styles.css b/app/components/PercentageStats/styles.css index 4f64e53a..ac20f491 100644 --- a/app/components/PercentageStats/styles.css +++ b/app/components/PercentageStats/styles.css @@ -47,4 +47,12 @@ justify-content: center; height: 100%; } + + .pending-message { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + height: 100%; + } } \ No newline at end of file diff --git a/app/views/Dashboard/Country/index.tsx b/app/views/Dashboard/Country/index.tsx index abbc70f7..8d436261 100644 --- a/app/views/Dashboard/Country/index.tsx +++ b/app/views/Dashboard/Country/index.tsx @@ -910,6 +910,7 @@ function Country(props: Props) { 'percent', statusUncertainty?.indicatorValue ?? 0, )} + statValueLoading={countryResponseLoading} icon={null} /> )} diff --git a/app/views/Dashboard/Overview/MapView/MapModal/index.tsx b/app/views/Dashboard/Overview/MapView/MapModal/index.tsx index 42223446..46406441 100644 --- a/app/views/Dashboard/Overview/MapView/MapModal/index.tsx +++ b/app/views/Dashboard/Overview/MapView/MapModal/index.tsx @@ -396,7 +396,7 @@ function MapModal(props: ModalProps) { latestDate, ]); - const heading = useMemo(() => { + const totalCasesHeading = useMemo(() => { if (filterValues?.indicator) { return (formatNumber( latestIndicatorValue?.format as FormatType, @@ -478,7 +478,7 @@ function MapModal(props: ModalProps) { size="extraLarge" className={styles.countryCaseData} > - {heading} + {totalCasesHeading} >; filterValues?: FilterType | undefined; @@ -489,6 +489,8 @@ function MapView(props: Props) { } empty + pending={countriesRankingLoading} + pendingContainerClassName={styles.pendingMessage} /> )} @@ -514,6 +516,8 @@ function MapView(props: Props) { } empty + pending={countriesRankingLoading} + pendingContainerClassName={styles.pendingMessage} /> )} diff --git a/app/views/Dashboard/Overview/MapView/styles.css b/app/views/Dashboard/Overview/MapView/styles.css index ad0ea165..607a780b 100644 --- a/app/views/Dashboard/Overview/MapView/styles.css +++ b/app/views/Dashboard/Overview/MapView/styles.css @@ -28,6 +28,14 @@ padding-top: none; } + .pending-message { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + height: 100%; + } + .progress-list-header { padding-bottom: var(--dui-spacing-medium); } @@ -50,4 +58,4 @@ font-size: var(--dui-font-size-extra-small); font-weight: var(--dui-font-weight-regular); } -} +} \ No newline at end of file diff --git a/app/views/Dashboard/Overview/PercentageCardGroup/index.tsx b/app/views/Dashboard/Overview/PercentageCardGroup/index.tsx index 6f8f35df..04bffbcf 100644 --- a/app/views/Dashboard/Overview/PercentageCardGroup/index.tsx +++ b/app/views/Dashboard/Overview/PercentageCardGroup/index.tsx @@ -138,6 +138,7 @@ const OVERVIEW_STATS = gql` } uncertaintyGlobal: globalLevel ( filters: { + emergency: $emergency, isTwelveMonth: true, indicatorId: $indicatorId, category: "Global", @@ -161,6 +162,7 @@ const OVERVIEW_STATS = gql` } uncertaintyRegion: regionLevel ( filters: { + emergency: $emergency, indicatorId: $indicatorId, isTwelveMonth: true, region: $region, @@ -252,6 +254,9 @@ function PercentageCardGroup(props: Props) { if ((!selectedIndicatorName && !filterValues?.region) && selectedOutbreakName) { return `New cases per million for ${selectedOutbreakName}`; } + if (selectedOutbreakName && filterValues?.region) { + return `New cases per million for ${selectedOutbreakName}`; + } return 'Total percentage'; }, [ filterValues, @@ -259,6 +264,16 @@ function PercentageCardGroup(props: Props) { selectedOutbreakName, ]); + const cardSubHeader = useMemo(() => { + if (selectedIndicatorName) { + return selectedIndicatorName; + } + return filterValues?.indicator; + }, [ + filterValues, + selectedIndicatorName, + ]); + const overviewStatsVariables = useMemo((): OverviewStatsQueryVariables => ({ emergency: filterValues?.outbreak, indicatorId: filterValues?.indicator ?? 'new_cases_per_million', @@ -430,7 +445,7 @@ function PercentageCardGroup(props: Props) { <> {payload?.map((entry) => ( @@ -492,9 +507,10 @@ function PercentageCardGroup(props: Props) { {uncertaintyChartActive ? ( @@ -507,7 +523,7 @@ function PercentageCardGroup(props: Props) { loading={loading} emergencyFilterValue={filterValues?.outbreak} heading="Indicator overview over the last 12 months" - headingDescription={`Trend chart for ${selectedIndicatorName ?? filterValues?.indicator}`} + headingDescription={`Trend chart for ${selectedIndicatorName ?? filterValues?.indicator} `} /> ) : ( {regionalBreakdownRegion?.map((entry) => (