Merge pull request #30 from pehovorka/feat/ui-fixes

Feat/UI fixes

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+<a name="3.9.3"></a>
+## 3.9.3 (2022-11-09)
+
+### Added
+
+- ✨ Group minor vaccine types [889aba2]
+
+### Changed
+
+- 📱 Move legend under vaccine types chart on mobile [073ad7a]
+
+
 <a name="3.9.2"></a>
 ## 3.9.2 (2022-08-01)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covidvobcich-web",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "private": true,
   "homepage": "https://covidvobcich.cz",
   "dependencies": {

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 (
-    <ResponsiveContainer width="100%" height={260}>
+    <ResponsiveContainer width="100%" height={320}>
       <PieChart>
         <Pie data={data} dataKey={"value"}>
           {data.map((entry, index) => (
@@ -24,18 +27,28 @@ export default function VaccineTypesChart({ data }) {
         </Pie>
         {/* TODO: keep an eye on https://github.com/recharts/recharts/issues/2704 
         and then update ReCharts after the issue is fixed. */}
-        <Legend
-          verticalAlign="middle"
-          align="right"
-          layout="vertical"
-          wrapperStyle={{ width: "40%" }}
-        />
+        {isDesktop ? (
+          <Legend
+            verticalAlign="middle"
+            align="right"
+            layout="vertical"
+            wrapperStyle={{ width: "40%" }}
+          />
+        ) : (
+          <Legend align="left" />
+        )}
+
         <Tooltip content={<VaccineTypesChartTooltip data={data} />} />
       </PieChart>
     </ResponsiveContainer>
   );
 }
 
 VaccineTypesChart.propTypes = {
-  data: PropTypes.array,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+    })
+  ).isRequired,
 };

src/components/card/OrpVaccinations/orpVaccinationsUtils.js

@@ -37,37 +37,45 @@ 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 vaccineTypes = data
+  const vaccineManufacturers = {
+    Comirnaty: "Pfizer–BioNTech",
+    SPIKEVAX: "Moderna",
+    VAXZEVRIA: "AstraZeneca",
+    "COVID-19 Vaccine Janssen": "Johnson & Johnson",
+  };
+
+  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);
+
+  if (groupedTD > 0) {
+    featuredItems.push({
+      v: "Ostatní",
+      td: groupedTD,
     });
+  }
+
+  const vaccineTypes = featuredItems.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;
 };