add template

7 files changed, 1591 insertions, 4 deletions

diff --git a/src/assets/styles/bmc/_sila/_chart.scss b/src/assets/styles/bmc/_sila/_chart.scss
new file mode 100644
index 00000000..24da971d
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_chart.scss
@@ -0,0 +1,7 @@
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-8px, 0) !important;
+}
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>
diff --git a/src/components/_sila/Global/helpers.js b/src/components/_sila/Global/helpers.js
new file mode 100644
index 00000000..82e23544
--- /dev/null
+++ b/src/components/_sila/Global/helpers.js
@@ -0,0 +1,1398 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        10,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        37,
+        10,
+        10,
+        10,
+        10,
+        10,
+        25,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        35,
+        10,
+        10,
+        10,
+        10,
+        10,
+        45,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        50,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        11,
+        11,
+        11,
+        30,
+        11,
+        11,
+        11,
+        11,
+        57,
+        11,
+        11,
+        11,
+        11,
+        25,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        61,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        31,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        21,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+        51,
+        11,
+        11,
+        11,
+        11,
+        11,
+        11,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        15,
+        15,
+        15,
+        35,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        25,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        45,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        35,
+        15,
+        15,
+        55,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        21,
+        21,
+        21,
+        51,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        40,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        35,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        53,
+        21,
+        21,
+        30,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+        21,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        39,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        59,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        76,
+        16,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+      ],
+      color: '#139BB9',
+    },
+  ],
+  //////////////////////////////frequency////////////////
+  frequency: [
+    {
+      name: 'Sean',
+      data: [
+        100,
+        100,
+        450,
+        100,
+        100,
+        100,
+        100,
+        137,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        125,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        135,
+        100,
+        100,
+        100,
+        100,
+        100,
+        145,
+        100,
+        100,
+        360,
+        100,
+        100,
+        450,
+        100,
+        100,
+        100,
+        100,
+        100,
+        100,
+        150,
+        100,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        120,
+        120,
+        120,
+        140,
+        120,
+        157,
+        120,
+        120,
+        120,
+        210,
+        120,
+        125,
+        120,
+        120,
+        120,
+        350,
+        120,
+        120,
+        120,
+        120,
+        120,
+        590,
+        120,
+        120,
+        120,
+        120,
+        450,
+        120,
+        120,
+        120,
+        120,
+        120,
+        125,
+        120,
+        120,
+        120,
+        120,
+        120,
+        162,
+        120,
+        120,
+        120,
+        120,
+        120,
+        220,
+        120,
+        120,
+        120,
+        120,
+        120,
+        360,
+        120,
+        210,
+        120,
+        200,
+        120,
+        120,
+        120,
+        120,
+        120,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        110,
+        110,
+        110,
+        450,
+        110,
+        110,
+        110,
+        157,
+        110,
+        110,
+        110,
+        110,
+        110,
+        165,
+        110,
+        110,
+        110,
+        110,
+        110,
+        310,
+        110,
+        110,
+        110,
+        590,
+        110,
+        110,
+        175,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        152,
+        110,
+        310,
+        110,
+        110,
+        210,
+        110,
+        110,
+        110,
+        110,
+        110,
+        110,
+        360,
+        110,
+        110,
+        110,
+        210,
+        110,
+        110,
+        110,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        221,
+        221,
+        221,
+        251,
+        221,
+        221,
+        221,
+        221,
+        221,
+        590,
+        221,
+        221,
+        421,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+        450,
+        221,
+        221,
+        221,
+        221,
+        421,
+        221,
+        235,
+        221,
+        221,
+        221,
+        221,
+        221,
+        421,
+        221,
+        360,
+        221,
+        221,
+        221,
+        210,
+        253,
+        221,
+        221,
+        230,
+        221,
+        221,
+        221,
+        590,
+        221,
+        221,
+        221,
+        221,
+        221,
+        221,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        590,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        590,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+        159,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        176,
+        176,
+        176,
+        156,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        276,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        210,
+        176,
+        176,
+        176,
+        590,
+        176,
+        176,
+        176,
+        176,
+        176,
+        590,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        570,
+        176,
+        176,
+        176,
+        176,
+        176,
+        770,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+        176,
+      ],
+      color: '#139BB9',
+    },
+  ],
+  //////////////////////////////power////////////////
+  power: [
+    {
+      name: 'Sean',
+      data: [
+        15,
+        15,
+        45,
+        15,
+        65,
+        15,
+        75,
+        15,
+        15,
+        15,
+        55,
+        15,
+        25,
+        15,
+        45,
+        15,
+        55,
+        15,
+        75,
+        15,
+        35,
+        15,
+        55,
+        15,
+        75,
+        15,
+        85,
+        15,
+        15,
+        45,
+        15,
+        15,
+        45,
+        15,
+        45,
+        15,
+        15,
+        65,
+        15,
+        45,
+        15,
+        25,
+        15,
+        45,
+        15,
+        65,
+        15,
+        35,
+        35,
+        35,
+        15,
+        55,
+        15,
+        15,
+        35,
+        15,
+        25,
+        15,
+        35,
+        15,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        62,
+        12,
+        72,
+        12,
+        12,
+        12,
+        42,
+        12,
+        12,
+        12,
+        52,
+        12,
+        22,
+        12,
+        42,
+        12,
+        52,
+        12,
+        72,
+        12,
+        52,
+        12,
+        62,
+        12,
+        72,
+        12,
+        82,
+        12,
+        12,
+        42,
+        12,
+        12,
+        52,
+        12,
+        42,
+        12,
+        12,
+        62,
+        12,
+        42,
+        12,
+        22,
+        12,
+        42,
+        12,
+        62,
+        12,
+        12,
+        32,
+        12,
+        62,
+        12,
+        52,
+        12,
+        32,
+        12,
+        22,
+        12,
+        32,
+        12,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        64,
+        14,
+        74,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        54,
+        14,
+        24,
+        14,
+        44,
+        14,
+        54,
+        14,
+        74,
+        14,
+        54,
+        14,
+        64,
+        14,
+        74,
+        14,
+        84,
+        14,
+        14,
+        44,
+        14,
+        14,
+        54,
+        14,
+        44,
+        14,
+        14,
+        64,
+        14,
+        44,
+        14,
+        24,
+        14,
+        44,
+        14,
+        64,
+        14,
+        14,
+        14,
+        54,
+        14,
+        54,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        64,
+        14,
+        64,
+        14,
+        34,
+        14,
+        54,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        64,
+        14,
+        74,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        74,
+        14,
+        54,
+        14,
+        64,
+        14,
+        74,
+        14,
+        84,
+        14,
+        94,
+        14,
+        54,
+        4,
+        54,
+        14,
+        44,
+        14,
+        44,
+        64,
+        14,
+        44,
+        14,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        16,
+        46,
+        16,
+        26,
+        16,
+        46,
+        16,
+        66,
+        16,
+        16,
+        16,
+        36,
+        16,
+        56,
+        16,
+        16,
+        36,
+        16,
+        26,
+        16,
+        36,
+        16,
+        66,
+        16,
+        76,
+        16,
+        16,
+        16,
+        46,
+        16,
+        16,
+        16,
+        56,
+        16,
+        26,
+        16,
+        46,
+        16,
+        56,
+        16,
+        76,
+        16,
+        56,
+        16,
+        66,
+        16,
+        76,
+        16,
+        86,
+        16,
+        96,
+        16,
+        16,
+        16,
+        56,
+        16,
+        46,
+        16,
+        46,
+        16,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        49,
+        19,
+        19,
+        69,
+        19,
+        49,
+        19,
+        29,
+        19,
+        49,
+        19,
+        69,
+        19,
+        39,
+        39,
+        39,
+        19,
+        59,
+        19,
+        19,
+        39,
+        19,
+        29,
+        19,
+        39,
+        19,
+        69,
+        19,
+        79,
+        19,
+        19,
+        19,
+        49,
+        19,
+        19,
+        19,
+        59,
+        19,
+        29,
+        19,
+        49,
+        19,
+        59,
+        19,
+        79,
+        19,
+        59,
+        19,
+        69,
+        19,
+        79,
+        19,
+        89,
+        19,
+        99,
+        19,
+        19,
+        69,
+        59,
+        19,
+      ],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${String(i).padStart(2, '0')}`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
+  return arr;
+};
+
+export const AccessoryData = {
+  temperatureTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentTemperature: 19,
+        middleTemperature: 40,
+        minTemperature: 31,
+        minDate: { time: '15:15', date: '11.11.2021' },
+        maxTemperature: 88,
+        maxDate: { time: '10:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Процессор 2',
+        currentTemperature: 29,
+        middleTemperature: 40,
+        minTemperature: 20,
+        minDate: { time: '15:45', date: '11.11.2021' },
+        maxTemperature: 76,
+        maxDate: { time: '16:59', date: '16.11.2021' },
+      },
+      {
+        name: 'Процессор 3',
+        currentTemperature: 48,
+        middleTemperature: 46,
+        minTemperature: 31,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 69,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Процессор 4',
+        currentTemperature: 48,
+        middleTemperature: 45,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 75,
+        maxDate: { time: '11:26', date: '16.11.2021' },
+      },
+      {
+        name: 'Процессор 5',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 30,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '17.11.2021' },
+      },
+      {
+        name: 'Процессор 6',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+    ],
+  },
+  frequencyTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentFrequency',
+        label: 'Текущее, Hz',
+      },
+      {
+        key: 'baseFrequency',
+        label: 'Базовое, Hz',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentFrequency: 600,
+        baseFrequency: 400,
+      },
+      {
+        name: 'Процессор 2',
+        currentFrequency: 500,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 3',
+        currentFrequency: 500,
+        baseFrequency: 450,
+      },
+      {
+        name: 'Процессор 4',
+        currentFrequency: 500,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 5',
+        currentFrequency: 600,
+        baseFrequency: 470,
+      },
+      {
+        name: 'Процессор 6',
+        currentFrequency: 500,
+        baseFrequency: 400,
+      },
+    ],
+  },
+  powerTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+      },
+      {
+        key: 'currentPower',
+        label: 'Текущее, Вт',
+        label2: '',
+      },
+    ],
+    items: [
+      {
+        name: 'Процессор 1',
+        currentPower: 91,
+      },
+      {
+        name: 'Процессор 2',
+        currentPower: 77,
+      },
+      {
+        name: 'Процессор 3',
+        currentPower: 76,
+      },
+      {
+        name: 'Процессор 4',
+        currentPower: 74,
+      },
+      {
+        name: 'Процессор 5',
+        currentPower: 73,
+      },
+      {
+        name: 'Процессор 6',
+        currentPower: 71,
+      },
+    ],
+  },
+};
diff --git a/src/main.js b/src/main.js
index 949baaed..90983c77 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,7 @@ import {
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
 import { format } from 'date-fns-tz';
+import HighchartsVue from 'highcharts-vue';
 
 // Filters
 Vue.filter('shortTimeZone', function (value) {
@@ -128,6 +129,7 @@ Vue.use(TabsPlugin);
 Vue.use(ToastPlugin);
 Vue.use(TooltipPlugin);
 Vue.use(Vuelidate);
+Vue.use(HighchartsVue);
 
 new Vue({
   router,
diff --git a/src/store/index.js b/src/store/index.js
index 41eba75f..11183e00 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -19,7 +19,7 @@ import ServerLedStore from './modules/HardwareStatus/ServerLedStore';
 import SystemStore from './modules/HardwareStatus/SystemStore';
 import PowerSupplyStore from './modules/HardwareStatus/PowerSupplyStore';
 import MemoryStore from './modules/HardwareStatus/MemoryStore';
-import FanStore from './modules/_sila//HardwareStatus/FanStore';
+import FanStore from './modules/_sila/HardwareStatus/FanStore';
 import ChassisStore from './modules/HardwareStatus/ChassisStore';
 import BmcStore from './modules/HardwareStatus/BmcStore';
 import ProcessorStore from './modules/HardwareStatus/ProcessorStore';
diff --git a/src/store/modules/HardwareStatus/ProcessorStore.js b/src/store/modules/HardwareStatus/ProcessorStore.js
index d4c99bce..2309f536 100644
--- a/src/store/modules/HardwareStatus/ProcessorStore.js
+++ b/src/store/modules/HardwareStatus/ProcessorStore.js
@@ -59,8 +59,20 @@ const ProcessorStore = {
         };
       });
     },
+
+    setProcessorsDynamic: (state, data) => {
+      state.processors = data;
+    },
   },
   actions: {
+    async getProcessorsDynamic({ commit }) {
+      return await api
+        .get('/redfish/v1/TelemetryService/MetricReports/hour_data&cpu_temp')
+        .then(({ data: { MetricValues = [] } }) =>
+          commit('setProcessorsDynamic', MetricValues)
+        )
+        .catch((error) => console.log(error));
+    },
     async getProcessorsInfo({ commit }) {
       return await api
         .get('/redfish/v1/Systems/system/Processors')
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 000928cf..ac510875 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,20 +1,44 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
+
+    <chart :data="filteredSensors"></chart>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/_sila/Global/PageTitle';
+import Chart from '@/components/_sila/Global/Chart';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 export default {
-  components: { PageTitle },
-  mixins: [DataFormatterMixin, LoadingBarMixin],
+  components: { PageTitle, Chart },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
-    return {};
+    return {
+      activeFilters: [],
+    };
+  },
+
+  computed: {
+    allSensors() {
+      let sensors = this.$store.getters['processors/processors'];
+      return sensors;
+    },
+
+    filteredSensors() {
+      return this.getFilteredTableData(this.allSensors, this.activeFilters);
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('processors/getProcessorsDynamic').finally(() => {
+      this.endLoader();
+    });
   },
 };
 </script>