chart refinements

sass/util/_border.scss

@@ -7,6 +7,8 @@
 .border-bottom-dotted { border-bottom: $border-width dotted $body-color; }
 
 .border-w2 { border-width: 2px; }
+.border-w8 { border-width: 8px; }
+
 .rounded-br { border-bottom-right-radius: $border-radius; }
 
 @media #{$breakpoint-md} {

src/components/NibrsContainer.js

@@ -68,7 +68,7 @@ const NibrsContainer = ({
 
   return (
     <div>
-      <div className='mb2 p2 sm-p4 bg-blue-lighter'>
+      <div className='mb2 p2 sm-p4 bg-white border-top border-blue border-w8'>
         <h2 className='m0 fs-24 sm-fs-32 sans-serif'>
           {startCase(crime)} incident details in {startCase(place)},{' '}
           <br className='xs-hide' />

src/components/NoData.js

@@ -2,9 +2,7 @@ import React from 'react'
 
 
 const NoData = () => (
-  <div className='p4 bg-white'>
-    <div className='fs-18'>🙁 There’s no data at this time.</div>
-  </div>
+  <div className='fs-18'>There’s no data at this time.</div>
 )
 
 export default NoData

src/components/TrendChart.js

@@ -159,7 +159,7 @@ class TrendChart extends React.Component {
     )
 
     return (
-      <div className='px2 py3 sm-p4 bg-white'>
+      <div>
         <TrendChartDetails
           colors={colors}
           crime={crime}
@@ -268,7 +268,7 @@ class TrendChart extends React.Component {
         </div>
         <div className='my1 fs-10 sm-fs-12 monospace center'>
           <div className='bold'>{startCase(crime)} rate per 100,000 people</div>
-          <div className='italic'>(Does not include estimates)</div>
+          <div className='italic'>(Does not include estimates; rates are rounded)</div>
         </div>
         <DownloadDataBtn data={download} />
       </div>

src/components/TrendChartDetails.js

@@ -7,17 +7,25 @@ import mapCrimeToGlossaryTerm from '../util/glossary'
 import { nationalKey } from '../util/usa'
 
 
-const formatRate = format('.1f')
+const formatRate = n => format(`,.${+n > 10 ? 0 : 1}f`)(n)
 const formatTotal = format(',.0f')
 
+const highlight = v => <span className='bold blue'>{v}</span>
 const getComparison = ({ place, data }) => {
+  const threshold = 3
   const placeRate = data[place].rate
   const nationalRate = data[nationalKey].rate
-  const difference = (placeRate - nationalRate)
+  const diff = ((placeRate / nationalRate) - 1) * 100
+  const diffAbs = Math.abs(diff)
 
-  if (Math.abs(difference) < 2) return 'about the same as'
-  else if (difference > 2) return 'higher than'
-  return 'lower than'
+  return (diffAbs < threshold) ? (
+    <span>{highlight(`about the same (within ${threshold}%)`)} as</span>
+  ) : (
+    <span>
+      {highlight(`${formatRate(diffAbs)}% ${diff > threshold ? 'higher' : 'lower'}`)}
+      {' '}than
+    </span>
+  )
 }
 
 const TrendChartDetails = ({ colors, crime, data, dispatch, keys }) => {
@@ -26,7 +34,6 @@ const TrendChartDetails = ({ colors, crime, data, dispatch, keys }) => {
   const rate = data[slug].rate
   const year = data.date.getFullYear()
 
-  const highlight = v => <span className='bold blue'>{v}</span>
   const isOnlyNational = keys.length === 1
   const term = (
     <Term dispatch={dispatch} id={mapCrimeToGlossaryTerm(crime)}>
@@ -35,7 +42,7 @@ const TrendChartDetails = ({ colors, crime, data, dispatch, keys }) => {
   )
 
   return (
-    <div className='mb2 lg-flex'>
+    <div className='mb3 lg-flex'>
       <div className='flex-auto'>
         <h4 className='mt0 mb1 fs-18 sans-serif'>{year}</h4>
         <p className='mb1 lg-m0 lg-pr4 lg-mh-72p fs-14 sm-fs-16'>
@@ -50,14 +57,17 @@ const TrendChartDetails = ({ colors, crime, data, dispatch, keys }) => {
         </p>
       </div>
       <div>
-        <table className='mb1 lg-m0' style={{ maxWidth: 300 }}>
+        <table className='mb1 lg-m0 p2 md-p3 col-12 sm-col-5 bg-blue-white'>
           <thead className='fs-12 line-height-3'>
             <tr><td /><td>Rate</td><td>Total</td></tr>
           </thead>
           <tbody className='fs-14 bold'>
             {keys.map((k, i) => (
               <tr key={i}>
-                <td className='pr2 sm-pr3 fs-12 nowrap align-bottom'>
+                <td
+                  className='pr2 sm-pr3 fs-12 nowrap truncate align-bottom'
+                  style={{ maxWidth: 125 }}
+                >
                   <span
                     className='mr1 inline-block circle'
                     style={{ width: 8, height: 8, backgroundColor: colors[i] || '#000' }}

src/components/TrendContainer.js

@@ -29,14 +29,14 @@ const TrendContainer = ({ crime, place, filters, data, dispatch, loading, keys }
 
   return (
     <div>
-      <div className='mb2 p2 sm-p4 bg-blue-lighter'>
-        <h2 className='m0 fs-24 sm-fs-32 sans-serif'>
+      <div className='mb2 p2 sm-p4 bg-white border-top border-blue border-w8'>
+        <h2 className='mt0 mb3 fs-24 sm-fs-32 sans-serif'>
           {startCase(crime)} rate in {startCase(place)},{' '}
           <br className='xs-hide' />
           {since}–{until}
         </h2>
+        {content}
       </div>
-      <div className='mb2'>{content}</div>
       {!loading && (
         <TrendSourceText
           dispatch={dispatch}