added chart weekly cases

package.json

@@ -11,9 +11,11 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "autoprefixer": "^9.8.6",
+    "chart.js": "^2.9.3",
     "leaflet": "^1.6.0",
     "postcss-cli": "^7.1.1",
     "react": "^16.13.1",
+    "react-chartjs-2": "^2.10.0",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^2.7.0",

python/download_dengue_data.py

@@ -22,15 +22,17 @@
 z = zipfile.ZipFile(io.BytesIO(r.content))
 file = z.open("dengue-clusters-kml.kml")
 
-soup = Soup(file.read(), 'lxml') # Parse as XML
+soup = Soup(file.read(), 'lxml')  # Parse as XML
 
 place_marks = soup.find_all('placemark')
 
 dict_to_export = {}
 
 for place_mark in place_marks:
 
-    location_name = place_mark.find('td').string.split("(")[0].split("[")[0].split(",")[0].split("/")[0].strip()
+    location_name = \
+    place_mark.find('td').string.split("(")[0].split("[")[0].split(",")[0].split("/")[
+        0].strip()
     number_cases = int(place_mark.find('simpledata', {"name": "CASE_SIZE"}).string)
 
     coordinates = place_mark.find('coordinates')
@@ -66,4 +68,4 @@
 with open(save_dir, 'w') as fp:
     json.dump(dict_to_export, fp)
 
-print("data correctly downloaded")
+print("data correctly downloaded")

python/download_infectious_disease.py

@@ -0,0 +1,73 @@
+import json
+from bs4 import BeautifulSoup as Soup
+import pandas as pd
+import requests
+import zipfile
+import io
+import os
+import numpy as np
+
+
+class NpEncoder(json.JSONEncoder):
+    def default(self, obj):
+        if isinstance(obj, np.integer):
+            return int(obj)
+        elif isinstance(obj, np.floating):
+            return float(obj)
+        elif isinstance(obj, np.ndarray):
+            return obj.tolist()
+        else:
+            return super(NpEncoder, self).default(obj)
+
+
+data_gov = "https://data.gov.sg/dataset/weekly-infectious-disease-bulletin-cases"
+data_gov = "https://data.gov.sg/api/action/datastore_search?resource_id=ef7e44f1-9b14-4680-a60a-37d2c9dda390&q=dengue"
+
+html_text = requests.get(data_gov).text
+soup = Soup(html_text, 'html.parser')
+
+data_id = soup.find('a', {"class": "ga-dataset-download"}).get("href")
+
+url_data = f"https://data.gov.sg{data_id}"
+
+r = requests.get(url_data, stream=True)
+z = zipfile.ZipFile(io.BytesIO(r.content))
+file = z.open("weekly-infectious-disease-bulletin-cases.csv")
+
+df = pd.read_csv(file)
+
+df_dengue = df[df.disease.isin(['Dengue Fever'])].copy()
+
+df_dengue[["year", "week"]] = df_dengue["epi_week"].str.split("-", expand=True)
+
+dict_to_export = {}
+
+color = ["#2ca02c", "#1f77b4", "#fcc105", "#ff7f0e", "#d62728", "#9467bd", "#800000",
+         "#2ca02c", "#1f77b4", "#fcc105", "#ff7f0e", "#d62728", "#9467bd"]
+
+for ix, year in enumerate(df_dengue["year"].unique()):
+
+    # if int(year) > 2016:
+
+        dict_to_export[year] = {}
+        dict_to_export[year]['cases'] = list(
+            df_dengue[df_dengue['year'] == year]['no._of_cases'].values)
+        dict_to_export[year]['color'] = color[ix]
+
+        # df_year = df_dengue[df_dengue['year'] == year]['no._of_cases'].values
+        #
+        # for week in df_dengue["week"].unique():
+        #
+        #     df_week = df_dengue[df_dengue['week'] == week]
+        #     dict_to_export[year][week] = df_week[["disease", "no._of_cases"]].set_index(
+        #         "disease").to_dict()
+
+save_dir = os.path.join(os.path.dirname(os.getcwd()), "src", "Data",
+    "infectious_disease.json")
+
+save_dir = os.path.join('C:\\Users\\sbbfti\\Desktop\\github-projects\\dengue-singapore', "src", "Data", "infectious_disease.json")
+
+with open(save_dir, 'w') as fp:
+    json.dump(dict_to_export, fp, cls=NpEncoder)
+
+print("data correctly downloaded")

