Merge branch 'dev'

nicopoore · Dec 22, 2021 · cec88f7 · cec88f7 · vercel · Dec 22, 2021
2 parents b8bc236 + 91b1fbd
commit cec88f7
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 47 deletions.
diff --git 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
@@ -14,19 +14,26 @@ const Tooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>):
           {format(label, "d 'de' MMMM", { locale: es })}
         </Text>
         <Stack direction="row" spacing={6}>
-          {payload.map(payloadItem => (
-            <Stack key={payloadItem.name} direction="row">
-              <Box bgColor={payloadItem.color} h="100%" w={1} />
-              <Flex direction="column">
-                <Text fontSize="xl" fontWeight="bold">
-                  {typeof payloadItem.value === 'number' && payloadItem.value.toFixed(2)} %
-                </Text>
-                <Text color="gray.400" fontSize="sm">
-                  {payload.indexOf(payloadItem) === 0 ? '1ra dosis' : 'Ambas dosis'}
-                </Text>
-              </Flex>
-            </Stack>
-          ))}
+          {payload.map(payloadItem => {
+            if (payloadItem.value === 0) return null;
+            return (
+              <Stack key={payloadItem.name} direction="row">
+                <Box bgColor={payloadItem.color} h="100%" w={1} />
+                <Flex direction="column">
+                  <Text fontSize="xl" fontWeight="bold">
+                    {typeof payloadItem.value === 'number' && payloadItem.value.toFixed(2)} %
+                  </Text>
+                  <Text color="gray.400" fontSize="sm">
+                    {payload.indexOf(payloadItem) === 0
+                      ? 'Parcial'
+                      : payload.indexOf(payloadItem) === 1
+                      ? 'Total'
+                      : 'Refuerzo'}
+                  </Text>
+                </Flex>
+              </Stack>
+            );
+          })}
         </Stack>
       </Flex>
     );

diff --git a/components/Data/HistogramSection/Histogram/index.tsx b/components/Data/HistogramSection/Histogram/index.tsx
@@ -44,14 +44,15 @@ const Histogram: React.FC<Props> = (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> = (props): JSX.Element => {
         />
         <Area color="#ffa14f" dataKey="firstDose" fill="#ffa14f" stroke="#ffa14f" />
         <Area color="#00C49F" dataKey="secondDose" fill="#00C49F" stroke="#00C49F" />
+        <Area color="#0C6DA5" dataKey="thirdDose" fill="#0C6DA5" stroke="#0C6DA5" />
         <ReferenceLine stroke="green" strokeDasharray="3 3" y={90} />
       </AreaChart>
     </ResponsiveContainer>

diff --git 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> = (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 (
     <Box w="45%">

diff --git 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> = (props): JSX.Element => {
   return (
     <>
       <Text as="h6" fontSize="xl" mt={4}>
-        {props.dose === 1 ? 'Primera dosis' : 'Ambas dosis'}
+        {props.dose === 1
+          ? 'Vacunación parcial'
+          : props.dose === 2
+          ? 'Vacunación total'
+          : 'Refuerzo'}
       </Text>
       <Flex justify="space-between">
         <VaccineNumbers dose={props.dose} numberType="raw" />

diff --git 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 (
     <MotionFlex
       layout
@@ -30,11 +29,9 @@ const NumbersSection: React.FC = (): JSX.Element => {
       <Text as="h5" fontSize="2xl">
         {selectedProvince}
       </Text>
-      {doses.map((dose: 1 | 2) => (
+      {doses.map((dose: 1 | 2 | 3) => (
         <DoseInfo key={`dose-${dose}`} dose={dose} />
       ))}
-      <Divider mx="auto" my={4} w="40%" />
-      <MoreInfoButton />
     </MotionFlex>
   );
 };

diff --git a/utils/functions.ts b/utils/functions.ts
@@ -23,26 +23,34 @@ export const getProvincePopulation = (provincePopulation: PopulationDataItem[],
   return result[0].poblacion_estimada_2021;
 };
 
-export const formatVaccineDataItem = (data: VaccineDataItem[]): [number, number] => {
-  return data.reduce(
-    (acc: [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;
-      acc[0] += province.primera_dosis_cantidad;
-      acc[1] += province.segunda_dosis_cantidad;
-      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]
+    {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]} => {
+export const formatVaccineData = (data: VaccineDataItem[]): {[data: string]: [number, number, number]} => {
   return data.reduce((acc, province: VaccineDataItem) => {
     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 
     if (!acc[province.jurisdiccion_nombre]) {
-      acc[province.jurisdiccion_nombre] = [province.primera_dosis_cantidad, province.segunda_dosis_cantidad];
+      acc[province.jurisdiccion_nombre] = [first, second, third];
     } else {
-      acc[province.jurisdiccion_nombre][0] += province.primera_dosis_cantidad;
-      acc[province.jurisdiccion_nombre][1] += province.segunda_dosis_cantidad;
+      acc[province.jurisdiccion_nombre][0] += first;
+      acc[province.jurisdiccion_nombre][1] += second;
+      acc[province.jurisdiccion_nombre][2] += third;
     }
     return acc;
   }, {})
@@ -69,6 +77,9 @@ export const formatVaccineOrigin = (data: VaccineDataItem[], vaccineNameArray: s
           if (province['jurisdiccion_codigo_indec'] === null) return acc;
           acc += province['primera_dosis_cantidad'];
           acc += province['segunda_dosis_cantidad']
+          acc += province['dosis_unica_cantidad']
+          acc += province['dosis_refuerzo_cantidad']
+          acc += province['dosis_adicional_cantidad']
           return acc;
         }, 0)
     );

diff --git a/utils/types.ts b/utils/types.ts
@@ -5,6 +5,9 @@ export interface VaccineDataItem {
   jurisdiccion_nombre: string,
   primera_dosis_cantidad: number,
   segunda_dosis_cantidad: number,
+  dosis_unica_cantidad: number,
+  dosis_adicional_cantidad: number,
+  dosis_refuerzo_cantidad: number,
   vacuna_nombre: string
 }