From 91b1fbd308e790908426b03e8fcf08a96b09b486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Poore?= Date: Tue, 21 Dec 2021 18:08:36 -0300 Subject: [PATCH] feat!: add new doses BREAKING CHANGE: add support for other types of doses change functions accordingly change design to show other doses --- components/Data/BarChartsSection/index.tsx | 25 +++++++++----- .../HistogramSection/Histogram/Tooltip.tsx | 33 +++++++++++-------- .../Data/HistogramSection/Histogram/index.tsx | 8 +++-- .../DoseInfo/VaccineNumbers.tsx | 6 ++-- .../Data/NumbersSection/DoseInfo/index.tsx | 8 +++-- components/Data/NumbersSection/index.tsx | 7 ++-- utils/functions.ts | 24 +++++++------- 7 files changed, 65 insertions(+), 46 deletions(-) diff --git a/components/Data/BarChartsSection/index.tsx b/components/Data/BarChartsSection/index.tsx index 42b4dab..edfb38b 100644 --- a/components/Data/BarChartsSection/index.tsx +++ b/components/Data/BarChartsSection/index.tsx @@ -51,22 +51,29 @@ const BarChartsSection: React.FC = (): JSX.Element => { { name: '% de la población vacunada', values: [ - { name: 'Ambas dosis', value: vaccineData[1] }, - { name: 'Sólo 1ra dosis', value: vaccineData[0] - vaccineData[1] }, - { name: 'No vacunades', value: population - vaccineData[0] }, + { name: 'Refuerzo', value: vaccineData.booster }, + { name: 'Vacunación total', value: vaccineData.fullVax - vaccineData.booster }, + { + name: 'Sólo vacunación parcial', + value: vaccineData.partialVax - vaccineData.fullVax, + }, + { name: 'No vacunades', value: population - vaccineData.partialVax }, ], - colors: ['#018F40', '#40F66A', '#F56257'], + colors: ['#4CBDF5', '#018F40', '#40F66A', '#F56257'], }, { - name: 'Parcial vs. totalmente vacunades', + name: '% de dosis aplicadas por tipo', values: [ - { name: 'Ambas dosis', value: vaccineData[1] }, - { name: 'Sólo 1ra dosis', value: vaccineData[0] - vaccineData[1] }, + { name: 'Primera dosis', value: vaccineData.firstDose }, + { name: 'Segunda dosis', value: vaccineData.secondDose }, + { name: 'Unica dosis', value: vaccineData.onlyDose }, + { name: 'Refuerzo', value: vaccineData.booster }, + { name: 'Adicional', value: vaccineData.additional }, ], - colors: ['#3CF096', '#F07624'], + colors: ['#4CBDF5', '#9551F5', '#F5EF33', '#62FCA8', '#4CBDF5'], }, { - name: '% de dosis aplicadas por tipo', + name: '% de dosis aplicadas por vacuna', values: [ { name: 'Sputnik V', value: vaccineOrigin['Sputnik V COVID19 Instituto Gamaleya'] }, { name: 'Covishield AstraZeneca', value: vaccineOrigin['COVISHIELD ChAdOx1nCoV COVID 19'] }, diff --git a/components/Data/HistogramSection/Histogram/Tooltip.tsx b/components/Data/HistogramSection/Histogram/Tooltip.tsx index 74c69fa..11ec7b0 100644 --- a/components/Data/HistogramSection/Histogram/Tooltip.tsx +++ b/components/Data/HistogramSection/Histogram/Tooltip.tsx @@ -14,19 +14,26 @@ const Tooltip = ({ active, payload, label }: TooltipProps): {format(label, "d 'de' MMMM", { locale: es })} - {payload.map(payloadItem => ( - - - - - {typeof payloadItem.value === 'number' && payloadItem.value.toFixed(2)} % - - - {payload.indexOf(payloadItem) === 0 ? '1ra dosis' : 'Ambas dosis'} - - - - ))} + {payload.map(payloadItem => { + if (payloadItem.value === 0) return null; + return ( + + + + + {typeof payloadItem.value === 'number' && payloadItem.value.toFixed(2)} % + + + {payload.indexOf(payloadItem) === 0 + ? 'Parcial' + : payload.indexOf(payloadItem) === 1 + ? 'Total' + : 'Refuerzo'} + + + + ); + })} ); diff --git a/components/Data/HistogramSection/Histogram/index.tsx b/components/Data/HistogramSection/Histogram/index.tsx index d6ac096..f38bad5 100644 --- a/components/Data/HistogramSection/Histogram/index.tsx +++ b/components/Data/HistogramSection/Histogram/index.tsx @@ -44,14 +44,15 @@ const Histogram: React.FC = (props): JSX.Element => { ? rawDataItem.data : getCurrentProvinceData(rawDataItem.data, selectedProvince); - const [firstDose, secondDose] = formatVaccineDataItem(filteredData); + const { partialVax, fullVax, booster } = formatVaccineDataItem(filteredData); const toPercentage = (vaccineData: number): number => parseFloat(((vaccineData / population) * 100).toFixed(2)); return { date: Date.parse(rawDataItem.date) + 10800000, - firstDose: toPercentage(firstDose), - secondDose: toPercentage(secondDose), + firstDose: toPercentage(partialVax), + secondDose: toPercentage(fullVax), + thirdDose: toPercentage(booster), }; }); @@ -76,6 +77,7 @@ const Histogram: React.FC = (props): JSX.Element => { /> + diff --git a/components/Data/NumbersSection/DoseInfo/VaccineNumbers.tsx b/components/Data/NumbersSection/DoseInfo/VaccineNumbers.tsx index 78801d6..1239cb9 100644 --- a/components/Data/NumbersSection/DoseInfo/VaccineNumbers.tsx +++ b/components/Data/NumbersSection/DoseInfo/VaccineNumbers.tsx @@ -7,7 +7,7 @@ import { formatNumbers, formatVaccineDataItem, getFilteredData } from '../../../ import { SelectionContext, DataContext } from '../../../../utils/Context'; interface Props { - dose: 1 | 2; + dose: 1 | 2 | 3; numberType: 'raw' | 'percentage'; } @@ -25,8 +25,8 @@ const VaccineNumbers: React.FC = (props): JSX.Element => { ); const [population, filteredData] = getFilteredData(data, selectedProvince); - const [firstDose, secondDose] = formatVaccineDataItem(filteredData); - const activeDose = props.dose === 1 ? firstDose : secondDose; + const { partialVax, fullVax, booster } = formatVaccineDataItem(filteredData); + const activeDose = props.dose === 1 ? partialVax : props.dose === 2 ? fullVax : booster; return ( diff --git a/components/Data/NumbersSection/DoseInfo/index.tsx b/components/Data/NumbersSection/DoseInfo/index.tsx index 3b02c4b..08a13b1 100644 --- a/components/Data/NumbersSection/DoseInfo/index.tsx +++ b/components/Data/NumbersSection/DoseInfo/index.tsx @@ -6,14 +6,18 @@ import { Flex, Text } from '@chakra-ui/react'; import VaccineNumbers from './VaccineNumbers'; interface Props { - dose: 1 | 2; + dose: 1 | 2 | 3; } const DoseInfo: React.FC = (props): JSX.Element => { return ( <> - {props.dose === 1 ? 'Primera dosis' : 'Ambas dosis'} + {props.dose === 1 + ? 'Vacunación parcial' + : props.dose === 2 + ? 'Vacunación total' + : 'Refuerzo'} diff --git a/components/Data/NumbersSection/index.tsx b/components/Data/NumbersSection/index.tsx index f0a3694..12fb65d 100644 --- a/components/Data/NumbersSection/index.tsx +++ b/components/Data/NumbersSection/index.tsx @@ -1,10 +1,9 @@ // Dependencies import React, { useContext } from 'react'; -import { Divider, Text } from '@chakra-ui/react'; +import { Text } from '@chakra-ui/react'; // Components import DoseInfo from './DoseInfo'; -import MoreInfoButton from './MoreInfoButton'; // Utils import { SelectionContext } from '../../../utils/Context'; @@ -13,7 +12,7 @@ import { MotionFlex } from '../../../utils/MotionComponents'; const NumbersSection: React.FC = (): JSX.Element => { const selectedProvince = useContext(SelectionContext); - const doses = [1, 2]; + const doses = [1, 2, 3]; return ( { {selectedProvince} - {doses.map((dose: 1 | 2) => ( + {doses.map((dose: 1 | 2 | 3) => ( ))} diff --git a/utils/functions.ts b/utils/functions.ts index 698526a..35528cd 100644 --- a/utils/functions.ts +++ b/utils/functions.ts @@ -23,20 +23,20 @@ export const getProvincePopulation = (provincePopulation: PopulationDataItem[], return result[0].poblacion_estimada_2021; }; -export const formatVaccineDataItem = (data: VaccineDataItem[]): [number, number, number] => { - return data.reduce( - (acc: [number, number, number], province: VaccineDataItem) => { +export const formatVaccineDataItem = (data: VaccineDataItem[]): {firstDose: number, secondDose: number, onlyDose: number, booster: number, additional: number, partialVax: number, fullVax: number} => { + const initialList = data.reduce( + (acc: {firstDose: number, secondDose: number, onlyDose: number, booster: number, additional: number}, province: VaccineDataItem) => { if (province.jurisdiccion_codigo_indec === null) return acc; - const first = province.primera_dosis_cantidad - const second = province.segunda_dosis_cantidad + (province.dosis_unica_cantidad ? province.dosis_unica_cantidad : 0) - const third = (province?.dosis_refuerzo_cantidad ?province?.dosis_refuerzo_cantidad :0)+ (province.dosis_adicional_cantidad ? province.dosis_adicional_cantidad : 0) - acc[0] += first; - acc[1] += second; - acc[2] += third; - return acc; + const firstDose = acc.firstDose + province.primera_dosis_cantidad + const secondDose = acc.secondDose + province.segunda_dosis_cantidad + const onlyDose = acc.onlyDose + (province.dosis_unica_cantidad ? province.dosis_unica_cantidad : 0) + const booster = acc.booster + (province.dosis_refuerzo_cantidad ? province.dosis_refuerzo_cantidad : 0) + const additional = acc.additional + (province.dosis_adicional_cantidad ? province.dosis_adicional_cantidad : 0) + return { firstDose, secondDose, onlyDose, booster, additional}; }, - [0, 0, 0] + {firstDose: 0, secondDose: 0, onlyDose: 0, booster: 0, additional: 0} ); + return {...initialList, partialVax: initialList.firstDose, fullVax: initialList.secondDose + initialList.onlyDose} }; export const formatVaccineData = (data: VaccineDataItem[]): {[data: string]: [number, number, number]} => { @@ -44,7 +44,7 @@ export const formatVaccineData = (data: VaccineDataItem[]): {[data: string]: [nu if (province.jurisdiccion_codigo_indec === null || province.jurisdiccion_codigo_indec === 0) return acc; const first = province.primera_dosis_cantidad const second = province.segunda_dosis_cantidad + province.dosis_unica_cantidad - const third = province.dosis_refuerzo_cantidad + province.dosis_adicional_cantidad + const third = province.dosis_refuerzo_cantidad if (!acc[province.jurisdiccion_nombre]) { acc[province.jurisdiccion_nombre] = [first, second, third]; } else {