Merge branch 'dev' into dev

.github/workflows/Publish_Backend_Package.yml

@@ -37,9 +37,9 @@ jobs:
       env:
         HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
       run: |
-        docker tag docker.pkg.github.com/hackforla/311-data/backend:${{github.sha}} registry.heroku.com/hackforla-311-data/web
-        docker push registry.heroku.com/hackforla-311-data/web
+        docker tag docker.pkg.github.com/hackforla/311-data/backend:${{github.sha}} registry.heroku.com/hackforla-311/web
+        docker push registry.heroku.com/hackforla-311/web
     - name: Release
       env:
         HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
-      run: heroku container:release -a hackforla-311-data web
+      run: heroku container:release -a hackforla-311 web

GETTING_STARTED.md

@@ -34,6 +34,10 @@ CI Is driven by tests, they help instill confidence in pull requests because a d
 
 Our front end tests are run through Enzyme and our backend tests are run through Pytest.
 
+## System architecture
+Here is our rough draft of our architecture diagram, since the application is not yet 'deployed to production' this diagram might not be the exact representation of what currently exists
+![System diagram](311-system-architecture.png)
+
 ## Postgres
 Our persistence layer is run by Postgresql. It is recommended to review [this]([https://www.tutorialspoint.com/postgresql/postgresql_overview.htm](https://www.tutorialspoint.com/postgresql/postgresql_overview.htm)) if you are unfamiliar
 For local development, we utilize a volatile docker container through docker compose. This is meant for experimentation and working with datasets in isolation. When the application is ready for deployment, the persistence will be offloaded to a shared server in some cloud...somewhere

Orchestration/terraform/main.tf

@@ -2,3 +2,11 @@ provider "aws" {
   profile = "default"
   region  = "us-east-1"
 }
+
+terraform {
+  backend "s3" {
+    bucket = "three-one-one"
+    key    = "terraform/backend"
+    region = "us-east-1"
+  }
+}

package.json

@@ -43,7 +43,7 @@
   },
   "scripts": {
     "start": "npm run check-env && npm run dev",
-    "dev": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0",
+    "dev": "webpack-dev-server --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint 'src/**/*.js*'",
     "test": "jest --passWithNoTests",

src/components/PinMap/PinMap.jsx

@@ -14,23 +14,25 @@ import Choropleth from 'react-leaflet-choropleth';
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 import HeatmapLayer from 'react-leaflet-heatmap-layer';
 import PropTypes from 'proptypes';
+import COLORS from '@styles/COLORS';
 
 // import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 // import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
 // import councilDistrictsOverlay from '../../data/la-city-council-districts-2012.json';
 import ncOverlay from '../../data/nc-boundary-2019.json';
 
 const { BaseLayer, Overlay } = LayersControl;
+const boundaryDefaultColor = COLORS.BRAND.MAIN;
+const boundaryHighlightColor = COLORS.BRAND.CTA1;
 
 class PinMap extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       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}`,
-      satelliteUrl: `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      mapUrl: `https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      satelliteUrl: `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
       geoJSON: ncOverlay,
       bounds: null,
     };
@@ -41,7 +43,7 @@ class PinMap extends Component {
 
     layer.setStyle({
       weight: 5,
-      color: 'grey',
+      color: boundaryHighlightColor,
     });
 
     layer.bringToFront();
@@ -53,7 +55,7 @@ class PinMap extends Component {
     layer.setStyle({
       weight: 2,
       opacity: 1,
-      color: '#959595',
+      color: boundaryDefaultColor,
     });
   }
 
@@ -172,7 +174,7 @@ class PinMap extends Component {
                       fillColor: 'white',
                       weight: 2,
                       opacity: 1,
-                      color: '#959595',
+                      color: boundaryDefaultColor,
                       dashArray: '3',
                     }}
                     onEachFeature={this.onEachRegionFeature}
@@ -203,12 +205,13 @@ class PinMap extends Component {
                 * improve functionality post-MVP by generating a heatmap list
                 * on the backend. */}
               <HeatmapLayer
