fix: fall back to - when no data is available for behavior choropleth…

… tooltip (#4258)

Co-authored-by: VWSCoronaDashboard24 <[email protected]>

packages/app/src/domain/behavior/behavior-choropleths-tile.tsx

@@ -4,6 +4,7 @@ import {
   VrCollectionBehavior,
 } from '@corona-dashboard/common';
 import css from '@styled-system/css';
+import { isNumber } from 'lodash';
 import { useMemo } from 'react';
 import { Box } from '~/components/base';
 import { ChartTile } from '~/components/chart-tile';
@@ -164,24 +165,28 @@ function ChoroplethBlock({
             }}
             minHeight={!isSmallScreen ? 350 : 400}
             formatTooltip={(context) => {
-              const currentComplianceValue =
+              const currentComplianceValueKey =
                 `${currentId}_compliance` as keyof VrCollectionBehavior;
-              const currentSupportValue =
+              const currentSupportValueKey =
                 `${currentId}_support` as keyof VrCollectionBehavior;
 
               // Return null when there is no data available to prevent breaking the application when using tab
               if (keysWithoutData.includes(currentId)) return null;
 
+              const complianceValue =
+                context.dataItem[currentComplianceValueKey];
+              const supportValue = context.dataItem[currentSupportValueKey];
+
               return (
                 <VrBehaviorTooltip
                   behaviorType={behaviorType}
                   context={context}
                   currentMetric={currentId}
                   currentComplianceValue={
-                    context.dataItem[currentComplianceValue] as number
+                    isNumber(complianceValue) ? complianceValue : null
                   }
                   currentSupportValue={
-                    context.dataItem[currentSupportValue] as number
+                    isNumber(supportValue) ? supportValue : null
                   }
                   text={text}
                 />

packages/app/src/domain/behavior/tooltip/vr-behavior-tooltip.tsx

@@ -15,8 +15,8 @@ import { useReverseRouter } from '~/utils/use-reverse-router';
 interface VrBehaviorTooltipProps {
   context: TooltipData<VrCollectionBehavior>;
   currentMetric: BehaviorIdentifier;
-  currentComplianceValue: number;
-  currentSupportValue: number;
+  currentComplianceValue: number | null;
+  currentSupportValue: number | null;
   behaviorType: 'compliance' | 'support';
   text: SiteText['pages']['behaviorPage'];
 }
@@ -29,33 +29,39 @@ export function VrBehaviorTooltip({
   behaviorType,
   text,
 }: VrBehaviorTooltipProps) {
-  const { commonTexts } = useIntl();
+  const { commonTexts, formatPercentage } = useIntl();
   const reverseRouter = useReverseRouter();
   const complianceThresholdKey = `${currentMetric}_compliance` as const;
   const supportThresholdKey = `${currentMetric}_support` as const;
 
   const complianceFilteredThreshold = getThresholdValue(
     thresholds.vr[complianceThresholdKey],
-    currentComplianceValue
+    currentComplianceValue || 0
   );
 
   const supportFilteredThreshold = getThresholdValue(
     thresholds.vr[supportThresholdKey],
-    currentSupportValue
+    currentSupportValue || 0
   );
 
   const complianceTooltipInfo = (
     <TooltipInfo
       title={text.nl.tooltip_labels.compliance}
-      value={currentComplianceValue}
+      value={
+        currentComplianceValue
+          ? `${formatPercentage(currentComplianceValue)}%`
+          : '-'
+      }
       background={complianceFilteredThreshold.color}
     />
   );
 
   const supportTooltipInfo = (
     <TooltipInfo
       title={text.nl.tooltip_labels.support}
-      value={currentSupportValue}
+      value={
+        currentSupportValue ? `${formatPercentage(currentSupportValue)}%` : '-'
+      }
       background={supportFilteredThreshold.color}
     />
   );
@@ -89,7 +95,7 @@ export function VrBehaviorTooltip({
 
 interface TooltipInfoProps {
   title: string;
-  value: number;
+  value: string;
   background: string;
 }
 
@@ -98,7 +104,7 @@ function TooltipInfo({ title, value, background }: TooltipInfoProps) {
     <Box display="flex" alignItems="center" justifyContent="space-between">
       {title}
       <Box display="flex" alignItems="center">
-        <BoldText>{`${value}%`}</BoldText>
+        <BoldText>{value}</BoldText>
         <LegendaColorBox backgroundColor={background} />
       </Box>
     </Box>