correct layout, add chart

src/components/ChartView.vue

@@ -0,0 +1,23 @@
+<script>
+import { Line } from 'vue-chartjs';
+
+export default {
+  extends: Line,
+  mounted () {
+    this.renderChart ([
+      0.1,
+      0.2,
+      0.4,
+      0.8,
+      1.6,
+      3.2,
+      6.4,
+      12.8,
+      25.6
+    ]);
+  }
+};
+</script>
+
+<style>
+</style>

src/components/TableView.vue

@@ -1,16 +1,21 @@
 <template>
-  <table>
-    <tr
-      v-for="(item,key) of items"
-      :key="key"
-    >
-      <td
-        v-for="i_key of Object.keys(item)"
-        :key="i_key"
-        v-text="item[i_key]"
-      />
-    </tr>
-  </table>
+  <div
+    ref="view"
+    class="table_view"
+  >
+    <table>
+      <tr
+        v-for="(item,key) of items"
+        :key="key"
+      >
+        <td
+          v-for="(col,c_key) of columns"
+          :key="c_key"
+          v-text="item[col]"
+        />
+      </tr>
+    </table>
+  </div>
 </template>
 
 <script>
@@ -19,11 +24,35 @@ export default {
     items: {
       type:     Array,
       required: true
+    },
+    columns: {
+      type:     Array,
+      required: true
     }
   }
 };
 </script>
 
 <style>
+.table_view {
+  overflow: auto;
+  border: 1px solid blue;
+  width: max-content;
+  max-width: 100%;
+  max-height: 100vh;
+  font-size: 12px;
+}
 
+table {
+  border-collapse: collapse;
+}
+
+tr:nth-child(odd) {
+  background-color: #ddd;
+}
+
+td {
+  border: 1px solid black;
+  margin: 0;
+}
 </style>

src/views/AppView.vue

@@ -1,39 +1,35 @@
 <template>
-  <div class="grid">
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
-    <p>test</p>
+  <div
+    class="grid"
+  >
+    <TableView
+      :items="log"
+      :columns="['id', 'app','timestamp']"
+    />
+    <TableView
+      :items="log"
+      :columns="['data']"
+    />
+    <ChartView />
+    <TableView
+      :items="log"
+      :columns="Object.keys(log[0]).slice(0,3)"
+    />
+    <TableView
+      :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';
 
 export default {
-  computed: { ...Vuex.mapState ({ log: (state) => state.log }) },
+  components: { TableView, ChartView },
+  computed:   { ...Vuex.mapState ({ log: (state) => state.log }) },
   mounted () {
     this.get_log ();
   },
@@ -43,10 +39,9 @@ export default {
 
 <style scoped>
 .grid {
-  display: grid;
-  grid-auto-columns: 2in;
-  grid-auto-rows: 1in;
-  grid-auto-flow: dense;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   width: 100%;
   height: 100%;
 }