diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 269 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 38 |
2 files changed, 307 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..c5214bd7 --- /dev/null +++ b/src/components/_sila/Global/Chart.vue @@ -0,0 +1,269 @@ +<template> + <highcharts :options="chartOptions" /> +</template> + +<script> +import { Chart } from 'highcharts-vue'; + +export default { + components: { + highcharts: Chart, + }, + props: { + data: { + type: Array, + default: () => [], + }, + type: { + type: String, + default: '', + }, + timeScale: { + type: String, + default: 'hour', + }, + warning: { + type: Number, + default: 70, + }, + shutdown: { + type: Number, + default: 3150, + }, + nonNormal: { + type: Number, + default: 70, + }, + criticalStart: { + type: Number, + default: 70, + }, + }, + data() { + return { + categories: null, + minRange: null, + yMax: null, + minTickInterval: null, + plotBands: null, + }; + }, + computed: { + metricData() { + let filteredData = this.data.filter((metric) => { + return metric.MetricValue !== 'nan'; + }); + + 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), + }; + }); + + let group = transform.reduce(function (rv, x) { + (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x); + return rv; + }, {}); + + let metricArr = Object.keys(group).map((key) => { + 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 arr.reduce((acc, val) => { + return Math.round(acc + val.MetricValue / length); + }, 0); + }; + return findAverage(groupTime[key]); + }); + + return { + name: key, + data: arr.slice(-60), + }; + }); + + return metricArr; + }, + + metricTime() { + let filteredData = this.data.filter((metric) => { + return metric.MetricValue !== 'nan'; + }); + + 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), + }; + }); + + let timeGroup = transform.reduce(function (rv, x) { + (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x); + return rv; + }, {}); + + let timeArr = Object.keys(timeGroup).slice(-60); + + return timeArr; + }, + + chartOptions() { + return { + chart: { + type: 'line', + margin: [12, 50, 32, 60], + height: '320px', + }, + title: null, + xAxis: { + categories: this.metricTime, + title: null, + labels: { + step: 10, + }, + minorGridLineColor: '#1A3E5B1A', + }, + yAxis: { + categories: this.categories, + min: 0, + max: this.yMax, + title: null, + minRange: this.minRange, + minTickInterval: this.minTickInterval, + minorGridLineColor: '#1A3E5B1A', + plotLines: [ + { + color: '#E11717', + dashStyle: 'solid', + value: this.warning, + zIndex: '1000', + width: 2, + label: { + text: 'Пороговое значение предупреждения', + align: 'right', + style: { + fontFamily: 'Inter, sans-serif', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }, + ], + 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.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ]; + break; + case 'memory': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotBands = [ + { + color: '#F0AC0C1A', + dashStyle: 'solid', + from: this.nonNormal, + to: this.criticalStart, + }, + { + color: '#FF41411A', + dashStyle: 'solid', + from: this.criticalStart, + to: this.warning, + }, + ]; + break; + case 'processors': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + break; + case 'motherboard': + this.categories = this.setCategories(101, 'С°'); + this.yMax = 100; + this.minTickInterval = 25; + 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> +<style lang="scss"> +.highcharts-credits { + display: none; +} + +.highcharts-plot-line-label { + transform: translate(-8px, 0) !important; +} +</style> diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue new file mode 100644 index 00000000..141da639 --- /dev/null +++ b/src/components/_sila/Global/Collapse.vue @@ -0,0 +1,38 @@ +<template> + <div class="custom-collapse"> + <b-button + v-b-toggle="id" + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <slot name="image"></slot> + {{ title }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse :id="id" class="nav-item__nav"> + <slot></slot> + </b-collapse> + </div> +</template> +<script> +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20'; + +export default { + name: 'Collapse', + props: { + id: { + type: String, + default: null, + }, + title: { + type: String, + default: null, + }, + }, + data() { + return { + iconChevronUp: iconChevronUp, + }; + }, +}; +</script> |