Merge pull request #309 from hackforla/157_sidebar_together

157 sidebar together
hackforla · Mar 1, 2020 · 455e75d · 455e75d
2 parents 30a59a1 + 2cb6abc
commit 455e75d
Show file tree

Hide file tree

Showing 34 changed files with 479 additions and 219 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,13 +21,23 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
+  settings: {
+    "import/extensions": [
+      ".js",
+      ".jsx"
+    ],
+    'import/resolver': {
+      webpack: "webpack.config.js",
+    },
+  },
   plugins: [
     'react',
     'react-hooks'
   ],
   rules: {
     'linebreak-style': 'off',
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "arrow-parens": ["error", "as-needed"]
   },
 };
diff --git a/.example.env b/.example.env
@@ -1 +1,2 @@
 REACT_APP_MAPBOX_TOKEN=REDACTED
+DB_URL=REDACTED
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "dataframe-js": "^1.4.3",
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^1.7.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
     "gh-pages": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
@@ -33,13 +34,15 @@
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
+    "redux-saga": "^1.1.3",
+    "regenerator-runtime": "^0.13.3",
     "webpack-merge": "^4.2.2"
   },
   "scripts": {
     "start": "npm run check-env && npm run dev",
     "dev": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0",
     "build": "webpack --config webpack.prod.js",
-    "lint": "eslint src/**/*.js*",
+    "lint": "eslint 'src/**/*.js*'",
     "test": "jest --passWithNoTests",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="overflow: hidden;">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/server.js b/server.js
@@ -1,15 +1,16 @@
 const express = require('express');
 const path = require('path');
+
 const port = process.env.PORT || 3000;
 const app = express();
 
 // the __dirname is the current directory from where the script is running
-app.use(express.static(__dirname + '/dist'));
+app.use(express.static(path.join(__dirname, '/dist')));
 
 // send the user to index html page inspite of the url
 app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'public/index.html'));
 });
 
-console.log(`Listening on port ${port}`)
+console.log(`Listening on port ${port}`);
 app.listen(port);
diff --git a/src/App.jsx b/src/App.jsx
@@ -12,12 +12,12 @@ const App = () => {
   }, []);
 
   return (
-    <div className="main">
+    <>
       <Header />
       <Body />
       <Footer />
       <Tooltip />
-    </div>
+    </>
   );
 };
 

