feat(COR-1811): Implement feedback from testing (#4917)

Co-authored-by: VWSCoronaDashboard29 <B>
minvws · Oct 27, 2023 · 284c981 · 284c981
1 parent eed5ef2
commit 284c981
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 32 deletions.
diff --git a/packages/app/src/domain/variants/data-selection/get-archived-variant-chart-data.ts b/packages/app/src/domain/variants/data-selection/get-archived-variant-chart-data.ts
@@ -4,7 +4,7 @@ import { VariantChartValue } from '~/domain/variants/data-selection/types';
 
 const EMPTY_VALUES = {
   archivedVariantChart: null,
-  dates: {
+  archivedDates: {
     date_of_report_unix: 0,
     date_start_unix: 0,
     date_end_unix: 0,
@@ -45,7 +45,7 @@ export function getArchivedVariantChartData(variants: ArchivedNlVariants | undef
 
   return {
     archivedVariantChart: values,
-    dates: {
+    archivedDates: {
       date_of_report_unix: firstVariantInList.last_value.date_of_report_unix,
       date_start_unix: firstVariantInList.last_value.date_start_unix,
       date_end_unix: firstVariantInList.last_value.date_end_unix,

diff --git a/packages/app/src/domain/variants/logic/use-bar-config.ts b/packages/app/src/domain/variants/logic/use-bar-config.ts
@@ -1,8 +1,7 @@
-import { ColorMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
+import { ColorMatch, StackedBarConfig, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
 import { useMemo } from 'react';
 import { getValuesInTimeframe, TimeframeOption } from '@corona-dashboard/common';
 import { isPresent } from 'ts-is-present';
-import { BarSeriesDefinition } from '~/components/time-series-chart/logic';
 
 const extractVariantNamesFromValues = (values: VariantChartValue[]) => {
   return values
@@ -43,7 +42,7 @@ export const useBarConfig = (
       .filter((keyName) => activeVariantsInTimeframeNames.includes(keyName))
       .reverse();
 
-    const barChartConfig: BarSeriesDefinition<VariantChartValue>[] = [];
+    const barChartConfig: StackedBarConfig<VariantChartValue>[] = [];
 
     listOfVariantCodes.forEach((variantKey) => {
       const variantCodeName = variantKey.split('_').slice(0, -1).join('_');
@@ -56,16 +55,13 @@ export const useBarConfig = (
 
       if (variantDynamicLabel) {
         const barChartConfigEntry = {
-          type: 'bar',
           metricProperty: variantMetricPropertyName,
           color: color,
           label: variantDynamicLabel,
-          fillOpacity: 1,
           shape: 'gapped-area',
-          hideInLegend: true,
         };
 
-        barChartConfig.push(barChartConfigEntry as BarSeriesDefinition<VariantChartValue>);
+        barChartConfig.push(barChartConfigEntry as StackedBarConfig<VariantChartValue>);
       }
     });
 

diff --git a/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx b/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx
@@ -1,6 +1,6 @@
-import { ChartTile, MetadataProps, TimeSeriesChart } from '~/components';
+import { ChartTile, MetadataProps } from '~/components';
 import { Spacer } from '~/components/base';
-import { DAY_IN_SECONDS, TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common';
+import { TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common';
 import { useState } from 'react';
 import { ColorMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
 import { useBarConfig } from '~/domain/variants/logic/use-bar-config';
@@ -10,8 +10,8 @@ import { TooltipSeriesList } from '~/components/time-series-chart/components/too
 import { space } from '~/style/theme';
 import { useCurrentDate } from '~/utils/current-date-context';
 import { reorderAndFilter } from '~/domain/variants/logic/reorder-and-filter';
-import { getBoundaryDateStartUnix } from '~/utils';
 import { useIntl } from '~/intl';
+import { StackedBarTooltipData, StackedChart } from '~/components/stacked-chart';
 
 interface VariantsStackedBarChartTileProps {
   title: string;
@@ -49,8 +49,6 @@ export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels,
 
   const filteredBarConfig = barSeriesConfig.filter((configItem) => list.includes(configItem.metricProperty) || list.length === 0);
 
-  const underReportedDateStart = getBoundaryDateStartUnix(values, 1);
-
   const hasTwoColumns = list.length === 0 || list.length > 4;
 
   return (
@@ -64,25 +62,15 @@ export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels,
     >
       <InteractiveLegend helpText={text.legend_help_text} selectOptions={interactiveLegendOptions} selection={list} onToggleItem={toggle} onReset={clear} />
       <Spacer marginBottom={space[2]} />
-      <TimeSeriesChart
+      <StackedChart
         accessibility={{
           key: 'variants_stacked_area_over_time_chart',
         }}
-        forceLegend
         values={values}
-        seriesConfig={filteredBarConfig}
+        config={filteredBarConfig}
         timeframe={variantTimeFrame}
-        formatTooltip={(data) => <TooltipSeriesList data={reorderAndFilter<VariantChartValue, SelectOption>(data, interactiveLegendOptions)} hasTwoColumns={hasTwoColumns} />}
-        dataOptions={{
-          timespanAnnotations: [
-            {
-              start: underReportedDateStart + DAY_IN_SECONDS / 2,
-              end: Infinity,
-              label: text.bar_chart_legend_inaccurate,
-              shortLabel: text.tooltip_labels.innacurate,
-            },
-          ],
-        }}
+        disableLegend
+        formatTooltip={(data) => <TooltipSeriesList data={reorderAndFilter<StackedBarTooltipData, SelectOption>(data, interactiveLegendOptions)} hasTwoColumns={hasTwoColumns} />}
       />
     </ChartTile>
   );

diff --git a/packages/app/src/pages/landelijk/varianten.tsx b/packages/app/src/pages/landelijk/varianten.tsx
@@ -117,8 +117,8 @@ export default function CovidVariantenPage(props: StaticProps<typeof getStaticPr
             metadata={{
               datumsText: textNl.datums,
               dateOrRange: {
-                start: dates.date_start_unix,
-                end: dates.date_end_unix,
+                start: data.variants.values[0].last_value.date_start_unix,
+                end: data.variants.values[0].last_value.date_end_unix,
               },
               dateOfInsertionUnix: lastInsertionDateOfPage,
               dataSources: [textNl.bronnen.rivm],
@@ -136,8 +136,8 @@ export default function CovidVariantenPage(props: StaticProps<typeof getStaticPr
             source={textNl.bronnen.rivm}
             disclaimer={textNl.kpi_amount_of_samples.disclaimer}
             dateOrRange={{
-              start: dates.date_start_unix,
-              end: dates.date_end_unix,
+              start: data.variants.values[0].last_value.date_start_unix,
+              end: data.variants.values[0].last_value.date_end_unix,
             }}
             tilesData={[
               {