Merge pull request #318 from collective-service/fix/over-view-issues

Add fixes to minor bugs in over-view
collective-service · Nov 10, 2022 · 3c0dfb4 · 3c0dfb4
2 parents e99ddd7 + fffe903
commit 3c0dfb4
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 9 deletions.
diff --git 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) {
                         <Message
                             empty={empty}
                             emptyIcon={<IoFileTraySharp />}
+                            pending={statValueLoading}
+                            pendingContainerClassName={styles.pendingMessage}
                         />
                     ) : (
                         <>

diff --git 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%;
+    }
 }
diff --git 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
@@ -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}
                     </Heading>
                     <Heading
                         className={styles.countrySurveyDate}

diff --git a/app/views/Dashboard/Overview/MapView/index.tsx b/app/views/Dashboard/Overview/MapView/index.tsx
@@ -200,7 +200,7 @@ function Tooltip(props: TooltipProps) {
     );
 }
 
-interface Props{
+interface Props {
     className?: string;
     setActiveTab: React.Dispatch<React.SetStateAction<TabTypes | undefined>>;
     filterValues?: FilterType | undefined;
@@ -489,6 +489,8 @@ function MapView(props: Props) {
                         <Message
                             emptyIcon={<IoFileTraySharp />}
                             empty
+                            pending={countriesRankingLoading}
+                            pendingContainerClassName={styles.pendingMessage}
                         />
                     )}
                 </div>
@@ -514,6 +516,8 @@ function MapView(props: Props) {
                         <Message
                             emptyIcon={<IoFileTraySharp />}
                             empty
+                            pending={countriesRankingLoading}
+                            pendingContainerClassName={styles.pendingMessage}
                         />
                     )}
                 </div>

diff --git 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);
     }
-}
+}
diff --git 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,13 +254,26 @@ 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,
         selectedIndicatorName,
         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) => (
                     <Element
-                        key={`item-${entry.id}`}
+                        key={`item - ${entry.id} `}
                         actions={(
                             <>
                                 <IoSquare color={getLineChartColor(filterValues?.outbreak)} />
@@ -492,9 +507,10 @@ function PercentageCardGroup(props: Props) {
             <PercentageStats
                 className={styles.globalStatCard}
                 heading={cardHeader}
-                subHeading={selectedIndicatorName ?? filterValues?.indicator}
+                subHeading={cardSubHeader}
                 headingSize="extraSmall"
                 statValue={totalCaseValue}
+                statValueLoading={loading}
             />
             {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} `}
                     />
                 ) : (
                     <ContainerCard
@@ -565,7 +581,7 @@ function PercentageCardGroup(props: Props) {
                 heading={filterValues?.indicator ? 'Regional Percentage' : 'Regional Breakdown'}
                 headingSize="extraSmall"
                 headerDescription={filterValues?.indicator
-                    ? `${selectedIndicatorName ?? '-'}`
+                    ? `${selectedIndicatorName ?? '-'} `
                     : `New cases per million for ${selectedOutbreakName}`}
             >
                 <ChartContainer
@@ -596,7 +612,7 @@ function PercentageCardGroup(props: Props) {
                         >
                             {regionalBreakdownRegion?.map((entry) => (
                                 <Cell
-                                    key={`Cell -${entry.id}`}
+                                    key={`Cell - ${entry.id} `}
                                     fill="#8DD2B1"
                                     opacity={entry.fill}
                                 />