Merge pull request #16 from brodly/js

Added toggle to display total requests per year

src/javascript/public/app.js

@@ -1,56 +1,83 @@
 (function(){
   let chartData = [];
+  let countRequestType = [];
 
-  const selectors = document.querySelectorAll('.data-dropdown');
-  const chartType = document.querySelector('.chart-type');
-  const submitButton = document.querySelector('button');
   const chart = c3.generate({
     bindto: '#chart',
     data: {
-      type: chartType.value,
+      type: document.querySelector('.chart-type').value,
       columns: [],
     },
+    axis: {
+        x: {
+          show: false,
+        }
+      }
   });
 
-  function displayChart() {
-    getData(selectors[0].value)
-      .then(() => { getData(selectors[1].value)
-        .then(() => {
-          console.log(chartData);
-          updateChart(chartData, chartType.value);
-        })
+  function buildChart() {
+    const requestType = document.querySelector('.request-dropdown').value;
+    const chartType = document.querySelector('.chart-type').value;
+    const datasets = document.querySelectorAll('.data-dropdown');
+
+    getData(datasets[0].value, requestType)
+      .then(() => {
+        getTotal(datasets[0].value, requestType)
+          .then(() => {
+            getData(datasets[1].value, requestType)
+              .then(() => {
+                getTotal(datasets[1].value, requestType)
+                  .then(() => {
+                    renderChart(chartData, countRequestType, chartType);
+                  })
+              })
+          })
       })
-    };
+   };
 
-  function updateChart(data, type) {
+  function renderChart(chartData, countRequestType, type) {
+    const isDisplayTotal = document.querySelector('input[name="total"]').checked;
     let columns = [];
-    const newData = data.reduce((acc, cur) => {
-      const date = cur.createddate.slice(0, 4);
-      if (acc[date]) acc[date].push(parseInt(cur.zipcode));
-      else acc[date] = [];
-      return acc;
-    }, {})
-
-    for (let key in newData) {
-      newData[key].unshift(key);
-      columns.push(newData[key]);
+
+    if (!isDisplayTotal) {
+      const newData = chartData.reduce((acc, cur) => {
+        const date = cur.createddate.slice(0, 4);
+        if (acc[date]) acc[date].push(parseInt(cur.zipcode));
+        else acc[date] = [];
+        return acc;
+      }, {})
+
+      for (let key in newData) {
+        newData[key].unshift(key);
+        columns.push(newData[key]);
+      }
+    } else {
+      columns = countRequestType;
     }
 
     chart.load({ columns, type });
   };
 
-  function getData(action) {
-    return fetch(`/soda/${action}`)
+  function getData(year, requestType) {
+    return fetch(`/soda/${year}/${requestType}`)
       .then(res => res.json())
       .then(data => { chartData.push(...data); })
       .catch(err => { console.error('Fetch Error :-S', err); });
   };
 
-  submitButton.onclick = e => {
+  function getTotal(year, requestType) {
+    return fetch(`/soda/${year}/${requestType}/total`)
+      .then(res => res.json())
+      .then(data => { countRequestType.push([year, parseInt(data[0].count_requesttype)]); })
+      .catch(err => { console.error('Fetch Error :-S', err); })
+  }
+
+  document.querySelector('button').onclick = e => {
     e.preventDefault();
-    // chartData = [];
-    updateChart(chartData, chartType.value);
+    chartData = [];
+    countRequestType = [];
+    buildChart();
   };
 
-  displayChart();
+  buildChart();
 })();

src/javascript/public/index.html

@@ -11,6 +11,21 @@
 
   <div id="app">
     <div id="chart"></div>
+    Service Request
+    <select class="request-dropdown">
+      <option value="Bulky Items">Bulky Items</option>
+      <option value="Dead Animal Removal">Dead Animal Removal</option>
+      <option value="Electronic Waste">Electronic Waste</option>
+      <option value="Graffiti Removal">Graffiti Removal</option>
+      <option value="Homeless Encampment">Homeless Encampment</option>
+      <option value="Illegal Dumping Pickup">Illegal Dumping Pickup</option>
+      <option value="Metal/Household Appliances">Metal/Household Appliances</option>
+      <option value="Single Streetlight Issue">Single Streetlight Issue</option>
+      <option value="Multiple Streetlight Issue">Multiple Streetlight Issue</option>
+      <option value="Report Water Waste">Report Water Waste</option>
+      <option value="Other">Other</option>
+    </select>
+    <br>
     Data Set 1
     <select class="data-dropdown">
       <option value="2016" selected="selected">2016</option>
@@ -25,13 +40,15 @@
     <br>
     Chart Type
     <select class="chart-type">
-      <option value="bar" selected="selected">Bar</option>
-      <option value="scatter">Scatter</option>
+      <option value="scatter" selected="selected">Scatter</option>
+      <option value="bar">Bar</option>
       <option value="pie">Pie</option>
       <option value="line">Line</option>
       <option value="area">Area</option>
     </select>
-    <br>
+    <p>
+    <input type="checkbox" name="total" value="false">Display Total Requests per year
+    <p>
     <button type="button">Submit</button>
   </div>
   <script src="app.js"></script>

src/javascript/server.js

@@ -2,6 +2,9 @@ const express = require('express');
 const path = require('path');
 const Socrata = require('node-socrata');
 
+const app = express();
+const port = 3000;
+
 const resource = {
   2016: 'ndkd-k878',
   2017: 'd4vt-q4t5',
@@ -15,30 +18,37 @@ const config = year => {
   }
 };
 
-const request = 'Bulky Items';
-
-const params = {
-  $select: ['zipcode', 'createddate', 'requesttype'],
-  $where: `requesttype="${request}"`,
-  $limit: 1000,
+const params = (requestType = 'Bulky Items', total = false) => {
+  return {
+    $select: total ? ['count(requesttype)'] : ['createddate', 'zipcode', 'requesttype'],
+    $where: `requesttype="${requestType}"`,
+    $limit: 30,
+  };
 }
 
-const port = 3000;
-
-const app = express();
 const newSoda = year => new Socrata(config(year));
 
 app.use(express.static(path.join(__dirname, 'public')));
 
-app.get('/soda/:year', (req, res) => {
-  const { year } = req.params;
+app.get('/soda/:year/:requestType', (req, res) => {
+  const { year, requestType } = req.params;
   const soda = newSoda(year);
 
-  soda.get(params, (err, response, data) => {
+  soda.get(params(requestType), (err, response, data) => {
     if (err) console.error(err);
     else res.send(data);
   });
 })
 
+app.get('/soda/:year/:requestType/total', (req, res) => {
+  const { year, requestType } = req.params;
+  const soda = newSoda(year);
+
+  soda.get(params(requestType, true), (err, response, data) => {
+    if (err) console.error(err);
+    else res.send(data);
+  })
+});
+
 app.listen(port, () => { console.log(`Listening on port: ${port}`)});