From 889aba2ee5acf894df10bb02a9804910efdd6c95 Mon Sep 17 00:00:00 2001 From: Petr Hovorka Date: Wed, 9 Nov 2022 17:53:39 +0100 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20Group=20minor=20vaccine=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OrpVaccinations/orpVaccinationsUtils.js | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/card/OrpVaccinations/orpVaccinationsUtils.js b/src/components/card/OrpVaccinations/orpVaccinationsUtils.js index df93205..57e0816 100644 --- a/src/components/card/OrpVaccinations/orpVaccinationsUtils.js +++ b/src/components/card/OrpVaccinations/orpVaccinationsUtils.js @@ -37,37 +37,43 @@ export const convertToDoseOrderNewDosesData = (days, limit) => { }; export const convertToVaccineTypes = (data, vaccineNames) => { + const FEATURED_ITEMS_SIZE = 6; + if (!data) return null; const getVaccineName = (vaccineId) => vaccineNames.find((vaccine) => vaccine.vaccineId === vaccineId); - const vaccineManufacturers = [ - { vaccineName: "Comirnaty", vaccineManufacturer: "Pfizer–BioNTech" }, - { vaccineName: "SPIKEVAX", vaccineManufacturer: "Moderna" }, - { vaccineName: "VAXZEVRIA", vaccineManufacturer: "AstraZeneca" }, - { - vaccineName: "COVID-19 Vaccine Janssen", - vaccineManufacturer: "Johnson & Johnson", - }, - ]; + const vaccineManufacturers = { + Comirnaty: "Pfizer–BioNTech", + SPIKEVAX: "Moderna", + VAXZEVRIA: "AstraZeneca", + "COVID-19 Vaccine Janssen": "Johnson & Johnson", + }; - const vaccineTypes = data + const sortedData = data .filter((vaccine) => vaccine.td !== 0) - .map((vaccine) => { - const vaccineName = getVaccineName(vaccine.v).vaccineName || vaccine.v; - const vaccineManufacturer = vaccineManufacturers.find( - (vaccineManufacturer) => vaccineName === vaccineManufacturer.vaccineName - )?.vaccineManufacturer; - - const result = { - value: vaccine.td, - name: vaccineManufacturer - ? `${vaccineName} (${vaccineManufacturer})` - : vaccineName, - }; - - return result; - }); + .sort((a, b) => b.td - a.td); + + const featuredItems = sortedData.slice(0, FEATURED_ITEMS_SIZE); + const itemsToGroup = sortedData.slice(FEATURED_ITEMS_SIZE, data.length); + const groupedTD = itemsToGroup.reduce((acc, obj) => acc + obj.td, 0); + + const baseAndGroupedItems = [ + ...featuredItems, + { v: "Ostatní", td: groupedTD }, + ]; + + const vaccineTypes = baseAndGroupedItems.map((vaccine) => { + const vaccineName = getVaccineName(vaccine.v)?.vaccineName ?? vaccine.v; + const vaccineManufacturer = vaccineManufacturers[vaccineName] ?? null; + + return { + value: vaccine.td, + name: vaccineManufacturer + ? `${vaccineName} (${vaccineManufacturer})` + : vaccineName, + }; + }); return vaccineTypes; }; From 073ad7a24a5e3359f4810f578ac5b56e3ed5cb9f Mon Sep 17 00:00:00 2001 From: Petr Hovorka Date: Wed, 9 Nov 2022 20:18:54 +0100 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=B1=20Move=20legend=20under=20vacc?= =?UTF-8?q?ine=20types=20chart=20on=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../VaccineTypesChart/VaccineTypesChart.js | 31 +++++++++++++------ .../OrpVaccinations/orpVaccinationsUtils.js | 12 ++++--- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/card/OrpVaccinations/VaccineTypesChart/VaccineTypesChart.js b/src/components/card/OrpVaccinations/VaccineTypesChart/VaccineTypesChart.js index 24c5540..e1ea785 100644 --- a/src/components/card/OrpVaccinations/VaccineTypesChart/VaccineTypesChart.js +++ b/src/components/card/OrpVaccinations/VaccineTypesChart/VaccineTypesChart.js @@ -1,4 +1,6 @@ import React from "react"; +import { useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; import PropTypes from "prop-types"; import { Cell, @@ -8,14 +10,15 @@ import { PieChart, Pie, } from "recharts"; -import { theme } from "../../../../theme"; import VaccineTypesChartTooltip from "./VaccineTypesChartTooltip"; export default function VaccineTypesChart({ data }) { + const theme = useTheme(); const colors = theme.palette.orpVaccinations; + const isDesktop = useMediaQuery(theme.breakpoints.up("md")); return ( - + {data.map((entry, index) => ( @@ -24,12 +27,17 @@ export default function VaccineTypesChart({ data }) { {/* TODO: keep an eye on https://github.com/recharts/recharts/issues/2704 and then update ReCharts after the issue is fixed. */} - + {isDesktop ? ( + + ) : ( + + )} + } /> @@ -37,5 +45,10 @@ export default function VaccineTypesChart({ data }) { } VaccineTypesChart.propTypes = { - data: PropTypes.array, + data: PropTypes.arrayOf( + PropTypes.shape({ + value: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + }) + ).isRequired, }; diff --git a/src/components/card/OrpVaccinations/orpVaccinationsUtils.js b/src/components/card/OrpVaccinations/orpVaccinationsUtils.js index 57e0816..9d511ce 100644 --- a/src/components/card/OrpVaccinations/orpVaccinationsUtils.js +++ b/src/components/card/OrpVaccinations/orpVaccinationsUtils.js @@ -58,12 +58,14 @@ export const convertToVaccineTypes = (data, vaccineNames) => { const itemsToGroup = sortedData.slice(FEATURED_ITEMS_SIZE, data.length); const groupedTD = itemsToGroup.reduce((acc, obj) => acc + obj.td, 0); - const baseAndGroupedItems = [ - ...featuredItems, - { v: "Ostatní", td: groupedTD }, - ]; + if (groupedTD > 0) { + featuredItems.push({ + v: "Ostatní", + td: groupedTD, + }); + } - const vaccineTypes = baseAndGroupedItems.map((vaccine) => { + const vaccineTypes = featuredItems.map((vaccine) => { const vaccineName = getVaccineName(vaccine.v)?.vaccineName ?? vaccine.v; const vaccineManufacturer = vaccineManufacturers[vaccineName] ?? null; From 410862f74bbbb300b34572a10a982d639170c688 Mon Sep 17 00:00:00 2001 From: Petr Hovorka Date: Wed, 9 Nov 2022 20:22:00 +0100 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=96=20v3.9.3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 12 ++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a81a2f..aa5a29a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog + +## 3.9.3 (2022-11-09) + +### Added + +- ✨ Group minor vaccine types [889aba2] + +### Changed + +- 📱 Move legend under vaccine types chart on mobile [073ad7a] + + ## 3.9.2 (2022-08-01) diff --git a/package-lock.json b/package-lock.json index 165bc21..f55f20a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "covidvobcich-web", - "version": "3.9.2", + "version": "3.9.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "covidvobcich-web", - "version": "3.9.2", + "version": "3.9.3", "dependencies": { "@apollo/client": "^3.3.13", "@emotion/react": "^11.7.1", diff --git a/package.json b/package.json index b83b5bd..a337e6f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "covidvobcich-web", - "version": "3.9.2", + "version": "3.9.3", "private": true, "homepage": "https://covidvobcich.cz", "dependencies": {