Merge pull request #283 from flacoman91/remove-issues

Remove Issues from Trends & Map

src/components/Map/MapPanel.jsx

@@ -48,11 +48,6 @@ export class MapPanel extends React.Component {
                   data={this.props.productData.data}
                   title="Product by highest complaint volume"
                   total={ this.props.total }/>
-        <RowChart id="issue"
-                  colorScheme={this.props.issueData.colorScheme}
-                  data={this.props.issueData.data}
-                  title="Issue by highest complaint volume"
-                  total={ this.props.total }/>
 
         <Loading isLoading={ this.props.isLoading || false }/>
       </section>
@@ -71,16 +66,13 @@ const mapStateToProps = state => {
 
   const {
     enablePer1000,
-    issue: issueFilters,
-    mapWarningEnabled,
-    product: productFilters
+    mapWarningEnabled
   } = query
 
   return {
     error,
     isLoading,
-    issueData: processRows( issueFilters, results.issue, false ),
-    productData: processRows( productFilters, results.product, false ),
+    productData: processRows( results.product, false ),
     showMobileFilters: state.view.width < 750,
     showWarning: !enablePer1000 && mapWarningEnabled,
     total: state.aggs.total

src/components/Trends/LensTabs.jsx

@@ -6,12 +6,7 @@ import React from 'react'
 
 const lensMaps = {
   Company: {
-    tab1: { displayName: 'Products', filterName: 'product' },
-    tab2: { displayName: 'Issues', filterName: 'issue' }
-  },
-  Issue: {
-    tab1: { displayName: 'Sub-issues', filterName: 'sub_issue' },
-    tab2: { displayName: 'Products', filterName: 'product' }
+    tab1: { displayName: 'Products', filterName: 'product' }
   },
   Product: {
     tab1: { displayName: 'Sub-products', filterName: 'sub_product' },
@@ -49,12 +44,13 @@ export class LensTabs extends React.Component {
             onClick={ () => this._setTab( lensMaps[lens].tab1.filterName ) }>
             { lensMaps[lens].tab1.displayName }
           </button>
-
+          { lensMaps[lens].tab2 &&
           <button
             className={ this._getTabClass( lensMaps[lens].tab2.filterName ) }
             onClick={ () => this._setTab( lensMaps[lens].tab2.filterName ) }>
             { lensMaps[lens].tab2.displayName }
           </button>
+          }
         </section>
       </div>
     )

src/components/Trends/TrendsPanel.jsx

@@ -26,7 +26,7 @@ import { showCompanyOverLay } from '../../utils/trends'
 import StackedAreaChart from '../Charts/StackedAreaChart'
 
 const intervals = [ 'Day', 'Week', 'Month', 'Quarter', 'Year' ]
-const lenses = [ 'Overview', 'Company', 'Product', 'Issue' ]
+const lenses = [ 'Overview', 'Company', 'Product' ]
 const subLensMap = {
   sub_product: 'Sub-products',
   sub_issue: 'Sub-issues',
@@ -56,20 +56,12 @@ export class TrendsPanel extends React.Component {
 
   _phaseMap() {
     if ( this.props.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 }
-                  key={ 'product-row' }/>,
-        <RowChart id="issue"
-                  colorScheme={ this.props.issueData.colorScheme }
-                  data={ this.props.issueData.data }
-                  title={ 'Issue by highest complaint volume' }
-                  total={ this.props.total }
-                  key={ 'issue-row' }/>
-      ]
+      return <RowChart id="product"
+                       colorScheme={ this.props.productData.colorScheme }
+                       data={ this.props.productData.data }
+                       title={ 'Product by highest complaint volume' }
+                       total={ this.props.total }
+                       key={ 'product-row' }/>
     }
 
     if ( this.props.focus ) {
@@ -164,8 +156,6 @@ const mapStateToProps = state => {
   const {
     company: companyFilters,
     dateInterval,
-    issue: issueFilters,
-    product: productFilters,
     lens,
     subLens
   } = query
@@ -175,19 +165,17 @@ const mapStateToProps = state => {
   } = trends
 
   const lensKey = lens.toLowerCase()
-  const dataLensFilters = query[lensKey]
   const focusKey = subLens.replace( '_', '-' )
   return {
     chartType,
-    companyData: processRows( companyFilters, results.company, false ),
+    companyData: processRows( results.company, false ),
     companyOverlay: showCompanyOverLay( lens, companyFilters, isLoading ),
     dateInterval,
     focus,
-    focusData: processRows( issueFilters, results[focusKey], colorMap ),
+    focusData: processRows( results[focusKey], colorMap ),
     isLoading,
-    issueData: processRows( issueFilters, results.issue, false ),
-    productData: processRows( productFilters, results.product, false ),
-    dataLensData: processRows( dataLensFilters, results[lensKey], colorMap ),
+    productData: processRows( results.product, false ),
+    dataLensData: processRows( results[lensKey], colorMap ),
     lens,
     overview: lens === 'Overview',
     showMobileFilters: state.view.width < 750,

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

@@ -179,16 +179,6 @@ exports[`component:MapPanel renders Print without crashing 1`] = `
       id="row-chart-product"
     />
   </div>
-  <div
-    className="row-chart-section"
-  >
-    <h3>
-      Issue by highest complaint volume
-    </h3>
-    <div
-      id="row-chart-issue"
-    />
-  </div>
 </section>
 `;
 
@@ -408,16 +398,6 @@ exports[`component:MapPanel renders warning without crashing 1`] = `
       id="row-chart-product"
     />
   </div>
-  <div
-    className="row-chart-section"
-  >
-    <h3>
-      Issue by highest complaint volume
-    </h3>
-    <div
-      id="row-chart-issue"
-    />
-  </div>
 </section>
 `;
 
@@ -600,15 +580,5 @@ exports[`component:MapPanel renders without crashing 1`] = `
       id="row-chart-product"
     />
   </div>
-  <div
-    className="row-chart-section"
-  >
-    <h3>
-      Issue by highest complaint volume
-    </h3>
-    <div
-      id="row-chart-issue"
-    />
-  </div>
 </section>
 `;

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

@@ -695,16 +695,6 @@ exports[`component:Results renders Map print mode without crashing 1`] = `
         id="row-chart-product"
       />
     </div>
-    <div
-      className="row-chart-section"
-    >
-      <h3>
-        Issue by highest complaint volume
-      </h3>
-      <div
-        id="row-chart-issue"
-      />
-    </div>
   </section>
   <section
     className="print-info-footer"
@@ -1352,16 +1342,6 @@ exports[`component:Results renders map panel without crashing 1`] = `
         id="row-chart-product"
       />
     </div>
-    <div
-      className="row-chart-section"
-    >
-      <h3>
-        Issue by highest complaint volume
-      </h3>
-      <div
-        id="row-chart-issue"
-      />
-    </div>
   </section>
 </div>
 `;
@@ -1480,11 +1460,6 @@ exports[`component:Results renders trends panel without crashing 1`] = `
           >
             Product
           </option>
-          <option
-            value="Issue"
-          >
-            Issue
-          </option>
         </select>
       </section>
       <span

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

@@ -111,11 +111,6 @@ exports[`component:TrendsPanel Snapshots renders Focus without crashing 1`] = `
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -497,11 +492,6 @@ exports[`component:TrendsPanel Snapshots renders area without crashing 1`] = `
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -853,11 +843,6 @@ exports[`component:TrendsPanel Snapshots renders company Overlay without crashin
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -1130,12 +1115,6 @@ exports[`component:TrendsPanel Snapshots renders company Overlay without crashin
       >
         Products
       </button>
-      <button
-        className="tab issue"
-        onClick={[Function]}
-      >
-        Issues
-      </button>
     </section>
   </div>
   <div
@@ -1262,11 +1241,6 @@ exports[`component:TrendsPanel Snapshots renders external Tooltip without crashi
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -1618,11 +1592,6 @@ exports[`component:TrendsPanel Snapshots renders lineChart Overview without cras
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -1739,16 +1708,6 @@ exports[`component:TrendsPanel Snapshots renders lineChart Overview without cras
       id="row-chart-product"
     />
   </div>
-  <div
-    className="row-chart-section"
-  >
-    <h3>
-      Issue by highest complaint volume
-    </h3>
-    <div
-      id="row-chart-issue"
-    />
-  </div>
 </section>
 `;
 
@@ -1864,11 +1823,6 @@ exports[`component:TrendsPanel Snapshots renders mobile filters without crashing
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -2141,12 +2095,6 @@ exports[`component:TrendsPanel Snapshots renders mobile filters without crashing
       >
         Products
       </button>
-      <button
-        className="tab issue"
-        onClick={[Function]}
-      >
-        Issues
-      </button>
     </section>
   </div>
   <div
@@ -2273,11 +2221,6 @@ exports[`component:TrendsPanel Snapshots renders print mode without crashing 1`]
         >
           Product
         </option>
-        <option
-          value="Issue"
-        >
-          Issue
-        </option>
       </select>
     </section>
     <span
@@ -2550,12 +2493,6 @@ exports[`component:TrendsPanel Snapshots renders print mode without crashing 1`]
       >
         Products
       </button>
-      <button
-        className="tab issue"
-        onClick={[Function]}
-      >
-        Issues
-      </button>
     </section>
   </div>
   <div

src/utils/__tests__/chart.spec.jsx

@@ -172,23 +172,21 @@ describe( 'getColorScheme', function () {
 
 describe( 'processRows', () => {
   it( 'handles empty rows / bad data', () => {
-    const filters = []
-    const res = sut.processRows( filters, false, false )
+    const res = sut.processRows( false, false )
     expect( res ).toEqual( {
       colorScheme: [],
       data: []
     } )
   } )
 
   it( 'returns only visible rows', () => {
-    const filters = []
     const rows = [
       { name: 'abc', visible: true, value: 123 },
       { name: 'def', visible: true, value: 123 },
       { name: 'Complaint', visible: true, value: 123 },
       { name: 'Compla', parent: 'Complaint', visible: false, value: 123 },
       { name: 'de11f', parent: 'def', visible: false, value: 123 } ]
-    const res = sut.processRows( filters, rows, false )
+    const res = sut.processRows( rows, false )
     expect( res ).toEqual( {
       colorScheme: [ '#20aa3f', '#20aa3f', '#20aa3f' ],
       data: [

src/utils/chart.jsx

@@ -116,7 +116,7 @@ export const getColorScheme = ( rowNames, colorMap ) =>
     return '#20aa3f'
   } )
 
-export const processRows = ( filters, rows, colorMap ) => {
+export const processRows = ( rows, colorMap ) => {
   let data = rows ? rows : []
   data = data.filter( o => o.visible )
   const colorScheme = getColorScheme( data, colorMap )