Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
Bugfix/schema for undefined kpi value (#4458)
Browse files Browse the repository at this point in the history 
* Accept null value

* added new key to coverage tables

(cherry picked from commit 2016b81)
  • Loading branch information
@Jorrik-Klijnsma-Work
Jorrik-Klijnsma-Work authored Oct 13, 2022
1 parent 24f5f07 commit e043c17
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 208 deletions.
3 changes: 2 additions & 1 deletion packages/app/schema/topical/theme_tile.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"dynamicDescription",
"trendIcon",
"tileIcon",
"cta"
"cta",
"kpiValue"
],
"properties": {
"index": {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/domain/topical/components/topical-tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ interface TopicalTileProps {
tileIcon: TopicalIcon;
trendIcon: TrendIcon | null;
dynamicDescription: string;
kpiValue: number | undefined | string;
kpiValue: number | null | string;
cta: Cta | null;
}

Expand Down
58 changes: 11 additions & 47 deletions ...c/domain/vaccine/booster-shot-coverage-per-age-group/components/narrow-coverage-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ import { useIntl } from '~/intl';
import { formatAgeGroupString } from '~/utils/format-age-group-string';
import { formatBirthyearRangeString } from '~/utils/format-birthyear-range-string';
import { useVaccineCoveragePercentageFormatter } from '~/domain/vaccine/logic/use-vaccine-coverage-percentage-formatter';
import {
COLOR_FULLY_VACCINATED,
COLOR_FULLY_BOOSTERED,
} from '~/domain/vaccine/common';
import { COLOR_FULLY_VACCINATED, COLOR_FULLY_BOOSTERED } from '~/domain/vaccine/common';
import { Bar } from '~/domain/vaccine/components/bar';
import { NarrowPercentage } from '~/domain/vaccine/components/narrow-percentage';
import { AgeGroup } from '~/domain/vaccine/components/age-group';
Expand All @@ -23,54 +20,31 @@ export function NarrowCoverageTable({
text,
}: {
text: SiteText['pages']['vaccinations_page']['nl'];
values:
| NlVaccineCoveragePerAgeGroupArchived_20220908Value[]
| VrVaccineCoveragePerAgeGroupArchived_20220908Value[]
| GmVaccineCoveragePerAgeGroupArchived_20220908Value[];
values: NlVaccineCoveragePerAgeGroupArchived_20220908Value[] | VrVaccineCoveragePerAgeGroupArchived_20220908Value[] | GmVaccineCoveragePerAgeGroupArchived_20220908Value[];
}) {
const { commonTexts, formatPercentage } = useIntl();
const formatCoveragePercentage = useVaccineCoveragePercentageFormatter();

return (
<Box>
<Box borderBottom="1px solid" borderColor="gray3" pb={2}>
<BoldText variant="label1">
{text.vaccination_coverage.headers.agegroup}
</BoldText>
<BoldText variant="label1">{text.vaccination_coverage.headers.agegroup}</BoldText>
</Box>

{values.map((item, index) => (
<Box
key={index}
pt={2}
pb={3}
spacing={3}
borderBottom="1px solid"
borderColor="gray3"
>
<Box key={index} pt={2} pb={3} spacing={3} borderBottom="1px solid" borderColor="gray3">
<AgeGroup
range={formatAgeGroupString(
item.age_group_range,
commonTexts.common.agegroup
)}
ageGroupTotal={
'age_group_total' in item ? item.age_group_total : undefined
}
birthyear_range={formatBirthyearRangeString(
item.birthyear_range,
commonTexts.common.birthyears
)}
range={formatAgeGroupString(item.age_group_range, commonTexts.common.agegroup)}
ageGroupTotal={'age_group_total' in item ? item.age_group_total : undefined}
birthyear_range={formatBirthyearRangeString(item.birthyear_range, commonTexts.common.birthyears)}
text={commonTexts.common.agegroup.total_people}
/>

<Box spacing={1}>
<NarrowPercentage
value={
'fully_vaccinated_percentage_label' in item
? formatCoveragePercentage(
item,
'fully_vaccinated_percentage'
)
? formatCoveragePercentage(item, 'fully_vaccinated_percentage')
: `${formatPercentage(item.fully_vaccinated_percentage)}%`
}
color={COLOR_FULLY_VACCINATED}
Expand All @@ -80,11 +54,7 @@ export function NarrowCoverageTable({
<Bar
value={item.fully_vaccinated_percentage}
color={COLOR_FULLY_VACCINATED}
label={
'fully_vaccinated_percentage_label' in item
? item.fully_vaccinated_percentage_label
: undefined
}
label={'fully_vaccinated_percentage_label' in item ? item.fully_vaccinated_percentage_label : undefined}
/>
</Box>

Expand All @@ -100,19 +70,13 @@ export function NarrowCoverageTable({
: `${formatPercentage(item.booster_shot_percentage)}%`
}
color={COLOR_FULLY_BOOSTERED}
textLabel={
text.archived.vaccination_coverage.headers.booster_shot
}
textLabel={text.archived.vaccination_coverage.campaign_headers.booster_shot}
/>

<Bar
value={item.booster_shot_percentage}
color={COLOR_FULLY_BOOSTERED}
label={
'booster_shot_percentage_label' in item
? item.booster_shot_percentage_label
: undefined
}
label={'booster_shot_percentage_label' in item ? item.booster_shot_percentage_label : undefined}
/>
</Box>
</Box>
Expand Down
65 changes: 13 additions & 52 deletions ...src/domain/vaccine/booster-shot-coverage-per-age-group/components/wide-coverage-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,14 @@ import { asResponsiveArray } from '~/style/utils';
import { formatAgeGroupString } from '~/utils/format-age-group-string';
import { formatBirthyearRangeString } from '~/utils/format-birthyear-range-string';
import { useVaccineCoveragePercentageFormatter } from '~/domain/vaccine/logic/use-vaccine-coverage-percentage-formatter';
import {
COLOR_FULLY_VACCINATED,
COLOR_FULLY_BOOSTERED,
} from '~/domain/vaccine/common';
import { COLOR_FULLY_VACCINATED, COLOR_FULLY_BOOSTERED } from '~/domain/vaccine/common';
import { Bar } from '~/domain/vaccine/components/bar';
import { WidePercentage } from '~/domain/vaccine/components/wide-percentage';
import { AgeGroup } from '~/domain/vaccine/components/age-group';
import { SiteText } from '~/locale';
interface WideCoverageTable {
text: SiteText['pages']['vaccinations_page']['nl'];
values:
| NlVaccineCoveragePerAgeGroupArchived_20220908Value[]
| VrVaccineCoveragePerAgeGroupArchived_20220908Value[]
| GmVaccineCoveragePerAgeGroupArchived_20220908Value[];
values: NlVaccineCoveragePerAgeGroupArchived_20220908Value[] | VrVaccineCoveragePerAgeGroupArchived_20220908Value[] | GmVaccineCoveragePerAgeGroupArchived_20220908Value[];
}

export function WideCoverageTable({ values, text }: WideCoverageTable) {
Expand All @@ -51,9 +45,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
}),
})}
>
<InlineText variant="label1">
{text.vaccination_coverage.headers.agegroup}
</InlineText>
<InlineText variant="label1">{text.vaccination_coverage.headers.agegroup}</InlineText>
</HeaderCell>
<HeaderCell
css={css({
Expand All @@ -65,9 +57,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
}),
})}
>
<InlineText variant="label1">
{text.vaccination_coverage.headers.fully_vaccinated}
</InlineText>
<InlineText variant="label1">{text.vaccination_coverage.headers.fully_vaccinated}</InlineText>
</HeaderCell>
<HeaderCell
css={css({
Expand All @@ -79,9 +69,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
}),
})}
>
<InlineText variant="label1">
{text.archived.vaccination_coverage.headers.booster_shot}
</InlineText>
<InlineText variant="label1">{text.archived.vaccination_coverage.campaign_headers.booster_shot}</InlineText>
</HeaderCell>
<HeaderCell
css={css({
Expand All @@ -91,12 +79,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
}),
})}
>
<InlineText variant="label1">
{
text.archived.vaccination_coverage.headers
.difference_booster_shot_and_fully_vaccinated
}
</InlineText>
<InlineText variant="label1">{text.archived.vaccination_coverage.campaign_headers.difference_booster_shot_and_fully_vaccinated}</InlineText>
</HeaderCell>
</Row>
</thead>
Expand All @@ -105,28 +88,17 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
<Row key={index}>
<HeaderCell isColumn>
<AgeGroup
range={formatAgeGroupString(
item.age_group_range,
commonTexts.common.agegroup
)}
ageGroupTotal={
'age_group_total' in item ? item.age_group_total : undefined
}
birthyear_range={formatBirthyearRangeString(
item.birthyear_range,
commonTexts.common.birthyears
)}
range={formatAgeGroupString(item.age_group_range, commonTexts.common.agegroup)}
ageGroupTotal={'age_group_total' in item ? item.age_group_total : undefined}
birthyear_range={formatBirthyearRangeString(item.birthyear_range, commonTexts.common.birthyears)}
text={commonTexts.common.agegroup.total_people}
/>
</HeaderCell>
<Cell>
<WidePercentage
value={
'fully_vaccinated_percentage_label' in item
? formatCoveragePercentage(
item,
'fully_vaccinated_percentage'
)
? formatCoveragePercentage(item, 'fully_vaccinated_percentage')
: `${formatPercentage(item.fully_vaccinated_percentage)}%`
}
color={COLOR_FULLY_VACCINATED}
Expand All @@ -137,10 +109,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
<WidePercentage
value={
'booster_shot_percentage_label' in item
? formatCoveragePercentage(
item,
'booster_shot_percentage'
)
? formatCoveragePercentage(item, 'booster_shot_percentage')
: item.booster_shot_percentage === null
? text.vaccination_coverage.no_data
: `${formatPercentage(item.booster_shot_percentage)}%`
Expand All @@ -154,20 +123,12 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
<Bar
value={item.fully_vaccinated_percentage}
color={COLOR_FULLY_VACCINATED}
label={
'fully_vaccinated_percentage_label' in item
? item.fully_vaccinated_percentage_label
: undefined
}
label={'fully_vaccinated_percentage_label' in item ? item.fully_vaccinated_percentage_label : undefined}
/>
<Bar
value={item.booster_shot_percentage}
color={COLOR_FULLY_BOOSTERED}
label={
'booster_shot_percentage_label' in item
? item.booster_shot_percentage_label
: undefined
}
label={'booster_shot_percentage_label' in item ? item.booster_shot_percentage_label : undefined}
/>
</Box>
</Cell>
Expand Down
65 changes: 13 additions & 52 deletions ...pp/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,77 +8,45 @@ import { ARCHIVED_COLORS } from '~/domain/vaccine/common';
import { Bar } from '~/domain/vaccine/components/bar';
import { NarrowPercentage } from '~/domain/vaccine/components/narrow-percentage';
import { AgeGroup } from '~/domain/vaccine/components/age-group';
import {
GmVaccineCoveragePerAgeGroupArchivedValue,
NlVaccineCoveragePerAgeGroupArchivedValue,
VrVaccineCoveragePerAgeGroupArchivedValue,
} from '@corona-dashboard/common';
import { GmVaccineCoveragePerAgeGroupArchivedValue, NlVaccineCoveragePerAgeGroupArchivedValue, VrVaccineCoveragePerAgeGroupArchivedValue } from '@corona-dashboard/common';
import { SiteText } from '~/locale';

export function NarrowCoverageTable({
values,
text,
}: {
text: SiteText['pages']['vaccinations_page']['nl'];
values:
| NlVaccineCoveragePerAgeGroupArchivedValue[]
| VrVaccineCoveragePerAgeGroupArchivedValue[]
| GmVaccineCoveragePerAgeGroupArchivedValue[];
values: NlVaccineCoveragePerAgeGroupArchivedValue[] | VrVaccineCoveragePerAgeGroupArchivedValue[] | GmVaccineCoveragePerAgeGroupArchivedValue[];
}) {
const { commonTexts, formatPercentage } = useIntl();
const formatCoveragePercentage = useVaccineCoveragePercentageFormatter();

return (
<Box>
<Box borderBottom="1px solid" borderColor="gray3" pb={2}>
<BoldText variant="label1">
{text.vaccination_coverage.headers.agegroup}
</BoldText>
<BoldText variant="label1">{text.vaccination_coverage.headers.agegroup}</BoldText>
</Box>

{values.map((item, index) => (
<Box
key={index}
pt={2}
pb={3}
spacing={3}
borderBottom="1px solid"
borderColor="gray3"
>
<Box key={index} pt={2} pb={3} spacing={3} borderBottom="1px solid" borderColor="gray3">
<AgeGroup
range={formatAgeGroupString(
item.age_group_range,
commonTexts.common.agegroup
)}
ageGroupTotal={
'age_group_total' in item ? item.age_group_total : undefined
}
birthyear_range={formatBirthyearRangeString(
item.birthyear_range,
commonTexts.common.birthyears
)}
range={formatAgeGroupString(item.age_group_range, commonTexts.common.agegroup)}
ageGroupTotal={'age_group_total' in item ? item.age_group_total : undefined}
birthyear_range={formatBirthyearRangeString(item.birthyear_range, commonTexts.common.birthyears)}
text={commonTexts.common.agegroup.total_people}
/>

<Box spacing={1}>
<NarrowPercentage
value={
'has_one_shot_percentage_label' in item
? formatCoveragePercentage(item, 'has_one_shot_percentage')
: `${formatPercentage(item.has_one_shot_percentage)}%`
}
value={'has_one_shot_percentage_label' in item ? formatCoveragePercentage(item, 'has_one_shot_percentage') : `${formatPercentage(item.has_one_shot_percentage)}%`}
color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT}
textLabel={text.archived.vaccination_coverage.headers.first_shot}
textLabel={text.archived.vaccination_coverage.campaign_headers.first_shot}
/>

<Bar
value={item.has_one_shot_percentage}
color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT}
label={
'has_one_shot_percentage_label' in item
? item.has_one_shot_percentage_label
: undefined
}
label={'has_one_shot_percentage_label' in item ? item.has_one_shot_percentage_label : undefined}
/>
</Box>

Expand All @@ -88,24 +56,17 @@ export function NarrowCoverageTable({
<NarrowPercentage
value={
'fully_vaccinated_percentage_label' in item
? formatCoveragePercentage(
item,
'fully_vaccinated_percentage'
)
? formatCoveragePercentage(item, 'fully_vaccinated_percentage')
: `${formatPercentage(item.fully_vaccinated_percentage)}%`
}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
textLabel={text.archived.vaccination_coverage.headers.coverage}
textLabel={text.archived.vaccination_coverage.campaign_headers.coverage}
/>

<Bar
value={item.fully_vaccinated_percentage}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
label={
'fully_vaccinated_percentage_label' in item
? item.fully_vaccinated_percentage_label
: undefined
}
label={'fully_vaccinated_percentage_label' in item ? item.fully_vaccinated_percentage_label : undefined}
/>
</Box>
</Box>
Expand Down
Loading

0 comments on commit e043c17

Please sign in to comment.