fix(feedVersion): correctly show all modes in ServicePerModeChart

evansiroky · evansiroky · commit 606f9642f756 · 2020-08-28T11:52:16.000-07:00
fixes #610
diff --git a/lib/manager/components/validation/ServicePerModeChart.js b/lib/manager/components/validation/ServicePerModeChart.js
@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react'
 import moment from 'moment'
-import intersection from 'lodash/intersection'
 
 import Loading from '../../../common/components/Loading'
 import toSentenceCase from '../../../common/util/to-sentence-case'
@@ -15,46 +14,47 @@ type Props = {
 }
 
 const maxDaysToShow = 500
+const orderedPossibleModes = ['other', 'metro', 'rail', 'tram', 'bus']
 
 export default class ServicePerModeChart extends Component<Props> {
-  _getData = (validationResult: ValidationResult) => {
+  _getData = (validationResult: ValidationResult): {
+    data: Array<{
+      bus: number,
+      date: moment,
+      metro: number,
+      other: number,
+      rail: number,
+      total: number,
+      tram: number
+    }>,
+    modes: Array<string>
+  } => {
     const {dailyBusSeconds, dailyTramSeconds, dailyMetroSeconds, dailyRailSeconds, dailyTotalSeconds, firstCalendarDate} = validationResult
     const firstDate = moment(firstCalendarDate)
-    const hasBus = dailyBusSeconds.filter(s => s > 0).length > 0
-    const hasTram = dailyTramSeconds.filter(s => s > 0).length > 0
-    const hasMetro = dailyMetroSeconds.filter(s => s > 0).length > 0
-    const hasRail = dailyRailSeconds.filter(s => s > 0).length > 0
-    let hasOther = false
     const data = []
+    const modes = {}
     const limit = Math.min(dailyTotalSeconds.length, maxDaysToShow)
     for (let i = 0; i < limit; i++) {
       const column = {}
       column.date = firstDate.clone().add(i, 'days')
-      let other = dailyTotalSeconds[i]
       column.total = this._secondsToHours(dailyTotalSeconds[i]) // total
-      if (hasBus) {
-        column.bus = this._secondsToHours(dailyBusSeconds[i]) // bus
-        other -= dailyBusSeconds[i]
-      }
-      if (hasMetro) {
-        column.metro = this._secondsToHours(dailyMetroSeconds[i]) // metro
-        other -= dailyMetroSeconds[i]
-      }
-      if (hasRail) {
-        column.rail = this._secondsToHours(dailyRailSeconds[i]) // rail
-        other -= dailyRailSeconds[i]
-      }
-      if (hasTram) {
-        column.tram = this._secondsToHours(dailyTramSeconds[i]) // tram
-        other -= dailyTramSeconds[i]
-      }
-      if (other || hasOther) {
-        column.other = this._secondsToHours(other)
-        hasOther = true
-      }
+      column.bus = this._secondsToHours(dailyBusSeconds[i]) // bus
+      column.metro = this._secondsToHours(dailyMetroSeconds[i]) // metro
+      column.rail = this._secondsToHours(dailyRailSeconds[i]) // rail
+      column.tram = this._secondsToHours(dailyTramSeconds[i]) // tram
+      column.other = column.total -
+        column.bus -
+        column.metro -
+        column.rail -
+        column.tram
+      orderedPossibleModes.forEach(mode => {
+        if (column[mode] > 0) {
+          modes[mode] = true
+        }
+      })
       data.push(column)
     }
-    return data
+    return { data, modes: Object.keys(modes) }
   }
 
   _secondsToHours = (seconds: number) => Math.floor(seconds / 60 / 60 * 100) / 100
@@ -64,13 +64,10 @@ export default class ServicePerModeChart extends Component<Props> {
     if (!validationResult || !validationResult.dailyTripCounts) {
       return <Loading />
     }
-    const data = this._getData(validationResult)
+    const { data, modes } = this._getData(validationResult)
+    const orderedModes = orderedPossibleModes
+      .filter(mode => modes.indexOf(mode) > -1)
     if (data.length === 0) return <p>No service found</p>
-    // Get list of modes found in GTFS
-    const modes = intersection(
-      ['other', 'metro', 'rail', 'tram', 'bus'],
-      Object.keys(data[0])
-    )
     const graphHeight = 300
     const spacing = 8
     const leftMargin = 50
@@ -126,7 +123,7 @@ export default class ServicePerModeChart extends Component<Props> {
             // generate the stacked bar for this date
             return (
               <g key={index}>
-                {modes.map((k, i) => {
+                {orderedModes.map((k, i) => {
                   const top = previousY
                   const bottom = previousY + d[k] * yScaleFactor
                   const g = d[k]
@@ -165,21 +162,21 @@ export default class ServicePerModeChart extends Component<Props> {
             stroke='black'
             strokeWidth={2} />
           {/* Add legend for bar colors */}
-          {modes.reverse().map((mode, i) => (
+          {orderedModes.reverse().map((mode, i) => (
             <g key={mode}>
               <rect
                 x={100 * i - 5}
                 y={graphHeight + 30}
                 width='80'
                 height='18'
-                fill={colors[modes.length - i - 1]} />
+                fill={colors[orderedModes.length - i - 1]} />
               <text x={100 * i} y={graphHeight + 43} fill='black'>
                 {toSentenceCase(mode)}
               </text>
             </g>
           ))}
           {curtailed &&
-            <text x={100 * modes.length} y={graphHeight + 43}>
+            <text x={100 * orderedModes.length} y={graphHeight + 43}>
               * only first 500 days of service shown
             </text>
           }
