Feature/cor 1811 update variant data (#4911)

* feat(COR-1811): Refactor, update default timeframe, update totalVariants

* feat(COR-1811): Replace stackedChart with TimeSeries chart

* chore: add key mutations

---------

Co-authored-by: VWSCoronaDashboard29 <B>

packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts

@@ -28,8 +28,8 @@ export function getVariantBarChartData(variants: NlVariants) {
     return EMPTY_VALUES;
   }
 
-  const values = firstVariantInList.values.map<VariantChartValue>((value, index) => {
-    const item = {
+  const values: VariantChartValue[] = firstVariantInList.values.map<VariantChartValue>((value, index) => {
+    const item: VariantChartValue = {
       is_reliable: true,
       date_start_unix: value.date_start_unix,
       date_end_unix: value.date_end_unix,

packages/app/src/domain/variants/logic/reorder-and-filter.ts

@@ -17,9 +17,7 @@ const hasMetricProperty = (config: any): config is { metricProperty: string } =>
  * @param selectionOptions - Currently selected variants
  */
 export const reorderAndFilter = <T, P>(context: TooltipData<VariantChartValue & T>, selectionOptions: P[]) => {
-  const metricAmount = context.config.length;
-  const totalMetricAmount = selectionOptions.length;
-  const hasSelectedMetrics = metricAmount !== totalMetricAmount; // Check whether the user has selected any variants from the interactive legend.
+  const hasSelectedMetrics = context.config.length !== selectionOptions.length; // Check whether the user has selected any variants from the interactive legend.
 
   /* Filter out any variants that have an occcurrence value of 0 */
   const filteredValues = Object.fromEntries(

packages/app/src/domain/variants/logic/use-bar-config.ts

@@ -1,7 +1,8 @@
-import { ColorMatch, VariantChartValue, StackedBarConfig, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
+import { ColorMatch, 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
@@ -12,17 +13,15 @@ const extractVariantNamesFromValues = (values: VariantChartValue[]) => {
 
 /**
  * Create configuration labels for interactive legend
- * @param values
- * @param selectedOptions
- * @param variantLabels
- * @param tooltipLabels
- * @param colors
- * @param timeframe
- * @param today
+ * @param values - Chart data
+ * @param variantLabels - Mnemonic labels for variants
+ * @param tooltipLabels - SiteText for other variants
+ * @param colors - Colors for variants
+ * @param timeframe - Selected timeframe
+ * @param today - Date of today
  */
 export const useBarConfig = (
   values: VariantChartValue[],
-  selectedOptions: (keyof VariantChartValue)[],
   variantLabels: VariantDynamicLabels,
   tooltipLabels: VariantsOverTimeGraphText,
   colors: ColorMatch[],
@@ -44,7 +43,7 @@ export const useBarConfig = (
       .filter((keyName) => activeVariantsInTimeframeNames.includes(keyName))
       .reverse();
 
-    const barChartConfig: StackedBarConfig<VariantChartValue>[] = [];
+    const barChartConfig: BarSeriesDefinition<VariantChartValue>[] = [];
 
     listOfVariantCodes.forEach((variantKey) => {
       const variantCodeName = variantKey.split('_').slice(0, -1).join('_');
@@ -57,23 +56,19 @@ 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 StackedBarConfig<VariantChartValue>);
+        barChartConfig.push(barChartConfigEntry as BarSeriesDefinition<VariantChartValue>);
       }
     });
 
-    const selectOptions: StackedBarConfig<VariantChartValue>[] = [...barChartConfig];
-
-    if (selectedOptions.length > 0) {
-      const selection = barChartConfig.filter((selectedConfig) => selectedOptions.includes(selectedConfig.metricProperty));
-      return [selection, selectOptions];
-    } else {
-      return [barChartConfig, selectOptions];
-    }
-  }, [values, tooltipLabels.tooltip_labels.other_percentage, variantLabels, colors, selectedOptions, timeframe, today]);
+    return barChartConfig;
+  }, [values, tooltipLabels.tooltip_labels.other_percentage, variantLabels, colors, timeframe, today]);
 };

packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx

@@ -1,21 +1,21 @@
-import { ChartTile, MetadataProps } from '~/components';
+import { ChartTile, MetadataProps, TimeSeriesChart } from '~/components';
 import { Spacer } from '~/components/base';
-import { TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common';
+import { DAY_IN_SECONDS, TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common';
 import { useState } from 'react';
-import { ColorMatch, StackedBarConfig, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
-import { StackedBarTooltipData, StackedChart } from '~/components/stacked-chart';
+import { ColorMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types';
 import { useBarConfig } from '~/domain/variants/logic/use-bar-config';
-import { InteractiveLegend } from '~/components/interactive-legend';
+import { InteractiveLegend, SelectOption } from '~/components/interactive-legend';
 import { useList } from '~/utils/use-list';
 import { TooltipSeriesList } from '~/components/time-series-chart/components/tooltip/tooltip-series-list';
 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';
 
 interface VariantsStackedBarChartTileProps {
   title: string;
   description: string;
-  helpText: string;
   values: VariantChartValue[];
   tooltipLabels: VariantsOverTimeGraphText;
   variantLabels: VariantDynamicLabels;
@@ -36,14 +36,20 @@ const alwaysEnabled: (keyof VariantChartValue)[] = [];
  * @param metadata - Metadata block
  * @constructor
  */
-export const VariantsStackedBarChartTile = ({ title, description, helpText, tooltipLabels, values, variantLabels, variantColors, metadata }: VariantsStackedBarChartTileProps) => {
+export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels, values, variantLabels, variantColors, metadata }: VariantsStackedBarChartTileProps) => {
   const today = useCurrentDate();
-
+  const { commonTexts } = useIntl();
   const { list, toggle, clear } = useList<keyof VariantChartValue>(alwaysEnabled);
+  const [variantTimeFrame, setVariantTimeFrame] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
+  const barSeriesConfig = useBarConfig(values, variantLabels, tooltipLabels, variantColors, variantTimeFrame, today);
+
+  const text = commonTexts.variants_page;
 
-  const [variantTimeFrame, setVariantTimeFrame] = useState<TimeframeOption>(TimeframeOption.THREE_MONTHS);
+  const interactiveLegendOptions: SelectOption[] = barSeriesConfig;
 
-  const [barChartConfig, selectionOptions] = useBarConfig(values, list, variantLabels, tooltipLabels, variantColors, variantTimeFrame, today);
+  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;
 
@@ -53,22 +59,30 @@ export const VariantsStackedBarChartTile = ({ title, description, helpText, tool
       description={description}
       metadata={metadata}
       timeframeOptions={TimeframeOptionsList}
-      timeframeInitialValue={TimeframeOption.THREE_MONTHS}
+      timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
       onSelectTimeframe={setVariantTimeFrame}
     >
-      <InteractiveLegend helpText={helpText} selectOptions={selectionOptions} selection={list} onToggleItem={toggle} onReset={clear} />
+      <InteractiveLegend helpText={text.legend_help_text} selectOptions={interactiveLegendOptions} selection={list} onToggleItem={toggle} onReset={clear} />
       <Spacer marginBottom={space[2]} />
-      <StackedChart
+      <TimeSeriesChart
         accessibility={{
           key: 'variants_stacked_area_over_time_chart',
         }}
+        forceLegend
         values={values}
-        config={barChartConfig}
-        disableLegend
+        seriesConfig={filteredBarConfig}
         timeframe={variantTimeFrame}
-        formatTooltip={(data) => (
-          <TooltipSeriesList data={reorderAndFilter<StackedBarTooltipData, StackedBarConfig<VariantChartValue>>(data, selectionOptions)} hasTwoColumns={hasTwoColumns} />
-        )}
+        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,
+            },
+          ],
+        }}
       />
     </ChartTile>
   );

packages/app/src/pages/landelijk/varianten.tsx

@@ -21,6 +21,7 @@ import { useState } from 'react';
 import { getArchivedVariantChartData, getVariantBarChartData, getVariantOrderColors, getVariantTableData } from '~/domain/variants/data-selection';
 import { VariantsStackedAreaTile, VariantsStackedBarChartTile, VariantsTableTile } from '~/domain/variants';
 import { VariantDynamicLabels } from '~/domain/variants/data-selection/types';
+import { NlVariantsVariant } from '@corona-dashboard/common';
 
 const pageMetrics = ['variants', 'named_difference'];
 
@@ -75,7 +76,6 @@ export default function CovidVariantenPage(props: StaticProps<typeof getStaticPr
 
   const { commonTexts, locale } = useIntl();
   const { metadataTexts, textNl } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
-
   const [isArchivedContentShown, setIsArchivedContentShown] = useState<boolean>(false);
 
   const metadata = {
@@ -86,9 +86,12 @@ export default function CovidVariantenPage(props: StaticProps<typeof getStaticPr
 
   const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics);
 
-  //const totalVariants = data.named_difference.variants__percentage.filter((namedDifferenceEntry) => namedDifferenceEntry.variant_code !== 'other_variants').length;
   const totalVariants = data.variants
-    ? data.variants!.values.reduce((accumulator, currentVariant) => (currentVariant.last_value.occurrence > 0 ? 1 + accumulator : accumulator), 0)
+    ? data.variants!.values.reduce(
+        (accumulator, currentVariant: NlVariantsVariant) =>
+          currentVariant.last_value.occurrence > 0 && currentVariant.variant_code !== 'other_variants' ? 1 + accumulator : accumulator,
+        0
+      )
     : NaN;
 
   const sampleThresholdPassed = data.variants ? data.variants!.values[0].last_value.sample_size > 100 : false;
@@ -154,7 +157,6 @@ export default function CovidVariantenPage(props: StaticProps<typeof getStaticPr
             <VariantsStackedBarChartTile
               title={textNl.varianten_barchart.titel}
               description={textNl.varianten_barchart.description}
-              helpText={textNl.varianten_over_tijd_grafiek.legend_help_tekst}
               tooltipLabels={textNl.varianten_over_tijd_grafiek}
               values={variantChart}
               variantLabels={variantLabels}

packages/cms/src/lokalize/key-mutations.csv

@@ -15,3 +15,9 @@ timestamp,action,key,document_id,move_to
 2023-10-20T09:31:30.622Z,add,pages.variants_page.nl.varianten_tabel.omschrijving_te_weinig_samples,w5vHLm19hF0S5wj1e5RyoG,__
 2023-10-23T15:10:02.545Z,add,common.sidebar.metrics.the_corona_vaccine.title,ZkwHqMQjnsmR1ekP50kkn5,__
 2023-10-23T15:10:02.545Z,delete,common.sidebar.metrics.vaccinations.title,wzQp83DAUqyqV3ewG9xYUn,__
+2023-10-24T11:27:36.857Z,add,common.variants_page.legend_help_text,HZiiX43HLlkWORF4EMynAL,__
+2023-10-24T11:27:37.696Z,add,common.variants_page.bar_chart_legend_inaccurate,HZiiX43HLlkWORF4EMynLf,__
+2023-10-24T11:27:38.726Z,add,common.variants_page.tooltip_labels.innacurate,3Jkha9OztzmUWKfWeflWKk,__
+2023-10-24T11:27:38.726Z,delete,common.test_key:,itix6KXAqiuTrWiucCRIit,__
+2023-10-24T11:27:38.727Z,delete,__root.test_123,0hrRKce5hYl5O3WpoZ6oAl,__
+2023-10-24T11:27:38.727Z,delete,__root.test_key_345,0hrRKce5hYl5O3WpoZ6nXX,__