No data text change for agency view

src/components/AgencyChartContainer.js

@@ -1,3 +1,4 @@
+import lowerCase from 'lodash.lowercase'
 import startCase from 'lodash.startcase'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -24,10 +25,12 @@ const getContent = ({ crime, place, since, summary, until }) => {
     dataClean.length ===
     dataClean.filter(d => d.reported === 0 && d.cleared === 0).length
 
+  const noDataText = `There were no ${lowerCase(crime)} incidents reported during this time period.`
+
   return (
     <div>
       {hasNoValues
-        ? <NoData />
+        ? <NoData text={noDataText} />
         : <div>
             <AgencyChart
               crime={crime}

src/components/Loading.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
 const Loading = ({ slim, text }) => (
@@ -7,14 +8,20 @@ const Loading = ({ slim, text }) => (
       width="30"
       height="30"
       src="/img/loading.svg"
-      alt="loading..."
+      alt="Loading..."
     />
-    {text || 'Loading'}
+    {text}
   </div>
 )
 
 Loading.defaultProps = {
   slim: false,
+  text: 'Loading',
+}
+
+Loading.PropTypes = {
+  slim: PropTypes.boolean,
+  text: PropTypes.string,
 }
 
 export default Loading

src/components/NoData.js

@@ -1,5 +1,14 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
-const NoData = () => <div className="fs-18">There’s no data at this time.</div>
+const NoData = ({ text }) => <div className="fs-18">{text}</div>
+
+NoData.defaultProps = {
+  text: 'There is no data at this time.',
+}
+
+NoData.propTypes = {
+  text: PropTypes.string,
+}
 
 export default NoData

src/components/SparklineContainer.js

@@ -1,4 +1,5 @@
 import { max } from 'd3-array'
+import lowerCase from 'lodash.lowercase'
 import snakeCase from 'lodash.snakecase'
 import startCase from 'lodash.startcase'
 import PropTypes from 'prop-types'
@@ -40,7 +41,9 @@ const SparklineContainer = ({ crime, since, summaries, until, usState }) => {
 
   return (
     <div className="mb4">
-      <h3 className="mt0 mb2 fs-18">State and national {crime} rates</h3>
+      <h3 className="mt0 mb2 fs-18">
+        State and national {lowerCase(crime)} rates
+      </h3>
       <div className="clearfix mxn1">
         {sparklines.map((s, i) => (
           <div className="sm-col sm-col-6 mb1 px1" key={i}>