Merge pull request #295 from JeffreyMFarley/issue-1084

Updates to Trends when lens = Company

src/actions/__tests__/trends.spec.jsx

@@ -39,7 +39,7 @@ describe( 'action:trendsActions', () => {
     it( 'creates a simple action', () => {
       const expectedAction = {
         type: sut.DEPTH_CHANGED,
-        depth: '1000',
+        depth: 1000,
         requery: REQUERY_ALWAYS
       }
       expect( sut.changeDepth( 1000 ) ).toEqual( expectedAction )

src/actions/trends.jsx

@@ -61,7 +61,7 @@ export function changeDepth( depth ) {
   return {
     type: DEPTH_CHANGED,
     requery: REQUERY_ALWAYS,
-    depth: depth.toString()
+    depth
   }
 }
 

src/components/Trends/TrendDepthToggle.jsx

@@ -1,6 +1,6 @@
 import './TrendDepthToggle.less'
 import { changeDepth, resetDepth } from '../../actions/trends'
-import { coalesce } from '../../utils'
+import { clamp, coalesce } from '../../utils'
 import { connect } from 'react-redux'
 import React from 'react'
 
@@ -49,13 +49,21 @@ export const mapStateToProps = state => {
   const { aggs, query, trends } = state
   const { focus, lens } = query
   const lensKey = lens.toLowerCase()
-  const prodLength = coalesce( trends.results, lensKey, [] )
+
+  const lensResultLength = coalesce( trends.results, lensKey, [] )
     .filter( o => o.visible ).length
-  const diff = coalesce( aggs, lensKey, [] ).length - prodLength
+
+  // The total source depends on the lens.  There are no aggs for companies
+  let totalResultsLength = 0
+  if ( lensKey === 'product' ) {
+    totalResultsLength = coalesce( aggs, lensKey, [] ).length
+  } else {
+    totalResultsLength = clamp( coalesce( query, lensKey, [] ).length, 0, 10 )
+  }
 
   return {
-    diff,
-    showToggle: prodLength > 0 && !focus && lens === 'Product'
+    diff: totalResultsLength - lensResultLength,
+    showToggle: lensResultLength > 0 && !focus
   }
 }
 

src/components/__tests__/TrendDepthToggle.spec.jsx

@@ -125,7 +125,7 @@ describe( 'component:TrendDepthToggle', () => {
       expect( dispatch.mock.calls ).toEqual( [
         [ {
           requery: REQUERY_ALWAYS,
-          depth: '18',
+          depth: 18,
           type: 'DEPTH_CHANGED'
         } ]
       ] )
@@ -173,6 +173,50 @@ describe( 'component:TrendDepthToggle', () => {
         showToggle: true
       } )
     } )
-  } )
 
+    describe( 'when lens = Company', () => {
+      let state
+      beforeEach( () => {
+        state = {
+          aggs: {},
+          query: {
+            focus: '',
+            lens: 'Company',
+            company: [
+              'I', 'I', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI'
+            ]
+          },
+          trends: {
+            results: {
+              company: [ 
+                { name: 'a', visible: true }, { name: 'b', visible: true },
+                { name: 'c', visible: true }, { name: 'd', visible: true },
+                { name: 'e', visible: true }, { name: 'f', visible: true },
+                { name: 'g', visible: true }, { name: 'h', visible: true },
+                { name: 'i', visible: true }, { name: 'j', visible: true }
+              ]
+            }
+          }
+        }
+      } )
+
+      it( 'caps the maximum number of companies at 10' , () => {
+        const actual = mapStateToProps( state )
+        expect( actual ).toEqual( {
+          diff: 0,
+          showToggle: true
+        } )
+      } )
+
+      it( 'shows the toggle when results < 10' , () => {
+        state.trends.results.company.splice(4, 5)
+
+        const actual = mapStateToProps( state )
+        expect( actual ).toEqual( {
+          diff: 5,
+          showToggle: true
+        } )
+      } )
+    } )
+  } )
 } )

src/reducers/__tests__/query.spec.jsx

@@ -123,7 +123,7 @@ describe( 'reducer:query', () => {
       }
       expect( target( state, action ) ).toEqual( {
         queryString: '?trend_depth=5',
-        trendDepth: '5'
+        trendDepth: 5
       } )
     } )
   } )
@@ -1072,8 +1072,27 @@ describe( 'reducer:query', () => {
           focus: '',
           lens: 'Foo',
           subLens: 'sub_foo',
-          queryString: '?lens=foo&sub_lens=sub_foo&tab=Trends',
+          queryString: '?lens=foo&sub_lens=sub_foo&tab=Trends&trend_depth=5',
+          tab: 'Trends',
+          trendDepth: 5,
+          trendsDateWarningEnabled: false
+        } )
+      } )
+
+      it( 'has special values when lens = Company', () => {
+        const action = {
+          type: actions.DATA_LENS_CHANGED,
+          lens: 'Company'
+        }
+        const result = target( { tab: types.MODE_TRENDS, focus: 'ahha' },
+          action )
+        expect( result ).toEqual( {
+          focus: '',
+          lens: 'Company',
+          subLens: 'product',
+          queryString: '?lens=company&sub_lens=product&tab=Trends&trend_depth=10',
           tab: 'Trends',
+          trendDepth: 10,
           trendsDateWarningEnabled: false
         } )
       } )

src/reducers/query.jsx

@@ -1,5 +1,3 @@
-/* eslint complexity: ["error", 7] */
-
 import * as types from '../constants'
 import {
   calculateDateRange, clamp, hasFiltersEnabled, shortIsoFormat, startOfToday
@@ -32,7 +30,7 @@ export const defaultQuery = {
   subLens: '',
   tab: types.MODE_MAP,
   totalPages: 0,
-  trendDepth: '5',
+  trendDepth: 5,
   trendsDateWarningEnabled: false
 }
 
@@ -51,13 +49,15 @@ const trendFieldMap = {
 
 const urlParams = [
   'dateRange', 'searchText', 'searchField', 'tab',
-  'lens', 'dateInterval', 'subLens', 'focus', 'chartType', 'trendDepth'
+  'lens', 'dateInterval', 'subLens', 'focus', 'chartType'
 ]
-const urlParamsInt = [ 'from', 'page', 'size' ]
+const urlParamsInt = [ 'from', 'page', 'size', 'trendDepth' ]
 
 // ----------------------------------------------------------------------------
 // Helper functions
 
+/* eslint-disable complexity */
+
 /**
 * Makes sure the date range reflects the actual dates selected
 *
@@ -103,6 +103,9 @@ export function alignDateRange( state ) {
   return state
 }
 
+
+/* eslint-enable complexity */
+
 /**
 * Check for a common case where there is a date range but no dates
 *
@@ -732,7 +735,7 @@ function changeDepth( state, action ) {
 function resetDepth( state ) {
   return {
     ...state,
-    trendDepth: '5'
+    trendDepth: 5
   }
 }
 
@@ -757,11 +760,14 @@ function changeFocus( state, action ) {
  * @returns {object} new state in redux
  */
 function changeDataLens( state, action ) {
+  const { lens } = action
+
   return {
     ...state,
     focus: '',
-    lens: action.lens,
-    subLens: getSubLens( action.lens )
+    lens,
+    subLens: getSubLens( lens ),
+    trendDepth: lens === 'Company' ? 10 : 5
   }
 }
 
@@ -806,6 +812,7 @@ export function stateToQS( state ) {
   const fields = Object.keys( state )
 
   // Copy over the fields
+  // eslint-disable-next-line complexity
   fields.forEach( field => {
     // Do not include empty fields
     if ( !state[field] ) {