Merge pull request #330 from flacoman91/date-consolidation

date formatting polish

src/__tests__/App.spec.jsx

@@ -16,7 +16,7 @@ describe('initial state', () => {
   it('renders without crashing', async () => {
 
     // set the date so snapshot will always be the same.
-    const DATE_TO_USE = new Date('2016');
+    const DATE_TO_USE = new Date('1/1/2016');
     const _Date = Date;
     global.Date = jest.fn(() => DATE_TO_USE);
     global.Date.UTC = _Date.UTC;

src/__tests__/__snapshots__/App.spec.jsx.snap

@@ -376,7 +376,7 @@ exports[`initial state renders without crashing 1`] = `
                       onChange={[Function]}
                       placeholder="mm/dd/yyyy"
                       size="15"
-                      value="1/2/2016"
+                      value="12/31/2015"
                     />
                     <button
                       className="a-btn a-btn__link"
@@ -417,7 +417,7 @@ exports[`initial state renders without crashing 1`] = `
                       onChange={[Function]}
                       placeholder="mm/dd/yyyy"
                       size="15"
-                      value="1/2/2016"
+                      value="12/31/2015"
                     />
                     <button
                       className="a-btn a-btn__link"

src/components/Map/MapPanel.jsx

@@ -5,7 +5,6 @@ import DateRanges from '../RefineBar/DateRanges'
 import ErrorBlock from '../Warnings/Error'
 import FilterPanel from '../Filters/FilterPanel'
 import FilterPanelToggle from '../Filters/FilterPanelToggle'
-import { formatDateView } from '../../utils/formatDate'
 import Loading from '../Dialogs/Loading'
 import MapToolbar from './MapToolbar'
 import { mapWarningDismissed } from '../../actions/view'
@@ -14,6 +13,7 @@ import { processRows } from '../../utils/chart'
 import React from 'react'
 import RowChart from '../Charts/RowChart'
 import { Separator } from '../RefineBar/Separator'
+import { shortFormat } from '../../utils'
 import StaleDataWarnings from '../Warnings/StaleDataWarnings'
 import TileChartMap from '../Charts/TileChartMap'
 import Warning from '../Warnings/Warning'
@@ -82,11 +82,11 @@ const mapStateToProps = state => {
   return {
     error,
     isLoading,
+    minDate: shortFormat( minDate ),
+    maxDate: shortFormat( maxDate ),
     productData: processRows( results.product, false, 'Product', expandedRows ),
     showMobileFilters: width < 750,
     showWarning: !enablePer1000 && mapWarningEnabled,
-    minDate: formatDateView( minDate ),
-    maxDate: formatDateView( maxDate ),
     total: state.aggs.total
   }
 }

src/components/Trends/TrendsPanel.jsx

@@ -3,6 +3,7 @@ import '../RefineBar/RefineBar.less'
 import './TrendsPanel.less'
 
 import { getIntervals, showCompanyOverLay } from '../../utils/trends'
+import { sendAnalyticsEvent, shortFormat } from '../../utils'
 import ActionBar from '../ActionBar'
 import { changeDataLens } from '../../actions/trends'
 import { changeDateInterval } from '../../actions/filter'
@@ -14,15 +15,13 @@ 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'
 import { processRows } from '../../utils/chart'
 import React from 'react'
 import RowChart from '../Charts/RowChart'
 import Select from '../RefineBar/Select'
-import { sendAnalyticsEvent } from '../../utils'
 import Separator from '../RefineBar/Separator'
 import StackedAreaChart from '../Charts/StackedAreaChart'
 import TrendDepthToggle from './TrendDepthToggle'
@@ -113,8 +112,7 @@ export class TrendsPanel extends React.Component {
       <RowChart id={ lens }
                 colorScheme={ dataLensData.colorScheme }
                 data={ dataLensData.data }
-                title={ subLensTitle + ' ' +
-                 minDate + ' to ' + maxDate }
+                title={ subLensTitle + ' ' + minDate + ' to ' + maxDate }
                 helperText={ lensHelperText}
                 total={ total }
                 key={ lens + 'row' }/>
@@ -223,8 +221,8 @@ const mapStateToProps = state => {
   const {
     company: companyFilters,
     dateInterval,
-    date_received_max,
-    date_received_min,
+    date_received_max: maxDate,
+    date_received_min: minDate,
     lens,
     subLens,
     trendsDateWarningEnabled
@@ -243,23 +241,20 @@ const mapStateToProps = state => {
   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, expandedRows ),
     companyOverlay: showCompanyOverLay( lens, companyFilters, isLoading ),
     dateInterval,
     focus,
     focusData: processRows( results[focusKey], colorMap, lens, expandedRows ),
-    intervals: getIntervals( date_received_min, date_received_max ),
+    intervals: getIntervals( minDate, maxDate ),
     isLoading,
     productData: processRows( results.product, false, lens, expandedRows ),
     dataLensData: processRows( results[lensKey], colorMap, lens, expandedRows ),
     lens,
-    maxDate,
-    minDate,
+    minDate: shortFormat( minDate ),
+    maxDate: shortFormat( maxDate ),
     overview: lens === 'Overview',
     showMobileFilters: state.view.width < 750,
     subLens,

src/components/__tests__/TrendsPanel.spec.jsx

@@ -87,8 +87,8 @@ function setupSnapshot( { chartType,
     },
     query: {
       company,
-      date_received_min: "2018-01-01T00:00:00.000Z",
-      date_received_max: "2020-01-01T00:00:00.000Z",
+      date_received_min: new Date( '1/1/2018' ),
+      date_received_max: new Date( '1/1/2020' ),
       lens,
       subLens,
       tab: MODE_TRENDS,
@@ -100,23 +100,6 @@ function setupSnapshot( { chartType,
       focus,
       lens,
       results: {
-        "dateRangeBrush": [
-          {
-            "date": new Date( "2020-01-01T00:00:00.000Z" ),
-            "value": 26413
-          }, {
-            "date": new Date( "2020-02-01T00:00:00.000Z" ),
-            "value": 25096
-          }, {
-            "date": new Date( "2020-03-01T00:00:00.000Z" ),
-            "value": 29506
-          }, {
-            "date": new Date( "2020-04-01T00:00:00.000Z" ),
-            "value": 35112
-          }, {
-            "date": new Date( "2020-05-01T00:00:00.000Z" ),
-            "value": 9821
-          } ],
         "dateRangeLine": {
           "dataByTopic": [ {
             "topic": "Complaints",

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

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

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

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

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

@@ -400,7 +400,7 @@ exports[`component:TrendsPanel Snapshots renders Focus without crashing 1`] = `
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 01/01/2018 to 01/01/2020
+      Sub-products, by product from 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Sub-products the consumer identified in the complaint
@@ -779,7 +779,7 @@ exports[`component:TrendsPanel Snapshots renders area without crashing 1`] = `
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 01/01/2018 to 01/01/2020
+      Sub-products, by product from 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.
@@ -1432,7 +1432,7 @@ exports[`component:TrendsPanel Snapshots renders date warning without crashing 1
     className="row-chart-section"
   >
     <h3>
-      Product by highest complaint volume 01/01/2018 to 01/01/2020
+      Product by highest complaint volume 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.
@@ -1811,7 +1811,7 @@ exports[`component:TrendsPanel Snapshots renders external Tooltip without crashi
     className="row-chart-section"
   >
     <h3>
-      Sub-products, by product from 01/01/2018 to 01/01/2020
+      Sub-products, by product from 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.
@@ -2072,7 +2072,7 @@ exports[`component:TrendsPanel Snapshots renders lineChart Overview without cras
     className="row-chart-section"
   >
     <h3>
-      Product by highest complaint volume 01/01/2018 to 01/01/2020
+      Product by highest complaint volume 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.
@@ -2334,7 +2334,7 @@ exports[`component:TrendsPanel Snapshots renders mobile filters without crashing
     className="row-chart-section"
   >
     <h3>
-      Product by highest complaint volume 01/01/2018 to 01/01/2020
+      Product by highest complaint volume 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.
@@ -2595,7 +2595,7 @@ exports[`component:TrendsPanel Snapshots renders print mode without crashing 1`]
     className="row-chart-section"
   >
     <h3>
-      Product by highest complaint volume 01/01/2018 to 01/01/2020
+      Product by highest complaint volume 1/1/2018 to 1/1/2020
     </h3>
     <p>
       Product and sub-product the consumer identified in the  complaint. Click on a product to expand sub-products.

src/reducers/__tests__/trends.spec.jsx

@@ -431,7 +431,7 @@ describe( 'reducer:trends', () => {
         },
         interval: 'Month',
         key: '2018-04-01T00:00:00.000Z',
-        title: 'Date range: 04/01/2018 - 04/30/2018',
+        title: 'Date range: 4/1/2018 - 4/30/2018',
         total: 53,
         values: [
           {

src/utils/__tests__/chart.spec.jsx

@@ -68,64 +68,64 @@ describe( 'getTooltipTitle', () => {
   it( 'sets tooltip title - month', () => {
     interval = 'Month'
     res = sut.getTooltipTitle( '09/1/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 09/01/1980 - 09/30/1980' )
+    expect( res ).toEqual( 'Date range: 9/1/1980 - 9/30/1980' )
     res = sut.getTooltipTitle( '09/1/1980', interval, dateRange, false )
-    expect( res ).toEqual( '09/01/1980 - 09/30/1980' )
+    expect( res ).toEqual( '9/1/1980 - 9/30/1980' )
   } )
 
   it( 'sets tooltip title - week', () => {
     interval = 'Week'
     res = sut.getTooltipTitle( '09/1/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 09/01/1980 - 09/07/1980' )
+    expect( res ).toEqual( 'Date range: 9/1/1980 - 9/7/1980' )
     res = sut.getTooltipTitle( '09/1/1980', interval, dateRange, false )
-    expect( res ).toEqual( '09/01/1980 - 09/07/1980' )
+    expect( res ).toEqual( '9/1/1980 - 9/7/1980' )
   } )
 
   it( 'sets tooltip title - day', () => {
     interval = 'Day'
     res = sut.getTooltipTitle( '09/23/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date: 09/23/1980' )
+    expect( res ).toEqual( 'Date: 9/23/1980' )
     res = sut.getTooltipTitle( '09/23/1980', interval, dateRange, false )
-    expect( res ).toEqual( 'Date: 09/23/1980' )
+    expect( res ).toEqual( 'Date: 9/23/1980' )
   } )
 
   it( 'sets tooltip title - year', () => {
     interval = 'Year'
     res = sut.getTooltipTitle( '01/01/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 01/01/1980 - 12/31/1980' )
+    expect( res ).toEqual( 'Date range: 1/1/1980 - 12/31/1980' )
   } )
 
   it( 'sets tooltip title - year, odd start offset', () => {
     interval = 'Year'
     dateRange.from = '03/22/1980'
     res = sut.getTooltipTitle( '01/01/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 03/22/1980 - 12/31/1980' )
+    expect( res ).toEqual( 'Date range: 3/22/1980 - 12/31/1980' )
   } )
 
   it( 'sets tooltip title - year, odd end offset', () => {
     interval = 'Year'
     dateRange.to = '03/22/1980'
     res = sut.getTooltipTitle( '01/01/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 01/01/1980 - 03/22/1980' )
+    expect( res ).toEqual( 'Date range: 1/1/1980 - 3/22/1980' )
   } )
 
   it( 'sets tooltip title - quarter', () => {
     interval = 'quarter'
     res = sut.getTooltipTitle( '07/01/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 07/01/1980 - 12/31/1980' )
+    expect( res ).toEqual( 'Date range: 7/1/1980 - 12/31/1980' )
   } )
 
   it( 'sets tooltip title - quarter, odd start offset', () => {
     interval = 'quarter'
     res = sut.getTooltipTitle( '07/15/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 07/15/1980 - 12/31/1980' )
+    expect( res ).toEqual( 'Date range: 7/15/1980 - 12/31/1980' )
   } )
 
   it( 'sets tooltip title - quarter, odd end offset', () => {
     interval = 'quarter'
     dateRange.to = '11/10/1980'
     res = sut.getTooltipTitle( '07/01/1980', interval, dateRange, true )
-    expect( res ).toEqual( 'Date range: 07/01/1980 - 11/10/1980' )
+    expect( res ).toEqual( 'Date range: 7/1/1980 - 11/10/1980' )
   } )
 } )
 

src/utils/__tests__/formatDate.spec.jsx

@@ -16,11 +16,6 @@ describe( 'formatDate', function () {
     expect( actual ).toEqual( '1980-01-12' )
   } )
 
-  it( 'converts string to view model ', function () {
-    const actual = sut.formatDateView( new Date( 'January 12, 1980' ) )
-    expect( actual ).toEqual( '01/12/1980' )
-  } )
-
   it( 'converts string to data model ', function () {
     const actual = sut.formatDateModel( new Date( 'January 12, 1980' ) )
     expect( actual ).toEqual( '1980-01-12' )

src/utils/chart.jsx

@@ -1,7 +1,7 @@
 // ----------------------------------------------------------------------------
 /* eslint-disable no-mixed-operators, camelcase */
-import { formatDateView, isDateEqual } from './formatDate'
-import { clampDate } from '../utils'
+import { adjustDate, isDateEqual } from './formatDate'
+import { clampDate, shortFormat } from '../utils'
 
 import moment from 'moment'
 
@@ -52,8 +52,9 @@ export const getLastLineDate = ( dataSet, config ) => {
 
 
 export const getTooltipDate = ( inputDate, dateRange ) => {
-  const returnDate = clampDate( inputDate, dateRange.from, dateRange.to )
-  return formatDateView( returnDate )
+  const adjustedDate = adjustDate( inputDate )
+  const returnDate = clampDate( adjustedDate, dateRange.from, dateRange.to )
+  return shortFormat( returnDate )
 }
 
 export const getTooltipTitle = ( inputDate, interval, dateRange, external ) => {