* updated weekly number of cases

* improved AboutView.js
* add route to location cumulative chart

src/App.js

@@ -5,6 +5,7 @@ import AboutView from "./Components/AboutView";
 import Loader from "./Components/Loader";
 import NavigationBar from "./Components/NavigationBar";
 import Footer from "./Components/Footer";
+import LineChartCasesLocation from "./Components/LineChartCasesLocation";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
             <Route path="/about">
               <AboutView />
             </Route>
+            <Route path="/location/:name" component={LineChartCasesLocation} />
           </Switch>
         </Suspense>
         <div>

src/Components/AboutView.js

@@ -31,14 +31,15 @@ function AboutView() {
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
             Dengue Singapore
           </h1>
-          <p className="mb-8 leading-relaxed">
+          <p className="mb-6 leading-relaxed">
             Hello! My name is Federico Tartarini, the developer of the Dengue
             Singapore website.
           </p>
           <p className="mb-8 leading-relaxed">
-            Dengue Singapore uses data from the National Environment Agency
-            (NEA) in Singapore, hence, you trust the data. Data is updated on a
-            daly basis.
+            Dengue Singapore is an easy to use web-site which lets you monitor
+            the dengue clusters in Singapore. All the data in this website are
+            updated daily. Data are downloaded using the APIs provided by the
+            National Environment Agency (NEA) in Singapore.
           </p>
           <div className="flex w-full justify-center">
             <a href="https://www.buymeacoffee.com/FedericoT">
@@ -53,13 +54,23 @@ function AboutView() {
           <p className="text-sm mt-2 text-gray-600 mb-8 w-full">
             To support my work please consider buying me a coffee.
           </p>
+          <p className="leading-relaxed mb-6">
+            If you enjoyed this website you may also want to visit{" "}
+            <a href={"weather.sg"}>Air Quality and Weather SG</a>. This website
+            allows you to check the weather forecast and air quality in
+            Singapore. With{" "}
+            <a href={"weather.sg"}>Air Quality and Weather SG</a> you can
+            monitor the current weather conditions in your location as well as
+            the 24-h and 2-h weather forecasts for Singapore. It also features a
+            rain radar.
+          </p>
           <p className="leading-relaxed">
             I would like to thank the Singaporean government who provides the
             data. In addition, I would like to thank the developers at
             OpenStreetMap, Leaflet, React, FontAwesome, Inkscape and Google. I
             could now have created Dengue Singapore without their amazing work.
           </p>
-          <p>
+          <p className="leading-relaxed">
             I have released the website code open-source and upload it on
             GitHub. Feel free to{" "}
             <a href="https://github.com/FedericoTartarini/dengue-singapore">

src/Components/HomeView.js

@@ -4,6 +4,7 @@ import "leaflet/dist/leaflet.css";
 import TableCases from "./TableCases";
 import LineChartWeeklyDengue from "./LineChartWeeklyDengue";
 import { Helmet } from "react-helmet";
+import { Link } from "react-router-dom";
 
 function HomeView() {
   const position = [1.35, 103.825];
@@ -47,43 +48,54 @@ function HomeView() {
             color={cases[value].color}
           >
             <Popup>
-              <div className="text-center">
-                <span className="text-base capitalize">{value}</span> <br />
-                Number of cases {cases[value].cases}.<br /> NEA alert level{" "}
-                {cases[value].cases < 10 ? (
-                  <span className="text-base text-yellow-600">Yellow</span>
-                ) : (
-                  <span className="text-base text-red-600">Red</span>
-                )}
+              <div className="text-center text-base">
+                <span className="capitalize">
+                  {value.match(/[A-Z][a-z]+|[0-9]+/g).join(" ")}
+                </span>
+                <br />
+                <span className="mt-2">
+                  Number of cases {cases[value].cases}.<br /> NEA alert level{" "}
+                  {cases[value].cases < 10 ? (
+                    <span className="text-yellow-600">Yellow</span>
+                  ) : (
+                    <span className="text-red-600">Red</span>
+                  )}
+                  <br />
+                </span>
+                <Link to={`/location/${value}`}>
+                  <span className="text-base">Cases over time</span>
+                </Link>
               </div>
             </Popup>
           </Polygon>
         ))}
       </Map>{" "}
-      <div className="container mx-auto flex flex-col px-5 text-center text-gray-900">
-        <p className="mt-2">
-          Click on each cluster in the map above to learn more about the number
-          of cases recorded since the start of that cluster and to know the NEA
-          alert level.
+      <div className="container mx-auto flex flex-col px-5 text-gray-900">
+        <p className="mt-4">
+          Click on each cluster in the map above to learn more about the
+          cumulative number of cases recorded in that location since the start
+          of that cluster. The popup also shows the NEA alert level and contains
+          a link to a chart that shows how the number of cases over time.
         </p>
         <p className="mt-6">
-          A dengue cluster is a locality where two or more cases have onset
-          within 14 days and are located within 150m of each other. While
-          National Environmental Agency (NEA) categorizes clusters in three
-          alert levels: red (high risk with more than 10 cases); yellow (high
-          risk with less than 10 cases), and; green (no new cases but under
-          surveillance for 21 days). More information about the NEA alert level
-          can be found by clicking on the relative cluster.
+          A dengue cluster is a locality where two or more cases have been
+          recorded within the last 14 days and are located within 150 m of each
+          other. The National Environmental Agency (NEA) categorizes clusters in
+          three alert levels: red (high risk with more than 10 cases); yellow
+          (high risk with less than 10 cases), and; green (no new cases but
+          under surveillance for 21 days).
         </p>
         <p className="mt-2">
           This website uses data provided by the{" "}
           <a href="https://data.gov.sg/dataset/dengue-clusters">
             Singaporean government.
-          </a>
+          </a>{" "}
+          Data are programmatically downloaded on a daily basis at 6 am from the
+          website data.gov.sg.
         </p>
       </div>
       <LineChartWeeklyDengue />
-      <div className="container mx-auto flex flex-col px-5 py-4 text-center text-gray-900">
+      <div className="container mx-auto flex flex-col px-5 py-4 text-gray-900">
         <p className="mt-0">
           The NEA suggests the following protective actions to reduce dengue
           "Spray, Apply and Wear". Spray insecticide in dark corners, apply

src/Components/LineChartCasesLocation.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+
+function LineChartCasesLocation({ match }) {
+  const { innerWidth: width } = window;
+
+  let chartHeight;
+
+  if (width > 500) {
+    chartHeight = 400;
+  } else {
+    chartHeight = 300;
+  }
+
+  let weekly_disease = require("../Data/timeline_cases_location.json");
+
+  const location = match.params.name;
+
+  const data = {
+    labels: [],
+    datasets: [
+      {
+        label: location,
+        backgroundColor: "rgba(0, 0, 0, 0)",
+        borderColor: "#dc2f02",
+        borderWidth: 2,
+        hoverBackgroundColor: "#dc2f02",
+        hoverBorderColor: "#dc2f02",
+        data: [],
+        yAxisID: "y1",
+      },
+    ],
+  };
+
+  Object.keys(weekly_disease[location]).forEach((day) => {
+    data.labels.push(day);
+
+    data.datasets[0].data.push(weekly_disease[location][day]);
+  });
+
+  return (
+    <div>
+      <div className="container mx-auto p-2 flex flex-col text-center">
+        <h1 className="title-font text-2xl my-4 font-medium text-gray-900">
+          Cluster name: {location.match(/[A-Z][a-z]+|[0-9]+/g).join(" ")}
+        </h1>
+        <p className="mb-8 leading-relaxed">
+          The line chart below shows the cumulative number of cases in this
+          cluster.
+        </p>
+      </div>
+      <div className="container mx-auto mt-2 flex flex-col">
+        <Line
+          data={data}
+          height={chartHeight}
+          width={width}
+          options={{
+            maintainAspectRatio: false,
+            legend: {
+              display: false,
+            },
+            scales: {
+              xAxes: [
+                {
+                  gridLines: {
+                    display: false,
+                    drawOnChartArea: false,
+                    drawTicks: true,
+                  },
+                  ticks: {
+                    display: true,
+                  },
+                  scaleLabel: {
+                    display: true,
+                    labelString: "Day",
+                  },
+                },
+              ],
+              yAxes: [
+                {
+                  id: "y1",
+                  type: "linear",
+                  position: "left",
+                  gridLines: { color: "rgba(0, 0, 0, 0.05)" },
+                  ticks: {
+                    beginAtZero: false,
+                    callback: function (value) {
+                      if (value % 1 === 0) {
+                        return value;
+                      }
+                    },
+                  },
+                  scaleLabel: {
+                    display: true,
+                    labelString: "Dengue fever cases",
+                  },
+                },
+              ],
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default LineChartCasesLocation;

src/Components/LineChartWeeklyDengue.js

@@ -97,11 +97,13 @@ function LineChartWeeklyDengue() {
 
   return (
     <div>
-      <div className="container mx-auto flex flex-col text-center">
+      <div className="container mx-auto flex px-5 flex-col">
         <p className="mt-6">
-          A total of {weekly_disease["2020"].cases.reduce((a, b) => a + b, 0)}{" "}
-          cases have been recorded in the first{" "}
-          {weekly_disease["2020"].cases.length} weeks of 2020.
+          The line chart below shows the weekly number of dengue fever cases
+          recorded in Singapore. A total of{" "}
+          {weekly_disease["2020"].cases.reduce((a, b) => a + b, 0)} cases have
+          been recorded in the first {weekly_disease["2020"].cases.length} weeks
+          of 2020.
         </p>
       </div>
       <div className="container mx-auto mt-2 flex flex-col">
@@ -147,6 +149,12 @@ function LineChartWeeklyDengue() {
           }}
         />
       </div>
+      <div className="container mx-auto flex px-5 flex-col">
+        <p className="mt-6">
+          The data until May 2020 were downloaded from data.gov.sg. while the
+          latest data are downloaded weekly from the nea.gov.sg website.
+        </p>
+      </div>
     </div>
   );
 }

src/Data/infectious_disease.json

@@ -491,7 +491,8 @@
       1379,
       1667,
       1339,
-      1288
+      1288,
+      1155
     ],
     "color": "#1f77b4"
   }