feat(card): Add wait time to the cards

configurations/default/store.yml

@@ -5,8 +5,8 @@ browsochrones:
     - Jobs_total
     - Workers_total
   origins:
-    - https://dz69bcpxxuhn6.cloudfront.net/indyconnect-marion-v2
-    - https://dz69bcpxxuhn6.cloudfront.net/indy-baseline-v2
+    - https://dz69bcpxxuhn6.cloudfront.net/indyconnect-marion-v5/
+    - https://dz69bcpxxuhn6.cloudfront.net/indy-baseline-v5/
 geocoder:
   focusLatlng:
     lat: 39.7691

package.json

@@ -30,7 +30,7 @@
     "semantic-release": "^4.3.5"
   },
   "dependencies": {
-    "browsochrones": "^0.4.0",
+    "browsochrones": "^0.7.1",
     "color": "^0.11.1",
     "debug": "^2.2.0",
     "declarative-fetch": "^0.1.13",
@@ -49,6 +49,7 @@
     "normalize.css": "^5.0.0",
     "qs": "^6.1.0",
     "react": "^15.3.2",
+    "react-addons-perf": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-leaflet": "^0.12.2",
     "react-pure-render": "^1.0.2",

src/components/route-card.js

@@ -13,9 +13,11 @@ const RouteCard = ({
   children,
   oldAccessibility,
   oldTravelTime,
+  oldWaitTime,
   onClick,
   transitiveData,
-  travelTime
+  travelTime,
+  waitTime
 }) => {
   const className = 'Card' + (alternate ? ' Card-alternate' : '') + (active ? ' Card-active' : '')
   const accessibilityKeys = Object.keys(accessibility)
@@ -37,7 +39,14 @@ const RouteCard = ({
       </div>
       <div className='CardContent'>
         {access}
-        {travelTime && transitiveData && renderJourneys({ oldTravelTime, travelTime, transitiveData })}
+        {travelTime && transitiveData &&
+          renderJourneys({
+            oldTravelTime,
+            oldWaitTime,
+            travelTime,
+            transitiveData,
+            waitTime
+          })}
       </div>
     </div>
   )
@@ -50,11 +59,11 @@ function TripDiff ({
   const difference = oldTravelTime - travelTime
 
   if (oldTravelTime === 255) return <span className='increase'>{messages.NewTrip} <Icon type='star' /></span>
-  else if (difference > 0) return <span className='increase'>{difference} {messages.Units.Mins} {messages.Faster}</span>
-  else if (difference < 0) return <span className='decrease'>{difference * -1} {messages.Units.Mins} {messages.Slower}</span>
+  else if (difference > 0) return <span className='increase'><strong>{difference}</strong> {messages.Units.Mins} {messages.Faster}</span>
+  else if (difference < 0) return <span className='decrease'><strong>{difference * -1}</strong> {messages.Units.Mins} {messages.Slower}</span>
 }
 
-function renderJourneys ({ oldTravelTime, transitiveData, travelTime }) {
+function renderJourneys ({ oldTravelTime, transitiveData, travelTime, waitTime }) {
   const journeys = extractRelevantTransitiveInfo(transitiveData)
 
   if (travelTime === 255 || journeys.length === 0) {
@@ -95,13 +104,14 @@ function renderJourneys ({ oldTravelTime, transitiveData, travelTime }) {
       <div className='heading'>{messages.Systems.BestTripTitle}</div>
       <div className='Metric'>
         {bestTripSegments}
-        <Icon type='clock-o' /><strong>{travelTime}</strong> {messages.Units.Mins}
+        <strong>{travelTime}</strong> {messages.Units.Mins} / <strong>{waitTime}</strong> {messages.Units.Mins} avg wait
         {oldTravelTime && <span className='pull-right'>
           <TripDiff
             oldTravelTime={oldTravelTime}
             travelTime={travelTime}
             />
         </span>}
+        <br />
       </div>
       {alternateTrips.length > 0 &&
         <div>
@@ -128,7 +138,7 @@ function extractRelevantTransitiveInfo ({
           const pid = s.pattern_id || s.patterns[0].pattern_id
           const seg = {}
           const route = findRouteForPattern({id: pid, patterns, routes})
-          const color = Color(`#${route.route_color}`)
+          const color = route.route_color ? Color(`#${route.route_color}`) : Color(s.color)
           seg.name = toCapitalCase(route.route_short_name)
 
           if (s.patterns && s.patterns.length > 0) {
@@ -180,8 +190,8 @@ function showAccess (keys, base) {
 function AccessDiffPercentage ({
   diff
 }) {
-  if (diff > 0) return <span className='pull-right increase'>{diff.toLocaleString()}%<Icon type='level-up' /></span>
-  else if (diff < 0) return <span className='pull-right decrease'>{(diff * -1).toLocaleString()}%<Icon className='fa-rotate-180' type='level-up' /></span>
+  if (diff > 0) return <span className='pull-right increase'><strong>{diff.toLocaleString()}</strong>%<Icon type='level-up' /></span>
+  else if (diff < 0) return <span className='pull-right decrease'><strong>{(diff * -1).toLocaleString()}</strong>%<Icon className='fa-rotate-180' type='level-up' /></span>
 }
 
 function showDiff (keys, base, comparison) {

src/containers/indianapolis/index.js

@@ -182,6 +182,7 @@ class Indianapolis extends Component {
                 onClick={setBaseActive}
                 transitiveData={map.baseTransitive}
                 travelTime={map.baseTravelTime}
+                waitTime={map.baseWaitTime}
                 >
                 {messages.Systems.BaseTitle}
               </RouteCard>
@@ -194,6 +195,7 @@ class Indianapolis extends Component {
                 onClick={setComparisonActive}
                 transitiveData={map.comparisonTransitive}
                 travelTime={map.comparisonTravelTime}
+                waitTime={map.comparisonWaitTime}
                 >
                 {messages.Systems.ComparisonTitle}
               </RouteCard>

src/containers/root/root.dev.js

@@ -22,4 +22,10 @@ export default class Root extends Component {
       </Provider>
     )
   }
+
+  componentDidMount () {
+    window.Perf.stop()
+    window.Perf.printExclusive()
+    console.timeEnd('startup')
+  }
 }

src/mount.js

@@ -1,3 +1,9 @@
+if (process.env.NODE_ENV === 'development') {
+  const Perf = window.Perf = require('react-addons-perf')
+  Perf.start()
+  console.time('startup')
+}
+
 import merge from 'lodash.merge'
 import React from 'react'
 import {render} from 'react-dom'

src/reducers/map.js

@@ -39,10 +39,14 @@ export default handleActions({
 
     return {
       ...state,
+      baseInVehicleTravelTime: base.inVehicleTravelTime,
       baseTransitive: base.transitive,
       baseTravelTime: base.travelTime,
+      baseWaitTime: base.waitTime,
+      comparisonInVehicleTravelTime: comparison.inVehicleTravelTime,
       comparisonTransitive: comparison.transitive,
       comparisonTravelTime: comparison.travelTime,
+      comparisonWaitTime: comparison.waitTime,
       transitive
     }
   },

src/utils/initialize-browsochrones.js

@@ -9,79 +9,84 @@ import messages from './messages'
 import {addActionLogItem, setBrowsochronesBase, setBrowsochronesComparison, setDestination, updateOrigin} from '../actions'
 
 export default async function initialize (store) {
-  let state = store.getState()
+  const state = store.getState()
   const {grids, gridsUrl, origins} = state.browsochrones
-  try {
-    const fetchGrids = grids.map(async (name) => {
-      const res = await fetch(`${gridsUrl}/${name}.grid`)
-      const grid = await res.arrayBuffer()
-      grid.name = name
-      return grid
-    })
-    const fetchedGrids = await Promise.all(fetchGrids)
+  const fetchGrids = grids.map(async (name) => {
+    const res = await fetch(`${gridsUrl}/${name}.grid`)
+    const grid = await res.arrayBuffer()
+    grid.name = name
+    return grid
+  })
+  const fetchedGrids = await Promise.all(fetchGrids)
 
-    const bs1 = await load(origins[0], fetchedGrids)
-    store.dispatch(setBrowsochronesBase(bs1))
+  const bs1 = await load(origins[0], fetchedGrids)
+  store.dispatch(setBrowsochronesBase(bs1))
 
-    const bs2 = origins[1]
-      ? await load(origins[1], fetchedGrids)
-      : false
-    if (bs2) {
-      store.dispatch(setBrowsochronesComparison(bs2))
-    }
+  const bs2 = origins[1]
+    ? await load(origins[1], fetchedGrids)
+    : false
+  if (bs2) {
+    store.dispatch(setBrowsochronesComparison(bs2))
+  }
 
-    const qs = parseQueryString(window.location.search.split('?')[1])
-    if (qs.start) {
-      try {
-        const {geocoder} = state
-        const [startResults, endResults] = await Promise.all(['start', 'end']
-          .filter((d) => !!qs[d])
-          .map((d) => geocode({
-            boundary: geocoder.boundary,
-            focusLatlng: geocoder.focusLatlng,
-            text: qs[d]
-          })))
-        if (startResults.features.length > 0) {
-          const destination = endResults && endResults.features.length > 0
-            ? { latlng: lonlng(endResults.features[0].geometry.coordinates), label: endResults.features[0].place_name }
-            : {}
-          store.dispatch(updateOrigin({
-            browsochrones: { active: 'base', base: bs1, comparison: bs2 },
-            label: startResults.features[0].place_name,
-            destinationLatlng: destination.latlng,
-            latlng: lonlng(startResults.features[0].geometry.coordinates),
-            zoom: state.map.zoom
-          }))
-          store.dispatch(setDestination(destination))
-        }
-      } catch (e) {
-        console.error(e)
-      }
-    }
+  const actions = await loadFromQueryString({bs1, bs2, state})
+  if (actions && actions.length > 0) store.dispatch(actions)
 
-    store.dispatch(addActionLogItem(messages.Strings.ApplicationReady))
-  } catch (err) {
-    store.dispatch(addActionLogItem(err.message))
-  }
+  store.dispatch(addActionLogItem(messages.Strings.ApplicationReady))
 }
 
 async function load (url, grids) {
   const bs = new Browsochrones()
   bs.originsUrl = url
   bs.grids = grids.map((g) => g.name)
-
   const fetches = [
     fetch(`${url}/query.json`).then((res) => res.json()),
-    fetch(`${url}/stop_trees.dat`).then((res) => res.arrayBuffer()),
-    fetch(`${url}/transitive.json`).then((res) => res.json())
+    fetch(`${url}/stop_trees.dat`).then((res) => res.arrayBuffer())
   ]
-  const [query, stopTrees, transitive] = await Promise.all(fetches)
+  const [query, stopTrees] = await Promise.all(fetches)
   await bs.setQuery(query)
   await bs.setStopTrees(stopTrees)
-  await bs.setTransitiveNetwork(transitive)
+  await bs.setTransitiveNetwork(query.transitiveData)
 
   const putGrids = grids.map((grid) => bs.putGrid(grid.name, grid))
   await Promise.all(putGrids)
 
   return bs
 }
+
+async function loadFromQueryString ({
+  bs1,
+  bs2,
+  state
+}) {
+  const qs = parseQueryString(window.location.search.split('?')[1])
+  if (qs.start) {
+    const {geocoder} = state
+    try {
+      const [startResults, endResults] = await Promise.all(['start', 'end']
+        .filter((d) => !!qs[d])
+        .map((d) => geocode({
+          boundary: geocoder.boundary,
+          focusLatlng: geocoder.focusLatlng,
+          text: qs[d]
+        })))
+      if (startResults.features.length > 0) {
+        const destination = endResults && endResults.features.length > 0
+          ? { latlng: lonlng(endResults.features[0].geometry.coordinates), label: endResults.features[0].place_name }
+          : {}
+        return [
+          updateOrigin({
+            browsochrones: { active: 'base', base: bs1, comparison: bs2 },
+            label: startResults.features[0].place_name,
+            destinationLatlng: destination.latlng,
+            latlng: lonlng(startResults.features[0].geometry.coordinates),
+            zoom: state.map.zoom
+          }),
+          setDestination(destination)
+        ]
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}