feature/COR-1811 adjust variant page (#4907)

* feat(COR-1811): Add kpi section to variants page and update metadataprops * feat(COR-1811): Variants table arrows color * refactor(COR-1811): Refactor functions * feat(COR-1811): Show variants table conditionally * feat(COR-1811): Update schema for archived variants * feat(COR-1811): Regenerate datatypes based on schema update * feat(COR-1811): Archive variants graph * refactor(COR-1811): Refactored variants components * fix: Add parameters to nextJS dev server * refactor: Split useSeriesConfig into seperate file * task: create semi-working prototype for bar chart * feat(COR-1811): Build variant bar chart * feat(COR-1811): Add comment * feat(COR-1811): Update barchart to timeframe * fix(COR-1811): Add differentation between states of interactiveLegends * feat(COR-1811): Calculate total variants in frontend * feat(COR-1811): Refactor keys and add comments * feat(COR-1811): Add key mutations --------- Co-authored-by: VWSCoronaDashboard29 <B>
minvws · Oct 23, 2023 · 51f74db · 51f74db
1 parent bc78169
commit 51f74db
Show file tree

Hide file tree

Showing 37 changed files with 659 additions and 194 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -139,7 +139,7 @@
     "bootstrap": "exit 0",
     "export": "next export",
     "dev": "yarn workspace @corona-dashboard/icons build && yarn workspace @corona-dashboard/common build && run-p dev:common dev:next dev:lokalize",
-    "dev:next": "node next-server.js",
+    "dev:next": "cross-env NODE_OPTIONS='--inspect' node next-server.js",
     "dev:lokalize": "chokidar \"./src/locale/nl_export.json\" -c \"yarn workspace @corona-dashboard/cms lokalize:generate-types\"",
     "dev:common": "yarn workspace @corona-dashboard/common build:watch",
     "build": "cross-env NEXT_TELEMETRY_DISABLED=1 && next build",

diff --git a/packages/app/schema/archived_nl/__index.json b/packages/app/schema/archived_nl/__index.json
@@ -42,6 +42,7 @@
     "vaccine_vaccinated_or_support_archived_20230411",
     "vaccine_delivery_per_supplier_archived_20211101",
     "vaccine_stock_archived_20211024",
+    "variants_archived_20231101",
     "tested_ggd_archived_20230321",
     "tested_overall_archived_20230331",
     "tested_per_age_group_archived_20230331",
@@ -186,6 +187,9 @@
     "vaccine_stock_archived_20211024": {
       "$ref": "vaccine_stock.json"
     },
+    "variants_archived_20231101": {
+      "$ref": "variants.json"
+    },
     "repeating_shot_administered_20220713": {
       "$ref": "repeating_shot_administered.json"
     },

diff --git a/packages/app/schema/archived_nl/variants.json b/packages/app/schema/archived_nl/variants.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "archived_nl_variants",
+  "required": ["values"],
+  "additionalProperties": false,
+  "properties": {
+    "values": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/variant"
+      }
+    }
+  },
+  "definitions": {
+    "variant": {
+      "type": "object",
+      "title": "archived_nl_variants_variant",
+      "additionalProperties": false,
+      "required": ["variant_code", "values", "last_value"],
+      "properties": {
+        "variant_code": {
+          "type": "string"
+        },
+        "values": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/value"
+          }
+        },
+        "last_value": {
+          "$ref": "#/definitions/value"
+        }
+      }
+    },
+    "value": {
+      "type": "object",
+      "title": "archived_nl_variants_variant_value",
+      "additionalProperties": false,
+      "required": [
+        "order",
+        "occurrence",
+        "percentage",
+        "sample_size",
+        "date_start_unix",
+        "date_end_unix",
+        "date_of_report_unix",
+        "date_of_insertion_unix",
+        "label_nl",
+        "label_en"
+      ],
+      "properties": {
+        "order": {
+          "type": "integer"
+        },
+        "occurrence": {
+          "type": "integer"
+        },
+        "percentage": {
+          "type": "number"
+        },
+        "sample_size": {
+          "type": "integer"
+        },
+        "date_start_unix": {
+          "type": "integer"
+        },
+        "date_end_unix": {
+          "type": "integer"
+        },
+        "date_of_insertion_unix": {
+          "type": "integer"
+        },
+        "date_of_report_unix": {
+          "type": "integer"
+        },
+        "label_nl": {
+          "type": "string"
+        },
+        "label_en": {
+          "type": "string"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/app/schema/nl/__index.json b/packages/app/schema/nl/__index.json
@@ -20,7 +20,8 @@
     "infectionradar_symptoms_trend_per_age_group_weekly",
     "sewer",
     "vaccine_campaigns",
-    "vaccine_administered_last_timeframe"
+    "vaccine_administered_last_timeframe",
+    "variants"
   ],
   "additionalProperties": false,
   "properties": {

diff --git a/packages/app/src/components/kpi/bordered-kpi-section.tsx b/packages/app/src/components/kpi/bordered-kpi-section.tsx
@@ -9,10 +9,11 @@ import { KpiContent } from './components/kpi-content';
 import { BorderedKpiSectionProps } from './types';
 import { Markdown } from '../markdown';
 
-export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData }: BorderedKpiSectionProps) => {
+export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData, disclaimer }: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {
     date: dateOrRange,
     source: source,
+    disclaimer: disclaimer,
   };
 
   return (

diff --git a/packages/app/src/components/kpi/types.ts b/packages/app/src/components/kpi/types.ts
@@ -29,6 +29,7 @@ export interface BorderedKpiSectionProps {
   };
   tilesData: [TileData, TileData];
   title: string;
+  disclaimer?: string;
 }
 
 type BarType = {

diff --git a/packages/app/src/components/metadata.tsx b/packages/app/src/components/metadata.tsx
@@ -5,6 +5,7 @@ import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Box } from './base';
 import { InlineText, Text } from './typography';
+import { Markdown } from '~/components/markdown';
 
 type source = {
   text: string;
@@ -25,9 +26,10 @@ export interface MetadataProps extends MarginBottomProps {
   isTileFooter?: boolean;
   datumsText?: string;
   intervalCount?: string;
+  disclaimer?: string;
 }
 
-export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, marginBottom, dataSources, intervalCount }: MetadataProps) {
+export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, marginBottom, dataSources, intervalCount, disclaimer }: MetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
 
   const dateString =
