From f75b51b407a85ec564edd5fdd2a2bcf73d89e563 Mon Sep 17 00:00:00 2001 From: J <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Mon, 18 Sep 2023 13:35:48 +0200 Subject: [PATCH] Feature/cor 1563 refactor text keys in kpi to markdown (#4867) * fix: deleted unused component * fix: Create markdown consistency in KPI tiles --- .../components/kpi/bordered-kpi-section.tsx | 9 +- packages/app/src/domain/vaccine/index.ts | 1 - .../vaccine/vaccinations-shot-kpi-section.tsx | 20 +-- .../vaccine-administrations-kpi-section.tsx | 139 ------------------ .../vaccine/vaccine-coverage-toggle-tile.tsx | 2 +- .../src/pages/gemeente/[code]/rioolwater.tsx | 4 +- .../app/src/pages/gemeente/[code]/sterfte.tsx | 6 +- .../src/pages/landelijk/reproductiegetal.tsx | 3 +- packages/app/src/pages/landelijk/sterfte.tsx | 6 +- 9 files changed, 14 insertions(+), 176 deletions(-) delete mode 100644 packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx diff --git a/packages/app/src/components/kpi/bordered-kpi-section.tsx b/packages/app/src/components/kpi/bordered-kpi-section.tsx index 3f9041ade6..c7935e64d6 100644 --- a/packages/app/src/components/kpi/bordered-kpi-section.tsx +++ b/packages/app/src/components/kpi/bordered-kpi-section.tsx @@ -3,11 +3,11 @@ import styled from 'styled-components'; import { Box } from '~/components/base'; import { mediaQueries, space } from '~/style/theme'; import { KpiTile } from '../kpi-tile'; -import { Metadata, MetadataProps } from '../metadata'; +import { MetadataProps } from '../metadata'; import { TwoKpiSection } from '../two-kpi-section'; -import { Text } from '../typography'; import { KpiContent } from './components/kpi-content'; import { BorderedKpiSectionProps } from './types'; +import { Markdown } from '../markdown'; export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData }: BorderedKpiSectionProps) => { const metadata: MetadataProps = { @@ -16,8 +16,8 @@ export const BorderedKpiSection = ({ title, description, source, dateOrRange, ti }; return ( - - {description} + + {tilesData.map((tile, index) => ( @@ -25,7 +25,6 @@ export const BorderedKpiSection = ({ title, description, source, dateOrRange, ti ))} - ); }; diff --git a/packages/app/src/domain/vaccine/index.ts b/packages/app/src/domain/vaccine/index.ts index 308025c30a..d6d4fab7e8 100644 --- a/packages/app/src/domain/vaccine/index.ts +++ b/packages/app/src/domain/vaccine/index.ts @@ -3,7 +3,6 @@ export { BoosterShotCoveragePerAgeGroup } from './booster-shot-coverage-per-age- export { Autumn2022ShotCoveragePerAgeGroup } from './autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group'; export { VaccinationsOverTimeTile } from './vaccinations-over-time-tile'; export { VaccineBoosterAdministrationsKpiSection } from './vaccine-booster-administrations-kpi-section'; -export { VaccineAdministrationsKpiSection } from './vaccine-administrations-kpi-section'; export { VaccinationsShotKpiSection } from './vaccinations-shot-kpi-section'; export { VaccinationsKpiHeader } from './vaccinations-kpi-header'; export { VaccineCoverageChoropleth } from './vaccine-coverage-choropleth'; diff --git a/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx b/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx index b08e3467d1..fed43dc2a4 100644 --- a/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx +++ b/packages/app/src/domain/vaccine/vaccinations-shot-kpi-section.tsx @@ -1,13 +1,5 @@ import { useIntl } from '~/intl'; -import { - KpiTile, - KpiValue, - Markdown, - TwoKpiSection, - Metadata, - Message, - MetadataProps, -} from '~/components'; +import { KpiTile, KpiValue, TwoKpiSection, Message, MetadataProps } from '~/components'; import { Box } from '~/components/base'; type SourceType = { @@ -29,19 +21,13 @@ interface VaccinationsShotKpiSectionProps { metadata: MetadataProps; } -export function VaccinationsShotKpiSection({ - text, - value, - metadata, -}: VaccinationsShotKpiSectionProps) { +export function VaccinationsShotKpiSection({ text, value, metadata }: VaccinationsShotKpiSectionProps) { const { formatNumber } = useIntl(); return ( - + - {text.warning && {text.warning}} - diff --git a/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx b/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx deleted file mode 100644 index d4196902bb..0000000000 --- a/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { Nl } from '@corona-dashboard/common'; -import { css } from '@styled-system/css'; -import { useState } from 'react'; -import { Box } from '~/components/base'; -import { KpiTile } from '~/components/kpi-tile'; -import { KpiValue } from '~/components/kpi-value'; -import { Markdown } from '~/components/markdown'; -import { RadioGroup } from '~/components/radio-group'; -import { TwoKpiSection } from '~/components/two-kpi-section'; -import { InlineText, Text, BoldText } from '~/components/typography'; -import { useIntl } from '~/intl'; -import { SiteText } from '~/locale'; -import { space } from '~/style/theme'; -import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; - -export function VaccineAdministrationsKpiSection({ - data, - text, -}: { - data: Pick< - Nl, - | 'vaccine_administered_total' - | 'vaccine_administered_ggd' - | 'vaccine_administered_hospitals_and_care_institutions' - | 'vaccine_administered_doctors' - | 'vaccine_administered_ggd_ghor' - >; - text: SiteText['pages']['vaccinations_page']['nl']; -}) { - const [selectedTab, setSelectedTab] = useState(text.gezette_prikken.tab_first.title); - - return ( - - - - setSelectedTab(value)} - items={[ - { - label: text.gezette_prikken.tab_first.title, - value: text.gezette_prikken.tab_first.title, - }, - { - label: text.gezette_prikken.tab_second.title, - value: text.gezette_prikken.tab_second.title, - }, - ]} - /> - - {selectedTab == text.gezette_prikken.tab_first.title && ( - <> - - - - - - - - - - - - - - - )} - {selectedTab == text.gezette_prikken.tab_second.title && ( - <> - - - - - - - - - - - )} - - - ); -} - -interface VaccineAdministeredProps { - value: number; - date: number; - description: string; - isReported?: boolean; - text: SiteText['pages']['vaccinations_page']['nl']['gezette_prikken']; -} - -function VaccineAdministeredItem(props: VaccineAdministeredProps) { - const { value, date, description, isReported, text } = props; - - const { formatNumber, formatDateFromSeconds } = useIntl(); - - return ( - - - {formatNumber(value)} - {' ' + description} - - - - {replaceVariablesInText(isReported ? text.reported_until : text.estimated_until, { - reportedDate: formatDateFromSeconds(date, 'weekday-long'), - })} - - - ); -} diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx index 27e19cb642..2da116aa8b 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-toggle-tile.tsx @@ -71,7 +71,7 @@ export function VaccineCoverageToggleTile({ }; return ( - + ) => { date: { start: sewerAverages.last_value.date_start_unix, end: sewerAverages.last_value.date_end_unix }, source: textGm.bronnen.rivm, }} + description={textGm.extra_uitleg} > ) => { populationCountConnectedToRWZIS: {formatNumber(populationCountConnectedToRWZIS)}, })} - - ) => { date: data.deceased_rivm_archived_20221231.last_value.date_unix, source: textGm.section_deceased_rivm.bronnen.rivm, }} + description={textGm.section_deceased_rivm.kpi_covid_daily_description} > - ) => { date: data.deceased_rivm_archived_20221231.last_value.date_unix, source: textGm.section_deceased_rivm.bronnen.rivm, }} + description={textGm.section_deceased_rivm.kpi_covid_total_description} > - {textGm.section_deceased_rivm.kpi_covid_total_description} diff --git a/packages/app/src/pages/landelijk/reproductiegetal.tsx b/packages/app/src/pages/landelijk/reproductiegetal.tsx index ad0def1b3c..78b55fa403 100644 --- a/packages/app/src/pages/landelijk/reproductiegetal.tsx +++ b/packages/app/src/pages/landelijk/reproductiegetal.tsx @@ -3,7 +3,6 @@ import { Reproductiegetal } from '@corona-dashboard/icons'; import { GetStaticPropsContext } from 'next'; import { InView } from '~/components/in-view'; import { IllustrationTile } from '~/components/illustration-tile'; -import { Markdown } from '~/components/markdown'; import { PageArticlesTile } from '~/components/articles/page-articles-tile'; import { PageFaqTile } from '~/components/page-faq-tile'; import { PageInformationBlock } from '~/components/page-information-block'; @@ -114,6 +113,7 @@ const ReproductionIndex = (props: StaticProps) => { obtainedAt: reproductionLastValue.date_of_insertion_unix, }} hasNoBorder + description={textNl.barscale_toelichting} > ) => { showOldDateUnixForDifference isAmount /> - diff --git a/packages/app/src/pages/landelijk/sterfte.tsx b/packages/app/src/pages/landelijk/sterfte.tsx index 808193478c..b474f5a2cb 100644 --- a/packages/app/src/pages/landelijk/sterfte.tsx +++ b/packages/app/src/pages/landelijk/sterfte.tsx @@ -8,14 +8,12 @@ import { ChartTile } from '~/components/chart-tile'; import { InView } from '~/components/in-view'; import { KpiTile } from '~/components/kpi-tile'; import { KpiValue } from '~/components/kpi-value'; -import { Markdown } from '~/components/markdown'; import { PageArticlesTile } from '~/components/articles/page-articles-tile'; import { PageFaqTile } from '~/components/page-faq-tile'; import { PageInformationBlock } from '~/components/page-information-block'; import { TileList } from '~/components/tile-list'; import { TimeSeriesChart } from '~/components/time-series-chart'; import { TwoKpiSection } from '~/components/two-kpi-section'; -import { Text } from '~/components/typography'; import { WarningTile } from '~/components/warning-tile'; import { DeceasedMonitorSection } from '~/domain/deceased'; import { Layout, NlLayout } from '~/domain/layout'; @@ -160,9 +158,9 @@ const DeceasedNationalPage = (props: StaticProps) => { date: dataRivm.last_value.date_unix, source: textNl.section_deceased_rivm.bronnen.rivm, }} + description={textNl.section_deceased_rivm.kpi_covid_daily_description} > - ) => { date: dataRivm.last_value.date_unix, source: textNl.section_deceased_rivm.bronnen.rivm, }} + description={textNl.section_deceased_rivm.kpi_covid_total_description} > - {textNl.section_deceased_rivm.kpi_covid_total_description}