correct layout, add chart

2020-07-30 22:24:07 +02:00 · 2020-07-30 22:24:07 +02:00 · 8a4d7cf10d
commit 8a4d7cf10d
parent e21bc0782c
6 changed files with 128 additions and 46 deletions
--- 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"
  },
--- 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')
--- a/src/components/ChartView.vue
+++ 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>
--- 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>
--- 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%;
 }
--- 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"