Add charts for all related offenses for property and violent crime view

package.json

@@ -44,6 +44,7 @@
     "jszip": "^3.1.3",
     "lodash.debounce": "^4.0.8",
     "lodash.flatten": "^4.4.0",
+    "lodash.kebabcase": "^4.1.1",
     "lodash.lowercase": "^4.3.0",
     "lodash.range": "^3.2.0",
     "lodash.snakecase": "^4.1.1",
@@ -105,7 +106,11 @@
     "yaml-loader": "^0.5.0"
   },
   "babel": {
-    "presets": ["es2015", "stage-0", "react"]
+    "presets": [
+      "es2015",
+      "stage-0",
+      "react"
+    ]
   },
   "jest": {
     "moduleNameMapper": {

sass/components/_trend.scss

@@ -0,0 +1,3 @@
+.trend-cards .trend-chart-details {
+  flex-direction: column;
+}

sass/components/all.scss

@@ -9,4 +9,5 @@
 @import 'progress';
 @import 'tables';
 @import 'tooltips';
+@import 'trend';
 @import 'viz';

sass/util/_height.scss

@@ -1,7 +1,13 @@
-.mh6 { min-height: $space-6; }
+.mh6 {
+  min-height: $space-6;
+}
 
 @media #{$breakpoint-lg} {
-  .lg-mh-72p { min-height: 72px; }
+  .lg-mh-88p {
+    min-height: 88px;
+  }
 }
 
-.maxh5 { max-height: $space-5; }
+.maxh5 {
+  max-height: $space-5;
+}

src/actions/summary.js

@@ -1,7 +1,6 @@
-import reduceEntries from 'reduce-entries'
-
 import { SUMMARY_FAILED, SUMMARY_FETCHING, SUMMARY_RECEIVED } from './constants'
 import api from '../util/api'
+import { calculateRates, reshapeData } from '../util/summary'
 
 export const failedSummary = error => ({
   type: SUMMARY_FAILED,
@@ -22,7 +21,8 @@ export const fetchSummaries = params => dispatch => {
   const requests = api.getSummaryRequests(params)
 
   return Promise.all(requests)
-    .then(data => data.reduce(reduceEntries('results'), {}))
-    .then(summaries => dispatch(receivedSummary(summaries)))
+    .then(data => reshapeData(data))
+    .then(d => calculateRates(d))
+    .then(summaries => dispatch(receivedSummary(summaries, params)))
     .catch(error => dispatch(failedSummary(error)))
 }

src/components/AboutTheData.js

@@ -50,7 +50,9 @@ class AboutTheData extends React.Component {
             <div className="caveats">
               {caveats.map((c, i) =>
                 <div key={i}>
-                  <div className="mb-tiny bold caps">{c.heading}</div>
+                  <div className="mb-tiny bold caps">
+                    {c.heading}
+                  </div>
                   {/* eslint react/no-danger: 0 */}
                   <div
                     className="mb3"
@@ -68,7 +70,9 @@ class AboutTheData extends React.Component {
               <ul className="m0 p0 fs-14 left-bars">
                 {links.map((l, i) =>
                   <li key={i} className="mb1">
-                    <a className="white" href={l.url}>{l.text}</a>
+                    <a className="white" href={l.url}>
+                      {l.text}
+                    </a>
                   </li>,
                 )}
               </ul>

src/components/BetaBanner.js

@@ -5,8 +5,7 @@ const BetaBanner = ({ onFeedbackClick }) =>
   <div className="lg-absolute lg-col-7 top-0 right-0 fs-10 md-fs-14">
     <div className="lg-mr2 p1 lg-py2 lg-pl3 lg-inline-block lg-rounded-bottom bg-red white">
       This site is under development and will be updated periodically. Feedback
-      is welcome and will help us provide a better service.
-      {' '}
+      is welcome and will help us provide a better service.{' '}
       <button
         className="btn p0 line-height-1 underline"
         onClick={onFeedbackClick}

src/components/CrimeTypeFilter.js

@@ -27,7 +27,9 @@ const CrimeTypeFilter = ({ ariaControls, onChange, selected }) =>
     {crimes.map((c, i) =>
       <div className="mb2 rounded overflow-hidden" key={i}>
         {c.title &&
-          <div className="mb1 sm-m0 px2 sm-lh-30 bold">{c.title}</div>}
+          <div className="mb1 sm-m0 px2 sm-lh-30 bold">
+            {c.title}
+          </div>}
         <div>
           {c.options.map((o, ii) => {
             const id = o.id || slugify(o)

src/components/ErrorCard.js

@@ -16,8 +16,7 @@ class ErrorCard extends React.Component {
       <div className="mb2 p2 white bg-blue fs-14 overflow-auto">
         <p className="m0">
           <strong>Uh-oh!</strong> An error occurred during the request. Please
-          try
-          again soon.
+          try again soon.
         </p>
         <button
           className="bg-transparent border-none cursor-pointer fs-12 px0 mt2 white"

src/components/Glossary.js

@@ -78,7 +78,9 @@ class Glossary extends React.Component {
             placeholder="e.g. Crime rate"
           />
           {error &&
-            <p className="my1 p1 fs-14 bold bg-red-bright white">{error}</p>}
+            <p className="my1 p1 fs-14 bold bg-red-bright white">
+              {error}
+            </p>}
           <div className="glossary__content" id="glossary-result">
             <ul className="js-glossary-list" />
           </div>

src/components/Highlight.js

@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Highlight = ({ text }) => <span className="bold blue">{text}</span>
+const Highlight = ({ text }) =>
+  <span className="bold blue">
+    {text}
+  </span>
 
 Highlight.propTypes = {
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

src/components/Link.js

@@ -5,9 +5,17 @@ import { Link as RouterLink } from 'react-router'
 const Link = props => {
   const { children, to } = props
 
-  let el = <RouterLink {...props}>{children}</RouterLink>
+  let el = (
+    <RouterLink {...props}>
+      {children}
+    </RouterLink>
+  )
   if (to.includes('http://') || to.includes('https://')) {
-    el = <a href={to} {...props}>{children}</a>
+    el = (
+      <a href={to} {...props}>
+        {children}
+      </a>
+    )
   }
 
   return el

src/components/LocationFilter.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import AgencySearch from './AgencySearch'
+import AgencySearch from './agency/AgencySearch'
 import LocationSelect from './LocationSelect'
 import { nationalKey } from '../util/usa'
 

src/components/NoData.js

@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const NoData = ({ text }) => <div className="fs-18">{text}</div>
+const NoData = ({ text }) =>
+  <div className="fs-18">
+    {text}
+  </div>
 
 NoData.defaultProps = {
   text: 'There is no data at this time.',

src/components/OnEscape.js

@@ -16,7 +16,11 @@ class OnEscape extends React.Component {
   }
 
   render() {
-    return <div>{this.props.children}</div>
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    )
   }
 }
 

src/components/XAxis.js

@@ -28,7 +28,9 @@ const XAxis = ({ active, tickCt, tickSizeOuter, height, scale, showLine }) => {
         className={`tick ${String(v) === String(active) ? 'bold' : ''}`}
       >
         <line stroke="#000" y2="6" />
-        <text fill="#000" x="0" y="12" dy=".71em">{format(v)}</text>
+        <text fill="#000" x="0" y="12" dy=".71em">
+          {format(v)}
+        </text>
       </g>
     )
   })

src/components/YAxis.js

@@ -17,7 +17,9 @@ const YAxis = ({ tickCt, scale, width }) => {
     return (
       <g key={i} transform={`translate(0, ${pos})`} className="tick">
         <line x2={width} y2="0" strokeOpacity={i === 0 ? '1' : '.25'} />
-        <text fill="#000" x="-32" y="0" dy=".32em">{fmt(v)}</text>
+        <text fill="#000" x="-32" y="0" dy=".32em">
+          {fmt(v)}
+        </text>
       </g>
     )
   })

src/components/AgencyChart.js → src/components/agency/AgencyChart.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import AgencyChartDetails from './AgencyChartDetails'
-import XAxis from './XAxis'
-import YAxis from './YAxis'
+import XAxis from '../XAxis'
+import YAxis from '../YAxis'
 
 class AgencyChart extends React.Component {
   constructor(props) {
@@ -92,9 +92,8 @@ class AgencyChart extends React.Component {
       }))
 
     // no data (nd) element responsive values
-    const [ndHeight, ndCircle, ndTextY, ndTextSize] = svgWidth < 500
-      ? [10, 5, 2.5, 8]
-      : [20, 8, 4, 11]
+    const [ndHeight, ndCircle, ndTextY, ndTextSize] =
+      svgWidth < 500 ? [10, 5, 2.5, 8] : [20, 8, 4, 11]
 
     return (
       <div>