diff options
Diffstat (limited to 'src/components/_sila/Global/Chart.vue')
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 305 |
1 files changed, 305 insertions, 0 deletions
diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue new file mode 100644 index 00000000..fa66683a --- /dev/null +++ b/src/components/_sila/Global/Chart.vue @@ -0,0 +1,305 @@ +<template> + <highcharts :options="chartOptions" /> +</template> + +<script> +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + data: { + type: Array, + default: () => [], + }, + colors: { + type: Array, + default: () => [], + }, + type: { + type: String, + default: '', + }, + timeScale: { + type: String, + default: null, + }, + warning: { + type: Number, + default: null, + }, + shutdown: { + type: Number, + default: null, + }, + notNormal: { + type: Number, + default: null, + }, + critical: { + type: Number, + default: null, + }, + }, + data() { + return { + categories: null, + minRange: null, + yMax: null, + minTickInterval: null, + plotBands: null, + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: this.$t('chart.thresholdWarning'), + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + }; + }, + computed: { + readyData() { + let filteredData = this.data.filter((metric) => { + return metric.MetricValue !== 'nan'; + }); + + filteredData.sort((a, b) => { + return new Date(a.Timestamp) - new Date(b.Timestamp); + }); + + let transform = filteredData.map((metric) => { + let date = new Date(metric.Timestamp); + let time = + date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0'); + return { + ...metric, + Timestamp: time, + MetricValue: Math.round(metric.MetricValue), + }; + }); + + return transform; + }, + step() { + return this.timeScale === 'hour' ? 10 : 60; + }, + metricData() { + let group = this.readyData.reduce(function (rv, x) { + (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x); + return rv; + }, {}); + + let metricArr = Object.keys(group).map((key, index) => { + let groupTime = group[key].reduce(function (rv, x) { + (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x); + return rv; + }, {}); + + let arr = Object.keys(groupTime).map((key) => { + const findAverage = (arr) => { + const { length } = arr; + return Math.round( + arr.reduce((acc, val) => { + return acc + val.MetricValue / length; + }, 0) + ); + }; + return findAverage(groupTime[key]); + }); + + return { + name: key, + data: arr, + color: this.colors[index], + }; + }); + + return metricArr; + }, + + metricTime() { + let timeGroup = this.readyData.reduce(function (rv, x) { + (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x); + return rv; + }, {}); + + let timeArr = Object.keys(timeGroup); + + return timeArr; + }, + + chartOptions() { + return { + chart: { + type: 'spline', + margin: [12, 50, 32, 60], + height: '320px', + zoomType: 'x', + }, + title: null, + xAxis: { + categories: this.metricTime, + title: null, + labels: { + step: this.step, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: this.categories, + min: 0, + max: this.yMax, + title: null, + minRange: this.minRange, + minTickInterval: this.minTickInterval, + minorGridLineColor: '#1A3E5B1A', + plotLines: this.plotLines, + plotBands: this.plotBands, + }, + series: this.metricData.map((item) => ({ + ...item, + marker: { + enabled: false, + }, + })), + legend: { + enabled: false, + }, + tooltip: { + enabled: false, + crosshairs: false, + }, + plotOptions: { + series: { + showInLegend: true, + }, + }, + }; + }, + }, + + async created() { + this.setOptions(); + }, + + methods: { + setOptions() { + switch (this.type) { + case 'fans': + this.categories = this.setSpeed(4000); + this.minRange = 4000; + this.minTickInterval = 1000; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: this.$t('chart.thresholdFailure'), + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; + case 'memory': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.notNormal, + to: this.critical, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.critical, + to: this.warning, + }, + ]; + break; + case 'processors': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.notNormal, + to: this.critical, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.critical, + to: this.warning, + }, + ]; + break; + case 'motherboard': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + break; + case 'power': + this.categories = this.setCategories(101, 'Вт'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: this.$t('chart.thresholdWarning'), + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; + } + }, + setCategories(count, desc) { + const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); + return arr; + }, + setSpeed(count) { + const arr = [...new Array(count)].map((i, k) => `${k}`); + return arr; + }, + }, +}; +</script> |