Merge pull request #74 from usrcovid19datafactory/feature/new-categories

CR: New Campaign 2024 2025
italia · Oct 11, 2024 · 3964174 · 3964174
2 parents 8683dee + ec7120c
commit 3964174
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ The main library used to show plots is [D3.js](https://d3js.org/). Also,
 ## Development
 ### Local Dev
 
-Install all dependencies and start
+Install all dependencies and  start
 ```bash
 $ yarn install
 $ yarn start

diff --git a/public/web.config b/public/web.config
@@ -0,0 +1,10 @@
+<configuration>
+    <system.webServer>
+        <staticContent>
+            <mimeMap fileExtension=".json" mimeType="application/json" />
+            <mimeMap fileExtension=".woff" mimeType="font/woff" />
+            <mimeMap fileExtension=".woff2" mimeType="font/woff" />
+        </staticContent>
+    </system.webServer>
+</configuration>
+
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,46 +1,21 @@
-import { useState, useEffect } from 'react';
-import { HeaderBar } from "./components/HeaderBar";
-import { FooterBar } from "./components/FooterBar";
-import { TotalHistory } from "./components/TotalHistory";
-import { Total } from "./components/Total";
-import { loadData } from "./loadData";
-import { AgeDoses } from "./containers/agedoses";
-import { AgeDosesHistory } from "./containers/agedosesHistory";
-import { Weeks } from "./containers/weeks";
-import { Databox } from "./containers/databox";
-import { hideLoader } from "./utils";
 import "./App.css";
 import "./fontawesome/brands.css";
 import "./fontawesome/fontawesome.css";
 import "./fontawesome/solid.css";
 
-function App() {
-    const [summary, setSummary] = useState({});
+import { Campaign20232024 } from "./campaigns/Campaign-2023-2024";
+import { Campaign20242025 } from "./campaigns/Campaign-2024-2025";
+import { FooterBar } from "./components/FooterBar";
+import { HeaderBar } from "./components/HeaderBar";
 
-    useEffect(() => {
-        loadData().then((d) => {
-        hideLoader();
-        setSummary(d);
-        });
-    }, []);
+function App() {
 
     return (
         <div>
             <HeaderBar />
             <div className="container">
-                <Total summary={{ ...summary }} />              {/* Totale Somministrazioni campagna attuale */}
-                <Weeks data={summary} />                        {/* Grafico Andamento Settimanale delle Somministrazioni */}
-                <AgeDoses data={summary} />                     {/* Grafico Somministrazioni per fascia d'età dati storici */}
-                <div className="row mt-5 mb-5">
-                    <div className="flag-green col-md-4 col-3"></div>
-                    <div className="col-md-4 col-6">
-                        <img className="col-md-12" src="ministero.png" alt="logo-ministero" />
-                    </div>
-                    <div className="flag-red col-md-4 col-3"></div>
-                </div>
-                <TotalHistory summary={{ ...summary }} />       {/* Totale Somministrazioni storiche */}
-                <AgeDosesHistory data={summary} />              {/* Grafico Somministrazioni per fascia d'età dati storici */}
-                <Databox data={summary} />                      {/* Box riepilogo dati storici */}
+                <Campaign20242025 />   
+                <Campaign20232024 />
             </div>
             <FooterBar />
         </div>

diff --git a/src/campaigns/Campaign-2023-2024.jsx b/src/campaigns/Campaign-2023-2024.jsx
@@ -0,0 +1,49 @@
+import { baseURL, loadData } from "../loadData";
+import { useEffect, useState } from 'react';
+import { AgeDoses } from "../containers/agedoses";
+import {CampaignContext} from './CampaignContext'
+import { Total } from "../components/Total";
+import { CampaignHistory } from "./Campaign-History";
+
+const context = {
+    total:{
+        title:'Dati Campagna vaccinale anti Covid-19 2023/2024 fino al 17/09/2024',
+        subtitle: 'Dati e statistiche sulla vaccinazione anti Covid-19 a partire da 24 Settembre 2023 al 17 Settembre 2024',
+        showLastUpdate: false,
+        periodTitle: 'Totale somministrazioni fino al 17/09/2024'
+    },
+    ageDoses:{
+        title:"Somministrazioni di XBB 1.5 per fascia d'età - fino al 17/09/2024"
+    }
+}
+
+export const Campaign20232024 = () => {
+
+    const [summary, setSummary] = useState({});
+
+    useEffect(() => {
+        // campagna 2023-2024
+        const campagnaUrl = `${baseURL}/somministrazioni-vaccini-latest-campagna-2023-2024.json`;
+        const summaryUrl = `${baseURL}/somministrazioni-vaccini-summary-latest-campagna-2023-2024.json`;
+
+        loadData({campagnaUrl, summaryUrl}).then((d) => {
+            setSummary(d);
+        });
+    }, []);
+
+    return (
+        <CampaignContext.Provider value={context}>
+            <Total summary={summary} />              {/* Totale Somministrazioni campagna attuale */}
+            <AgeDoses data={summary} />                     {/* Grafico Somministrazioni per fascia d'età dati storici */}
+            <div className="row mt-5 mb-5">
+                <div className="flag-green col-md-4 col-3"></div>
+                <div className="col-md-4 col-6">
+                    <img className="col-md-12" src="ministero.png" alt="logo-ministero" />
+                </div>
+                <div className="flag-red col-md-4 col-3"></div>
+            </div>
+           <CampaignHistory summary={summary}/>
+        </CampaignContext.Provider>
+    )
+}
+
diff --git a/src/campaigns/Campaign-2024-2025.jsx b/src/campaigns/Campaign-2024-2025.jsx
@@ -0,0 +1,55 @@
+import { baseURL, loadData } from "../loadData";
+import { useEffect, useState } from 'react';
+import { AgeDoses } from "../containers/agedoses";
+import {CampaignContext} from './CampaignContext';
+import { Total } from "../components/Total";
+import { Weeks } from "../containers/weeks";
+import { hideLoader } from "../utils";
+
+const context = {
+    total:{
+        title: 'Campagna vaccinale Autunno-Inverno 2024/2025',
+        subtitle: 'I dati sono aggiornati su base settimanale e sono disponibili in formato aperto con il dettaglio giornaliero.',
+        showLastUpdate: true,
+        periodTitle: 'Totale somministrazioni dal 17/09/2024',
+        periodSubtitle: 'Il dato può subire variazioni negative a seguito di rettifiche da parte delle regioni.'
+    },
+    weeks:{
+        title:"Somministrazioni su base settimanale"
+    },
+    ageDoses:{
+        title:"Somministrazioni per fascia d'età"
+    }
+}
+
+export const Campaign20242025 = () => {
+
+    const [summary, setSummary] = useState({});
+
+    useEffect(() => {
+        // campagna 2024-2025
+        const campagnaUrl = `${baseURL}/somministrazioni-vaccini-latest-campagna-2024-2025.json`;
+        const summaryUrl = `${baseURL}/somministrazioni-vaccini-summary-latest-campagna-2024-2025.json`;
+
+        loadData({campagnaUrl, summaryUrl}).then((d) => {
+        setSummary(d);
+        hideLoader();
+        });
+    }, []);
+
+    return (
+        <CampaignContext.Provider value={context}>
+            <Total summary={summary} />              {/* Totale Somministrazioni campagna attuale */}
+            <Weeks data={summary} />                        {/* Grafico Andamento Settimanale delle Somministrazioni */}
+            <AgeDoses data={summary} />                     {/* Grafico Somministrazioni per fascia d'età dati storici */}
+            <div className="row mt-5 mb-5">
+                <div className="flag-green col-md-4 col-3"></div>
+                <div className="col-md-4 col-6">
+                    <img className="col-md-12" src="ministero.png" alt="logo-ministero" />
+                </div>
+                <div className="flag-red col-md-4 col-3"></div>
+            </div>
+        </CampaignContext.Provider>
+    )
+}
+
diff --git a/src/campaigns/Campaign-History.jsx b/src/campaigns/Campaign-History.jsx
@@ -0,0 +1,12 @@
+import { AgeDosesHistory } from "../containers/agedosesHistory";
+import { Databox } from "../containers/databox";
+import { TotalHistory } from "../components/TotalHistory";
+
+export const CampaignHistory = ({summary}) => {
+    return (<>
+        <TotalHistory summary={summary} />       {/* Totale Somministrazioni storiche */}
+        <AgeDosesHistory data={summary} />              {/* Grafico Somministrazioni per fascia d'età dati storici */}
+        <Databox data={summary} />                      {/* Box riepilogo dati storici */}
+        </>)
+}
+
diff --git a/src/campaigns/CampaignContext.jsx b/src/campaigns/CampaignContext.jsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+const defaultValue = { 
+    weeks:{ title: "" },
+    total:{ title: "" , subtitle: "", showLastUpdate: false, periodTitle: "", periodSubtitle: ""},
+    ageDoses:{ title: ""},
+}
+
+export const CampaignContext = createContext(defaultValue)
+
+const raise = () =>  {
+    throw new Error('useAmbienteContext must be used inside a AmbienteContext providing a valid selector');
+}
+
+export const useCampaignContext = (name) => {
+    const context = useContext(CampaignContext) ?? raise()
+    return Reflect.get(context, name);
+  };
diff --git a/src/components/Total.jsx b/src/components/Total.jsx
@@ -1,34 +1,33 @@
 import { React } from "react";
 import moment from "moment";
+import { useCampaignContext } from "../campaigns/CampaignContext";
 
 export const Total = (props) => {
+    const {title, subtitle, showLastUpdate, periodTitle, periodSubtitle} = useCampaignContext('total')
     return (
         <div className="h-100 w-100 my-3">
             <div className="p-3 mb-5">
-                <h3 className="text-center">Campagna vaccinale Autunno-Inverno 2023/2024</h3>
+                <h3 className="text-center">{title}</h3>
                 <div className="col-12 d-flex justify-content-center align-items-center">
-                    <h6>I dati sono aggiornati su base settimanale e sono disponibili in formato aperto con il dettaglio giornaliero.</h6>
+                    <h6>{subtitle}</h6>
                 </div>
             </div>
-
-            <div className="mx-auto">
+            {showLastUpdate && <div className="mx-auto">
                 <h5 className="text-center pb-4">Ultimo aggiornamento dati</h5>
                 <h6 className="text-center pb-4">
                     {props.summary.timestamp && moment(props.summary.timestamp).format("DD-MM-YYYY")}
                 </h6>
-            </div>
+            </div>}
             <div className="d-flex flex-column justify-content-center">
                 <div className="d-flex justify-content-center align-items-baseline">
                     <img src="meds.png" alt="meds" className="pl-2 pr-5" />
-                    {" "}
                     <div className="pl-2 mt-4 numbers">{props.summary.totCampagna?.toLocaleString('it')}</div>
                 </div>
                 <span className="border-divider mb-2"></span>
                 <div className="d-flex justify-content-center">
-                    {" "}
-                    <h3>Totale somministrazioni con vaccino adattato XBB 1.5</h3>
+                    <h3>{periodTitle}</h3>
                 </div>
-                <div className="d-flex justify-content-center">Il dato può subire variazioni negative a seguito di rettifiche da parte delle regioni.</div>
+                {periodSubtitle && <div className="d-flex justify-content-center">{periodSubtitle}</div>}
             </div>
         </div>
     );

diff --git a/src/components/TotalHistory.jsx b/src/components/TotalHistory.jsx
@@ -12,12 +12,10 @@ export const TotalHistory = (props) => {
             <div className="d-flex flex-column justify-content-center">
                 <div className="d-flex justify-content-center align-items-baseline">
                     <img src="meds.png" alt="meds" className="pl-2 pr-5" />
-                    {" "}
                     <div className="pl-2 mt-4 numbers">{props.summary.tot?.toLocaleString('it')}</div>
                 </div>
                 <span className="border-divider mb-2"></span>
                 <div className="d-flex justify-content-center">
-                    {" "}
                     <h3>Totale somministrazioni fino al 24/09/2023</h3>
                 </div>
             </div>

diff --git a/src/containers/agedoses.jsx b/src/containers/agedoses.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { isEmpty, max } from "lodash";
+
 import { AgeHStackedBarChart } from "../components/AgeHStackedBarChart";
 import { MapArea } from "../components/MapArea";
+import { useCampaignContext } from "../campaigns/CampaignContext";
 
 export const AgeDoses = ({ data }) => {
     const [dosesAgesColor, setdosesAgesColor] = useState([]);
@@ -93,12 +95,13 @@ export const AgeDoses = ({ data }) => {
         }
     };
 
+    const {title} = useCampaignContext('ageDoses')
     return (
         <div className="row">
             {/* Box Title */}
             <div className="col-12 d-flex justify-content-center align-items-center section-title mx-2">
                 <div>
-                    <h3>Somministrazioni di XBB 1.5 per fascia d'età</h3>
+                    <h3>{title}</h3>
                 </div>
             </div>
             {/* // Box Title */}

diff --git a/src/containers/weeks.jsx b/src/containers/weeks.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { isEmpty } from "lodash";
-import { StackedBarChart } from "./../components/StackedBarChart";
+
 import { RangeWeek } from "./../components/RangeWeek";
+import { StackedBarChart } from "./../components/StackedBarChart";
+import { isEmpty } from "lodash";
+import { useCampaignContext } from "../campaigns/CampaignContext";
 
 export const Weeks = ({ data }) => {
     const [suppliersColor, setSuppliersColor] = useState([]);
@@ -33,11 +35,13 @@ export const Weeks = ({ data }) => {
         }
       }, [data]);
 
+    const {title} = useCampaignContext('weeks')
+
     return (
         <div className="row">
             {/* Title Box - Desktop View */}
             <div className="col-12 d-flex justify-content-center align-items-center section-title px-5 mx-2">
-                <span><h3>Somministrazioni su base settimanale<br />del richiamo con XBB 1.5<br/></h3>
+                <span><h3>{title}</h3>
                 <h6>Vaccinazioni dal <b>{fromLastWeek}</b> al <b>{toLastWeek}</b>: {totalLastWeek?.toLocaleString('it')}</h6>
                 </span>
             </div>