@@ -77,6 +79,11 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m
               })
             ) : (
               <>
+                {disclaimer && (
+                  <Box paddingBottom={space[3]}>
+                    <Markdown content={disclaimer}></Markdown>
+                  </Box>
+                )}
                 {dateString}
                 {obtainedAt &&
                   ` ${replaceVariablesInText(commonTexts.common.metadata.obtained, {

diff --git a/packages/app/src/components/stacked-chart/stacked-chart.tsx b/packages/app/src/components/stacked-chart/stacked-chart.tsx
@@ -65,6 +65,7 @@ type StackedChartProps<T extends TimestampedValue> = {
   config: Config<T>[];
   valueAnnotation?: string;
   initialWidth?: number;
+  disableLegend?: boolean;
   expectedLabel?: string;
   formatTooltip?: TooltipFormatter<T & StackedBarTooltipData>;
   isPercentage?: boolean;
@@ -105,6 +106,7 @@ export function StackedChart<T extends TimestampedValue>(props: StackedChartProp
     config,
     initialWidth = 840,
     isPercentage,
+    disableLegend,
     expectedLabel,
     formatTickValue: formatYTickValue,
     formatTooltip,
@@ -461,9 +463,11 @@ export function StackedChart<T extends TimestampedValue>(props: StackedChartProp
           )}
         </ResponsiveContainer>
       </Box>
-      <Box paddingLeft={`${padding.left}px`}>
-        <Legend items={legendItems} />
-      </Box>
+      {!disableLegend && legendItems && (
+        <Box paddingLeft={`${padding.left}px`}>
+          <Legend items={legendItems} />
+        </Box>
+      )}
     </>
   );
 }

diff --git a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/vaccine-campaigns-tile.tsx b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/vaccine-campaigns-tile.tsx
@@ -1,24 +1,19 @@
 import { useBreakpoints } from '~/utils/use-breakpoints';
-import { ChartTile, Markdown, MetadataProps } from '~/components';
-import { Text } from '~/components/typography';
+import { ChartTile, MetadataProps } from '~/components';
 import { NarrowVaccineCampaignTable } from './components/narrow-vaccine-campaign-table';
 import { WideVaccineCampaignTable } from './components/wide-vaccine-campaign-table';
 import { VaccineCampaign, VaccineCampaignDescriptions, VaccineCampaignHeaders, VaccineCampaignOptions } from './types';
-import { Box } from '~/components/base';
-import { space } from '~/style/theme';
-
 interface VaccineCampaignsTileProps {
   title: string;
   description: string;
-  descriptionFooter: string;
   metadata: MetadataProps;
   headers: VaccineCampaignHeaders;
   campaigns: VaccineCampaign[];
   campaignDescriptions: VaccineCampaignDescriptions;
   campaignOptions?: VaccineCampaignOptions;
 }
 
-export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescriptions, description, descriptionFooter, metadata, campaignOptions }: VaccineCampaignsTileProps) => {
+export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescriptions, description, metadata, campaignOptions }: VaccineCampaignsTileProps) => {
   const breakpoints = useBreakpoints();
 
   // Display only the campaigns that are not hidden in the campaignOptions prop
@@ -36,11 +31,6 @@ export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescri
         ) : (
           <NarrowVaccineCampaignTable campaigns={sortedAndFilteredCampaigns} campaignDescriptions={campaignDescriptions} headers={headers} showTotals={totalsAvailable} />
         )}
-        <Box marginTop={space[3]}>
-          <Text variant="label1" color="gray7">
-            <Markdown content={descriptionFooter} />
-          </Text>
-        </Box>
       </ChartTile>
     </>
   );

diff --git a/...ts/static-props/get-variant-chart-data.ts → ...ection/get-archived-variant-chart-data.ts b/...ts/static-props/get-variant-chart-data.ts → ...ection/get-archived-variant-chart-data.ts
@@ -1,16 +1,9 @@
-import { NlVariants } from '@corona-dashboard/common';
+import { ArchivedNlVariants } from '@corona-dashboard/common';
 import { isDefined } from 'ts-is-present';
-
-export type VariantCode = string;
-
-export type VariantChartValue = {
-  date_start_unix: number;
-  date_end_unix: number;
-  is_reliable: boolean;
-} & Record<string, number>;
+import { VariantChartValue } from '~/domain/variants/data-selection/types';
 
 const EMPTY_VALUES = {
-  variantChart: null,
+  archivedVariantChart: null,
   dates: {
     date_of_report_unix: 0,
     date_start_unix: 0,
@@ -22,7 +15,7 @@ const EMPTY_VALUES = {
  * Returns values for variant timeseries chart
  * @param variants
  */
-export function getVariantChartData(variants: NlVariants | undefined) {
+export function getArchivedVariantChartData(variants: ArchivedNlVariants | undefined) {
   if (!isDefined(variants) || !isDefined(variants.values)) {
     return EMPTY_VALUES;
   }
@@ -51,7 +44,7 @@ export function getVariantChartData(variants: NlVariants | undefined) {
   });
 
   return {
-    variantChart: values,
+    archivedVariantChart: values,
     dates: {
       date_of_report_unix: firstVariantInList.last_value.date_of_report_unix,
       date_start_unix: firstVariantInList.last_value.date_start_unix,

diff --git a/packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts b/packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts
@@ -0,0 +1,54 @@
+import { NlVariants } from '@corona-dashboard/common';
+import { isDefined } from 'ts-is-present';
+import { VariantChartValue } from '~/domain/variants/data-selection/types';
+
+const EMPTY_VALUES = {
+  variantChart: null,
+  dates: {
+    date_of_report_unix: 0,
+    date_start_unix: 0,
+    date_end_unix: 0,
+  },
+} as const;
+
+/**
+ * Returns values for variant timeseries chart
+ * @param variants
+ */
+export function getVariantBarChartData(variants: NlVariants) {
+  if (!isDefined(variants) || !isDefined(variants.values)) {
+    return EMPTY_VALUES;
+  }
+
+  const sortedVariants = variants.values.sort((a, b) => b.last_value.order - a.last_value.order);
+
+  const firstVariantInList = sortedVariants.shift();
+
+  if (!isDefined(firstVariantInList)) {
+    return EMPTY_VALUES;
+  }
+
+  const values = firstVariantInList.values.map<VariantChartValue>((value, index) => {
+    const item = {
+      is_reliable: true,
+      date_start_unix: value.date_start_unix,
+      date_end_unix: value.date_end_unix,
+      [`${firstVariantInList.variant_code}_occurrence`]: value.occurrence,
+    } as VariantChartValue;
+
+    sortedVariants.forEach((variant) => {
+      (item as unknown as Record<string, number>)[`${variant.variant_code}_occurrence`] = variant.values[index].occurrence;
+    });
+
+    return item;
+  });
+
+  return {
+    variantChart: values,
+    dates: {
+      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,
+    },
+  } as const;
+}
diff --git a/.../static-props/get-variant-order-colors.ts → ...ata-selection/get-variant-order-colors.ts b/.../static-props/get-variant-order-colors.ts → ...ata-selection/get-variant-order-colors.ts
@@ -1,11 +1,6 @@
 import { NlVariants, colors } from '@corona-dashboard/common';
 import { isDefined } from 'ts-is-present';
-import { VariantCode } from './';
-
-export type ColorMatch = {
-  variant: VariantCode;
-  color: string;
-};
+import { ColorMatch, VariantCode } from '~/domain/variants/data-selection/types';
 
 const getColorForVariant = (variantCode: VariantCode, index: number): string => {
   if (variantCode === 'other_variants') return colors.gray5;

diff --git a/...ts/static-props/get-variant-table-data.ts → .../data-selection/get-variant-table-data.ts b/...ts/static-props/get-variant-table-data.ts → .../data-selection/get-variant-table-data.ts
@@ -1,18 +1,7 @@
-import { colors, NlNamedDifference, NlVariants, NlVariantsVariant, NamedDifferenceDecimal } from '@corona-dashboard/common';
+import { colors, NlNamedDifference, NlVariants, NlVariantsVariant } from '@corona-dashboard/common';
 import { first } from 'lodash';
 import { isDefined } from 'ts-is-present';
-import { ColorMatch } from './get-variant-order-colors';
-import { VariantCode } from '../static-props';
-
-export type VariantRow = {
-  variantCode: VariantCode;
-  order: number;
-  percentage: number | null;
-  difference?: NamedDifferenceDecimal | null;
-  color: string;
-};
-
-export type VariantTableData = ReturnType<typeof getVariantTableData>;
+import { ColorMatch, VariantRow } from '~/domain/variants/data-selection/types';
 
 /**
  * Return values to populate the variants table

diff --git a/packages/app/src/domain/variants/data-selection/index.ts b/packages/app/src/domain/variants/data-selection/index.ts
@@ -0,0 +1,4 @@
+export * from './get-variant-bar-chart-data';
+export * from './get-archived-variant-chart-data';
+export * from './get-variant-order-colors';
+export * from './get-variant-table-data';