add template

1 files changed, 144 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..bc7d8bd8
--- /dev/null
+++ b/src/components/_sila/Global/Chart.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions" />
+    <div v-for="(item, index) in data" :key="index">
+      {{ item.MetricProperty }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    groupData() {
+      return this.data.reduce(function (rv, x) {
+        (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x);
+        return rv;
+      }, {});
+    },
+
+    chartOptions() {
+      return {
+        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,
+          },
+        },
+      };
+    },
+  },
+
+  watch: {
+    groupData() {
+      console.log('group data!!!', this.groupData);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>