Fix request time chart to exclude anomalies

Author: backspace

app/components/request-time-chart.gjs

@@ -2,9 +2,17 @@
 import { classNames } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
-import moment from 'moment-timezone';
+import { inject as service } from '@ember/service';
+import formatTimespan from 'prison-rideshare-ui/utils/format-timespan';
+import momentTimeZone from 'moment-timezone';
 import HighCharts from 'ember-highcharts/components/high-charts';
 
+const MAX_RIDE_DURATION_HOURS = 24;
+
+const dataLabelFormatter = function () {
+  return this.point.value > 0 ? this.point.value : null;
+};
+
 @classNames('request-time-chart')
 export default class RequestTimeChart extends Component {
   <template>
@@ -13,51 +21,78 @@ export default class RequestTimeChart extends Component {
       @chartOptions={{this.options}}
       @theme={{this.theme}}
     />
+
+    {{#if this.excludedRides.length}}
+      <details class='request-time-exclusions'>
+        <summary>
+          Rides excluded from visit times chart (duration over
+          {{MAX_RIDE_DURATION_HOURS}}
+          hours or invalid):
+          {{this.excludedRides.length}}
+        </summary>
+        <ul>
+          {{#each this.excludedRidesDisplay as |excluded|}}
+            <li>
+              {{excluded.timespan}}
+              · Visitor:
+              {{excluded.visitor}}
+              · Driver:
+              {{excluded.driver}}
+            </li>
+          {{/each}}
+        </ul>
+      </details>
+    {{/if}}
   </template>
-  @computed('rides.@each.start', 'grouping')
+
+  @service moment;
+
+  @computed('grouping', 'rides.@each.{end,passengers,start}')
   get data() {
     const grouping = this.grouping;
+    const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+    const days = dayNames.map((name, day) => ({
+      hours: new Array(24).fill(0),
+      name,
+      day,
+    }));
 
-    const data = this.rides
-      .reduce((days, ride) => {
-        const start = ride.get('start'),
-          end = ride.get('end');
-        const startInTimeZone = moment.tz(start, 'America/Winnipeg');
-        // const day = (startInTimeZone.day() - 1) % 7;
-        const day = startInTimeZone.day() ? startInTimeZone.day() - 1 : 6;
+    this.rides.forEach((ride) => {
+      const start = ride.get('start');
+      const end = ride.get('end');
+      if (!start || !end) {
+        return;
+      }
 
-        const rideAddition = grouping === 'rides' ? 1 : ride.get('passengers');
+      const startInTimeZone = momentTimeZone.tz(start, 'America/Winnipeg');
+      const endInTimeZone = momentTimeZone.tz(end, 'America/Winnipeg');
 
-        if (!days[day]) {
-          days[day] = {
-            hours: new Array(24),
-            name: startInTimeZone.format('ddd'),
-            day,
-          };
-        }
+      const durationHours = endInTimeZone.diff(startInTimeZone, 'hours', true);
 
-        let currentHour = startInTimeZone.startOf('hour');
+      if (durationHours <= 0 || durationHours > MAX_RIDE_DURATION_HOURS) {
+        return;
+      }
 
-        while (currentHour.isBefore(end)) {
-          const hour = currentHour.hour();
+      const rideAddition = grouping === 'rides' ? 1 : ride.get('passengers');
 
-          if (!days[day].hours[hour]) {
-            days[day].hours[hour] = 0;
-          }
+      let currentHour = startInTimeZone.clone().startOf('hour');
 
-          days[day].hours[hour] += rideAddition;
+      while (currentHour.isBefore(endInTimeZone)) {
+        const hour = currentHour.hour();
+        const day = currentHour.day() ? currentHour.day() - 1 : 6;
 
-          currentHour = currentHour.add(1, 'hour');
-        }
+        days[day].hours[hour] += rideAddition;
+        currentHour = currentHour.add(1, 'hour');
+      }
+    });
 
-        return days;
-      }, new Array(7))
-      .reduce((data, day, index) => {
-        day.hours.forEach((hourCount, hour) =>
-          data.push([hour, index, hourCount || 0]),
-        );
-        return data;
-      }, []);
+    const data = days.reduce((result, day, index) => {
+      day.hours.forEach((hourCount, hour) =>
+        result.push([hour, index, hourCount || 0]),
+      );
+      return result;
+    }, []);
 
     return [
       {
@@ -67,11 +102,50 @@ export default class RequestTimeChart extends Component {
         dataLabels: {
           enabled: true,
           color: '#000000',
+          formatter: dataLabelFormatter,
         },
       },
     ];
   }
 
+  @computed('rides.@each.{start,end}')
+  get excludedRides() {
+    return (this.rides || []).filter((ride) => {
+      const start = ride.get('start');
+      const end = ride.get('end');
+
+      if (!start || !end) {
+        return true;
+      }
+
+      const startInTimeZone = momentTimeZone.tz(start, 'America/Winnipeg');
+      const endInTimeZone = momentTimeZone.tz(end, 'America/Winnipeg');
+      const durationHours = endInTimeZone.diff(startInTimeZone, 'hours', true);
+
+      return durationHours <= 0 || durationHours > MAX_RIDE_DURATION_HOURS;
+    });
+  }
+
+  @computed('excludedRides.@each.{start,end,name,driver}')
+  get excludedRidesDisplay() {
+    return this.excludedRides.map((ride) => {
+      const start = ride.get('start');
+      const end = ride.get('end');
+      const timespan =
+        start && end
+          ? formatTimespan(this.moment, start, end)
+          : start
+            ? 'Missing end'
+            : 'Missing start';
+
+      return {
+        timespan,
+        visitor: ride.get('name') || 'Unknown',
+        driver: ride.get('driver.name') || 'Unassigned',
+      };
+    });
+  }
+
   options = Object.freeze({
     chart: {
       type: 'heatmap',

app/styles/statistics.scss

@@ -59,3 +59,7 @@
 .request-time-chart svg rect {
   stroke-width: 0;
 }
+
+.request-time-chart .request-time-exclusions {
+  padding: 2rem;
+}