Merge branch 'sila-ui' into sila

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>