From 911d25dfbfd03e3bda1cd6071ec4f92b1dac4c03 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard25 <98813868+VWSCoronaDashboard25@users.noreply.github.com> Date: Thu, 7 Jul 2022 10:34:44 +0200 Subject: [PATCH 1/3] bugfix: expand the functionality of getLastInsertionDateOfPage so it covers all scenario's (removes occasional January 1st 1970 from the pages) (#4314) Also removed some entries as 'pageMetrics' that are backend data, but no page metrics, e.g. 'code' and 'static_values.' Co-authored-by: VWSCoronaDashboard25 --- .../[code]/positief-geteste-mensen.tsx | 2 - .../src/pages/gemeente/[code]/rioolwater.tsx | 2 - .../app/src/pages/gemeente/[code]/sterfte.tsx | 2 +- .../src/pages/gemeente/[code]/vaccinaties.tsx | 1 - .../gemeente/[code]/ziekenhuis-opnames.tsx | 2 +- .../get-last-insertion-date-of-page.spec.ts | 60 ++++++--------- .../utils/get-last-insertion-date-of-page.ts | 73 +++++++++++++++---- 7 files changed, 83 insertions(+), 59 deletions(-) diff --git a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx index f75c44fa77..5531f15e13 100644 --- a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx @@ -54,8 +54,6 @@ export { getStaticPaths } from '~/static-paths/gm'; import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; const pageMetrics = [ - 'code', - 'static_values.population_count', 'tested_overall', ]; diff --git a/packages/app/src/pages/gemeente/[code]/rioolwater.tsx b/packages/app/src/pages/gemeente/[code]/rioolwater.tsx index 73b887da48..ed9b365579 100644 --- a/packages/app/src/pages/gemeente/[code]/rioolwater.tsx +++ b/packages/app/src/pages/gemeente/[code]/rioolwater.tsx @@ -38,9 +38,7 @@ import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-p const pageMetrics = [ 'sewer_per_installation', - 'static_values.population_count', 'sewer', - 'code', ]; export { getStaticPaths } from '~/static-paths/gm'; diff --git a/packages/app/src/pages/gemeente/[code]/sterfte.tsx b/packages/app/src/pages/gemeente/[code]/sterfte.tsx index dd9b82e953..9ba29cc76b 100644 --- a/packages/app/src/pages/gemeente/[code]/sterfte.tsx +++ b/packages/app/src/pages/gemeente/[code]/sterfte.tsx @@ -39,7 +39,7 @@ import { replaceVariablesInText } from '~/utils'; import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; -const pageMetrics = ['deceased_rivm', 'code']; +const pageMetrics = ['deceased_rivm']; export { getStaticPaths } from '~/static-paths/gm'; diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx index 008b742c89..087e130abd 100644 --- a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx +++ b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx @@ -56,7 +56,6 @@ import { import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; const pageMetrics = [ - 'code', 'vaccine_coverage_per_age_group', 'vaccine_coverage_per_age_group_archived', 'booster_coverage', diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx index 4a78362a33..aed537d93e 100644 --- a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx @@ -54,7 +54,7 @@ import { import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; -const pageMetrics = ['hospital_nice', 'code']; +const pageMetrics = ['hospital_nice']; export { getStaticPaths } from '~/static-paths/gm'; diff --git a/packages/app/src/utils/__tests__/get-last-insertion-date-of-page.spec.ts b/packages/app/src/utils/__tests__/get-last-insertion-date-of-page.spec.ts index 9c2b54f9b9..6119f655c3 100644 --- a/packages/app/src/utils/__tests__/get-last-insertion-date-of-page.spec.ts +++ b/packages/app/src/utils/__tests__/get-last-insertion-date-of-page.spec.ts @@ -2,14 +2,14 @@ import { suite } from 'uvu'; import * as assert from 'uvu/assert'; import { getLastInsertionDateOfPage } from '../get-last-insertion-date-of-page'; -const GetLastInsertionDateOfPage = suite('getLastInsertionDateOfPage'); +const GetLastDateOfInsertion = suite('getLastInsertionDateOfPage'); -GetLastInsertionDateOfPage('returns zero when data is empty', () => { +GetLastDateOfInsertion('returns zero when data is empty', () => { const result = getLastInsertionDateOfPage({}, ['key1']); assert.is(result, 0); }); -GetLastInsertionDateOfPage('returns zero when metrics are empty', () => { +GetLastDateOfInsertion('returns zero when metrics are empty', () => { const result = getLastInsertionDateOfPage( { key1: { last_value: { date_of_insertion_unix: 123 } } }, [] @@ -17,7 +17,7 @@ GetLastInsertionDateOfPage('returns zero when metrics are empty', () => { assert.is(result, 0); }); -GetLastInsertionDateOfPage('returns the max date_of_insertion_unix', () => { +GetLastDateOfInsertion('returns the max date_of_insertion_unix', () => { const result = getLastInsertionDateOfPage( { key1: { last_value: { date_of_insertion_unix: 123 } }, @@ -28,55 +28,37 @@ GetLastInsertionDateOfPage('returns the max date_of_insertion_unix', () => { assert.is(result, 12345); }); -GetLastInsertionDateOfPage( - 'ignores missing date_of_insertion_unix properties', - () => { - const result = getLastInsertionDateOfPage( - { - key1: { last_value: { date_of_insertion_unix: 9 } }, - key3: { last_value: {} }, - key2: { last_value: { date_of_insertion_unix: 6 } }, - }, - ['key1', 'key2', 'key3'] - ); - assert.is(result, 9); - } -); +GetLastDateOfInsertion('returns the max date_of_insertion_unix without last_value', () => { + const result = getLastInsertionDateOfPage( + { + key1: { values: [{ date_of_insertion_unix: 123 }, { date_of_insertion_unix: 12345 }] }, + }, + ['key1'] + ); + assert.is(result, 12345); +}); -GetLastInsertionDateOfPage( - 'works with paths and keys as given pageMetrics', - () => { +GetLastDateOfInsertion('works with nested values', () => { const result = getLastInsertionDateOfPage( { key1: { last_value: { date_of_insertion_unix: 1 } }, - level1: { - level2: { - last_value: { - date_of_insertion_unix: 9999, - }, - }, - }, + key2: { values: [{last_value: { date_of_insertion_unix: 123 }}]}, }, - ['key1', 'level1.level2'] + ['key1', 'key2'] ); - assert.is(result, 9999); + assert.is(result, 123); } ); -GetLastInsertionDateOfPage( - 'works with a direct path instead of date_of_insertion_unix when given', - () => { +GetLastDateOfInsertion('works with a direct date_of_insertion_unix', () => { const result = getLastInsertionDateOfPage( { - key1: { last_value: { date_of_insertion_unix: 1 } }, - level1: { - level2: 123, - }, + key1: { date_of_insertion_unix: 123 } }, - ['key1', 'level1.level2'] + ['key1'] ); assert.is(result, 123); } ); -GetLastInsertionDateOfPage.run(); +GetLastDateOfInsertion.run(); diff --git a/packages/app/src/utils/get-last-insertion-date-of-page.ts b/packages/app/src/utils/get-last-insertion-date-of-page.ts index c46467089a..1a8685c0f5 100644 --- a/packages/app/src/utils/get-last-insertion-date-of-page.ts +++ b/packages/app/src/utils/get-last-insertion-date-of-page.ts @@ -1,21 +1,68 @@ import { get } from 'lodash'; -/** - * This method gets the most recent insertion date from the metrics used in a page - * - */ + +//functions for checking type of metric +function hasLastValue(metric: any): boolean { + return typeof metric?.last_value?.date_of_insertion_unix !== 'undefined'; +} + +function hasValues(metric: any): boolean { + return Array.isArray(metric?.values) && + typeof metric?.values[metric?.values.length - 1]?.date_of_insertion_unix !== 'undefined'; +} + +function hasInsertionDate(metric: any): boolean { + return typeof metric?.date_of_insertion_unix !== 'undefined'; +} + +function hasNestedLastValue(metric: any): boolean { + return Array.isArray(metric?.values) && + typeof metric?.values[0]?.last_value?.date_of_insertion_unix !== 'undefined'; +} + +// functions for getting values +function getDateFromLastValue(metric: any): number { + return metric?.last_value?.date_of_insertion_unix; +} + +function getDateFromValues(metric: any): number { + return metric?.values[metric.values.length - 1]?.date_of_insertion_unix; +} + +function getDateFromInsertionDate(metric: any): number { + return metric?.date_of_insertion_unix; +} + +function getDateFromNestedLastValue(metric: any): number { + return metric?.values.reduce((lastDate :number, innerValue: any) => { + const metricDate = getMetricDate(innerValue); + return Math.max(metricDate, lastDate); + }, 0); +} + +function getMetricDate(metricOrUnixDate: any): number { + if (hasLastValue(metricOrUnixDate)) { + return getDateFromLastValue(metricOrUnixDate); + } + if (hasValues(metricOrUnixDate)) { + return getDateFromValues(metricOrUnixDate); + } + if (hasInsertionDate(metricOrUnixDate)) { + return getDateFromInsertionDate(metricOrUnixDate); + } + if (hasNestedLastValue(metricOrUnixDate)) { + return getDateFromNestedLastValue(metricOrUnixDate); + } + return 0; +} export function getLastInsertionDateOfPage( data: unknown, pageMetrics: string[] ) { return pageMetrics.reduce((lastDate, metricProperty) => { - const metricOrUnixDate = get(data, metricProperty); - - const metricDate = - typeof metricOrUnixDate === 'number' - ? metricOrUnixDate - : metricOrUnixDate?.last_value?.date_of_insertion_unix || 0; - - return metricDate > lastDate ? metricDate : lastDate; + const metric: any = get(data, metricProperty); + const metricDate = getMetricDate(metric); + + return Math.max(metricDate, lastDate); }, 0); -} +}; From c8bd9d177b9fbba6f92b7e4c859072cd95c6f038 Mon Sep 17 00:00:00 2001 From: L R <107395524+VWSCoronaDashboard26@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:16:02 +0200 Subject: [PATCH 2/3] feature/COR-871-variant-page-table (#4308) * feat: updated CovidVariantenPage page component to update layout. updated VariantNameCell component to have a hover state configurable through props. updated getVariantTableData functionality to filter out irrelevant variants and map colors between graphs and tables. * feat: updated PercentageBar component to correctly render the background color. * feat: updated getVariantTableData functionality to 1) filter out 'other_graph' variants; 2) create a mapped sorting of variants based on the Greek alphabet; 3) correctly map colors for the 'other_table' variant; 4) simplify the final array filtering * feat: small consistency fix * feat: updated VariantNameCell component to rename hasHoverState to isTooltipEnabled; updated getVariantTableData functionality to restore filtering based on historical significance * feat: reverted strict mapping between Greek alphabet and variants; removed TODO code; 'fixed' percentage mapping; 'fixed' color and order mapping * feat: revert back to commit 0c0083d8 with changes applied * feat: removed TODO; fixed comments * feat: removed TODO; fixed comments * feat: fix linting issues * feat: update variant sorting algorithm with dedicated util method to always sort variants not in the map (omicron sub-variants for instance) to the back of the list; * feat: updated colors so that they are in the correct order; * feat: updated types for the different new omicron sub-variants (leveraging _-notation rather than .-notation); introduced temporary testing colors; * feat: updated colors; started on the variants chart; * chore: add Sanity keys for omicron variants * feat: updated useSeriesConfig hook in VariantStackedAreaTileWithData component to properly handle new sub-variant names for the chart (i.e. omicron ba_2_12_1_percentage); * feat: updated graph to remove 'other_graph' variants from the graph; updated chart to add date below the chart; * feat: updated InteractiveLegend component to add a new GappedArea component to match with the chart appearance in regards to how data series and tooltip indicators are rendered; * feat: updated getVariantTableData functionality to sort based on reversed Greek alphabet; did some prep-work for PR #4314 * feat: updated VariantsStackedAreaTile component to pass correct properties to metadata prop; * feat: updated TooltipList styles to only use two columns when on certain breakpoints; updated TooltipContent styles to increase the maxWidth of the component; Co-authored-by: VWSCoronaDashboard26 Co-authored-by: VWSCoronaDashboard25 --- .../app/src/components/interactive-legend.tsx | 20 ++- .../app/src/components/percentage-bar.tsx | 3 +- .../tooltip/tooltip-series-list-items.tsx | 3 +- .../components/tooltip/tooltip-wrapper.tsx | 2 +- .../static-props/get-variant-table-data.ts | 89 ++++++++-- .../variants-stacked-area-tile.tsx | 155 ++++++++++-------- .../components/variant-name-cell.tsx | 8 +- .../variants/variants-table-tile/types.ts | 26 ++- .../app/src/pages/landelijk/varianten.tsx | 24 +-- packages/cms/src/lokalize/key-mutations.csv | 14 ++ packages/common/src/theme/colors.ts | 8 +- 11 files changed, 247 insertions(+), 105 deletions(-) diff --git a/packages/app/src/components/interactive-legend.tsx b/packages/app/src/components/interactive-legend.tsx index 859d656332..068e2732ef 100644 --- a/packages/app/src/components/interactive-legend.tsx +++ b/packages/app/src/components/interactive-legend.tsx @@ -9,7 +9,7 @@ export interface SelectOption { metricProperty: T; label: string; color: string; - shape?: 'line' | 'circle' | 'square'; + shape?: 'line' | 'circle' | 'square' | 'gapped-area'; legendAriaLabel?: string; } @@ -51,6 +51,9 @@ export function InteractiveLegend({ {item.shape === 'line' && } {item.shape === 'circle' && } {item.shape === 'square' && } + {item.shape === 'gapped-area' && ( + + )} (({ color }) => borderRadius: '2px', }) ); + +const GappedArea = styled.div<{ color: string }>(({ color }) => + css({ + display: 'block', + position: 'absolute', + left: 13, + backgroundColor: `${color}30`, + borderTop: `2px solid ${color}`, + top: '50%', + transform: 'translateY(-50%)', + width: '11px', + height: '11px', + borderRadius: '2px', + }) +); diff --git a/packages/app/src/components/percentage-bar.tsx b/packages/app/src/components/percentage-bar.tsx index 0c891b6db5..a529d077d2 100644 --- a/packages/app/src/components/percentage-bar.tsx +++ b/packages/app/src/components/percentage-bar.tsx @@ -1,6 +1,7 @@ import { css } from '@styled-system/css'; import styled from 'styled-components'; import { Box } from '~/components/base'; +import { colors } from '@corona-dashboard/common'; interface PercentageProps { percentage: number; @@ -14,7 +15,7 @@ export function PercentageBar({ percentage, height, color, - backgroundColor = '8fcae7', + backgroundColor = colors.data.underReported, backgroundStyle = 'normal', }: PercentageProps) { const minWidth = percentage > 0 ? '2px' : undefined; diff --git a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-items.tsx b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-items.tsx index 43dc2d1c69..633697e751 100644 --- a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-items.tsx +++ b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-items.tsx @@ -6,6 +6,7 @@ import { Box } from '~/components/base'; import { InlineText } from '~/components/typography'; import { VisuallyHidden } from '~/components/visually-hidden'; import { spacingStyle } from '~/style/functions/spacing'; +import { useBreakpoints } from '~/utils/use-breakpoints'; import { SeriesConfig, useFormatSeriesValue } from '../../logic'; import { SeriesIcon } from '../series-icon'; import { OutOfBoundsIcon } from '../timespan-annotation'; @@ -209,7 +210,7 @@ interface TooltipListProps { const TooltipList = styled.ol((x) => css({ - columns: x.hasTwoColumns ? 2 : 1, + columns: x.hasTwoColumns && useBreakpoints().md ? 2 : 1, columnRule: x.hasTwoColumns ? `1px solid ${colors.lightGray}` : 'unset', columnGap: x.hasTwoColumns ? '2em' : 'unset', m: 0, diff --git a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-wrapper.tsx b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-wrapper.tsx index e88f5e858b..750d0441e1 100644 --- a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-wrapper.tsx +++ b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-wrapper.tsx @@ -199,7 +199,7 @@ const TooltipChildren = styled.div<{ hasTitle?: boolean }>(({ hasTitle }) => const StyledTooltipContent = styled.div((x) => css({ color: 'body', - maxWidth: 375, + maxWidth: 425, borderRadius: 1, cursor: x.onClick ? 'pointer' : 'default', fontSize: 1, diff --git a/packages/app/src/domain/variants/static-props/get-variant-table-data.ts b/packages/app/src/domain/variants/static-props/get-variant-table-data.ts index 30b2cace80..ec2767945a 100644 --- a/packages/app/src/domain/variants/static-props/get-variant-table-data.ts +++ b/packages/app/src/domain/variants/static-props/get-variant-table-data.ts @@ -1,5 +1,4 @@ import { - assert, colors, InNamedDifference, InVariants, @@ -17,12 +16,39 @@ import { isDefined, isPresent } from 'ts-is-present'; export type VariantRow = { variant: string; percentage: number | null; - difference?: OptionalNamedDifferenceDecimal; + difference?: OptionalNamedDifferenceDecimal | null; color: string; }; export type VariantTableData = ReturnType; +export const VARIANT_TABLE_MAP = [ + 'alpha', + 'beta', + 'gamma', + 'delta', + 'eta', + 'epsilon', + 'theta', + 'kappa', + 'lambda', + 'iota', + 'zeta', + 'mu', + 'nu', + 'xi', + 'omicron', + 'pi', + 'rho', + 'sigma', + 'tau', + 'upsilon', + 'phi', + 'chi', + 'psi', + 'omega', +]; + export function getVariantTableData( variants: NlVariants | InVariants | undefined, namedDifference: NlNamedDifference | InNamedDifference @@ -40,10 +66,11 @@ export function getVariantTableData( const difference = namedDifference.variants__percentage.find( (x) => x.name === name ); - assert( - difference, - `[${getVariantTableData.name}:${findDifference.name}] No variants__percentage found for variant ${name}` - ); + + if (!difference) { + return null; + } + return difference; } } @@ -71,6 +98,16 @@ export function getVariantTableData( ? inVariants.some((x) => x.is_reliable) : true; + const getVariantSortingRank = (variantName: string): number => { + const index = VARIANT_TABLE_MAP.findIndex((variant) => + variantName.includes(variant) + ); + + if (index === -1) return 1000; + return index; + }; + + const variantColors = colors.data.variants; const variantTable = variants.values /** * Since the schemas for international still has to change to @@ -83,22 +120,54 @@ export function getVariantTableData( : true, ...variant, })) - .filter((variant) => !variant.has_historical_significance) + .filter( + (variant) => + variant.name !== 'other_graph' || !variant.has_historical_significance + ) + .sort((variantA, variantB) => { + if (variantA.name === 'other_table') { + return 1; + } + if (variantB.name === 'other_table') { + return -1; + } + + const relativeSortingValue: number = + getVariantSortingRank(variantA.name) - + getVariantSortingRank(variantB.name); + + if (relativeSortingValue !== 0) { + return relativeSortingValue; + } + + return variantA.name.localeCompare(variantB.name); + }) .map((variant, index) => ({ variant: variant.name, percentage: variant.last_value.percentage, difference: findDifference(variant.name), - color: colors.data.variants.colorList[index], + color: + variant.name === 'other_table' + ? variantColors.other_table + : variantColors.colorList[index], })) + .filter( + (row) => + // Make sure the 'other' variant persists in the table. + row.variant === 'other_table' || row.percentage + ) + .sort() + .reverse() .sort((rowA, rowB) => { - // Make sure the 'other' variant is always sorted last + // Make sure the 'other' variant is always sorted last. if (rowA.variant === 'other_table') { return 1; } if (rowB.variant === 'other_table') { return -1; } - return (rowB.percentage ?? -1) - (rowA.percentage ?? -1); + + return 0; }); return { variantTable, dates, sampleSize, isReliable }; diff --git a/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx b/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx index f6835de5be..5d22686fca 100644 --- a/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx +++ b/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx @@ -1,4 +1,8 @@ -import { colors, TimeframeOption } from '@corona-dashboard/common'; +import { + colors, + TimeframeOption, + TimeframeOptionsList, +} from '@corona-dashboard/common'; import css from '@styled-system/css'; import { ReactNode, useMemo } from 'react'; import styled from 'styled-components'; @@ -10,7 +14,7 @@ import { Legend, LegendItem } from '~/components/legend'; import { MetadataProps } from '~/components/metadata'; import { TimeSeriesChart } from '~/components/time-series-chart'; import { TooltipSeriesList } from '~/components/time-series-chart/components/tooltip/tooltip-series-list'; -import { GappedStackedAreaSeriesDefinition } from '~/components/time-series-chart/logic'; +import { GappedAreaSeriesDefinition } from '~/components/time-series-chart/logic'; import { VariantChartValue } from '~/domain/variants/static-props'; import { SiteText } from '~/locale'; import { useList } from '~/utils/use-list'; @@ -110,59 +114,65 @@ function VariantStackedAreaTileWithData({ title={text.titel} description={text.toelichting} metadata={metadata} + timeframeOptions={TimeframeOptionsList} + timeframeInitialValue={TimeframeOption.SIX_MONTHS} > - {children} - {children && } - - - { - /** - * In the chart the 'other_percentage' stack is rendered on top, - * but in the tooltip it needs to be displayed as the last item. - * (These are both design decisions) - */ - const reorderContext = { - ...context, - config: [ - ...context.config.filter( - (x) => - !hasMetricProperty(x) || - x.metricProperty !== 'other_graph_percentage' - ), - context.config.find( - (x) => - hasMetricProperty(x) && - x.metricProperty === 'other_graph_percentage' - ), - ].filter(isDefined), - }; - - return ; - }} - numGridLines={0} - tickValues={[0, 25, 50, 75, 100]} - /> - + {(timeframe) => ( + <> + {children} + {children && } + + + { + /** + * In the chart the 'other_percentage' stack is rendered on top, + * but in the tooltip it needs to be displayed as the last item. + * (These are both design decisions) + */ + const reorderContext = { + ...context, + config: [ + ...context.config.filter( + (x) => + !hasMetricProperty(x) || + x.metricProperty !== 'other_graph_percentage' + ), + context.config.find( + (x) => + hasMetricProperty(x) && + x.metricProperty === 'other_graph_percentage' + ), + ].filter(isDefined), + }; + + return ; + }} + numGridLines={0} + tickValues={[0, 25, 50, 75, 100]} + /> + + + )} ); } @@ -172,15 +182,16 @@ function hasMetricProperty(config: any): config is { metricProperty: string } { } function useFilteredSeriesConfig( - seriesConfig: GappedStackedAreaSeriesDefinition[], - otherConfig: GappedStackedAreaSeriesDefinition, + seriesConfig: GappedAreaSeriesDefinition[], + otherConfig: GappedAreaSeriesDefinition, compareList: (keyof VariantChartValue)[] ) { return useMemo(() => { return [otherConfig, ...seriesConfig].filter( (item) => - compareList.includes(item.metricProperty) || - compareList.length === alwaysEnabled.length + item.metricProperty !== 'other_graph_percentage' && + (compareList.includes(item.metricProperty) || + compareList.length === alwaysEnabled.length) ); }, [seriesConfig, otherConfig, compareList]); } @@ -199,38 +210,38 @@ function useSeriesConfig( .reverse(); // Reverse to be in an alphabetical order /* Enrich config with dynamic data / locale */ - const seriesConfig: GappedStackedAreaSeriesDefinition[] = + const seriesConfig: GappedAreaSeriesDefinition[] = baseVariantsFiltered.map((variantKey, index) => { const color = colors.data.variants.colorList[index]; - const variantName = variantKey.split( - '_' - )[0] as keyof typeof text.varianten; + const variantNameFragments = variantKey.split('_'); + variantNameFragments.pop(); + const variantName = variantNameFragments.join('_') as keyof Variants; return { - type: 'gapped-stacked-area', + type: 'gapped-area', metricProperty: variantKey as keyof VariantChartValue, color, label: text.varianten[variantName]?.name || variantName, - shape: 'square', - strokeWidth: 0, - fillOpacity: 1, + shape: 'gapped-area', + strokeWidth: 2, + fillOpacity: 0.2, mixBlendMode: 'multiply', }; }); const otherConfig = { - type: 'gapped-stacked-area', + type: 'gapped-area', metricProperty: 'other_graph_percentage', label: text.tooltip_labels.other_percentage, - fillOpacity: 1, + fillOpacity: 0.2, shape: 'square', - color: colors.lightGray, - strokeWidth: 0, + color: colors.data.variants.other_graph, + strokeWidth: 2, mixBlendMode: 'multiply', - } as GappedStackedAreaSeriesDefinition; + } as GappedAreaSeriesDefinition; - const selectOptions = [...seriesConfig, otherConfig]; + const selectOptions = [...seriesConfig]; return [seriesConfig, otherConfig, selectOptions] as const; }, [values, text]); diff --git a/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx b/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx index 3573481e87..ccda515c81 100644 --- a/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx +++ b/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx @@ -9,10 +9,11 @@ type VariantNameCellProps = { text: TableText; mobile?: boolean; narrow?: boolean; + isTooltipEnabled?: boolean; }; export function VariantNameCell(props: VariantNameCellProps) { - const { variant, text, mobile, narrow } = props; + const { variant, text, mobile, narrow, isTooltipEnabled } = props; const [variantName, variantDescription] = useVariantNameAndDescription( variant as keyof typeof text.varianten, @@ -22,12 +23,13 @@ export function VariantNameCell(props: VariantNameCellProps) { return ( - {!mobile && ( + {!mobile && isTooltipEnabled && ( {variantName} )} - {mobile && {variantName}} + + {(mobile || !isTooltipEnabled) && {variantName}} ); } diff --git a/packages/app/src/domain/variants/variants-table-tile/types.ts b/packages/app/src/domain/variants/variants-table-tile/types.ts index 5e0bc9113a..d1b2960711 100644 --- a/packages/app/src/domain/variants/variants-table-tile/types.ts +++ b/packages/app/src/domain/variants/variants-table-tile/types.ts @@ -51,7 +51,31 @@ export interface Variants { name: string; countryOfOrigin: string; }; - omicron: { + 'omicron b_1_1_529': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_1': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_2': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_3': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_4': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_5': { + name: string; + countryOfOrigin: string; + }; + 'omicron ba_2_12_1': { name: string; countryOfOrigin: string; }; diff --git a/packages/app/src/pages/landelijk/varianten.tsx b/packages/app/src/pages/landelijk/varianten.tsx index 2f65bec8bc..2a2bc0e488 100644 --- a/packages/app/src/pages/landelijk/varianten.tsx +++ b/packages/app/src/pages/landelijk/varianten.tsx @@ -121,6 +121,19 @@ export default function CovidVariantenPage( articles={content.articles} /> + + {variantSidebarValue?.sample_size && ( )} - - diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv index 59079541fc..8872d8e39f 100755 --- a/packages/cms/src/lokalize/key-mutations.csv +++ b/packages/cms/src/lokalize/key-mutations.csv @@ -37,3 +37,17 @@ timestamp,action,key,document_id,move_to 2022-05-25T13:25:56.013Z,add,pages.intensiveCarePage.nl.chart_bedbezetting.legend_dot_label,l9y47X7Mn753quuWoDXzrN,__ 2022-06-08T14:31:12.676Z,add,pages.positiveTestsPage.nl.ggd.linechart_percentage_legend_label,FpB1VG3smRHDNCGaZQZZoS,__ 2022-06-08T14:31:13.689Z,add,pages.positiveTestsPage.vr.ggd.linechart_percentage_legend_label,avHj0RuKBVR3WKDFaNt28q,__ +2022-07-06T13:00:33.984Z,add,common.variants.omicron b_1_1_529.countryOfOrigin,FpB1VG3smRHDNCGaZfFnHc,__ +2022-07-06T13:00:35.005Z,add,common.variants.omicron b_1_1_529.name,FpB1VG3smRHDNCGaZfFnJP,__ +2022-07-06T13:00:36.018Z,add,common.variants.omicron ba_1.countryOfOrigin,ITiTU3jVuy3jp8GMhgLGnz,__ +2022-07-06T13:00:37.027Z,add,common.variants.omicron ba_1.name,FpB1VG3smRHDNCGaZfFnPN,__ +2022-07-06T13:00:38.028Z,add,common.variants.omicron ba_2.countryOfOrigin,avHj0RuKBVR3WKDFarkBDI,__ +2022-07-06T13:00:39.050Z,add,common.variants.omicron ba_2.name,FpB1VG3smRHDNCGaZfFnWX,__ +2022-07-06T13:00:40.061Z,add,common.variants.omicron ba_2_12_1.countryOfOrigin,ITiTU3jVuy3jp8GMhgLHhL,__ +2022-07-06T13:00:41.073Z,add,common.variants.omicron ba_2_12_1.name,FpB1VG3smRHDNCGaZfFnnF,__ +2022-07-06T13:00:42.075Z,add,common.variants.omicron ba_3.countryOfOrigin,FpB1VG3smRHDNCGaZfFnp2,__ +2022-07-06T13:00:43.098Z,add,common.variants.omicron ba_3.name,avHj0RuKBVR3WKDFarkBch,__ +2022-07-06T13:00:44.103Z,add,common.variants.omicron ba_4.countryOfOrigin,FpB1VG3smRHDNCGaZfFnuP,__ +2022-07-06T13:00:45.123Z,add,common.variants.omicron ba_4.name,FpB1VG3smRHDNCGaZfFnwC,__ +2022-07-06T13:00:46.132Z,add,common.variants.omicron ba_5.countryOfOrigin,avHj0RuKBVR3WKDFarkC5j,__ +2022-07-06T13:00:47.149Z,add,common.variants.omicron ba_5.name,ITiTU3jVuy3jp8GMhgLJBb,__ diff --git a/packages/common/src/theme/colors.ts b/packages/common/src/theme/colors.ts index e32d98810f..c6511132cf 100644 --- a/packages/common/src/theme/colors.ts +++ b/packages/common/src/theme/colors.ts @@ -138,14 +138,14 @@ export const colors = { variants: { colorList: [ '#FFC000', - '#CF9C00', '#219BE5', - '#005082', '#00BB95', - '#008372', '#E37321', - '#A14E00', '#D360E5', + '#CF9C00', + '#005082', + '#008372', + '#A14E00', '#9515AA', ], other_table: '#808080', From 7fdc77030c621bdaa1d4139bfd5eebf82ce1be5e Mon Sep 17 00:00:00 2001 From: J <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Fri, 8 Jul 2022 09:42:06 +0200 Subject: [PATCH 3/3] Added alphabetical sorting (#4316) --- .../src/domain/variants/static-props/get-variant-chart-data.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts b/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts index 1cfcc15339..d12e394e12 100644 --- a/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts +++ b/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts @@ -26,7 +26,7 @@ export function getVariantChartData(variants: NlVariants | undefined) { return EMPTY_VALUES; } - const firstOccurences = variants.values.reduce>( + const firstOccurences = variants.values.sort().reverse().reduce>( (acc, x) => Object.assign(acc, { [x.name]: x.values.find((value) => value.percentage > 0)