python/requirements.txt

@@ -1,2 +1,3 @@
 lxml==4.5.2
-beautifulsoup4==4.9.1
+beautifulsoup4==4.9.1
+pandas

src/Components/BarChartWeeklyDengue.js

@@ -0,0 +1,129 @@
+import React from "react";
+
+import { Line } from "react-chartjs-2";
+
+function BarChartWeeklyDengue() {
+  const { innerWidth: width } = window;
+
+  let chartHeight;
+  if (width > 500) {
+    chartHeight = 250;
+  } else {
+    chartHeight = 350;
+  }
+
+  let weekly_disease = require("../Data/infectious_disease.json");
+
+  const data = {
+    labels: [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+      "24",
+      "25",
+      "26",
+      "27",
+      "28",
+      "29",
+      "30",
+      "31",
+      "32",
+      "33",
+      "34",
+      "35",
+      "36",
+      "37",
+      "38",
+      "39",
+      "40",
+      "41",
+      "42",
+      "43",
+      "44",
+      "45",
+      "46",
+      "47",
+      "48",
+      "49",
+      "50",
+      "51",
+      "52",
+    ],
+    datasets: [],
+  };
+
+  Object.keys(weekly_disease).map((year) => {
+    data.datasets.push({
+      label: year,
+      backgroundColor: "rgba(0, 0, 0, 0)",
+      borderColor: weekly_disease[year].color,
+      borderWidth: 1,
+      hoverBackgroundColor: weekly_disease[year].color,
+      hoverBorderColor: weekly_disease[year].color,
+      data: weekly_disease[year].cases,
+      yAxisID: "y1",
+    });
+  });
+
+  return (
+    <Line
+      data={data}
+      height={50}
+      width={"100%"}
+      options={{
+        // maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: false,
+                drawOnChartArea: false,
+                drawTicks: true,
+              },
+              ticks: {
+                display: true,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              id: "y1",
+              type: "linear",
+              position: "left",
+              gridLines: { color: "rgba(0, 0, 0, 0.05)" },
+              ticks: {
+                beginAtZero: true,
+              },
+              scaleLabel: {
+                display: true,
+                labelString: "Dengue Fever Cases",
+              },
+            },
+          ],
+        },
+      }}
+    />
+  );
+}
+
+export default BarChartWeeklyDengue;

src/Components/HomeView.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Map, Polygon, Popup, TileLayer } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import TableCases from "./TableCases";
+import BarChartWeeklyDengue from "./BarChartWeeklyDengue";
 
 function HomeView() {
   const position = [1.35, 103.825];
@@ -44,11 +45,30 @@ function HomeView() {
             </Popup>
           </Polygon>
         ))}
-      </Map>
-      <p className="mt-2 text-xs text-center text-gray-900">
-        Click on the cluster to learn more about the number of people that were
-        infected.
+      </Map>{" "}
+      <p className="mt-2 text-center text-gray-900">
+        Click on each cluster to learn more about the number of cases since
+        start of that cluster.
       </p>
+      <div className="container mx-auto flex flex-col px-5 py-8 text-center text-gray-900">
+        <p>
+          This website uses data provided by the{" "}
+          <a href="https://data.gov.sg/dataset/dengue-clusters">
+            Singaporean government.
+          </a>{" "}
+          Data is updated on a daly basis at 1 am.{" "}
+        </p>
+        <p className="mt-2">
+          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 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). This website uses
+          another color legend to better distinguish between dengue's clusters.
+          See legend over the map for more information.
+        </p>
+      </div>
+      <BarChartWeeklyDengue />
     </div>
   );
 }