diff --git a/src/Util/DataService.js b/src/Util/DataService.js
@@ -51,12 +51,12 @@ export function getBroadCallVolume(year, startMonth = 0, endMonth = 13, onBroadD
   const end = Math.max(startMonth, endMonth);
 
   DataFrame.fromJSON(`https://data.lacity.org/resource/${dataResources[year]}.json?$select=count(*)+AS+CallVolume,NCName,RequestType&$where=date_extract_m(CreatedDate)+between+${start}+and+${end}&$group=NCName,RequestType&$order=CallVolume DESC`)
-    .then((df) => {
+    .then(df => {
       df.show();
 
-      const totalCounts = df.groupBy('ncname').aggregate((group) => group.stat.sum('callvolume')).rename('aggregation', 'callvolume');
+      const totalCounts = df.groupBy('ncname').aggregate(group => group.stat.sum('callvolume')).rename('aggregation', 'callvolume');
       const biggestProblems = {};
-      df.toCollection().forEach((row) => {
+      df.toCollection().forEach(row => {
         const rhs = parseInt(row.callvolume, 10);
         const lhs = parseInt(biggestProblems[row.ncname], 10);
         if (!lhs) {
@@ -68,7 +68,7 @@ export function getBroadCallVolume(year, startMonth = 0, endMonth = 13, onBroadD
         }
       });
       const colorMap = getColorMap(false);
-      totalCounts.toCollection().forEach((row) => {
+      totalCounts.toCollection().forEach(row => {
         const biggestProblem = biggestProblems[`${row.ncname}_biggestproblem`];
         const dataPoint = {
           title: row.ncname,
@@ -92,9 +92,9 @@ export function getZoomedCallVolume(
   const start = Math.min(startMonth, endMonth);
   const end = Math.max(startMonth, endMonth);
 
-  DataFrame.fromJSON(`https://data.lacity.org/resource/${dataResources[year]}.json?$select=count(*)+AS+CallVolume,NCName,RequestType&$where=NCName+=+'${ncName}'+and+date_extract_m(CreatedDate)+between+${start}+and+${end}&$group=NCName,RequestType&$order=CallVolume DESC`).then((df) => {
+  DataFrame.fromJSON(`https://data.lacity.org/resource/${dataResources[year]}.json?$select=count(*)+AS+CallVolume,NCName,RequestType&$where=NCName+=+'${ncName}'+and+date_extract_m(CreatedDate)+between+${start}+and+${end}&$group=NCName,RequestType&$order=CallVolume DESC`).then(df => {
     const colorMap = getColorMap(false);
-    df.toCollection().forEach((row) => {
+    df.toCollection().forEach(row => {
       const dataPoint = {
         title: row.requesttype,
         color: colorMap[row.requesttype],

diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
@@ -1,6 +1,12 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import {
-  Map, Marker, Popup, TileLayer, Rectangle, Tooltip,
+  Map,
+  Marker,
+  Popup,
+  TileLayer,
+  Rectangle,
+  Tooltip,
 } from 'react-leaflet';
 import Choropleth from 'react-leaflet-choropleth';
 import PropTypes from 'proptypes';
@@ -10,27 +16,20 @@ import PropTypes from 'proptypes';
 // import councilDistrictsOverlay from '../../data/la-city-council-districts-2012.json';
 import ncOverlay from '../../data/nc-boundary-2019.json';
 
-const pinMapProps = {
-  data: PropTypes.string,
-  showMarkers: PropTypes.boolean,
-};
-
-
 class PinMap extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      position: [34.0173157, -118.2497254],
+      position: [34.0094213, -118.6008506],
       zoom: 10,
       mapUrl: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
-      // dataUrl: 'https://data.lacity.org/resource/h65r-yf5i.json?$select=location,zipcode,address,requesttype,status,ncname,streetname,housenumber&$where=date_extract_m(CreatedDate)+between+2+and+3',
       geoJSON: ncOverlay,
       bounds: null,
     };
   }
 
-  highlightRegion = (e) => {
+  highlightRegion = e => {
     const layer = e.target;
 
     layer.setStyle({
@@ -43,7 +42,7 @@ class PinMap extends Component {
     layer.bringToFront();
   }
 
-  resetRegionHighlight = (e) => {
+  resetRegionHighlight = e => {
     const layer = e.target;
 
     layer.setStyle({
@@ -56,7 +55,7 @@ class PinMap extends Component {
     });
   }
 
-  zoomToRegion = (e) => {
+  zoomToRegion = e => {
     const bounds = e.target.getBounds();
     this.setState({ bounds });
   }
@@ -96,7 +95,7 @@ class PinMap extends Component {
             fillOpacity: 0.7,
           }}
           onEachFeature={this.onEachFeature}
-          ref={(el) => {
+          ref={el => {
             if (el) {
               this.choropleth = el.leafletElement;
               return this.choropleth;
@@ -115,13 +114,12 @@ class PinMap extends Component {
     const { data, showMarkers } = this.props;
 
     if (showMarkers && data) {
-      return data.map((d) => {
-        if (d.location) {
-          const { location } = d;
-          const position = [location.latitude, location.longitude];
+      return data.map(d => {
+        if (d.latitude && d.longitude) {
+          const position = [d.latitude, d.longitude];
 
           return (
-            <Marker key={position.toString()} position={position}>
+            <Marker key={d.srnumber} position={position}>
               <Popup>
                 Type:
                 {d.requesttype}
@@ -141,7 +139,12 @@ class PinMap extends Component {
 
     return (
       <Rectangle bounds={tooltipPosition} color="black">
-        <Tooltip direction="top" offset={[0, 20]} opacity={1} permanent>
+        <Tooltip
+          permanent
+          direction="top"
+          offset={[0, 20]}
+          opacity={1}
+        >
           No Data To Display
         </Tooltip>
       </Rectangle>
@@ -162,7 +165,7 @@ class PinMap extends Component {
           center={position}
           zoom={zoom}
           bounds={bounds}
-          style={{ height: '85vh' }}
+          style={{ height: '88.4vh' }}
         >
           <TileLayer
             url={mapUrl}
@@ -182,11 +185,18 @@ class PinMap extends Component {
   }
 }
 
+const mapStateToProps = state => ({
+  data: state.data.data,
+});
+
+PinMap.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({})),
+  showMarkers: PropTypes.bool,
+};
+
 PinMap.defaultProps = {
-  data: '',
+  data: undefined,
   showMarkers: true,
 };
 
-PinMap.propTypes = pinMapProps;
-
-export default PinMap;
+export default connect(mapStateToProps, null)(PinMap);
diff --git a/src/components/Visualizations/Chart.js → src/components/Visualizations/Chart.jsx b/src/components/Visualizations/Chart.js → src/components/Visualizations/Chart.jsx
@@ -4,7 +4,7 @@ import Chart from 'chart.js';
 import 'chartjs-chart-box-and-violin-plot';
 import COLORS from '@styles/COLORS';
 
-/////////// CHARTJS DEFAULTS ///////////
+// ///////// CHARTJS DEFAULTS ///////////
 
 Object.assign(Chart.defaults.global, {
   defaultFontColor: COLORS.FONTS,
@@ -38,10 +38,9 @@ Object.assign(Chart.defaults.global.tooltips, {
   cornerRadius: 4,
 });
 
-////////////// COMPONENT //////////////
+// //////////// COMPONENT //////////////
 
 class ReactChart extends React.Component {
-
   canvasRef = React.createRef();
 
   componentDidMount() {
@@ -56,18 +55,22 @@ class ReactChart extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.data !== this.props.data) {
-      this.chart.data = this.props.data;
+    const { data } = this.props;
+
+    if (prevProps.data !== data) {
+      this.chart.data = data;
       this.chart.update();
       this.setHeight();
     }
   }
 
   setHeight = () => {
-    if (this.props.height) {
+    const { height } = this.props;
+
+    if (height) {
       const numLabels = this.chart.data.labels.length;
-      const height = this.props.height(numLabels);
-      this.canvasRef.current.parentNode.style.height = height + 'px';
+      const heightPx = height(numLabels);
+      this.canvasRef.current.parentNode.style.height = `${heightPx}px`;
     }
   }
 
@@ -84,8 +87,8 @@ export default ReactChart;
 
 ReactChart.propTypes = {
   type: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
+  data: PropTypes.shape.isRequired,
+  options: PropTypes.shape.isRequired,
   height: PropTypes.func,
 };
 

diff --git a/src/components/Visualizations/Criteria.jsx b/src/components/Visualizations/Criteria.jsx
@@ -47,7 +47,7 @@ export default connect(mapStateToProps)(Criteria);
 Criteria.propTypes = {
   startDate: PropTypes.string,
   endDate: PropTypes.string,
-  councils: PropTypes.array.isRequired,
+  councils: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 Criteria.defaultProps = {