dynamic config

package.json

@@ -23,6 +23,7 @@
     "express": "^4.17.1",
     "express-http-proxy": "^1.6.2",
     "faker": "^4.1.0",
+    "hjson": "^3.2.1",
     "knex": "^0.21.2",
     "simplex-noise": "^2.4.0",
     "sqlite3": "^5.0.0",

src/components/ChartView.vue

@@ -1,13 +1,6 @@
 <script>
 import { Line, mixins } from 'vue-chartjs';
-
-function resolve_data (set, index) {
-  const keys = typeof index === 'string' ? index.split ('/') : index;
-  const data = set[keys[0]];
-  if (keys.length === 1)
-    return data;
-  return resolve_data (data, keys.slice (1));
-}
+import { resolve_data } from '../helper';
 
 export default {
   extends: Line,

src/components/TableView.vue

@@ -11,7 +11,7 @@
         <td
           v-for="(col,c_key) of columns"
           :key="c_key"
-          v-text="item[col]"
+          v-text="resolve_data(item,col)"
         />
       </tr>
     </table>
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { resolve_data } from '../helper';
+
 export default {
   props: {
     items: {
@@ -29,7 +31,8 @@ export default {
       type:     Array,
       required: true
     }
-  }
+  },
+  methods: { resolve_data }
 };
 </script>
 

src/components/ViewComponent.vue

@@ -0,0 +1,36 @@
+<template>
+  <ChartView
+    v-if="config.type === 'chart'"
+    :data="data"
+    :xaxis="config.x"
+    :yaxis="config.y"
+  />
+  <TableView
+    v-else
+    :items="data"
+    :columns="config.columns"
+  />
+</template>
+
+<script>
+import ChartView from './ChartView.vue';
+import TableView from './TableView.vue';
+
+export default {
+  components: { ChartView, TableView },
+  props:      {
+    config: {
+      type:     Object,
+      required: true
+    },
+    data: {
+      type:     Array,
+      required: true
+    }
+  }
+};
+</script>
+
+<style>
+
+</style>

src/default.js

@@ -0,0 +1,50 @@
+export default [
+  {
+    type:    'table',
+    columns: [
+      'id',
+      'app',
+      'timestamp'
+    ]
+  },
+  {
+    type:    'table',
+    columns: [ 'data' ]
+  },
+  {
+    type:    'chart',
+    x:    'timestamp',
+    y:    [
+      {
+        label: 'foo',
+        field: 'data/num2',
+        color: '#ff000055',
+        fill:  '#0000'
+      },
+      {
+        label: 'bar',
+        field: 'data/num3',
+        color: '#00ff00',
+        fill:  '#0000'
+      }
+    ]
+  },
+  {
+    type:    'table',
+    columns: [
+      'id',
+      'app',
+      'message'
+    ]
+  },
+  {
+    type:    'table',
+    columns: [
+      'id',
+      'app',
+      'message',
+      'data',
+      'timestamp'
+    ]
+  }
+];

src/helper.js

@@ -0,0 +1,7 @@
+export function resolve_data (set, index) {
+  const keys = typeof index === 'string' ? index.split ('/') : index;
+  const data = set[keys[0]];
+  if (keys.length === 1)
+    return data;
+  return resolve_data (data, keys.slice (1));
+}

src/views/AppView.vue

@@ -2,45 +2,36 @@
   <div
     class="grid"
   >
-    <TableView
-      :items="log"
-      :columns="['id', 'app','timestamp']"
-    />
-    <TableView
-      :items="log"
-      :columns="['data']"
-    />
-    <ChartView
+    <textarea v-model="config" />
+    <ViewComponent
+      v-for="(item,key) of parsed_config"
+      :key="key"
+      :config="item"
       :data="parsed_log"
-      xaxis="timestamp"
-      :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])"
     />
   </div>
 </template>
 
 <script>
 import Vuex from 'vuex';
-import TableView from '../components/TableView.vue';
-import ChartView from '../components/ChartView.vue';
+import hjson from 'hjson';
+import ViewComponent from '../components/ViewComponent.vue';
+import default_config from '../default';
 
 export default {
-  components: { TableView, ChartView },
+  components: { ViewComponent },
+  data () {
+    return { config: hjson.stringify (default_config) };
+  },
   computed:   {
-    datasets () {
-      return [
-        { label: 'foo', field: 'data/num2', color: '#ff000055', fill: '#0000' },
-        { label: 'bar', field: 'data/num3', color: '#00ff00', fill: '#0000' }
-      ];
+    parsed_config () {
+      try {
+        return hjson.parse (this.config);
+      }
+      catch {
+        // noop
+      }
+      return [];
     },
     parsed_log () {
       return this.log.map ((l) => {

yarn.lock

@@ -4445,6 +4445,11 @@ highlight.js@^9.6.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.3.tgz#a1a0a2028d5e3149e2380f8a865ee8516703d634"
   integrity sha512-zBZAmhSupHIl5sITeMqIJnYCDfAEc3Gdkqj65wC1lpI468MMQeeQkhcIAvk+RylAkxrCcI9xy9piHiXeQ1BdzQ==
 
+hjson@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/hjson/-/hjson-3.2.1.tgz#20de41dc87fc9a10d1557d0230b0e02afb1b09ac"
+  integrity sha512-OhhrFMeC7dVuA1xvxuXGTv/yTdhTvbe8hz+3LgVNsfi9+vgz0sF/RrkuX8eegpKaMc9cwYwydImBH6iePoJtdQ==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"