WIP Adding simple measurement view.

web/src/components/MeasureSummary.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="measure-summary" :data-name="'measure-' + measure.slug">
+    <h2>{{measure.name}}</h2>
+    <apex-chart type="line" :options=chartOptions :series=chartData />
+  </div>
+</template>
+<script lang="ts" src="./measure-summary.ts"></script>
+<style lang="scss" src="./measure-summary.scss"></style>

web/src/components/measure-summary.scss

@@ -0,0 +1,9 @@
+@import '~@/styles/vars';
+
+.measure-summary {
+  display: inline-block;
+
+  h2 { 
+    border-bottom: solid thin $fg-primary;
+  }
+}

web/src/components/measure-summary.ts

@@ -0,0 +1,27 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, MeasureConfig, Measurement, MeasurementMeta } from '@/models';
+import { measurementStore } from '@/store';
+
+@Component
+export class MeasureSummary extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+
+  private chartOptions = {
+    chart: { sparkline: { enabled: true } },
+    grid: { padding: { top: 20 }},
+    stroke: { curve: 'smooth' }
+  };
+
+  private chartData = [
+    { name: 'Test', data: [1, 10, 4, 6, 2] }
+  ];
+
+  private measurements: Array<Measurement<MeasurementMeta>> = [];
+
+  private mounted() {
+    this.measurements = 
+  }
+
+}
+
+export default MeasureSummary;