graph++

client/src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <notifications />
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
   <router-view/>
 </template>
 

client/src/components/Graph.vue

@@ -16,40 +16,27 @@ export default defineComponent({
   props: {},
   mounted() {
     const endTime = Math.floor(Date.now() / 1000);
-    const startTime = endTime - 60 * 1000; // 1000 seconds
+    const startTime = endTime - 1000; // 1000 seconds
 
-    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 step = Math.max(Math.round((endTime - startTime) / 5000), 1);
 
+    getMetrics(startTime, endTime, step).then(([target, values]) => {
       
       // 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 }
-      }
+      
       var pod = new HasticPod(
         document.getElementById('chart'),
         [
           { target: target, datapoints: values, color: 'green' },
-        ],
-        options
+        ]
       );
       pod.render();
     }).catch(e => {
       this.$notify({
         title: "Error during extracting metric",
         text: e,
-        type: 'error',
+        type: 'error'
       });
       console.error(e);
     })

client/src/components/hastic_pod/index.ts

@@ -1,8 +1,10 @@
 import { ChartwerkLineChart, LineOptions, LineTimeSerie } from "@chartwerk/line-pod";
 
 export class HasticPod extends ChartwerkLineChart {
-  constructor(el: HTMLElement, series?: LineTimeSerie[], options?: LineOptions) {
-    super(el, series, options)
+  constructor(el: HTMLElement, series?: LineTimeSerie[]) {
+    super(el, series, {
+      renderLegend: false,
+    });
   }
 
   renderMetrics() {

client/src/services/metrics.service.ts

@@ -1,10 +1,22 @@
 import { API_URL } from "@/config";
 import axios from 'axios';
 
+import _ from 'lodash';
+
 const METRICS_API_URL = API_URL + "metric/";
 
 export async function getMetrics(from: number, to: number, step: number) {
+  if(from >= to) {
+    throw new Error("`from` can`t be less than `to`");
+  }
+  if(step < 1) {
+    throw new Error("`step` can`t be less than 1");
+  }
+
   const uri = METRICS_API_URL + `?from=${from}&to=${to}&step=${step}`;
-  const res = axios.get(uri);
-  return res;
+  const res = await axios.get(uri);
+
+  const target = _.keys(res["data"]["data"])[0];
+  const values = res["data"]["data"][target].map(([a,b]) => [b,a]);
+  return [target, values];
 }