fix(feed-summary): fix tripsPerDate chart to use new validationResult

lib/manager/components/validation/TripsChart.js

@@ -18,8 +18,11 @@ export default class TripsChart extends Component {
     if (!this.props.validationResult) {
       return <Loading />
     }
-    const tripsPerDate = this.props.validationResult.tripsPerDate
-    const data = Object.keys(tripsPerDate).map(key => [key, tripsPerDate[key]])
+    const {dailyTripCounts, firstCalendarDate, lastCalendarDate} = this.props.validationResult
+    const firstDate = moment(firstCalendarDate)
+    const lastDate = moment(lastCalendarDate)
+    const data = dailyTripCounts.map((count, index) =>
+      [firstDate.clone().add(index, 'days'), count])
     const graphHeight = 300
     const spacing = 8
     const leftMargin = 50
@@ -52,34 +55,38 @@ export default class TripsChart extends Component {
                 x1={0} y1={y}
                 x2={svgWidth} y2={y}
                 stroke='gray'
-                strokesvgWidth={1} />
+                strokeWidth={1}
+              />
               <text x={0} y={y - 2} fill='gray'>
                 {l}
               </text>
             </g>
           })}
           {data.map((d, index) => {
-            const dow = moment(d[0]).day()
+            const dow = d[0].day()
+            const dateString = d[0].format('YYYY-MM-DD')
             const x = leftMargin + (spacing / 2) + (index * spacing)
 
             // generate the bar for this date
             return (
               <g key={index}>
+                <title>{dateString}: {d[1]} trips</title>
                 <line
                   x1={x} y1={graphHeight - ((d[1] / yAxisMax) * graphHeight)}
                   x2={x} y2={graphHeight}
+                  title={`${dateString}: ${d[1]} trips`}
                   stroke={dow === 0
                     ? '#fc8d62'
                     : dow === 6
                     ? '#66c2a5'
                     : '#8da0cb'
                   }
                   strokeWidth={7} />
-                {index % 14 === 0 /* label the date every 14 days */
+                {index % 14 === 0 /* label x-axis with dates every 14 days */
                   ? <g>
                     <line x1={x} y1={graphHeight} x2={x} y2={graphHeight + 12} stroke='black' />
                     <text x={x - 35} y={graphHeight + 26} fill='black'>
-                      {d[0]}
+                      {dateString}
                     </text>
                   </g>
                   : null