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;

web/src/main.ts

@@ -7,10 +7,12 @@ import router from './router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import SmartTable from 'vuejs-smart-table';
+import ApexChart from 'vue-apexcharts';
 
 import './registerServiceWorker';
 
 Vue.component('fa-icon', FontAwesomeIcon);
+Vue.component('apex-chart', ApexChart);
 Vue.use(SmartTable);
 
 new Vue({

web/src/services/pm-api-client.ts

@@ -1,5 +1,5 @@
 import { default as Axios, AxiosInstance } from 'axios';
-import { ApiToken, LoginSubmit, Measure, Measurement, User } from '@/models';
+import { ApiToken, LoginSubmit, Measure, MeasureConfig, Measurement, MeasurementMeta, User } from '@/models';
 import { Logger, logService } from '@/services/logging';
 import merge from 'lodash.merge';
 
@@ -108,17 +108,17 @@ export class PmApiClient {
     return true;
   }
 
-  public async getAllMeasures(): Promise<Measure[]> {
+  public async getAllMeasures(): Promise<Array<Measure<MeasureConfig>>> {
     const resp = await this.http.get(`/measures`);
     return resp.data;
   }
 
-  public async createMeasure(measure: Measure): Promise<Measure> {
+  public async createMeasure<T extends MeasureConfig>(measure: Measure<T>): Promise<Measure<T>> {
     const resp = await this.http.post(`/measures`);
     return resp.data;
   }
 
-  public async getMeasure(slug: string): Promise<Measure> {
+  public async getMeasure(slug: string): Promise<Measure<MeasureConfig>> {
     const resp = await this.http.get(`/measures/${slug}`);
     return resp.data;
   }
@@ -129,16 +129,16 @@ export class PmApiClient {
   }
 
   public async getMeasurements(measureSlug: string)
-    : Promise<Measurement[]> {
+    : Promise<Array<Measurement<MeasurementMeta>>> {
 
     const resp = await this.http.get(`/measure/${measureSlug}`);
     return resp.data;
   }
 
-  public async createMeasurement(
+  public async createMeasurement<T extends MeasurementMeta>(
       measureSlug: string,
-      measurement: Measurement)
-    : Promise<Measurement> {
+      measurement: Measurement<MeasureConfig>)
+    : Promise<Measurement<T>> {
 
      const resp = await this.http.post(`/measure/${measureSlug}`, measurement);
      return resp.data;
@@ -147,7 +147,7 @@ export class PmApiClient {
   public async getMeasurement(
       measureSlug: string,
       measurementId: string)
-    : Promise<Measurement> {
+    : Promise<Measurement<MeasurementMeta>> {
 
     const resp = await this.http
       .get(`/measure/${measureSlug}/${measurementId}`);
@@ -156,8 +156,8 @@ export class PmApiClient {
 
   public async updateMeasurement(
       measureSlug: string,
-      measurement: Measurement)
-    : Promise<Measurement> {
+      measurement: Measurement<MeasurementMeta>)
+    : Promise<Measurement<MeasurementMeta>> {
 
     const resp = await this.http
       .put(`/measure/${measureSlug}/${measurement.id}`, measurement);

web/src/store-modules/measure.ts

@@ -7,13 +7,13 @@ import {
   VuexModule
 } from 'vuex-module-decorators';
 import { keyBy } from 'lodash';
-import { User, Measure } from '@/models';
+import { User, Measure, MeasureConfig } from '@/models';
 import api from '@/services/pm-api-client';
 import { logService } from '@/services/logging';
 
 @Module({ namespaced: true, name: 'measure' })
 export class MeasureStoreModule extends VuexModule {
-  public measures: { [key: string]: Measure } = {};
+  public measures: { [key: string]: Measure<MeasureConfig> } = {};
 
   private log = logService.getLogger('/store-modules/measure');
 
@@ -28,7 +28,7 @@ export class MeasureStoreModule extends VuexModule {
     return await api.getMeasure(slug);
   }
 
-  @Mutation private SET_MEASURE(measure: Measure) {
+  @Mutation private SET_MEASURE<T extends MeasureConfig>(measure: Measure<T>) {
     this.measures[measure.slug] = measure;
   }
 }

web/src/store-modules/measurement.ts

@@ -0,0 +1,21 @@
+import {
+  Action,
+  getModule,
+  Module,
+  Mutation,
+  VuexModule
+} from 'vuex-module-decorators';
+import { Measurement, MeasurementMeta } from '@/models';
+import api from '@/services/pm-api-client';
+
+@Module({ namespaced: true, name: 'measurement' })
+export class MeasurementStoreModule extends VuexModule {
+  public measurements: { [key: string]: Array<Measurement<MeasurementMeta>> } = {};
+
+  @Action({ commit: 'SET_MEASUREMENTS', rawError: true })
+  public async getchMeasurements(measureSlug: string) {
+    return await api.getMeasurements(measureSlug);
+  }
+
+  // @Mutation private SET_MEASUREMENTS<T extends MeasurementMeta>(
+}

web/src/store.ts

@@ -4,6 +4,7 @@ import { getModule } from 'vuex-module-decorators';
 import { ApiTokenStoreModule } from './store-modules/api-token';
 import { AuthStoreModule } from './store-modules/auth';
 import { MeasureStoreModule } from './store-modules/measure';
+import { MeasurementStoreModule } from './store-modules/measurement';
 import { UserStoreModule } from './store-modules/user';
 
 Vue.use(Vuex);
@@ -16,6 +17,7 @@ export const store = new Vuex.Store({
     apiToken: ApiTokenStoreModule,
     auth: AuthStoreModule,
     measure: MeasureStoreModule,
+    measurements: MeasurementStoreModule,
     user: UserStoreModule
   }
 });
@@ -23,4 +25,5 @@ export const store = new Vuex.Store({
 export const apiTokenStore = getModule(ApiTokenStoreModule, store);
 export const authStore = getModule(AuthStoreModule, store);
 export const measureStore = getModule(MeasureStoreModule, store);
+export const measurementStore = getModule(MeasurementStoreModule, store);
 export const userStore = getModule(UserStoreModule, store);

web/src/types/global.d.ts

@@ -0,0 +1 @@
+declare const global: any;

web/src/views/Measures.vue

@@ -4,9 +4,13 @@
       <h1>Things You Are Measuring</h1>
       <button class=btn-action>Add Measure</button>
     </div>
-    <div v-for="(measure, slug) in measures">
-      <h2>{{measure.name}}</h2>
-    </div>
+    <MeasureSummary
+      v-for="(measure, slug) in measures"
+      :measure=measure />
+    <!--<MeasureSummary
+      v-for="(measure, slug) in measures"
+      :key="slug"
+      :measure=measure />-->
   </div>
 </template>
 <script lang="ts" src="./measures.ts"></script>

web/src/views/measures.ts

@@ -1,9 +1,13 @@
 import { Component, Vue } from 'vue-property-decorator';
+import MeasureSummary from '@/components/MeasureSummary.vue';
+import Test from '@/components/Test.vue';
 import { measureStore } from '@/store';
 
 @Component({
-  components: { }
+  components: { MeasureSummary }
 })
-export default class Measures extends Vue {
+export class Measures extends Vue {
   private get measures() { return measureStore.measures; }
 }
+
+export default Measures;