chart completed

src/components/ChartView.vue

@@ -1,20 +1,65 @@
 <script>
-import { Line } from 'vue-chartjs';
+import { Line, mixins } from 'vue-chartjs';
+
+function resolve_data (set, keys) {
+  const data = set[keys[0]];
+  if (keys.length === 1)
+    return data;
+  return resolve_data (data, keys.slice (1));
+}
 
 export default {
   extends: Line,
+  mixins:  [ mixins.reactiveData ],
+  props:   {
+    data: {
+      type:     Array,
+      required: true
+    },
+    xaxis: {
+      type:     String,
+      required: true
+    },
+    yaxis: {
+      type:     Array,
+      required: true
+    }
+  },
+  computed: {
+    chart_data () {
+      const labels = this.data.map ((d) => d[this.xaxis]);
+      const datasets = this.yaxis.map ((y, index) => {
+        const res = {
+          label:           y.label,
+          data:            [],
+          yAxisID:         index,
+          borderColor:     y.color,
+          backgroundColor: y.fill
+        };
+        for (const data of this.data)
+          res.data.push (resolve_data (data, y.field.split ('/')));
+        return res;
+      });
+      return { datasets, labels };
+    },
+    chart_options () {
+      return {
+        scales: {
+          yAxes: this.yaxis.map (
+            (y, index) => ({ id: index })
+          )
+        }
+      };
+    }
+  },
+  watch: {
+    chart_data () {
+      // eslint-disable-next-line no-underscore-dangle
+      this.renderChart (this.chart_data, this.chart_options);
+    }
+  },
   mounted () {
-    this.renderChart ([
-      0.1,
-      0.2,
-      0.4,
-      0.8,
-      1.6,
-      3.2,
-      6.4,
-      12.8,
-      25.6
-    ]);
+    this.renderChart (this.chart_data, this.chart_options);
   }
 };
 </script>

src/views/AppView.vue

@@ -10,12 +10,18 @@
       :items="log"
       :columns="['data']"
     />
-    <ChartView />
+    <ChartView
+      :data="parsed_log"
+      xaxis="app"
+      :yaxis="datasets"
+    />
     <TableView
+      v-if="log.length > 0"
       :items="log"
       :columns="Object.keys(log[0]).slice(0,3)"
     />
     <TableView
+      v-if="log.length > 0"
       :items="log"
       :columns="Object.keys(log[0])"
     />
@@ -29,7 +35,22 @@ import ChartView from '../components/ChartView.vue';
 
 export default {
   components: { TableView, ChartView },
-  computed:   { ...Vuex.mapState ({ log: (state) => state.log }) },
+  computed:   {
+    datasets () {
+      return [
+        { label: 'test', field: 'data/num2', color: 'blue', fill: '#0000' },
+        { label: 'abc', field: 'data/num1', color: '#ff000055', fill: '#0000' },
+        { label: 'def', field: 'data/num1', color: '#00ff00', fill: '#f005' }
+      ];
+    },
+    parsed_log () {
+      return this.log.map ((l) => {
+        l.data = JSON.parse (l.data);
+        return l;
+      });
+    },
+    ...Vuex.mapState ({ log: (state) => state.log })
+  },
   mounted () {
     this.get_log ();
   },