make line Logger in Property.vue temp (#7)

package.json

@@ -13,10 +13,12 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@vue/shared": "^3.2.37",
+    "chart.js": "^3.8.0",
     "core-js": "^3.8.3",
     "pinia": "^2.0.12",
     "uuid": "^8.3.2",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-chartjs": "^4.1.1"
   },
   "devDependencies": {
     "@types/jest": "^27.0.1",

src/components/Logger.vue

@@ -0,0 +1,60 @@
+<template>
+  <Line :chart-options="chartOptions" :chart-data="chartData" />
+</template>
+
+<script setup lang="ts">
+import { Line } from "vue-chartjs";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale,
+  Plugin,
+} from "chart.js";
+import { useStore } from "@/store";
+import { ref, defineProps } from "vue";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale
+);
+
+const props = defineProps<{
+  chartId?: string;
+  datasetIdKey?: string;
+  width?: number;
+  height?: number;
+  cssClasses?: string;
+}>();
+const store = useStore();
+let i = 1;
+setInterval(() => {
+  chartData.value.datasets[0].data[i] = Math.random() * 50;
+  i += 1;
+}, 50);
+
+const chartData = ref({
+  datasets: [
+    {
+      data: {
+        [0]: 1,
+        [1]: 10,
+      },
+    },
+  ],
+});
+
+const chartOptions = ref({
+  responsive: true,
+  animation: false,
+});
+</script>

src/components/Property.vue

@@ -13,6 +13,7 @@
       <tab-protein v-if="activeTab === 'Protein'" />
       <tab-questions v-if="activeTab === 'Questions'" />
       <tab-load v-if="activeTab === 'Load'" />
+      <logger />
     </div>
   </div>
 </template>
@@ -25,6 +26,7 @@ import TabMessengerRNA from "@/components/TabMessengerRNA.vue";
 import TabProtein from "@/components/TabProtein.vue";
 import TabQuestions from "@/components/TabQuestions.vue";
 import TabLoad from "@/components/TabLoad.vue";
+import Logger from "./Logger.vue";
 
 const store = useStore();
 const { run, stop } = store;

src/components/TabProtein.vue

@@ -18,6 +18,7 @@
 import { computed, watch, ref } from "vue";
 import { useStore } from "@/store";
 import ListBox from "@/components/ListBox.vue";
+import LineChart from "@/components/Logger.vue";
 
 const store = useStore();
 

yarn.lock

@@ -3091,6 +3091,11 @@ charcodes@^0.2.0:
   resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
+chart.js@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.8.0.tgz#c6c14c457b9dc3ce7f1514a59e9b262afd6f1a94"
+  integrity sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==
+
 chokidar@^3.4.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -8945,6 +8950,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vue-chartjs@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-4.1.1.tgz#b1ffc2845e09d14cb5255305b11bd3e8df8058ab"
+  integrity sha512-rKIQ3jPrjhwxjKdNJppnYxRuBSrx4QeM3nNHsfIxEqjX6QS4Jq6e6vnZBxh2MDpURDC2uvuI2N0eIt1cWXbBVA==
+
 vue-demi@*:
   version "0.12.4"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"