From 8a4d7cf10d6764179e58481edc98b1ee765ce25d Mon Sep 17 00:00:00 2001
From: Timo Hocker <timo@scode.ovh>
Date: Thu, 30 Jul 2020 22:24:07 +0200
Subject: [PATCH] correct layout, add chart

---
 package.json                 |  2 ++
 seeds/fake.js                |  2 +-
 src/components/ChartView.vue | 23 ++++++++++++++
 src/components/TableView.vue | 53 ++++++++++++++++++++++++--------
 src/views/AppView.vue        | 59 +++++++++++++++++-------------------
 yarn.lock                    | 35 ++++++++++++++++++++-
 6 files changed, 128 insertions(+), 46 deletions(-)
 create mode 100644 src/components/ChartView.vue

diff --git a/package.json b/package.json
index e6f1847..d87c7d3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@sapphirecode/password-helper": "^1.0.47",
     "@sapphirecode/ui-modules": "^0.1.1",
     "body-parser": "^1.19.0",
+    "chart.js": "^2.9.3",
     "connect-history-api-fallback": "^1.6.0",
     "cookie-parser": "^1.4.5",
     "core-js": "^3.6.5",
@@ -25,6 +26,7 @@
     "knex": "^0.21.2",
     "sqlite3": "^5.0.0",
     "vue": "^2.6.11",
+    "vue-chartjs": "^3.5.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
diff --git a/seeds/fake.js b/seeds/fake.js
index 2458a12..acf8d94 100644
--- a/seeds/fake.js
+++ b/seeds/fake.js
@@ -18,7 +18,7 @@ function create_log () {
 
 async function seed (knex) {
   console.log ('creating seeds');
-  const log = (Array (100))
+  const log = (Array (20))
     .fill (() => null)
     .map (() => create_log ());
   await knex ('log')
diff --git a/src/components/ChartView.vue b/src/components/ChartView.vue
new file mode 100644
index 0000000..5a5811b
--- /dev/null
+++ b/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>
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 1959fc6..dce2708 100644
--- a/src/components/TableView.vue
+++ b/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>
diff --git a/src/views/AppView.vue b/src/views/AppView.vue
index 4dc422e..f28830d 100644
--- a/src/views/AppView.vue
+++ b/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%;
 }
diff --git a/yarn.lock b/yarn.lock
index 576e94e..e221d94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2227,6 +2227,29 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
+  integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -2403,7 +2426,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -5757,6 +5780,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.10.2:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8755,6 +8783,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-chartjs@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.0.tgz#edd0c2be94c521bcbc5357c24afb9f3560855f84"
+  integrity sha512-yWNhG3B6g6lvYqNInP0WaDWNZG/SNb6XnltkjR0wYC5pmLm6jvdiotj8er7Mui8qkJGfLZe6ULjrZdHWjegAUg==
+
 vue-eslint-parser@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"