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; export class HasticPod extends LinePod { 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() { super.renderMetrics(); console.log('render my metrics'); } private async _zoomIn(range: AxisRange[]) { const ts = await this._udc({ from: range[0][0], to: range[0][1] }); 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); } }