From 25c273b693e1fe2dc7307b71ae5223005098617e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 10 Jan 2024 13:41:03 +0000 Subject: [PATCH 1/6] chore(deps): bump follow-redirects from 1.14.8 to 1.15.4 (#4965) --- yarn.lock | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/yarn.lock b/yarn.lock index 914b599135..274ceacaf6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18627,23 +18627,13 @@ __metadata: languageName: node linkType: hard -"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.2.4": - version: 1.14.8 - resolution: "follow-redirects@npm:1.14.8" +"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.2, follow-redirects@npm:^1.2.4": + version: 1.15.4 + resolution: "follow-redirects@npm:1.15.4" peerDependenciesMeta: debug: optional: true - checksum: 40c67899c2e3149a27e8b6498a338ff27f39fe138fde8d7f0756cb44b073ba0bfec3d52af28f20c5bdd67263d564d0d8d7b5efefd431de95c18c42f7b4aef457 - languageName: node - linkType: hard - -"follow-redirects@npm:^1.15.2": - version: 1.15.2 - resolution: "follow-redirects@npm:1.15.2" - peerDependenciesMeta: - debug: - optional: true - checksum: faa66059b66358ba65c234c2f2a37fcec029dc22775f35d9ad6abac56003268baf41e55f9ee645957b32c7d9f62baf1f0b906e68267276f54ec4b4c597c2b190 + checksum: e178d1deff8b23d5d24ec3f7a94cde6e47d74d0dc649c35fc9857041267c12ec5d44650a0c5597ef83056ada9ea6ca0c30e7c4f97dbf07d035086be9e6a5b7b6 languageName: node linkType: hard From 37afcba4228a33ee3d018cd5a07af9d083df4397 Mon Sep 17 00:00:00 2001 From: "Ben van Eekelen (work)" Date: Tue, 16 Jan 2024 09:22:24 +0100 Subject: [PATCH 2/6] feature/COR-1873-markup-links (#4966) * feat(COR-1873): Added chevrons to links in metadata * feat(COR-1873): Remove unused code * feat(COR-1873): Add chevron to behaviour table entries * feat(COR-1873): Made table columns minwidth adjustable * feat(COR-1873): Re-align column width on vaccine page tables * feat(COR-1873): Added underline on hover * feat(COR-1873): Add external icon to general metadata component --- packages/app/src/components/metadata.tsx | 3 +++ .../components/metadata.tsx | 16 ++++++---------- .../tables/components/wide-percentage-data.tsx | 10 +++++----- packages/app/src/components/tables/types.ts | 7 +++++++ .../app/src/components/tables/wide-table.tsx | 14 +++++++------- .../src/domain/behavior/behavior-table-tile.tsx | 5 +++++ .../components/behavior-icon-with-label.tsx | 4 +++- .../autumn-2022-shot-coverage-per-age-group.tsx | 5 +++++ .../primary-series-coverage-per-age-group.tsx | 5 +++++ 9 files changed, 46 insertions(+), 23 deletions(-) diff --git a/packages/app/src/components/metadata.tsx b/packages/app/src/components/metadata.tsx index 0df2b1ecee..c6bbf2df07 100644 --- a/packages/app/src/components/metadata.tsx +++ b/packages/app/src/components/metadata.tsx @@ -6,6 +6,8 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; import { Box } from './base'; import { InlineText, Text } from './typography'; import { Markdown } from '~/components/markdown'; +import { External as ExternalLinkIcon } from '@corona-dashboard/icons'; +import React from 'react'; type source = { text: string; @@ -59,6 +61,7 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m {`${dateString} - ${commonTexts.common.metadata.source}: `} {source.text} + )} diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx index ce5ff8b6bc..1ef36000e7 100644 --- a/packages/app/src/components/page-information-block/components/metadata.tsx +++ b/packages/app/src/components/page-information-block/components/metadata.tsx @@ -1,7 +1,7 @@ import { colors } from '@corona-dashboard/common'; -import { ChevronRight, Clock, Database, MeerInformatie } from '@corona-dashboard/icons'; +import { ChevronRight, Clock, Database, External as ExternalLinkIcon, MeerInformatie } from '@corona-dashboard/icons'; import css from '@styled-system/css'; -import { Fragment } from 'react'; +import React, { Fragment } from 'react'; import styled from 'styled-components'; import { Box } from '~/components/base'; import { ExternalLink } from '~/components/external-link'; @@ -9,6 +9,7 @@ import { Anchor, InlineText, Text } from '~/components/typography'; import { useIntl } from '~/intl'; import { Link } from '~/utils/link'; import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; +import { space } from '~/style/theme'; interface Datasource { href: string; @@ -112,18 +113,11 @@ interface MetadataItemProps { } function MetadataItem({ icon, label, items, referenceLink, accessibilityText, accessibilitySubject }: MetadataItemProps) { - const { commonTexts } = useIntl(); - return ( - + {icon} - {referenceLink && !items && ( - - {commonTexts.informatie_header.meer_informatie_link} - - )} {items && referenceLink && ( <> {`${label}: `} @@ -146,6 +140,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac {item.href && ( {item.text} + )} {!item.href && item.text} diff --git a/packages/app/src/components/tables/components/wide-percentage-data.tsx b/packages/app/src/components/tables/components/wide-percentage-data.tsx index 42b0d98dbe..925ce62e5f 100644 --- a/packages/app/src/components/tables/components/wide-percentage-data.tsx +++ b/packages/app/src/components/tables/components/wide-percentage-data.tsx @@ -2,21 +2,21 @@ import { Box } from '~/components/base'; import { BehaviorTrend } from '~/domain/behavior/components/behavior-trend'; import { WidePercentage } from '~/components/tables/components/wide-percentage'; import { space } from '~/style/theme'; -import { PercentageDataPoint } from '../types'; -import { tableColumnWidths } from '../wide-table'; +import { PercentageDataPoint, TableColumnWidths } from '../types'; import { PercentageBarWithoutNumber } from './percentage-bar-without-number'; import { Cell } from './shared-styled-components'; interface PercentageDataProps { percentageDataPoints: PercentageDataPoint[]; + columnWidths: TableColumnWidths; } // Component used to show percentages on wide screens. -export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => { +export const PercentageData = ({ percentageDataPoints, columnWidths }: PercentageDataProps) => { return ( <> {percentageDataPoints.map((percentageDataPoint, index) => ( - + ))} - + {percentageDataPoints.map((percentageDataPoint, index) => ( // In some cases, the percentage value is a string so it needs to be parsed for the progress bar to be filled properly. diff --git a/packages/app/src/components/tables/types.ts b/packages/app/src/components/tables/types.ts index 5a6539b56f..0611c47cfe 100644 --- a/packages/app/src/components/tables/types.ts +++ b/packages/app/src/components/tables/types.ts @@ -3,6 +3,12 @@ import { BehaviorTrendType } from '~/domain/behavior/logic/behavior-types'; type TrendDirection = BehaviorTrendType | null; +export type TableColumnWidths = { + labelColumn: string; + percentageColumn: string; + percentageBarColumn: string; +}; + export type PercentageDataPoint = { title: string; trendDirection?: TrendDirection; @@ -34,6 +40,7 @@ export interface TableData extends BaseTableData { export type BaseCoverageTable = BaseTableData; export interface CommonTableProps { + tableColumnWidths?: TableColumnWidths; tableData: SingleCoverageTableData[] | TableData[]; percentageData: PercentageDataPoint[][]; } diff --git a/packages/app/src/components/tables/wide-table.tsx b/packages/app/src/components/tables/wide-table.tsx index 24a9c09ea6..b9cde8553d 100644 --- a/packages/app/src/components/tables/wide-table.tsx +++ b/packages/app/src/components/tables/wide-table.tsx @@ -5,18 +5,18 @@ import { PercentageData } from './components/wide-percentage-data'; import { Cell, HeaderCell, Table, TableHead } from './components/shared-styled-components'; import { CommonTableProps } from './types'; -export const tableColumnWidths = { +interface WideTableProps extends CommonTableProps { + headerText: { [key: string]: string }; +} + +const defaultColumnWidths = { labelColumn: '30%', percentageColumn: '20%', percentageBarColumn: '30%', }; -interface WideTableProps extends CommonTableProps { - headerText: { [key: string]: string }; -} - // Component shown for tables on wide screens. -export const WideTable = ({ tableData, headerText, percentageData }: WideTableProps) => { +export const WideTable = ({ tableData, headerText, tableColumnWidths = defaultColumnWidths, percentageData }: WideTableProps) => { return ( @@ -47,7 +47,7 @@ export const WideTable = ({ tableData, headerText, percentageData }: WideTablePr {item.firstColumnLabel} - + ))} diff --git a/packages/app/src/domain/behavior/behavior-table-tile.tsx b/packages/app/src/domain/behavior/behavior-table-tile.tsx index ec75ccd3b6..8812e73d66 100644 --- a/packages/app/src/domain/behavior/behavior-table-tile.tsx +++ b/packages/app/src/domain/behavior/behavior-table-tile.tsx @@ -47,6 +47,11 @@ export const BehaviorTableTile = ({ title, description, value, annotation, setCu }} tableData={behaviorsTableData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '35%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( diff --git a/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx b/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx index 2d9b3947c5..0a4e1d0420 100644 --- a/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx +++ b/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx @@ -6,6 +6,7 @@ import { Anchor } from '~/components/typography'; import { fontWeights, mediaQueries, space } from '~/style/theme'; import { BehaviorIdentifier } from '../logic/behavior-types'; import { BehaviorIcon } from './behavior-icon'; +import { ChevronRight } from '@corona-dashboard/icons'; type ScrollRef = { current: HTMLDivElement | null }; @@ -33,8 +34,9 @@ export const BehaviorIconWithLabel = ({ id, description, onClickConfig }: Behavi anchorButtonClickHandler(id, onClickConfig.scrollRef)}> - + {description} + diff --git a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx index 906a2dce01..0204f0fff7 100644 --- a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx +++ b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx @@ -51,6 +51,11 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata }} tableData={sortedData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '10%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( diff --git a/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx index 493e434eba..447c403be3 100644 --- a/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx +++ b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx @@ -51,6 +51,11 @@ export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metad }} tableData={sortedData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '10%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( From d5cecd0d979bd34e1b4f89600765cf5de9a89621 Mon Sep 17 00:00:00 2001 From: "Ben van Eekelen (work)" Date: Tue, 16 Jan 2024 15:41:24 +0100 Subject: [PATCH 3/6] feat(COR-1875): Prevent gemeente dropdown from grabbing focus on gemeente overview page (#4968) --- packages/app/src/domain/layout/gm-layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/domain/layout/gm-layout.tsx b/packages/app/src/domain/layout/gm-layout.tsx index 999782c413..26538d7be0 100644 --- a/packages/app/src/domain/layout/gm-layout.tsx +++ b/packages/app/src/domain/layout/gm-layout.tsx @@ -77,7 +77,7 @@ export function GmLayout(props: GmLayoutProps) { hideBackButton={isMainRoute} searchComponent={ - + } sidebarComponent={ From 4770e6c4d241acfb9156b1c93a22314ce2416462 Mon Sep 17 00:00:00 2001 From: M <120020483+VWSCoronaDashboard30@users.noreply.github.com> Date: Thu, 18 Jan 2024 08:43:22 +0100 Subject: [PATCH 4/6] feature(COR-1874): Corrected Articles, Over, Toegankelijkheid, Veelgestelde-vragen pages (#4969) --- packages/app/src/domain/layout/layout.tsx | 10 ++-- packages/app/src/pages/artikelen/index.tsx | 30 +++++----- packages/app/src/pages/over.tsx | 19 ++++--- packages/app/src/pages/toegankelijkheid.tsx | 57 ++++++------------- .../app/src/pages/veelgestelde-vragen.tsx | 43 +++++++------- 5 files changed, 70 insertions(+), 89 deletions(-) diff --git a/packages/app/src/domain/layout/layout.tsx b/packages/app/src/domain/layout/layout.tsx index 3551d17395..d84fb1747c 100644 --- a/packages/app/src/domain/layout/layout.tsx +++ b/packages/app/src/domain/layout/layout.tsx @@ -1,14 +1,14 @@ -import { ReactNode } from 'react'; +import { AppFooter } from '~/components/layout/app-footer'; +import { AppHeader } from '~/components/layout/app-header'; import { Box } from '~/components/base/box'; import { Breadcrumbs } from '~/components/breadcrumbs'; import { BreadcrumbsDataProvider } from '~/components/breadcrumbs/logic/use-breadcrumbs'; -import { AppFooter } from '~/components/layout/app-footer'; -import { AppHeader } from '~/components/layout/app-header'; +import { CurrentDateProvider } from '~/utils/current-date-context'; import { NotificationBanner } from '~/components/notification-banner'; +import { ReactNode } from 'react'; import { SEOHead } from '~/components/seo-head'; import { SkipLinkMenu } from '~/components/skip-link-menu'; import { useIntl } from '~/intl'; -import { CurrentDateProvider } from '~/utils/current-date-context'; interface LayoutProps { children: ReactNode; @@ -30,12 +30,12 @@ export function Layout({ breadcrumbsData, children, title, description, openGrap ({ textShared: siteText.pages.topical_page.shared, @@ -99,7 +99,7 @@ const Articles = (props: StaticProps) => { return ( - + diff --git a/packages/app/src/pages/over.tsx b/packages/app/src/pages/over.tsx index 7c48cc01d8..23964aef90 100644 --- a/packages/app/src/pages/over.tsx +++ b/packages/app/src/pages/over.tsx @@ -1,17 +1,18 @@ -import Head from 'next/head'; -import styled from 'styled-components'; import { Box } from '~/components/base'; import { ContentImage } from '~/components/cms/content-image'; -import { RichContent } from '~/components/cms/rich-content'; +import { ContentLayout } from '~/domain/layout/content-layout'; +import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; import { FullscreenChartTile } from '~/components/fullscreen-chart-tile'; import { Heading } from '~/components/typography'; -import { ContentLayout } from '~/domain/layout/content-layout'; +import { ImageBlock, RichContentBlock } from '~/types/cms'; import { Layout } from '~/domain/layout/layout'; -import { useIntl } from '~/intl'; -import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; -import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; import { mediaQueries, sizes, space } from '~/style/theme'; -import { ImageBlock, RichContentBlock } from '~/types/cms'; +import { RichContent } from '~/components/cms/rich-content'; +import { useIntl } from '~/intl'; +import Head from 'next/head'; +import styled from 'styled-components'; + interface OverData { title: string | null; intro: RichContentBlock[]; @@ -66,7 +67,7 @@ const Over = (props: StaticProps) => { - + {content.title} diff --git a/packages/app/src/pages/toegankelijkheid.tsx b/packages/app/src/pages/toegankelijkheid.tsx index 6b5c081b44..9169558607 100644 --- a/packages/app/src/pages/toegankelijkheid.tsx +++ b/packages/app/src/pages/toegankelijkheid.tsx @@ -1,20 +1,15 @@ -import css from '@styled-system/css'; -import Head from 'next/head'; -import styled from 'styled-components'; -import { RichContent } from '~/components/cms/rich-content'; -import { Heading } from '~/components/typography'; +import { Box } from '~/components/base'; import { Content } from '~/domain/layout/content'; +import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; +import { Heading } from '~/components/typography'; import { Layout } from '~/domain/layout/layout'; -import { useIntl } from '~/intl'; -import { - createGetStaticProps, - StaticProps, -} from '~/static-props/create-get-static-props'; -import { - createGetContent, - getLastGeneratedDate, -} from '~/static-props/get-data'; +import { RichContent } from '~/components/cms/rich-content'; import { RichContentBlock } from '~/types/cms'; +import { useIntl } from '~/intl'; +import css from '@styled-system/css'; +import Head from 'next/head'; +import styled from 'styled-components'; interface AccessibilityPageData { title: string | null; @@ -52,33 +47,17 @@ const AccessibilityPage = (props: StaticProps) => { const { content, lastGenerated } = props; return ( - + - - + + - - - {content.title && {content.title}} - {content.description && ( - - )} - + + + {content.title && {content.title}} + {content.description && } + + ); }; diff --git a/packages/app/src/pages/veelgestelde-vragen.tsx b/packages/app/src/pages/veelgestelde-vragen.tsx index 331d3e25b2..3ea8793cb9 100644 --- a/packages/app/src/pages/veelgestelde-vragen.tsx +++ b/packages/app/src/pages/veelgestelde-vragen.tsx @@ -1,17 +1,17 @@ -import groupBy from 'lodash/groupBy'; -import Head from 'next/head'; -import styled from 'styled-components'; import { Box } from '~/components/base/box'; -import { RichContent } from '~/components/cms/rich-content'; +import { ContentLayout } from '~/domain/layout/content-layout'; +import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; +import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; import { FaqSection } from '~/components/faq/faq-section'; +import { FAQuestionAndAnswer, RichContentBlock } from '~/types/cms'; import { Heading } from '~/components/typography'; -import { ContentLayout } from '~/domain/layout/content-layout'; import { Layout } from '~/domain/layout/layout'; -import { useIntl } from '~/intl'; -import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; -import { createGetContent, getLastGeneratedDate } from '~/static-props/get-data'; import { mediaQueries, sizes, space } from '~/style/theme'; -import { FAQuestionAndAnswer, RichContentBlock } from '~/types/cms'; +import { RichContent } from '~/components/cms/rich-content'; +import { useIntl } from '~/intl'; +import groupBy from 'lodash/groupBy'; +import Head from 'next/head'; +import styled from 'styled-components'; interface VeelgesteldeVragenData { title: string | null; @@ -74,20 +74,21 @@ const Verantwoording = (props: StaticProps) => { + + + {content.title && ( + + {content.title} + + )} + {content.description && } + - - {content.title && ( - - {content.title} - - )} - {content.description && } + + + + - - - - - ); From 608e7f069134499a19b078c06d69d9b5cdf9d039 Mon Sep 17 00:00:00 2001 From: "Ben van Eekelen (work)" Date: Thu, 18 Jan 2024 17:11:09 +0100 Subject: [PATCH 5/6] feature/COR-1857-refactor-order-of-variants (#4967) * feat(COR-1857): Reversed variants in graph and legend items * feat(COR-1857): Add logic for tooltip * feat(COR-1857): Removed newline * feat(COR-1857): Reorder tooltip * feat(COR-1857): Make mechanism for putting other variants at end more elegant * feat(COR-1857): Remove todo and skeleton code * feat(COR-1857): Add ordering based on rank in tooltip --- .../time-series-chart/logic/series.ts | 1 + .../get-variant-bar-chart-data.ts | 2 +- .../data-selection/get-variant-orders.ts | 21 +++++++++++++++ .../domain/variants/data-selection/index.ts | 1 + .../domain/variants/data-selection/types.ts | 5 ++++ .../variants/logic/reorder-and-filter.ts | 27 ++++++++++++++----- .../domain/variants/logic/use-bar-config.ts | 8 ++++-- .../variants-stacked-bar-chart-tile.tsx | 26 ++++++++++++------ .../app/src/pages/landelijk/varianten.tsx | 7 ++++- 9 files changed, 80 insertions(+), 18 deletions(-) create mode 100644 packages/app/src/domain/variants/data-selection/get-variant-orders.ts diff --git a/packages/app/src/components/time-series-chart/logic/series.ts b/packages/app/src/components/time-series-chart/logic/series.ts index 8bbbd580b2..1c29fbb654 100644 --- a/packages/app/src/components/time-series-chart/logic/series.ts +++ b/packages/app/src/components/time-series-chart/logic/series.ts @@ -186,6 +186,7 @@ export interface StackedBarSeriesDefinition extends shortLabel?: string; color: string; fillOpacity?: number; + order: number; } /** 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 index 64cd45edcb..1d633ff2d1 100644 --- 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 @@ -20,7 +20,7 @@ export function getVariantBarChartData(variants: NlVariants) { return EMPTY_VALUES; } - const sortedVariants = variants.values.sort((a, b) => b.last_value.order - a.last_value.order); + const sortedVariants = variants.values.sort((a, b) => a.last_value.order - b.last_value.order); const firstVariantInList = sortedVariants.shift(); diff --git a/packages/app/src/domain/variants/data-selection/get-variant-orders.ts b/packages/app/src/domain/variants/data-selection/get-variant-orders.ts new file mode 100644 index 0000000000..d3a6a5d4eb --- /dev/null +++ b/packages/app/src/domain/variants/data-selection/get-variant-orders.ts @@ -0,0 +1,21 @@ +import { NlVariants } from '@corona-dashboard/common'; +import { OrderMatch } from '~/domain/variants/data-selection/types'; +import { isDefined } from 'ts-is-present'; + +export const getVariantOrders = (variants: NlVariants): OrderMatch[] => { + if (!isDefined(variants) || !isDefined(variants.values)) { + return []; + } + + const order = variants.values + .sort((a, b) => a.last_value.order - b.last_value.order) + .map((variant) => { + const variantOrder = variant.last_value.order; + return { + variant: variant.variant_code, + order: variantOrder, + }; + }); + + return order; +}; diff --git a/packages/app/src/domain/variants/data-selection/index.ts b/packages/app/src/domain/variants/data-selection/index.ts index 7589614493..4e7e3b7772 100644 --- a/packages/app/src/domain/variants/data-selection/index.ts +++ b/packages/app/src/domain/variants/data-selection/index.ts @@ -2,3 +2,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'; +export * from './get-variant-orders'; diff --git a/packages/app/src/domain/variants/data-selection/types.ts b/packages/app/src/domain/variants/data-selection/types.ts index 682bbc6651..79a9f442d1 100644 --- a/packages/app/src/domain/variants/data-selection/types.ts +++ b/packages/app/src/domain/variants/data-selection/types.ts @@ -9,6 +9,11 @@ export type ColorMatch = { color: string; }; +export type OrderMatch = { + variant: VariantCode; + order: number; +}; + export type VariantTableData = ReturnType; export type VariantChartValue = { diff --git a/packages/app/src/domain/variants/logic/reorder-and-filter.ts b/packages/app/src/domain/variants/logic/reorder-and-filter.ts index 983bb63249..3d4b7cdaf7 100644 --- a/packages/app/src/domain/variants/logic/reorder-and-filter.ts +++ b/packages/app/src/domain/variants/logic/reorder-and-filter.ts @@ -17,18 +17,33 @@ const hasMetricProperty = (config: any): config is { metricProperty: string } => * @param selectionOptions - Currently selected variants */ export const reorderAndFilter = (context: TooltipData, selectionOptions: P[]) => { - const hasSelectedMetrics = context.config.length !== selectionOptions.length; // Check whether the user has selected any variants from the interactive legend. + const filterSelectionActive = 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( + // If the user has no filter selected -> Filter out any variants that have an occurrence value of 0 + const valuesFromContext = Object.fromEntries( Object.entries(context.value).filter(([key, value]) => (key.includes('occurrence') ? value !== 0 && isPresent(value) && !isNaN(Number(value)) : value)) ) as VariantChartValue; - /* Rebuild tooltip data context with filtered values */ + // If the user has no filter selected -> Filter out configs that do not contain a 'metricProperty' key OR have an occurrence value of 0 + const filteredConfigs = context.config + .filter((value) => { + return !hasMetricProperty(value) || valuesFromContext[value.metricProperty] || filterSelectionActive; + }) + .filter(isDefined); + + // Sort variants by occurrence, always put 'other variants' at the end + const sortedConfigs = filteredConfigs.sort((a: any, b: any) => { + if (a.metricProperty.includes('other_variants')) return 1; + if (b.metricProperty.includes('other_variants')) return -1; + if (context.value[a.metricProperty] === context.value[b.metricProperty]) return b.order - a.order; + return context.value[b.metricProperty] - context.value[a.metricProperty]; + }); + + // Generate filtered tooltip context const reorderContext = { ...context, - config: [...context.config.filter((value) => !hasMetricProperty(value) || filteredValues[value.metricProperty] || hasSelectedMetrics)].filter(isDefined), - value: !hasSelectedMetrics ? filteredValues : context.value, + config: sortedConfigs, + value: !filterSelectionActive ? valuesFromContext : context.value, }; return reorderContext as TooltipData; diff --git a/packages/app/src/domain/variants/logic/use-bar-config.ts b/packages/app/src/domain/variants/logic/use-bar-config.ts index 966d672936..2ee46bc239 100644 --- a/packages/app/src/domain/variants/logic/use-bar-config.ts +++ b/packages/app/src/domain/variants/logic/use-bar-config.ts @@ -1,4 +1,4 @@ -import { ColorMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types'; +import { ColorMatch, OrderMatch, 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'; @@ -25,6 +25,7 @@ export const useBarConfig = ( variantLabels: VariantDynamicLabels, tooltipLabels: VariantsOverTimeGraphText, colors: ColorMatch[], + orders: OrderMatch[], timeframe: TimeframeOption, today: Date ) => { @@ -54,6 +55,8 @@ export const useBarConfig = ( const color = colors.find((variantColors) => variantColors.variant === variantCodeName)?.color; + const order = orders.find((varianOrders) => varianOrders.variant === variantCodeName)?.order; + if (variantDynamicLabel) { const barChartConfigEntry = { type: 'stacked-bar', @@ -62,6 +65,7 @@ export const useBarConfig = ( label: variantDynamicLabel, fillOpacity: 1, shape: 'gapped-area', + order: order, }; barChartConfig.push(barChartConfigEntry as StackedBarSeriesDefinition); @@ -69,5 +73,5 @@ export const useBarConfig = ( }); return barChartConfig; - }, [values, tooltipLabels.tooltip_labels.other_percentage, variantLabels, colors, timeframe, today]); + }, [values, tooltipLabels.tooltip_labels.other_percentage, variantLabels, colors, orders, timeframe, today]); }; 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 index 85116b018c..07aff84a78 100644 --- a/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx +++ b/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx @@ -2,7 +2,7 @@ import { ChartTile, MetadataProps, TimeSeriesChart } from '~/components'; import { Spacer } from '~/components/base'; import { TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common'; import { useState } from 'react'; -import { ColorMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types'; +import { ColorMatch, OrderMatch, VariantChartValue, VariantDynamicLabels, VariantsOverTimeGraphText } from '~/domain/variants/data-selection/types'; import { useBarConfig } from '~/domain/variants/logic/use-bar-config'; import { InteractiveLegend, SelectOption } from '~/components/interactive-legend'; import { useList } from '~/utils/use-list'; @@ -13,13 +13,14 @@ import { reorderAndFilter } from '~/domain/variants/logic/reorder-and-filter'; import { useIntl } from '~/intl'; interface VariantsStackedBarChartTileProps { - title: string; description: string; - values: VariantChartValue[]; + metadata: MetadataProps; + title: string; tooltipLabels: VariantsOverTimeGraphText; - variantLabels: VariantDynamicLabels; + values: VariantChartValue[]; variantColors: ColorMatch[]; - metadata: MetadataProps; + variantLabels: VariantDynamicLabels; + variantOrders: OrderMatch[]; } const alwaysEnabled: (keyof VariantChartValue)[] = []; @@ -35,12 +36,21 @@ const alwaysEnabled: (keyof VariantChartValue)[] = []; * @param metadata - Metadata block * @constructor */ -export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels, values, variantLabels, variantColors, metadata }: VariantsStackedBarChartTileProps) => { +export const VariantsStackedBarChartTile = ({ + title, + description, + tooltipLabels, + values, + variantLabels, + variantColors, + variantOrders, + metadata, +}: VariantsStackedBarChartTileProps) => { const today = useCurrentDate(); const { commonTexts } = useIntl(); const { list, toggle, clear } = useList(alwaysEnabled); const [variantTimeFrame, setVariantTimeFrame] = useState(TimeframeOption.THIRTY_DAYS); - const barSeriesConfig = useBarConfig(values, variantLabels, tooltipLabels, variantColors, variantTimeFrame, today); + const barSeriesConfig = useBarConfig(values, variantLabels, tooltipLabels, variantColors, variantOrders, variantTimeFrame, today); const text = commonTexts.variants_page; @@ -59,7 +69,7 @@ export const VariantsStackedBarChartTile = ({ title, description, tooltipLabels, timeframeInitialValue={TimeframeOption.THIRTY_DAYS} onSelectTimeframe={setVariantTimeFrame} > - + { @@ -83,6 +86,7 @@ export default function CovidVariantenPage(props: StaticProps Date: Fri, 19 Jan 2024 12:22:56 +0100 Subject: [PATCH 6/6] COR-1895: archive vaccine keys (#4970) * move over vaccine_administered_last_timeframe and vaccine_campaigns to vaccine_administered_last_timeframe_archived_20241701 and vaccine_campaigns_archived_20241701 * change cms constant * feature(COR-1895): PR comment resolution * feature (COR_1895): remove selectNlData --- packages/app/schema/archived_nl/__index.json | 10 +++- .../vaccine_administered_last_timeframe.json | 2 +- .../vaccine_campaigns.json | 4 +- packages/app/schema/nl/__index.json | 8 --- .../app/src/pages/landelijk/de-coronaprik.tsx | 40 +++++++------- packages/cms/src/studio/constants.ts | 2 +- packages/common/src/types/data.ts | 54 +++++++++---------- 7 files changed, 58 insertions(+), 62 deletions(-) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_last_timeframe.json (93%) rename packages/app/schema/{nl => archived_nl}/vaccine_campaigns.json (93%) diff --git a/packages/app/schema/archived_nl/__index.json b/packages/app/schema/archived_nl/__index.json index 3a97c6959a..9331f93574 100644 --- a/packages/app/schema/archived_nl/__index.json +++ b/packages/app/schema/archived_nl/__index.json @@ -51,7 +51,9 @@ "repeating_shot_administered_20220713", "corona_melder_app_warning_archived_20220421", "corona_melder_app_download_archived_20220421", - "infectious_people_archived_20210709" + "infectious_people_archived_20210709", + "vaccine_campaigns_archived_20240117", + "vaccine_administered_last_timeframe_archived_20240117" ], "additionalProperties": false, "properties": { @@ -201,6 +203,12 @@ }, "infectious_people_archived_20210709": { "$ref": "infectious_people.json" + }, + "vaccine_administered_last_timeframe_archived_20240117": { + "$ref": "vaccine_administered_last_timeframe.json" + }, + "vaccine_campaigns_archived_20240117": { + "$ref": "vaccine_campaigns.json" } }, "$defs": { diff --git a/packages/app/schema/nl/vaccine_administered_last_timeframe.json b/packages/app/schema/archived_nl/vaccine_administered_last_timeframe.json similarity index 93% rename from packages/app/schema/nl/vaccine_administered_last_timeframe.json rename to packages/app/schema/archived_nl/vaccine_administered_last_timeframe.json index d25494eea5..d2a298371b 100644 --- a/packages/app/schema/nl/vaccine_administered_last_timeframe.json +++ b/packages/app/schema/archived_nl/vaccine_administered_last_timeframe.json @@ -16,7 +16,7 @@ } }, "$schema": "http://json-schema.org/draft-07/schema#", - "title": "nl_vaccine_administered_last_timeframe", + "title": "archived_nl_vaccine_administered_last_timeframe", "type": "object", "required": ["vaccine_types", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"], "additionalProperties": false, diff --git a/packages/app/schema/nl/vaccine_campaigns.json b/packages/app/schema/archived_nl/vaccine_campaigns.json similarity index 93% rename from packages/app/schema/nl/vaccine_campaigns.json rename to packages/app/schema/archived_nl/vaccine_campaigns.json index 0c752f82a2..c863a54573 100644 --- a/packages/app/schema/nl/vaccine_campaigns.json +++ b/packages/app/schema/archived_nl/vaccine_campaigns.json @@ -1,7 +1,7 @@ { "definitions": { "vaccine_campaign": { - "title": "nl_vaccine_campaigns", + "title": "archived_nl_vaccine_campaigns", "type": "object", "required": ["vaccine_campaign_order", "vaccine_campaign_name_nl", "vaccine_campaign_name_en", "vaccine_administered_total", "vaccine_administered_last_timeframe"], "additionalProperties": false, @@ -25,7 +25,7 @@ } }, "$schema": "http://json-schema.org/draft-07/schema#", - "title": "nl_vaccine_campaign", + "title": "archived_nl_vaccine_campaign", "type": "object", "required": ["vaccine_campaigns", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"], "additionalProperties": false, diff --git a/packages/app/schema/nl/__index.json b/packages/app/schema/nl/__index.json index 86c6e693f1..41893f8d87 100644 --- a/packages/app/schema/nl/__index.json +++ b/packages/app/schema/nl/__index.json @@ -19,8 +19,6 @@ "self_test_overall", "infectionradar_symptoms_trend_per_age_group_weekly", "sewer", - "vaccine_campaigns", - "vaccine_administered_last_timeframe", "variants" ], "additionalProperties": false, @@ -67,12 +65,6 @@ "deceased_cbs": { "$ref": "deceased_cbs.json" }, - "vaccine_administered_last_timeframe": { - "$ref": "vaccine_administered_last_timeframe.json" - }, - "vaccine_campaigns": { - "$ref": "vaccine_campaigns.json" - }, "variants": { "$ref": "variants.json" }, diff --git a/packages/app/src/pages/landelijk/de-coronaprik.tsx b/packages/app/src/pages/landelijk/de-coronaprik.tsx index 6003cfbc21..94e1ec7015 100644 --- a/packages/app/src/pages/landelijk/de-coronaprik.tsx +++ b/packages/app/src/pages/landelijk/de-coronaprik.tsx @@ -36,15 +36,7 @@ import { Languages, SiteText } from '~/locale'; import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query'; import { getArticleParts, getDataExplainedParts, getFaqParts, getLinkParts, getPagePartsQuery, getRichTextParts } from '~/queries/get-page-parts-query'; import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props'; -import { - createGetArchivedChoroplethData, - createGetContent, - getArchivedNlData, - getLastGeneratedDate, - getLokalizeTexts, - selectArchivedNlData, - selectNlData, -} from '~/static-props/get-data'; +import { createGetArchivedChoroplethData, createGetContent, getArchivedNlData, getLastGeneratedDate, getLokalizeTexts, selectArchivedNlData } from '~/static-props/get-data'; import { ArticleParts, LinkParts, PagePartQueryResult, RichTextParts } from '~/types/cms'; import { replaceVariablesInText, useFormatLokalizePercentage } from '~/utils'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; @@ -57,7 +49,6 @@ const pageMetrics = [ 'vaccine_administered_hospitals_and_care_institutions', 'vaccine_administered_planned_archived_20231004', 'vaccine_administered_total_archived_20220324', - 'vaccine_administered_last_timeframe', 'vaccine_coverage_per_age_group', 'vaccine_coverage_archived_20220518', 'vaccine_delivery_per_supplier_archived_20211101', @@ -65,17 +56,17 @@ const pageMetrics = [ 'vaccine_vaccinated_or_support_archived_20230411', 'vaccine_coverage_per_age_group_estimated_fully_vaccinated', 'vaccine_coverage_per_age_group_estimated_autumn_2022', - 'vaccine_campaigns', 'vaccine_planned_archived_20220908', 'booster_coverage_archived_20220904', 'booster_shot_administered_archived_20220904', 'repeating_shot_administered_20220713', + 'vaccine_administered_last_timeframe_archived_20240117', + 'vaccine_campaigns_archived_20240117', ]; export const getStaticProps = createGetStaticProps( ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, - selectNlData('vaccine_administered_last_timeframe', 'vaccine_campaigns'), selectArchivedNlData( 'vaccine_administered_doctors_archived_20220324', 'vaccine_administered_hospitals_and_care_institutions_archived_20220324', @@ -96,7 +87,9 @@ export const getStaticProps = createGetStaticProps( 'vaccine_coverage_archived_20220518', 'vaccine_delivery_per_supplier_archived_20211101', 'vaccine_stock_archived_20211024', - 'vaccine_vaccinated_or_support_archived_20230411' + 'vaccine_vaccinated_or_support_archived_20230411', + 'vaccine_administered_last_timeframe_archived_20240117', + 'vaccine_campaigns_archived_20240117' ), () => selectAdministrationData(getArchivedNlData().data.vaccine_administered_archived_20220914), async (context: GetStaticPropsContext) => { @@ -138,7 +131,7 @@ const selectLokalizeTexts = (siteText: SiteText) => ({ type LokalizeTexts = ReturnType; function VaccinationPage(props: StaticProps) { - const { content, archivedChoropleth, selectedNlData: currentData, selectedArchivedNlData: archivedData, lastGenerated, administrationData } = props; + const { content, archivedChoropleth, selectedArchivedNlData: archivedData, lastGenerated, administrationData } = props; const { commonTexts } = useIntl(); const reverseRouter = useReverseRouter(); @@ -169,7 +162,7 @@ function VaccinationPage(props: StaticProps) { const hasActiveWarningTile = textNl.belangrijk_bericht && !isEmpty(textNl.belangrijk_bericht); - const lastInsertionDateOfPage = getLastInsertionDateOfPage(currentData, pageMetrics); + const lastInsertionDateOfPage = getLastInsertionDateOfPage(archivedData, pageMetrics); return ( @@ -200,15 +193,15 @@ function VaccinationPage(props: StaticProps) { { title: textNl.kpi_vaccinaties_de_coronaprik.tile_amount_administered_last_timeframe.title, description: textNl.kpi_vaccinaties_de_coronaprik.tile_amount_administered_last_timeframe.omschrijving, - value: currentData.vaccine_campaigns.vaccine_campaigns[0].vaccine_administered_last_timeframe, - dateOrRange: { start: currentData.vaccine_campaigns.date_start_unix, end: currentData.vaccine_campaigns.date_end_unix }, + value: archivedData.vaccine_campaigns_archived_20240117.vaccine_campaigns[0].vaccine_administered_last_timeframe, + dateOrRange: { start: archivedData.vaccine_campaigns_archived_20240117.date_start_unix, end: archivedData.vaccine_campaigns_archived_20240117.date_end_unix }, source: textShared.bronnen.rivm, }, { title: textNl.kpi_vaccinaties_de_coronaprik.tile_amount_administered_total.title, description: textNl.kpi_vaccinaties_de_coronaprik.tile_amount_administered_total.omschrijving, - value: currentData.vaccine_campaigns.vaccine_campaigns[0].vaccine_administered_total, - dateOrRange: currentData.vaccine_campaigns.date_unix, + value: archivedData.vaccine_campaigns_archived_20240117.vaccine_campaigns[0].vaccine_administered_total, + dateOrRange: archivedData.vaccine_campaigns_archived_20240117.date_unix, source: textShared.bronnen.rivm, }, ]} @@ -217,11 +210,14 @@ function VaccinationPage(props: StaticProps) { diff --git a/packages/cms/src/studio/constants.ts b/packages/cms/src/studio/constants.ts index f7c2d10cff..3bbfd3ddfd 100644 --- a/packages/cms/src/studio/constants.ts +++ b/packages/cms/src/studio/constants.ts @@ -44,7 +44,7 @@ export const titleByMetricName: Partial> = { vaccine_administered_total_archived_20220324: 'Totaal aantal gezette prikken', vaccine_administered_archived_20220914: 'Gezette prikken', vaccine_campaigns_archived_20220908: 'Vaccinatie campagnes (archief per 08-09-2022)', - vaccine_campaigns: 'Vaccinatie campagnes', + vaccine_campaigns_archived_20240117: 'Vaccinatie campagnes', vaccine_coverage_per_age_group_archived_20220908: 'Vaccinatiegraad (per leeftijd) (archief per 08-09-2022)', vaccine_coverage_per_age_group_archived_20220622: 'Vaccinatiegraad (per leeftijd) (archief)', vaccine_coverage_per_age_group_estimated_archived_20220908: 'Vaccinatiegraad berekend (per leeftijd) (archief 08-09-2022)', diff --git a/packages/common/src/types/data.ts b/packages/common/src/types/data.ts index 218c4c5cc0..812c8e8af9 100644 --- a/packages/common/src/types/data.ts +++ b/packages/common/src/types/data.ts @@ -236,6 +236,8 @@ export interface ArchivedNl { corona_melder_app_warning_archived_20220421: ArchivedNlCoronaMelderAppWarning; corona_melder_app_download_archived_20220421: ArchivedNlCoronaMelderAppDownload; infectious_people_archived_20210709: ArchivedNlInfectiousPeople; + vaccine_administered_last_timeframe_archived_20240117: ArchivedNlVaccineAdministeredLastTimeframe; + vaccine_campaigns_archived_20240117: ArchivedNlVaccineCampaign; } export interface ArchivedNlDifference { deceased_rivm__covid_daily_archived_20221231: DifferenceInteger; @@ -892,6 +894,31 @@ export interface ArchivedNlInfectiousPeopleValue { date_unix: number; date_of_insertion_unix: number; } +export interface ArchivedNlVaccineAdministeredLastTimeframe { + vaccine_types: NlVaccineType[]; + date_unix: number; + date_start_unix: number; + date_end_unix: number; + date_of_insertion_unix: number; +} +export interface NlVaccineType { + vaccine_type_name: string; + vaccine_type_value: number; +} +export interface ArchivedNlVaccineCampaign { + vaccine_campaigns: ArchivedNlVaccineCampaigns[]; + date_unix: number; + date_start_unix: number; + date_end_unix: number; + date_of_insertion_unix: number; +} +export interface ArchivedNlVaccineCampaigns { + vaccine_campaign_order: number; + vaccine_campaign_name_nl: string; + vaccine_campaign_name_en: string; + vaccine_administered_total: number | null; + vaccine_administered_last_timeframe: number; +} export type ArchivedVrCollectionId = 'VR_COLLECTION'; @@ -1050,8 +1077,6 @@ export interface Nl { hospital_lcps: NlHospitalLcps; intensive_care_lcps: NlIntensiveCareLcps; deceased_cbs: NlDeceasedCbs; - vaccine_administered_last_timeframe: NlVaccineAdministeredLastTimeframe; - vaccine_campaigns: NlVaccineCampaign; variants: NlVariants; self_test_overall: NlSelfTestOverall; infectionradar_symptoms_trend_per_age_group_weekly: NlInfectionradarSymptomsTrendPerAgeGroupWeekly; @@ -1199,31 +1224,6 @@ export interface NlDeceasedCbsValue { date_end_unix: number; date_of_insertion_unix: number; } -export interface NlVaccineAdministeredLastTimeframe { - vaccine_types: NlVaccineType[]; - date_unix: number; - date_start_unix: number; - date_end_unix: number; - date_of_insertion_unix: number; -} -export interface NlVaccineType { - vaccine_type_name: string; - vaccine_type_value: number; -} -export interface NlVaccineCampaign { - vaccine_campaigns: NlVaccineCampaigns[]; - date_unix: number; - date_start_unix: number; - date_end_unix: number; - date_of_insertion_unix: number; -} -export interface NlVaccineCampaigns { - vaccine_campaign_order: number; - vaccine_campaign_name_nl: string; - vaccine_campaign_name_en: string; - vaccine_administered_total: number | null; - vaccine_administered_last_timeframe: number; -} export interface NlVariants { values: NlVariantsVariant[]; }