almost done the infographic

VueApp/src/components/ElevationGraph.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="chartContainer" v-if="chartData">
     <GChart
+      class="chart"
+      width="100%"
       type="ColumnChart"
       :data="chartData"
       :options="chartOptions"
     />
-    <div class="miles">
-      {{ distance }}
-      {{ unit }}
+    <div class="gradeContainer">
+      <div class="miles">
+        Distance: {{ distance }} {{ unit }}
+      </div>
+      <div class="peakGrade">
+        Peak: {{ peakGrade }}%
+      </div>
+      <div class="avgGrade">
+        Average: {{ avgGrade }}%
+      </div>
     </div>
   </div>
 </template>
@@ -53,6 +62,7 @@
         this.chartData = [
           ['', '', { role: 'style' }]
         ]
+        // ------------------------------------------------------
         this.elevationService.getElevationAlongPath({
           'path': this.route.overview_path,
           'samples': 264
@@ -72,6 +82,23 @@
             Math.abs(this.elevations[i].elevation - this.elevations[i + 1].elevation) / interval
           )
         }
+        this.getAvgGrade()
+        this.getPeakGrade()
+      },
+      getAvgGrade () {
+        let avg = 0
+        avg = this.gradeReport.reduce((a, b) => a + b) / 263
+        this.avgGrade = this.round(avg)
+      },
+      getPeakGrade () {
+        let peakGrade = this.gradeReport[this.gradeReport.length - 1]
+        this.gradeReport.forEach(e => {
+          if (peakGrade < e) peakGrade = e
+        })
+        this.peakGrade = this.round(peakGrade)
+      },
+      round (value) {
+        return Math.round(value * 10000) / 100
       },
       displayPathElevation () {
         for (let i = 0; i < this.elevations.length; i++) {
@@ -89,7 +116,32 @@
 </script>
 
 <style scoped>
+  .chartContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 8fr;
+    grid-template-areas:
+                        "..... grade grade ....."
+                        "chart chart chart chart";
+    align-items: center;
+  }
+  .chart {
+    padding-left: 20px;
+    grid-area: chart;
+  }
+  .gradeContainer {
+    grid-area: grade;
+    display: flex;
+    justify-content: space-around;
+    font-size: 1.15em;
+  }
   .miles {
     color: white;
   }
+  .avgGrade {
+    color: white;
+  }
+  .peakGrade {
+    color: white;
+  }
 </style>