Merge pull request #299 from cfpb/labels

Language Updates / Chart Labels / Conditional Updates

src/components/Charts/LineChart.jsx

@@ -7,7 +7,6 @@ import { line, tooltip } from 'britecharts'
 import { connect } from 'react-redux'
 import { hashObject } from '../../utils'
 import { isDateEqual } from '../../utils/formatDate'
-import PropTypes from 'prop-types'
 import React from 'react'
 import { updateTrendsTooltip } from '../../actions/trends'
 
@@ -122,7 +121,6 @@ export class LineChart extends React.Component {
   render() {
     return (
       <div className={'chart-wrapper'}>
-        <h2>{ this.props.title }</h2>
         <p className={ 'y-axis-label' }>Complaints</p>
         <div id="line-chart">
         </div>
@@ -157,8 +155,4 @@ export const mapStateToProps = state => ( {
   width: state.view.width
 } )
 
-LineChart.propTypes = {
-  title: PropTypes.string.isRequired
-}
-
 export default connect( mapStateToProps, mapDispatchToProps )( LineChart )

src/components/Charts/RowChart.jsx

@@ -160,6 +160,7 @@ export class RowChart extends React.Component {
       this.props.total > 0 &&
       <div className="row-chart-section">
         <h3>{ this.props.title }</h3>
+        <p>{ this.props.helperText }</p>
         <div id={ 'row-chart-' + this.props.id }>
         </div>
       </div>

src/components/Charts/StackedAreaChart.jsx

@@ -5,7 +5,6 @@ import { connect } from 'react-redux'
 import { getLastDate } from '../../utils/chart'
 import { hashObject } from '../../utils'
 import { isDateEqual } from '../../utils/formatDate'
-import PropTypes from 'prop-types'
 import React from 'react'
 import { stackedArea } from 'britecharts'
 import { updateTrendsTooltip } from '../../actions/trends'
@@ -64,8 +63,10 @@ export class StackedAreaChart extends React.Component {
     const width = this._chartWidth( chartID )
     d3.select( chartID + ' .stacked-area' ).remove()
     const stackedAreaChart = stackedArea()
-    const colorScheme = [ ...new Set( data.map( item => item.name ) ) ]
-      .filter( o => o !== 'Other' )
+    const colorData = data.filter(
+      item => item.name !== 'Other'
+    )
+    const colorScheme = [ ...new Set( colorData.map( item => item.name ) ) ]
       .map( o => colorMap[o] )
     colorScheme.push( colors.DataLens[10] )
 
@@ -95,7 +96,6 @@ export class StackedAreaChart extends React.Component {
   render() {
     return (
       <div className={'chart-wrapper'}>
-        <h2>{ this.props.title }</h2>
         <p className={ 'y-axis-label' }>Complaints</p>
         <div id="stacked-area-chart">
         </div>
@@ -130,9 +130,5 @@ export const mapStateToProps = state => ( {
   width: state.view.width
 } )
 
-StackedAreaChart.propTypes = {
-  title: PropTypes.string.isRequired
-}
-
 export default connect( mapStateToProps,
   mapDispatchToProps )( StackedAreaChart )

src/components/RefineBar/ChartToggles.jsx

@@ -20,7 +20,7 @@ export class ChartToggles extends React.Component {
   render() {
     return (
       <section className="chart-toggles m-btn-group">
-        <p>Chart Type</p>
+        <p>Chart type</p>
         <button onClick={ () => this._toggleChartType( 'line' ) }
                 className={ this._btnClassName( 'line' ) }>
           { iconMap.getIcon( 'line-chart' ) }

src/components/Trends/ExternalTooltip.jsx

@@ -10,25 +10,46 @@ import { sanitizeHtmlId } from '../../utils'
 
 export class ExternalTooltip extends React.Component {
   _spanFormatter( value ) {
-    const { focus, lens } = this.props
+    const { lens } = this.props
     const elements = []
+    const lensToUse = this.props.focus ? this.props.subLens :
+     this.props.lens
+    const plurals = {
+      'Product': 'products',
+      'product': 'products',
+      'issue': 'issues',
+      'Sub-Issue': 'sub-issues',
+      'sub_product': 'sub-products',
+      'Company': 'companies'
+    }
+
     // Other should never be a selectable focus item
-    if ( focus || value.name === 'Other' ) {
+    if ( value.name === 'Other' ) {
+      elements.push(
+        <span className="u-left" key={ value.name }>
+          All other { plurals[lensToUse] }
+        </span>
+      )
+      return elements
+    }
+
+    if ( this.props.focus ) {
       elements.push(
         <span className="u-left" key={ value.name }>
           { value.name }
         </span>
       )
-    } else {
-      elements.push( <span className="u-left a-btn a-btn__link"
+      return elements
+    }
+
+    elements.push( <span className="u-left a-btn a-btn__link"
                            id={ 'focus-' + sanitizeHtmlId( value.name ) }
                            key={ value.name }
              onClick={ () => {
                this.props.add( value.name, lens )
              } }>
         { value.name }
       </span> )
-    }
 
     // add in the close button for Company and there's no focus yet
     if ( this.props.showCompanyTypeahead ) {
@@ -92,11 +113,12 @@ export const mapDispatchToProps = dispatch => ( {
 } )
 
 export const mapStateToProps = state => {
+  const { focus, lens, subLens } = state.query
   const { chartType, tooltip } = state.trends
-  const { focus, lens } = state.query
   return {
     focus: focus ? 'focus' : '',
     lens,
+    subLens,
     showCompanyTypeahead: lens === 'Company' && !focus,
     showTotal: chartType === 'area',
     tooltip: externalTooltipFormatter( tooltip )

src/components/Trends/LensTabs.jsx

@@ -30,15 +30,14 @@ export class LensTabs extends React.Component {
   }
 
   render() {
-    const { lens, showTitle } = this.props
+    const { lens } = this.props
     if ( lens === 'Overview' ) {
       return null
     }
 
     return (
       <div className="tabbed-navigation lens">
-        { showTitle && <h2>{ lens + ' trends for selected criteria' }</h2> }
-        <section>
+         <section>
           <button
             className={ this._getTabClass( lensMaps[lens].tab1.filterName ) }
             onClick={ () => this._setTab( lensMaps[lens].tab1.filterName ) }>

src/components/Trends/TrendsPanel.jsx

@@ -14,6 +14,7 @@ import ExternalTooltip from './ExternalTooltip'
 import FilterPanel from '../Filters/FilterPanel'
 import FilterPanelToggle from '../Filters/FilterPanelToggle'
 import FocusHeader from './FocusHeader'
+import { formatDateView } from '../../utils/formatDate'
 import LensTabs from './LensTabs'
 import LineChart from '../Charts/LineChart'
 import Loading from '../Dialogs/Loading'
@@ -38,16 +39,35 @@ const subLensMap = {
   product: 'Products'
 }
 
+const lensHelperTextMap = {
+  product: 'Product the consumer identified in the complaint.' +
+  ' Click on a company name to expand products.',
+  company: 'Product the consumer identified in the complaint. Click on' +
+  ' a company name to expand products.',
+  sub_product: 'Product and sub-product the consumer identified in the ' +
+  ' complaint. Click on a product to expand sub-products.',
+  issue: 'Product and issue the consumer identified in the complaint.' +
+  ' Click on a product to expand issue.',
+  overview: 'Product the consumer identified in the complaint. Click on a ' +
+  ' product to expand sub-products'
+}
+
+const focusHelperTextMap = {
+  sub_product: 'Sub-products the consumer identified in the complaint',
+  product: 'Product the consumer identified in the complaint',
+  issue: 'Issues the consumer identified in the complaint'
+}
+
 export class TrendsPanel extends React.Component {
   _areaChartTitle() {
-    const { focus, overview, lens, subLens } = this.props
+    const { focus, overview, subLens } = this.props
     if ( overview ) {
-      return 'Complaints by date received'
+      return 'Complaints by date received by the CFPB'
     } else if ( focus ) {
       return 'Complaints by ' + subLensMap[subLens].toLowerCase() +
-        ' by date received'
+       ', by date received by the CFPB'
     }
-    return `Complaints by ${ lens.toLowerCase() } by date received`
+    return 'Complaints by date received by the CFPB'
   }
 
   _className() {
@@ -59,34 +79,44 @@ export class TrendsPanel extends React.Component {
   }
 
   _phaseMap() {
-    if ( this.props.companyOverlay ) {
+    const {
+      companyOverlay, dataLensData, focusData, focusHelperText, overview, lens,
+      lensHelperText, minDate, maxDate, productData, subLensTitle, total
+    } = this.props
+
+    if ( companyOverlay ) {
       return null
     }
 
-    if ( this.props.overview ) {
+    if ( overview ) {
       return <RowChart id="product"
-                       colorScheme={ this.props.productData.colorScheme }
-                       data={ this.props.productData.data }
-                       title={ 'Product by highest complaint volume' }
-                       total={ this.props.total }/>
+                       colorScheme={ productData.colorScheme }
+                       data={ productData.data }
+                       title={ 'Product by highest complaint volume ' +
+                        minDate + ' to ' + maxDate}
+                       helperText={ lensHelperText }
+                       total={ total }/>
     }
 
     if ( this.props.focus ) {
-      return <RowChart id={ this.props.lens }
-                       colorScheme={ this.props.focusData.colorScheme }
-                       data={ this.props.focusData.data }
-                       title={ this.props.subLensTitle }
-                       total={ this.props.total }/>
+      return <RowChart id={ lens }
+                       colorScheme={ focusData.colorScheme }
+                       data={ focusData.data }
+                       title={ subLensTitle + ' ' + minDate + ' to ' + maxDate }
+                       helperText={ focusHelperText }
+                       total={ total }/>
     }
 
     return [
       <LensTabs key={ 'lens-tab' } showTitle={ true }/>,
-      <RowChart id={ this.props.lens }
-                colorScheme={ this.props.dataLensData.colorScheme }
-                data={ this.props.dataLensData.data }
-                title={ this.props.subLensTitle }
-                total={ this.props.total }
-                key={ this.props.lens + 'row' }/>
+      <RowChart id={ lens }
+                colorScheme={ dataLensData.colorScheme }
+                data={ dataLensData.data }
+                title={ subLensTitle + ' ' +
+                 minDate + ' to ' + maxDate }
+                helperText={ lensHelperText}
+                total={ total }
+                key={ lens + 'row' }/>
     ]
   }
 
@@ -113,8 +143,8 @@ export class TrendsPanel extends React.Component {
                   value={ lens }
                   handleChange={ onLens }/>
           <Separator/>
-          <Select label={ 'Choose the Date Interval' }
-                  title={ 'Date Interval' }
+          <Select label={ 'Choose the Date interval' }
+                  title={ 'Date interval' }
                   values={ intervals }
                   id={ 'interval' }
                   value={ dateInterval }
@@ -127,31 +157,42 @@ export class TrendsPanel extends React.Component {
         </div>
 
         { companyOverlay &&
-        <div className="layout-row company-overlay">
-          <section className="company-search">
-            <h1>Search for and add companies to visualize data </h1>
-            <p>Monocle ipsum dolor sit amet shinkansen delightful tote bag
-              handsome, elegant joy ryokan conversation. Sunspel lovely
-              signature vibrant boutique the best elegant Airbus A380 concierge
-              Baggu izakaya
-            </p>
-            <CompanyTypeahead/>
-          </section>
-        </div>
+          <div className="layout-row company-overlay">
+            <section className="company-search">
+              <p>Choose a company to start your visualization
+               using the type-ahead menu below. You can add more than
+                one company to your view
+              </p>
+              <CompanyTypeahead/>
+            </section>
+          </div>
         }
 
         { focus && <FocusHeader /> }
 
         { !companyOverlay && total > 0 &&
-        <div className="layout-row">
-          <section className="chart">
-            { chartType === 'line' &&
-            <LineChart title={this._areaChartTitle()}/> }
-            { chartType === 'area' &&
-            <StackedAreaChart title={this._areaChartTitle()}/> }
-          </section>
-          { !overview && <ExternalTooltip/> }
-        </div>
+          <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
+               complaint counts 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 && total > 0 &&
+          <div className="layout-row">
+            <section className="chart">
+              { chartType === 'line' &&
+              <LineChart /> }
+              { chartType === 'area' &&
+              <StackedAreaChart /> }
+            </section>
+            { !overview && <ExternalTooltip/> }
+          </div>
         }
         { total > 0 && this._phaseMap() }
         <TrendDepthToggle />
@@ -179,6 +220,14 @@ const mapStateToProps = state => {
 
   const lensKey = lens.toLowerCase()
   const focusKey = subLens.replace( '_', '-' )
+  const lensHelperText = subLens === '' ?
+   lensHelperTextMap[lensKey] : lensHelperTextMap[subLens]
+  const focusHelperText = subLens === '' ?
+   focusHelperTextMap[lensKey] : focusHelperTextMap[subLens]
+
+  const minDate = formatDateView( date_received_min )
+  const maxDate = formatDateView( date_received_max )
+
   return {
     chartType,
     companyData: processRows( results.company, false, lens ),
@@ -191,10 +240,14 @@ const mapStateToProps = state => {
     productData: processRows( results.product, false, lens ),
     dataLensData: processRows( results[lensKey], colorMap, lens ),
     lens,
+    maxDate,
+    minDate,
     overview: lens === 'Overview',
     showMobileFilters: state.view.width < 750,
     subLens,
-    subLensTitle: subLensMap[subLens] + ' by ' + lens.toLowerCase(),
+    subLensTitle: subLensMap[subLens] + ', by ' + lens.toLowerCase() + ' from',
+    lensHelperText: lensHelperText,
+    focusHelperText: focusHelperText,
     total,
     trendsDateWarningEnabled
   }

src/components/Trends/TrendsPanel.less

@@ -257,8 +257,16 @@
     }
   }
 
-  h2 {
+  h2.area-chart-title {
     padding: @gutter-normal;
+    margin-bottom: 0;
+  }
+
+  .chart-helper-text {
+    padding-left: @gutter-normal;
+    padding-right: @gutter-normal;
+    padding-bottom: @gutter-normal;
+    margin-bottom: @gutter-normal;
   }