Offense View

src/components/trend/OffenseTrendCard.js

@@ -40,6 +40,7 @@ class OffenseTrendCard extends React.Component {
       { data: dlData, filename: `${fname}.csv` },
     ];
 
+    console.log('OffenseTrendCard Trend Data:', trendData);
     return (
       <div className="p2 sm-p3 bg-white black">
         <h2 className="mt0 mb2 pb1 fs-14 sm-fs-18 sans-serif blue border-bottom border-blue-light">

src/components/trend/OffenseTrendChart.js

@@ -58,13 +58,11 @@ class OffenseTrendChart extends React.Component {
     const rates = [];
 
     const gaps = [];
-    console.log('OffenseTrendChart: createOffenseTrendSeries Places:', places);
     for (let j = 0; j < places.length; j++) {
       const seriesObj = {};
       seriesObj.crime = trendData.offense;
       const place = places[j];
       const placeTrendData = trendData[place];
-      console.log('OffenseTrendChart: Place Trend Data:', placeTrendData);
       const values = [];
       // Segements
       const segments = [];
@@ -76,27 +74,19 @@ class OffenseTrendChart extends React.Component {
         rates.push(value.rate);
       }
       seriesObj.values = values;
-      seriesObj.segments = segments;
+      seriesObj.segments = [];
+      seriesObj.segments.push(segments);
       seriesObj.place = place;
       seriesObj.gaps = gaps;
       series.push(seriesObj);
     }
     gridObj.rates = rates;
     gridObj.series = series;
 
-    console.log(
-      'OffenseTrendChart: createOffenseTrendSeries Results:',
-      gridObj,
-    );
     return gridObj;
   };
 
   fetchTrendDataByYear = (series, yearSelected) => {
-    console.log(
-      'OffenseTrendChart: fetchTrendDataByYear:',
-      series,
-      yearSelected,
-    );
     const active = [];
     for (let j = 0; j < series.series.length > 0; j++) {
       for (let k = 0; k < series.series[j].values.length; k++) {
@@ -117,7 +107,6 @@ class OffenseTrendChart extends React.Component {
 
   render() {
     const { trendData, since, until, size, colors } = this.props;
-    console.log('OffenseTrendChart trendData:', trendData);
     const { hover, svgParentWidth, yearSelected } = this.state;
     const { margin } = size;
     const color = scaleOrdinal(colors);
@@ -137,8 +126,6 @@ class OffenseTrendChart extends React.Component {
       }
     }
 
-    console.log('OffenseTrendChart Places:', places);
-
     const newSeries = this.createOffenseTrendSeries(
       trendData,
       places,
@@ -155,8 +142,7 @@ class OffenseTrendChart extends React.Component {
 
     const x = scaleTime().domain(extent(dates)).range([xPad, width - xPad]);
     const y = scaleLinear().domain([0, max(rates)]).range([height, 0]).nice();
-
-    console.log('OffenseTrendChart ACTIVE:', active);
+    console.log('OffenseTrendChart Series:', series);
 
     return (
       <div>
@@ -194,7 +180,6 @@ class OffenseTrendChart extends React.Component {
                 height={height}
                 fill="none"
                 pointerEvents="all"
-                onMouseMove={this.rememberValue}
               />
             </g>
           </svg>

src/components/trend/OffenseTrendChartDetails.js

@@ -17,7 +17,6 @@ const borderColor = { borderColor: '#c8d3dd' };
 const cellStyle = { width: 68, ...borderColor };
 
 const getComparison = ({ place, data }) => {
-  console.log('getComparison:', place, data);
   const threshold = 3;
   let placeRate;
   let nationalRate;
@@ -48,17 +47,17 @@ const OffenseTrendChartDetails = ({
   until,
   updateYear,
 }) => {
-  console.log('TrendChartDetails init');
+  console.log('OffenseTrendChartDetails init');
   const handleSelectChange = e => updateYear(Number(e.target.value));
   const yearRange = range(since, until + 1);
   const term = (
     <Term id={crimeTerm(crime)} size="sm">
       {lowerCase(crime)}
     </Term>
   );
-  console.log('TrendChartDetails active', active);
+  console.log('OffenseTrendChartDetails active', active);
   const data = active.filter(d => d.crime !== 'rape-revised');
-  console.log('TrendChartDetails data', data);
+  console.log('OffenseTrendChartDetails data', data);
   const isNational = keys.length === 1;
   const place = isNational ? nationalKey : keys.find(k => k !== nationalKey);
   const comparison = getComparison({ place, data });

src/components/trend/TrendChart.js

@@ -103,7 +103,6 @@ class TrendChart extends React.Component {
     if (isRape) crimes.push('rape-revised');
 
     const dataByYear = data.map(d => ({ ...d, date: parse(d.year) }));
-
     const newSeries = this.createSeries(crimes, dataByYear, places);
     const { dates, rates, series } = newSeries;
 
@@ -156,7 +155,7 @@ class TrendChart extends React.Component {
           until={until}
         />
         <div className="mb2 clearfix">
-          <div className="sm-col mb1 sm-m0 fs-10 bold monospace black">
+          <div className="sm-col mb1 sm-m0 fs-12 bold monospace black">
             Rate per 100,000 people, by year
           </div>
           {crime === 'rape' && <TrendChartRapeLegend />}

src/components/trend/TrendChartLineSeries.js

@@ -1,17 +1,17 @@
-import { curveCardinal, line } from 'd3-shape'
-import PropTypes from 'prop-types'
-import React from 'react'
+import { curveCardinal, line } from 'd3-shape';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const TrendChartLineSeries = ({ color, series, x, y }) => {
   const l = line()
     .curve(curveCardinal.tension(0.25))
     .x(d => x(d.date))
-    .y(d => y(d.rate))
+    .y(d => y(d.rate));
 
   return (
     <g>
       {series.map((d, i) => {
-        const ends = [d.values[0], d.values[d.values.length - 1]]
+        const ends = [d.values[0], d.values[d.values.length - 1]];
 
         return (
           <g key={i} className={`series series-${d.place}-${d.crime}`}>
@@ -37,21 +37,21 @@ const TrendChartLineSeries = ({ color, series, x, y }) => {
                 />,
               )}
           </g>
-        )
+        );
       })}
     </g>
-  )
-}
+  );
+};
 
 TrendChartLineSeries.propTypes = {
   color: PropTypes.func.isRequired,
   series: PropTypes.array.isRequired,
   x: PropTypes.func.isRequired,
   y: PropTypes.func.isRequired,
-}
+};
 
 TrendChartLineSeries.defaultProps = {
   color: () => 'tomato',
-}
+};
 
-export default TrendChartLineSeries
+export default TrendChartLineSeries;