query metric

client/package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@chartwerk/line-pod": "^0.2.4",
+    "@types/lodash": "^4.14.176",
     "axios": "^0.23.0",
+    "lodash": "^4.17.21",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",

client/src/components/Graph.vue

@@ -5,6 +5,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { HasticPod } from "./hastic_pod";
+import { getMetrics } from '../services/metrics.service';
+
+import _ from "lodash";
 
 // TODO: fetch data from API
 // TODO: set height
@@ -12,28 +15,39 @@ export default defineComponent({
   name: 'Graph',
   props: {},
   mounted() {
-    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 HasticPod(
-      document.getElementById('chart'),
-      [
-        { target: 'test1', datapoints: data1, color: 'green' },
-      ],
-      options
-    );
-    pod.render();
+    const startTime = 1634172070;
+    const endTime = 1635110190;
+    const step = Math.round((endTime - startTime) / 5000);
+    
+    getMetrics(startTime, endTime, step).then((res) => {
+      // console.log(res);
+      let target = _.keys(res["data"]["data"])[0];
+      let values = res["data"]["data"][target].map(([a,b]) => [b,a]);
+
+      
+      
+      // 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 HasticPod(
+        document.getElementById('chart'),
+        [
+          { target: target, datapoints: values, color: 'green' },
+        ],
+        options
+      );
+      pod.render();
+    })
+    
+    
   }
 });
 </script>

client/src/services/metrics.service.ts

@@ -1,9 +1,10 @@
 import { API_URL } from "@/config";
 import axios from 'axios';
 
-const METRICS_API_URL = API_URL + "metrics";
+const METRICS_API_URL = API_URL + "metric/";
 
-export default async function getMetrics(from: number, to: number, step: number) {
-  let uri = METRICS_API_URL + `?from=${from}`;
-  let res = axios.get(METRICS_API_URL);
+export async function getMetrics(from: number, to: number, step: number) {
+  const uri = METRICS_API_URL + `?from=${from}&to=${to}&step=${step}`;
+  const res = axios.get(uri);
+  return res;
 }

client/yarn.lock

@@ -603,6 +603,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/lodash@^4.14.176":
+  version "4.14.176"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
+  integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==
+
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"