+                max={1}
                 points={data}
                 radius={20}
                 blur={25}
                 longitudeExtractor={m => m.longitude}
                 latitudeExtractor={m => m.latitude}
-                intensityExtractor={() => {}}
+                intensityExtractor={() => 1}
               />
             </Overlay>
           </LayersControl>

src/components/Visualizations/Chart.jsx

@@ -115,10 +115,11 @@ class Chart extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { data } = this.props;
+    const { data, options } = this.props;
 
-    if (prevProps.data !== data) {
+    if (prevProps.data !== data || prevProps.options !== options) {
       this.chart.data = data;
+      this.chart.options = options;
       this.chart.update();
     }
   }

src/components/Visualizations/TimeToClose.jsx

@@ -5,28 +5,30 @@ import { REQUEST_TYPES } from '@components/common/CONSTANTS';
 import Chart from './Chart';
 
 const TimeToClose = ({
-  requestTypes,
+  timeToClose,
 }) => {
   // // DATA ////
 
-  const randomSeries = (count, min, max) => Array.from({ length: count })
-    .map(() => Math.random() * (max - min) + min);
-
-  const dummyData = REQUEST_TYPES.reduce((p, c) => {
-    const acc = p;
-    acc[c.type] = randomSeries(8, 0, 11);
-    return acc;
-  }, {});
-
-  const selectedTypes = REQUEST_TYPES.filter(el => requestTypes[el.type]);
+  const boxes = Object.keys(timeToClose).map(key => {
+    const requestType = REQUEST_TYPES.find(t => t.type === key);
+    return {
+      abbrev: requestType?.abbrev,
+      color: requestType?.color,
+      stats: {
+        ...timeToClose[key],
+        outliers: [],
+      },
+    };
+  });
 
   const chartData = {
-    labels: selectedTypes.map(t => t.abbrev),
+    labels: boxes.map(b => b.abbrev),
     datasets: [{
-      data: selectedTypes.map(t => dummyData[t.type]),
-      backgroundColor: selectedTypes.map(t => t.color),
+      data: boxes.map(b => b.stats),
+      backgroundColor: boxes.map(b => b.color),
       borderColor: '#000',
       borderWidth: 1,
+      outlierColor: '#000',
     }],
   };
 
@@ -36,9 +38,6 @@ const TimeToClose = ({
 
   const chartOptions = {
     maintainAspectRatio: false,
-    title: {
-      text: 'Time to Close',
-    },
     scales: {
       xAxes: [{
         scaleLabel: {
@@ -47,8 +46,7 @@ const TimeToClose = ({
         },
         ticks: {
           beginAtZero: true,
-          stepSize: 1,
-          coef: 0,
+          maxStats: 'whiskerMax',
         },
       }],
       yAxes: [{
@@ -78,11 +76,11 @@ const TimeToClose = ({
 };
 
 const mapStateToProps = state => ({
-  requestTypes: state.filters.requestTypes,
+  timeToClose: state.data.timeToClose,
 });
 
 export default connect(mapStateToProps)(TimeToClose);
 
 TimeToClose.propTypes = {
-  requestTypes: PropTypes.shape({}).isRequired,
+  timeToClose: PropTypes.shape({}).isRequired,
 };

src/redux/rootSaga.js

@@ -50,8 +50,12 @@ function* getFrequency() {
   return yield {};
 }
 
-function* getTimeToClose() {
-  return yield {};
+function* getTimeToClose(filters) {
+  const ttcUrl = `${BASE_URL}/timetoclose`;
+
+  const { data: { data } } = yield call(axios.post, ttcUrl, filters);
+
+  return data;
 }
 
 /* //////////// COMBINED API CALL //////////// */

webpack.dev.js

@@ -9,6 +9,7 @@ module.exports = merge(config, {
     contentBase: './public',
     compress: true,
     port: 3000,
+    host: '0.0.0.0',
     hot: true,
     historyApiFallback: true,
   },