fetching data begin

client/src/components/Graph.vue

@@ -4,43 +4,42 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { HasticPod } from "./hastic_pod";
+import { HasticPod, TimeRange } from "./hastic_pod";
 import { getMetrics } from '../services/metrics.service';
+import { LineTimeSerie } from "@chartwerk/line-pod";
 
 import _ from "lodash";
 
-// TODO: fetch data from API
-// TODO: set height
+
+async function resolveData(range: TimeRange): Promise<LineTimeSerie[]> {
+  const endTime = Math.floor(range.to);
+  const startTime = Math.floor(range.from);
+
+  const step = Math.max(Math.round((endTime - startTime) / 5000), 1);
+
+  try {
+    let [target, values] = await getMetrics(startTime, endTime, step);
+    return [
+      { target: target, datapoints: values, color: 'green' },
+    ];
+  } catch (e) {
+    this.$notify({
+      title: "Error during extracting metric",
+      text: e,
+      type: 'error'
+    });
+    console.error(e);
+  }
+}
+
 export default defineComponent({
   name: 'Graph',
   props: {},
   mounted() {
-    const endTime = Math.floor(Date.now() / 1000);
-    const startTime = endTime - 1000; // 1000 seconds
-
-    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) }
-      
-      var pod = new HasticPod(
-        document.getElementById('chart'),
-        [
-          { target: target, datapoints: values, color: 'green' },
-        ]
-      );
-      pod.render();
-    }).catch(e => {
-      this.$notify({
-        title: "Error during extracting metric",
-        text: e,
-        type: 'error'
-      });
-      console.error(e);
-    })
- 
+    // const endTime = Math.floor(Date.now() / 1000);
+    // const startTime = endTime - 1000; // 1000 seconds
+    var pod = new HasticPod(document.getElementById('chart'), resolveData.bind(this));
+    pod.render();
   }
 });
 </script>

client/src/components/hastic_pod/index.ts

@@ -1,10 +1,30 @@
+import { AxisRange } from "@chartwerk/core/dist/types";
 import { LinePod, LineTimeSerie } from "@chartwerk/line-pod";
 
+export type TimeRange = { from: number, to: number };
+export type UpdateDataCallback = (range: TimeRange) => Promise<LineTimeSerie[]>;
+
 export class HasticPod extends LinePod {
-  constructor(el: HTMLElement, series?: LineTimeSerie[]) {
-    super(el, series, {
+
+  private _udc: UpdateDataCallback;
+
+  constructor(el: HTMLElement, udc: UpdateDataCallback) {
+    super(el, undefined, {
       renderLegend: false,
+      eventsCallbacks: {
+        zoomIn: range => { this._zoomIn(range) },
+        zoomOut: ({x, y}) => { this._zoomOut({x, y}) }
+      }
     });
+    this._udc = udc;
+
+    // TODO: move to params
+    const to = Math.floor(Date.now() / 1000);
+    const from = to - 5000; // -5000 seconds
+
+    this._udc({ from, to })
+      .then(ts => { this.updateData(ts); })
+      .catch(() => { /* set "error" message */ })
   }
 
   renderMetrics() {
@@ -12,6 +32,21 @@ export class HasticPod extends LinePod {
     console.log('render my metrics');
   }
 
+  private async _zoomIn(range: AxisRange[]) {
+    // 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) }
+    const ts = await this._udc({ from: range[0][0], to: range[0][1] });
+    console.log("ts");
+    console.log(ts);
+    
+    const options = { axis: { x: { range: range[0] } } };
+    this.updateData(ts, options);
+  }
+
+  private _zoomOut({x, y}) {
+    console.log(`${x} -- ${y}`);
+  }
+
   private _renderSegments() {
     const m = this.metricContainer;
     console.log(m);