Merge pull request #318 from cfpb/wording

updated chart language

src/components/Map/MapPanel.jsx

@@ -22,13 +22,13 @@ import Warning from '../Warnings/Warning'
 const WARNING_MESSAGE = '“Complaints per' +
   ' 1,000 population” is not available with your filter selections.'
 
-const MAP_ROWCHART_HELPERTEXT = 'Product and sub-product the consumer' +
-' identified in the complaint. Click on a product to expand sub-products.'
+const MAP_ROWCHART_HELPERTEXT = 'Product the consumer identified in the' +
+' complaint. Click on a product to expand sub-products'
 
 export class MapPanel extends React.Component {
   // eslint-disable-next-line complexity
   render() {
-    const MAP_ROWCHART_TITLE = 'Sub-products, by product from' +
+    const MAP_ROWCHART_TITLE = 'Product by highest complaint volume' +
       ' ' + this.props.minDate + ' to ' + this.props.maxDate
 
     return (

src/components/Trends/TrendsPanel.jsx

@@ -170,7 +170,20 @@ export class TrendsPanel extends React.Component {
 
         { focus && <FocusHeader /> }
 
-        { !companyOverlay && total > 0 &&
+        { !companyOverlay && overview && total > 0 &&
+          <div className="layout-row">
+            <section className="chart">
+              <h2 className="area-chart-title">{this._areaChartTitle()}</h2>
+              <p className="chart-helper-text">A time series graph of
+               complaints for the selected date range. Hover on the
+                chart to see the count for each date interval. Your filter
+                 selections will update what you see on the graph.
+              </p>
+            </section>
+          </div>
+        }
+
+        { !companyOverlay && !overview && total > 0 &&
           <div className="layout-row">
             <section className="chart">
               <h2 className="area-chart-title">{this._areaChartTitle()}</h2>
@@ -185,6 +198,7 @@ export class TrendsPanel extends React.Component {
           </div>
         }
 
+
         { !companyOverlay && total > 0 &&
           <div className="layout-row">
             <section className="chart">

src/components/__tests__/__snapshots__/MapPanel.spec.jsx.snap

@@ -171,10 +171,10 @@ exports[`component:MapPanel renders Print without crashing 1`] = `
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 07/10/2017 to 07/10/2020
+      Product by highest complaint volume 07/10/2017 to 07/10/2020
     </h3>
     <p>
-      Product and sub-product the consumer identified in the complaint. Click on a product to expand sub-products.
+      Product the consumer identified in the complaint. Click on a product to expand sub-products
     </p>
     <div
       id="row-chart-product"
@@ -391,10 +391,10 @@ exports[`component:MapPanel renders warning without crashing 1`] = `
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 07/10/2017 to 07/10/2020
+      Product by highest complaint volume 07/10/2017 to 07/10/2020
     </h3>
     <p>
-      Product and sub-product the consumer identified in the complaint. Click on a product to expand sub-products.
+      Product the consumer identified in the complaint. Click on a product to expand sub-products
     </p>
     <div
       id="row-chart-product"
@@ -574,10 +574,10 @@ exports[`component:MapPanel renders without crashing 1`] = `
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 07/10/2017 to 07/10/2020
+      Product by highest complaint volume 07/10/2017 to 07/10/2020
     </h3>
     <p>
-      Product and sub-product the consumer identified in the complaint. Click on a product to expand sub-products.
+      Product the consumer identified in the complaint. Click on a product to expand sub-products
     </p>
     <div
       id="row-chart-product"

src/components/__tests__/__snapshots__/ResultsPanel.spec.jsx.snap

@@ -693,10 +693,10 @@ exports[`component:Results renders Map print mode without crashing 1`] = `
       className="row-chart-section"
     >
       <h3>
-        Sub-products, by product from 07/10/2017 to 07/10/2020
+        Product by highest complaint volume 07/10/2017 to 07/10/2020
       </h3>
       <p>
-        Product and sub-product the consumer identified in the complaint. Click on a product to expand sub-products.
+        Product the consumer identified in the complaint. Click on a product to expand sub-products
       </p>
       <div
         id="row-chart-product"
@@ -1347,10 +1347,10 @@ exports[`component:Results renders map panel without crashing 1`] = `
       className="row-chart-section"
     >
       <h3>
-        Sub-products, by product from 07/10/2017 to 07/10/2020
+        Product by highest complaint volume 07/10/2017 to 07/10/2020
       </h3>
       <p>
-        Product and sub-product the consumer identified in the complaint. Click on a product to expand sub-products.
+        Product the consumer identified in the complaint. Click on a product to expand sub-products
       </p>
       <div
         id="row-chart-product"

src/components/__tests__/__snapshots__/TrendsPanel.spec.jsx.snap

@@ -1407,7 +1407,7 @@ exports[`component:TrendsPanel Snapshots renders date warning without crashing 1
       <p
         className="chart-helper-text"
       >
-        A time series graph of the (up to five) highest volume complaints for the selected date range. However, you can view all of your selections in the bar chart, below. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
+        A time series graph of complaints for the selected date range. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
       </p>
     </section>
   </div>
@@ -2051,7 +2051,7 @@ exports[`component:TrendsPanel Snapshots renders lineChart Overview without cras
       <p
         className="chart-helper-text"
       >
-        A time series graph of the (up to five) highest volume complaints for the selected date range. However, you can view all of your selections in the bar chart, below. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
+        A time series graph of complaints for the selected date range. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
       </p>
     </section>
   </div>
@@ -2315,7 +2315,7 @@ exports[`component:TrendsPanel Snapshots renders mobile filters without crashing
       <p
         className="chart-helper-text"
       >
-        A time series graph of the (up to five) highest volume complaints for the selected date range. However, you can view all of your selections in the bar chart, below. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
+        A time series graph of complaints for the selected date range. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
       </p>
     </section>
   </div>
@@ -2578,7 +2578,7 @@ exports[`component:TrendsPanel Snapshots renders print mode without crashing 1`]
       <p
         className="chart-helper-text"
       >
-        A time series graph of the (up to five) highest volume complaints for the selected date range. However, you can view all of your selections in the bar chart, below. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
+        A time series graph of complaints for the selected date range. Hover on the chart to see the count for each date interval. Your filter selections will update what you see on the graph.
       </p>
     </section>
   </div>