diff options
Diffstat (limited to 'src/components/_sila/Global/Chart.vue')
-rw-r--r-- | src/components/_sila/Global/Chart.vue | 109 |
1 files changed, 90 insertions, 19 deletions
diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue index 8064a23f..c5214bd7 100644 --- a/src/components/_sila/Global/Chart.vue +++ b/src/components/_sila/Global/Chart.vue @@ -3,7 +3,6 @@ </template> <script> -import { setCategories } from './helpers'; import { Chart } from 'highcharts-vue'; export default { @@ -15,6 +14,10 @@ export default { type: Array, default: () => [], }, + type: { + type: String, + default: '', + }, timeScale: { type: String, default: 'hour', @@ -23,6 +26,10 @@ export default { type: Number, default: 70, }, + shutdown: { + type: Number, + default: 3150, + }, nonNormal: { type: Number, default: 70, @@ -32,6 +39,15 @@ export default { default: 70, }, }, + data() { + return { + categories: null, + minRange: null, + yMax: null, + minTickInterval: null, + plotBands: null, + }; + }, computed: { metricData() { let filteredData = this.data.filter((metric) => { @@ -122,11 +138,12 @@ export default { minorGridLineColor: '#1A3E5B1A', }, yAxis: { - categories: setCategories(101, 'С°'), + categories: this.categories, min: 0, - max: 100, + max: this.yMax, title: null, - minTickInterval: 25, + minRange: this.minRange, + minTickInterval: this.minTickInterval, minorGridLineColor: '#1A3E5B1A', plotLines: [ { @@ -136,7 +153,7 @@ export default { zIndex: '1000', width: 2, label: { - text: 'Пороговое значение предупреждения, С°', + text: 'Пороговое значение предупреждения', align: 'right', style: { fontFamily: 'Inter, sans-serif', @@ -149,20 +166,7 @@ export default { }, }, ], - plotBands: [ - { - color: '#F0AC0C1A', - dashStyle: 'solid', - from: this.nonNormal, - to: this.criticalStart, - }, - { - color: '#FF41411A', - dashStyle: 'solid', - from: this.criticalStart, - to: this.warning, - }, - ], + plotBands: this.plotBands, }, series: this.metricData.map((item) => ({ ...item, @@ -185,6 +189,73 @@ export default { }; }, }, + + 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"> |