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) => (
|