Add mileage options to frontend

ui/src/components/mileageChart.vue

@@ -3,9 +3,20 @@ import { Line } from 'vue-chartjs'
 
 import axios from 'axios'
 import { mapState } from 'vuex'
+import { string } from 'yargs'
 export default {
   extends: Line,
-  props: { vehicle: { type: Object, required: true }, since: { type: Date, default: '' }, user: { type: Object, required: true } },
+  props: {
+    vehicle: { type: Object, required: true },
+    since: { type: Date, default: '' },
+    user: { type: Object, required: true },
+    mileageOption: { type: string, default: 'litre_100km' },
+  },
+  data: function() {
+    return {
+      chartData: [],
+    }
+  },
   computed: {
     ...mapState('utils', ['isMobile']),
   },
@@ -17,20 +28,28 @@ export default {
       this.fetchMileage()
     },
   },
-  data: function() {
-    return {
-      chartData: [],
-    }
-  },
   mounted() {
     this.fetchMileage()
   },
   methods: {
     showChart() {
+      let mileageLabel = ''
+      switch (this.mileageOption) {
+        case 'litre_100km':
+          mileageLabel = 'L/100km'
+          break
+        case 'km_litre':
+          mileageLabel = 'km/L'
+          break
+        case 'mpg':
+          mileageLabel = 'mpg'
+          break
+      }
+
       var labels = this.chartData.map((x) => x.date.substr(0, 10))
       var dataset = {
         steppedLine: true,
-        label: `Mileage (${this.user.distanceUnitDetail.short}/${this.vehicle.fuelUnitDetail.short})`,
+        label: `Mileage (${mileageLabel})`,
         fill: true,
         data: this.chartData.map((x) => x.mileage),
       }
@@ -41,6 +60,7 @@ export default {
         .get(`/api/vehicles/${this.vehicle.id}/mileage`, {
           params: {
             since: this.since,
+            mileageOption: this.mileageOption,
           },
         })
         .then((response) => {

ui/src/router/views/vehicle.vue

@@ -48,6 +48,12 @@ export default {
         { label: 'All Time', value: 'all_time' },
       ],
       dateRangeOption: 'past_30_days',
+      mileageOptions: [
+        { label: 'L/100km', value: 'litre_100km' },
+        { label: 'km/L', value: 'km_litre' },
+        { label: 'mpg', value: 'mpg' },
+      ],
+      mileageOption: 'litre_100km',
     }
   },
   computed: {
@@ -529,14 +535,25 @@ export default {
       <div class="columns">
         <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">Stats</h1></div>
         <div class="column">
-          <b-select v-model="dateRangeOption" class="is-pulled-right is-medium">
-            <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </b-select></div
-        >
+          <div class="columns is-pulled-right is-medium">
+            <div class="column">
+              <b-select v-model="mileageOption">
+                <option v-for="option in mileageOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </option>
+              </b-select>
+            </div>
+            <div class="column">
+              <b-select v-model="dateRangeOption">
+                <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </option>
+              </b-select>
+            </div>
+          </div>
+        </div>
       </div>
-      <MileageChart :vehicle="vehicle" :since="getStartDate()" :user="me" :height="300" />
+      <MileageChart :vehicle="vehicle" :since="getStartDate()" :user="me" :height="300" :mileage-option="mileageOption" />
     </div>
   </Layout>
 </template>