adding grades

VueApp/src/components/ElevationGraph.vue

@@ -1,10 +1,12 @@
 <template>
-  <GChart
-    v-if="chartData"
-    type="ColumnChart"
-    :data="chartData"
-    :options="chartOptions"
-  />
+  <div class="chartContainer" v-if="chartData">
+    <GChart
+      type="ColumnChart"
+      :data="chartData"
+      :options="chartOptions"
+    />
+    <div class="miles">{{ this.miles }}</div>
+  </div>
 </template>
 
 <script>
@@ -15,12 +17,17 @@
     components: { GChart },
     props: ['currentRoute'],
     watch: {
-      currentRoute (newVal) {
-        this.getPathElevation(newVal)
+      currentRoute (newRoute) {
+        console.log(newRoute)
+        this.miles = newRoute.legs[0].distance.text
+        this.getPathElevation(newRoute.overview_path)
       }
     },
     data () {
       return {
+        miles: null,
+        avgGrade: null,
+        peakGrade: null,
         elevationService: null,
         chartData: null,
         chartOptions: {
@@ -34,21 +41,16 @@
     },
     methods: {
       getPathElevation (route) {
-        let path = []
-        route.forEach(e => path.push({
-          lat: e.lat(),
-          lng: e.lng()
-        }))
-        // -----------------------------
         this.elevationService = new google.maps.ElevationService() // eslint-disable-line no-undef
         this.chartData = [
           ['', '', { role: 'style' }]
         ]
         this.elevationService.getElevationAlongPath({
-          'path': path,
+          'path': route,
           'samples': 264
         }, (elevations, status) => {
           if (status === 'OK') {
+            console.log(elevations)
             elevations.forEach((e, i) =>
               Math.abs(e.elevation - elevations[i + 1].elevation) > 1
                 ? this.chartData.push(['', e.elevation, '#CAE9FF'])
@@ -58,10 +60,19 @@
             )
           }
         })
+      },
+      getAverageGrade () {
+
+      },
+      getPeakGrade () {
+
       }
     }
   }
 </script>
 
 <style scoped>
+  .miles {
+    color: white;
+  }
 </style>

VueApp/src/components/GoogleMap.vue

@@ -102,7 +102,6 @@
           'updateRoute', this.directionsDisplay
             .getDirections()
             .routes[0]
-            .overview_path
         )
       }
     }