From 6facd12596ec8b55bab4be04b473de65e1f22018 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 24 May 2022 09:43:34 +0300
Subject: Add depend: highcarts. Pages: power, analytical motherboard, memory,
 fans, event logs, Fix styles, add global components.

---
 src/views/PowerSupplies/DynamicInfo/UsingTable.vue | 126 +++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 src/views/PowerSupplies/DynamicInfo/UsingTable.vue

(limited to 'src/views/PowerSupplies/DynamicInfo/UsingTable.vue')

diff --git a/src/views/PowerSupplies/DynamicInfo/UsingTable.vue b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue
new file mode 100644
index 00000000..322a7f7b
--- /dev/null
+++ b/src/views/PowerSupplies/DynamicInfo/UsingTable.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, '%'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            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: [
+              {
+                color: '#F0AC0C1A',
+                dashStyle: 'solid',
+                from: this.nonNormal,
+                to: this.criticalStart,
+              },
+              {
+                color: '#FF41411A',
+                dashStyle: 'solid',
+                from: this.criticalStart,
+                to: this.warning,
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
-- 
cgit v1.2.3