Merge pull request #8 from cartologic/development

Fix COVID-19 statistics graphs not shown

src/components/BarChartViewer/BarChart/BarChart.js

@@ -12,21 +12,21 @@ class BarChart extends Component {
     let regionValues = [];
     // 1. Filter data by region
     regionValues = this.props.data.filter(
-      (d) => d.properties.RegionNa_1 === regionName
+      (d) => d.properties.regionna_1 === regionName
     );
 
     // 2. Sorting filtered by region data
     regionValues = regionValues
       .slice()
       .sort((a, b) =>
-        d3.ascending(a.properties.Reportdt, b.properties.Reportdt)
+        d3.ascending(a.properties.reportdt, b.properties.reportdt)
       );
 
     // 3. Format the date to be yyyy-mm-dd instead of the current
     const labelDates = regionValues.map((d) =>
-      d.properties.Reportdt.slice(0, 10)
+      d.properties.reportdt.slice(0, 10)
     );
-    regionValues.map((d, i) => (d.properties.Reportdt = labelDates[i]));
+    regionValues.map((d, i) => (d.properties.reportdt = labelDates[i]));
 
     // 4. Create total cases for each day. The output should be something like this:
     // date: Array of dates, totalCases: Array of cases as each case corresponding to each date index.
@@ -57,10 +57,10 @@ class BarChart extends Component {
     let sumCasesforDate = 0;
 
     for (let i = 0; i < data.length - 1; i++) {
-      if (data[i + 1].properties.Reportdt !== data[i].properties.Reportdt) {
+      if (data[i + 1].properties.reportdt !== data[i].properties.reportdt) {
         if (
           data[i - 1] &&
-          data[i].properties.Reportdt === data[i - 1].properties.Reportdt
+          data[i].properties.reportdt === data[i - 1].properties.reportdt
         ) {
           sumCasesforDate = sumCasesforDate + data[i].properties[caseType];
           validCases.push(sumCasesforDate);

src/components/BarChartViewer/BarChartViewer.js

@@ -1,60 +1,65 @@
-import React, { Component } from "react";
-import axois from "axios";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 import Loader from "react-loader-spinner";
 import BarChart from "./BarChart/BarChart";
 import classes from "./BarChartViewer.module.css";
+import config from "../../configurations/config.json";
 
-class BarChartViewer extends Component {
-  constructor(props) {
-    super(props);
+const BarChartViewer = props => {
+  const [saudiData, setSaudiData] = useState([]);
+  const [loading, setLoading] = useState(true);
 
-    this.state = {
-      saudiData: [],
-      loading: true,
+  useEffect(() => {
+    const requestParams = {
+      srsName: "EPSG:3857",
+      outputFormat: "json",
+      service: "WFS",
+      srs: "EPSG:3857",
+      request: "GetFeature",
+      version: "1.0.0"
     };
-  }
+    const { covidHostedView } = config && config.layersNames;
 
-  componentDidMount() {
-    axois
-      .get(
-        "http://mapsaudi.com/geoserver/ows?srsName=EPSG%3A3857&outputFormat=json&service=WFS&srs=EPSG%3A3857&request=GetFeature&typename=geonode%3Ahostedview&version=1.0.0"
-      )
-      .then((response) => {
-        this.setState({
-          saudiData: response.data.features,
-          loading: false,
-        });
+    axios
+      .get(`${config.SiteURL}/geoserver/ows`, {
+        params: {
+          ...requestParams,
+          typename: covidHostedView
+        }
+      })
+      .then(response => {
+        setSaudiData(response.data.features);
+        setLoading(false);
       });
-  }
+  }, []);
 
-  render() {
-    const { saudiData, loading } = this.state;
-    return (
-      <div className={classes.BarChartLayout}>
-        {!loading ? (
+  return (
+    <div className={classes.BarChartLayout}>
+      {
+        !loading ? (
           <div className={classes.BarChart}>
             <BarChart
               data={saudiData}
-              regionName={this.props.regionName}
-              caseType="Confirmed"
+              regionName={props.regionName}
+              caseType="confirmed"
             />
             <BarChart
               data={saudiData}
-              regionName={this.props.regionName}
-              caseType="Deaths"
+              regionName={props.regionName}
+              caseType="deaths"
             />
             <BarChart
               data={saudiData}
-              regionName={this.props.regionName}
-              caseType="Tested"
+              regionName={props.regionName}
+              caseType="tested"
             />
           </div>
         ) : (
           <Loader type="Oval" color="#4BAE53" height={50} width={50} />
-        )}
-      </div>
-    );
-  }
-}
+        )
+      }
+    </div>
+  );
+};
 
 export default BarChartViewer;

src/configurations/config.json

@@ -2,6 +2,7 @@
   "SiteURL": "http://mapsaudi.com",
   "layersNames": {
     "covidRegions": "geonode:covidbyregion",
-    "covidGovernorates": "geonode:sagov"
+    "covidGovernorates": "geonode:sagov",
+    "covidHostedView": "geonode:hostedview"
   }
 }