From 943b549d12eefd8586ed4e1e6368e65c929d25c9 Mon Sep 17 00:00:00 2001
From: Seph Coster <joseph.coster@cfpb.gov>
Date: Thu, 16 Jul 2020 08:03:51 -0400
Subject: [PATCH] updated chart language

---
 src/components/Map/MapPanel.jsx                  |  6 +++---
 src/components/Trends/TrendsPanel.jsx            | 16 +++++++++++++++-
 .../__snapshots__/MapPanel.spec.jsx.snap         | 12 ++++++------
 .../__snapshots__/ResultsPanel.spec.jsx.snap     |  8 ++++----
 .../__snapshots__/TrendsPanel.spec.jsx.snap      |  8 ++++----
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/Map/MapPanel.jsx b/src/components/Map/MapPanel.jsx
index da19c484c..78149033c 100644
--- a/src/components/Map/MapPanel.jsx
+++ b/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 (
diff --git a/src/components/Trends/TrendsPanel.jsx b/src/components/Trends/TrendsPanel.jsx
index f3a42aebb..039cead04 100644
--- a/src/components/Trends/TrendsPanel.jsx
+++ b/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">
diff --git a/src/components/__tests__/__snapshots__/MapPanel.spec.jsx.snap b/src/components/__tests__/__snapshots__/MapPanel.spec.jsx.snap
index eca301374..a4caf06f6 100644
--- a/src/components/__tests__/__snapshots__/MapPanel.spec.jsx.snap
+++ b/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"
diff --git a/src/components/__tests__/__snapshots__/ResultsPanel.spec.jsx.snap b/src/components/__tests__/__snapshots__/ResultsPanel.spec.jsx.snap
index 014b7c3a8..d917cda8a 100644
--- a/src/components/__tests__/__snapshots__/ResultsPanel.spec.jsx.snap
+++ b/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"
diff --git a/src/components/__tests__/__snapshots__/TrendsPanel.spec.jsx.snap b/src/components/__tests__/__snapshots__/TrendsPanel.spec.jsx.snap
index a818c3deb..b3259d5d3 100644
--- a/src/components/__tests__/__snapshots__/TrendsPanel.spec.jsx.snap
+++ b/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>