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) => {