Support for distance and speed metrics on the timeline.

frontend/src/components/Timeline.vue

@@ -2,8 +2,30 @@
   <div class="timeline-container">
     <h1 v-if="loading">Loading...</h1>
     <h1 v-else-if="!points.length">No data to display</h1>
-    <div class="timeline" v-else>
-      <Line :data="graphData" :options="graphOptions" />
+    <div class="body" v-else>
+      <div class="options">
+        <button @click="toggleMetric('altitude')"
+                :class="{ selected: showMetrics.altitude }"
+                :title="(showMetrics.altitude ? 'Hide' : 'Show') + ' altitude'">
+          <font-awesome-icon icon="ruler-vertical" />
+        </button>
+
+        <button @click="toggleMetric('distance')"
+                :class="{ selected: showMetrics.distance }"
+                :title="(showMetrics.distance ? 'Hide' : 'Show') + ' distance'">
+          <font-awesome-icon icon="ruler" />
+        </button>
+
+        <button @click="toggleMetric('speed')"
+                :class="{ selected: showMetrics.speed }"
+                :title="(showMetrics.speed ? 'Hide' : 'Show') + ' speed'">
+          <font-awesome-icon icon="tachometer-alt" />
+        </button>
+      </div>
+
+      <div class="timeline">
+        <Line :data="graphData" :options="graphOptions" />
+      </div>
     </div>
   </div>
 </template>
@@ -12,7 +34,6 @@
 import {
   CategoryScale,
   Chart as ChartJS,
-  type ChartOptions,
   LineElement,
   LinearScale,
   PointElement,
@@ -24,7 +45,9 @@ import {
 import { Line } from 'vue-chartjs';
 import 'chartjs-adapter-date-fns';
 
+import Geo from '../mixins/Geo.vue';
 import GPSPoint from '../models/GPSPoint';
+import TimelineMetricsConfiguration from '../models/TimelineMetricsConfiguration';
 
 ChartJS.register(
   CategoryScale,
@@ -37,7 +60,8 @@ ChartJS.register(
 );
 
 export default {
-  emits: ['point-hover'],
+  emits: ['point-hover', 'show-metrics'],
+  mixins: [Geo],
   components: {
     Line,
   },
@@ -51,13 +75,47 @@ export default {
       type: Array as () => GPSPoint[],
       default: () => [],
     },
+    showMetrics: {
+      type: TimelineMetricsConfiguration,
+      default: () => new TimelineMetricsConfiguration(),
+    },
   },
 
   computed: {
+    distances(): number[] {
+      if (!this.points.length) {
+        return []
+      }
+
+      return this.points.map((point: GPSPoint, index: number) => {
+        if (index === 0) {
+          return 0
+        }
+
+        return this.latLngToDistance(point, this.points[index - 1])
+      })
+    },
+
+    speed(): number[] {
+      if (!this.points.length) {
+        return []
+      }
+
+      return this.points.map((point: GPSPoint, index: number) => {
+        if (index === 0) {
+          return 0
+        }
+
+        const distance = this.latLngToDistance(point, this.points[index - 1])
+        const time = point.timestamp.getTime() - this.points[index - 1].timestamp.getTime()
+        return 3.6 * distance / (time / 1000)
+      })
+    },
+
     graphData() {
-      return {
-        labels: this.points.map((point: GPSPoint) => point.timestamp),
-        datasets: [
+      const datasets = []
+      if (this.showMetrics.altitude) {
+        datasets.push(
           {
             label: 'Altitude (m)',
             backgroundColor: '#7979f8',
@@ -65,23 +123,104 @@ export default {
             fill: false,
             data: this.points.map((point: GPSPoint) => point.altitude),
           }
-        ]
+        )
+      }
+
+      if (this.showMetrics.distance) {
+        datasets.push(
+          {
+            label: 'Distance (m)',
+            backgroundColor: '#f87979',
+            borderColor: '#a85959',
+            fill: false,
+            data: this.distances,
+            yAxisID: 'meters',
+          }
+        )
+      }
+
+      if (this.showMetrics.speed) {
+        datasets.push(
+          {
+            label: 'Speed (km/h)',
+            backgroundColor: '#79f879',
+            borderColor: '#59a859',
+            fill: false,
+            data: this.speed,
+            yAxisID: 'speed',
+          }
+        )
+      }
+
+      return {
+        labels: this.points.map((point: GPSPoint) => point.timestamp),
+        datasets: datasets,
       }
     },
 
     graphOptions(): any {
+      const yAxes: Record<string, any> = []
+
+      if (this.showMetrics.altitude || this.showMetrics.distance) {
+        const text: string[] = []
+        if (this.showMetrics.altitude) {
+          text.push('Altitude')
+        }
+
+        if (this.showMetrics.distance) {
+          text.push('Distance')
+        }
+
+        yAxes.meters = {
+          type: 'linear',
+          position: 'left',
+          display: true,
+          ticks: {
+            beginAtZero: !this.showMetrics.distance,
+          },
+          title: {
+            display: true,
+            text: text.join(' / ') + ' (m)',
+          }
+        }
+      }
+
+      if (this.showMetrics.speed) {
+        yAxes.speed = {
+          type: 'linear',
+          position: yAxes.meters ? 'right' : 'left',
+          display: true,
+          ticks: {
+            beginAtZero: true,
+          },
+          title: {
+            display: true,
+            text: 'Speed (km/h)',
+          },
+          ...(
+            yAxes.length ? {
+              grid: {
+                // We only want the grid lines for one axis to show up
+                drawOnChartArea: false,
+              },
+            } : {}
+          )
+        }
+      }
+
       return {
         responsive: true,
         maintainAspectRatio: false,
+        stacked: false,
         elements: {
           point: {
-            borderWidth: 1,
+            borderWidth: 0,
             hoverRadius: 4,
             hoverBorderWidth: 2,
           },
           line: {
             tension: 0.5,
-            borderWidth: 2,
+            borderWidth: 1,
             fill: false,
           }
         },
@@ -112,21 +251,26 @@ export default {
               text: 'Date'
             },
           },
-          y: {
-            beginAtZero: true,
-            title: {
-              display: true,
-              text: 'Altitude (m)'
-            },
-          }
+          ...yAxes,
         }
       }
     },
   },
+
+  methods: {
+    toggleMetric(metric: string) {
+      this.$emit('show-metrics', {
+        ...this.showMetrics,
+        [metric]: !(this.showMetrics as any)[metric],
+      });
+    },
+  },
 }
 </script>
 
 <style scoped lang="scss">
+$options-width: 5em;
+
 .timeline-container {
   display: flex;
   justify-content: center;
@@ -135,8 +279,15 @@ export default {
   width: 100%;
 }
 
-.timeline {
+.body {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
   width: 100%;
+}
+
+.timeline {
+  width: calc(100% - #{$options-width});
   height: 100%;
 
   canvas {
@@ -144,4 +295,33 @@ export default {
     height: 100% !important;
   }
 }
+
+.options {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  width: $options-width;
+  height: 100%;
+  margin-right: 1em;
+
+  button {
+    width: 100%;
+    height: 2.5em;
+    font-size: 1em;
+    background-color: var(--color-background);
+    border: 1px solid var(--vt-c-divider-light-1);
+    margin-left: 0.5em;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-hover);
+    }
+
+    &.selected {
+      background: var(--vt-c-blue-bg-dark);
+      color: var(--vt-c-white);
+    }
+  }
+}
 </style>