Hastic standalone https://hastic.io
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

64 lines
1.5 KiB

3 years ago
<template>
3 years ago
<div id="chart"></div>
3 years ago
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { HasticPod, TimeRange } from "./hastic_pod";
3 years ago
import { getMetrics } from '../services/metrics.service';
3 years ago
import { postSegment } from '../services/segments';
import { LineTimeSerie } from "@chartwerk/line-pod";
3 years ago
import _ from "lodash";
3 years ago
import { SegmentArray } from '@/types/segment_array';
3 years ago
async function resolveData(range: TimeRange): Promise<LineTimeSerie[]> {
3 years ago
// TODO: return segments from the promise too
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);
}
}
3 years ago
export default defineComponent({
name: 'Graph',
props: {},
3 years ago
mounted() {
// const endTime = Math.floor(Date.now() / 1000);
// const startTime = endTime - 1000; // 1000 seconds
3 years ago
// TODO: fill segmentArray from service
var s = new SegmentArray();
3 years ago
var pod = new HasticPod(
document.getElementById('chart'),
resolveData.bind(this),
postSegment,
s
);
pod.render();
3 years ago
}
3 years ago
});
</script>
<style scoped lang="scss">
#chart {
margin: auto;
width: 80%;
3 years ago
height: 350px;
3 years ago
}
</style>