WIP Adding measure summary views.

web/src/components/measure-summaries/ListSummary.vue

@@ -0,0 +1,6 @@
+<template>
+  <ul>
+    <li v-for="m in top5">{{m.extData.entry}}</li>
+  </ul>
+</template>
+<script lang="ts" src="./list-summary.ts"></script>

web/src/components/measure-summaries/MeasureSummary.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="measure-summary" :data-name="'measure-' + measure.slug">
     <h2>{{measure.name}}</h2>
-    <apex-chart type="line" :options=chartOptions :series=chartData />
+    <SimpleSummaryGraph v-if="measure.config.type === 'simple'"
+      :measure=measure :measurements=measurements />
+    <ListSummary v-if="measure.config.type === 'list'"
+      :measure=measure :measurements=measurements />
   </div>
 </template>
 <script lang="ts" src="./measure-summary.ts"></script>

web/src/components/measure-summaries/SimpleSummaryGraph.vue

@@ -0,0 +1,4 @@
+<template>
+    <apex-chart type="line" :options=chartOptions :series=measurementData />
+</template>
+<script lang="ts" src="./simple-summary-graph.ts"></script>

web/src/components/measure-summaries/list-summary.ts

@@ -0,0 +1,16 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, ListMeasureConfig, Measurement, ListMeasurementMeta } from '@/models';
+
+@Component
+export class ListSummary extends Vue {
+  @Prop() private measure!: Measure<ListMeasureConfig>;
+  @Prop() private measurements!: Array<Measurement<ListMeasurementMeta>>;
+
+  private top5(): Array<Measurement<ListMeasurementMeta>>  {
+    return this.measurements
+      .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
+      .slice(0, 5);
+  }
+}
+
+export default ListSummary;

web/src/components/measure-summaries/measure-summary.ts

@@ -0,0 +1,26 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
+import { measurementStore } from '@/store';
+import ListSummary from './ListSummary.vue';
+import SimpleSummaryGraph from './SimpleSummaryGraph.vue';
+
+@Component({
+  components: {
+    ListSummary,
+    SimpleSummaryGraph
+  }
+})
+export class MeasureSummary extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+
+  private get measurements() {
+    return measurementStore.measurements[this.measure.id] || [];
+  }
+
+  private async mounted() {
+    await measurementStore.fetchMeasurements(this.measure);
+  }
+
+}
+
+export default MeasureSummary;

web/src/components/measure-summaries/simple-summary-graph.ts

@@ -0,0 +1,28 @@
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Measure, MeasureConfig, Measurement, MeasurementMeta } from '@/models';
+
+@Component
+export class SimpleSummaryGraph extends Vue {
+  @Prop() private measure!: Measure<MeasureConfig>;
+  @Prop() private measurements!: Array<Measurement<MeasurementMeta>>;
+
+  private chartOptions = {
+    chart: { sparkline: { enabled: true } },
+    grid: { padding: { top: 20 }},
+    stroke: { curve: 'smooth' },
+    noData: { text: 'no data',
+              style: { fontSize: '18px' } },
+    xaxis: { type: 'datetime' }
+  };
+
+  private get measurementData(): ApexAxisChartSeries {
+    const measurementData = this.measurements || [];
+
+    return [{
+      name: this.measure.name,
+      data: measurementData.map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
+    }];
+  }
+}
+
+export default SimpleSummaryGraph;

web/src/components/measure-summary.ts

@@ -1,27 +0,0 @@
-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;