basic chart init

client/package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@chartwerk/line-pod": "^0.2.4",
     "axios": "^0.23.0",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",

client/src/components/Graph.vue

@@ -1,11 +1,10 @@
 <template>
-  <div id="chart">
-    asdsa
-  </div>
+  <div id="chart"></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { ChartwerkLineChart } from "@chartwerk/line-pod";
 
 // TODO: place chartwerk
 // TODO: fetch data from API
@@ -13,6 +12,31 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Graph',
   props: {},
+  mounted() {
+    console.log(this.$el);
+    const startTime = 1590590148;
+    const arrayLength = 20;
+    const data1: [number, number][] = Array.from({ length: arrayLength }, (el, idx) => [Math.floor(Math.random() * 40), startTime + idx * 10000]);
+    // const zoomIn = (ranges) => { const range = ranges[0]; options.axis.x.range = range; pod.updateData(undefined, options) }
+    // const zoomOut = (ranges) => { console.log('zoomout'); options.axis.x.range = undefined; pod.updateData(undefined, options) }
+    let options = {
+      renderLegend: false, 
+      usePanning: false, 
+      // axis: {
+      //    y: { invert: false, range: [0, 350] },
+      //    x: { format: 'time' }
+      // },
+      // eventsCallbacks: { zoomIn: zoomIn, zoomOut }
+    }
+    var pod = new ChartwerkLineChart(
+      document.getElementById('chart'),
+      [
+        { target: 'test1', datapoints: data1, color: 'green' },
+      ],
+      options
+    );
+    pod.render();
+  }
 });
 </script>
 
@@ -20,7 +44,6 @@ export default defineComponent({
 #chart {
   margin: auto;
   width: 80%;
-  height: 50%;
-  background: red;
+  height: 350px;
 }
 </style>

client/yarn.lock

@@ -223,6 +223,18 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@chartwerk/core@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@chartwerk/core/-/core-0.1.1.tgz#cc15c4f388737032a1e9616959541989e54b4824"
+  integrity sha512-AgERJVR6agOXULOQsc7sQHM7INP8iaF+kGj2c08DYTZ6SmIUGJFWpcSVTTccZZ3Szf/ypiI60tC1bgTKaIchTg==
+
+"@chartwerk/line-pod@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@chartwerk/line-pod/-/line-pod-0.2.4.tgz#67f9f026ca330c4e746d80ff9ce88e99ddca9b1d"
+  integrity sha512-XXoDBEIHyxSNdbpjKWZwU4zXE9nlN7731lYx3F5ICQxozGrb3FEPsj4gS63nPAdyQXWWvglSk+t12L8deN0P2A==
+  dependencies:
+    "@chartwerk/core" "^0.1.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"