bfg-common 1.4.165 → 1.4.167

package/components/common/pages/hardwareHealth/historyTestimony/Graph.vue

@@ -1,435 +1,456 @@
-<template>
-  <common-pages-hardware-health-history-testimony-tools
-    v-model:selected-view="selectedView"
-    v-model:selected-timespan-type="selectedTimespanType"
-    :selected-chart-option-name="selectedChartOptionName"
-    :is-show-chart-modal="isShowChartModal"
-    :chart-title="props.powerData?.groupName || ''"
-    :selected-metric="selectedMetric"
-    :selected-power-counters-keys="selectedPowerCountersKeys"
-    :power-selected-rows-local="powerSelectedRowsLocal"
-    :selected-temperature-counters-keys="selectedTemperatureCountersKeys"
-    :temperature-selected-rows-local="temperatureSelectedRowsLocal"
-    :units-count="unitsCount"
-    :power-counters-table-data="powerCountersTableData"
-    :temperature-counters-table-data="temperatureCountersTableData"
-    :language="props.language"
-    :custom-date-from="customDateFrom"
-    :custom-date-to="customDateTo"
-    :custom-time-from="customTimeFrom"
-    :custom-time-to="customTimeTo"
-    :start-date="props.powerData?.pointStart || 0"
-    :timespan-period-type="timespanPeriodType"
-    @power-selected-rows-local="powerSelectedRowsLocal = $event"
-    @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
-    @show-chart-modal="isShowChartModal = true"
-    @hide-chart-modal="isShowChartModal = false"
-    @update-tools="onUpdateTools"
-    @delete-option="onDeleteOption"
-    @submit-options="onSubmitOptions"
-    @update-timespan-period-type="timespanPeriodType = $event"
-  />
-  <div
-    ref="historyTestimonyGraph"
-    :class="`history-testimony-graph ${selectedView}`"
-  >
-    <div>
-      <common-graph
-        v-if="powerDataLocal && !props.powerLoading"
-        :data="powerDataLocal"
-        :update="updatePowerHelper"
-        :chart="powerChart"
-        :selected-row="selectedRowPower"
-      />
-      <div
-        v-else-if="props.powerLoading"
-        class="history-testimony-graph__loader-block"
-      >
-        <div class="spinner"></div>
-      </div>
-      <div v-else class="history-testimony-graph__empty-content"></div>
-    </div>
-    <div>
-      <common-graph
-        v-if="temperatureDataLocal && !props.temperatureLoading"
-        :data="temperatureDataLocal"
-        :update="updateTemperatureHelper"
-        :chart="temperatureChart"
-        :selected-row="selectedRowTemperature"
-      />
-      <div
-        v-else-if="props.temperatureLoading"
-        class="history-testimony-graph__loader-block"
-      >
-        <div class="spinner"></div>
-      </div>
-      <div v-else class="history-testimony-graph__empty-content"></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-import type {
-  I_SeriesLine,
-  I_LineGraph,
-} from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
-import { graphDataFunc } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/utils/renderGraph'
-import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
-
-const props = defineProps<{
-  powerData: I_SeriesLine | null
-  temperatureData: I_SeriesLine | null
-  countersTableData: UI_I_HardwareHealthSensors[]
-  language: string
-  powerLoading: boolean
-  temperatureLoading: boolean
-  formattedDatetime: any
-  isDarkMode: boolean
-  getDateFormat: any
-  mainSelectedRow: number[]
-}>()
-const selectedView = defineModel<string>('selectedView')
-
-const { $store }: any = useNuxtApp()
-
-// const historyTestimonyGraph = ref(null)
-// const contentWidth = ref<number>(
-//   useElementSize(historyTestimonyGraph)?.width || 0
-// )
-// watch(contentWidth, (newValue) => {
-//   if (newValue) {
-//     updatePowerChart()
-//     updateTemperatureChart()
-//   }
-//   if (!powerChart.value || !temperatureChart.value) return
-//
-//   powerChart.value.setSize(1, powerChart.chartHeight)
-//   temperatureChart.value.setSize(1, temperatureChart.chartHeight)
-//
-//   setTimeout(() => {
-//     powerChart.value.setSize(newValue, powerChart.chartHeight)
-//     temperatureChart.value.setSize(newValue, temperatureChart.chartHeight)
-//   }, 1000)
-// })
-// const isContentMediumSize = computed<boolean>(() => contentWidth.value <= 1200)
-
-const selectedChartOptionName = ref<string>('')
-const isShowChartModal = ref<boolean>(false)
-const selectedMetric = ref<UI_T_Chart>('power')
-const selectedPowerCountersKeys = ref<number[]>([])
-const selectedTemperatureCountersKeys = ref<number[]>([])
-const selectedTimespanType = ref<string>('')
-const customDateFrom = ref<string>('')
-const customDateTo = ref<string>('')
-const customTimeFrom = ref<string>('')
-const customTimeTo = ref<string>('')
-
-const selectedRowPower = ref<number[]>([])
-const selectedRowTemperature = ref<number[]>([])
-let powerCounters: UI_I_HardwareHealthSensors[] = []
-let temperatureCounters: UI_I_HardwareHealthSensors[] = []
-const updateAllSelectedSelectedRow = (): void => {
-  selectedRowPower.value = []
-  selectedRowTemperature.value = []
-
-  if (!props.mainSelectedRow.length) return
-
-  props.mainSelectedRow.forEach((key) => {
-    const selectedItem = props.countersTableData[key]
-    const category = selectedItem.category.toLowerCase()
-
-    if (category === 'power') {
-      const currentKey = powerCounters.findIndex(
-        (item) => item.id === selectedItem.id
-      )
-      selectedRowPower.value.push(currentKey)
-    } else if (category === 'temperature') {
-      const currentKey = temperatureCounters.findIndex(
-        (item) => item.id === selectedItem.id
-      )
-      selectedRowTemperature.value.push(currentKey)
-    }
-  })
-}
-watch(
-  () => props.countersTableData,
-  (newValue) => {
-    powerCounters = newValue.filter(
-      (item) => item.category.toLowerCase() === 'power'
-    )
-    temperatureCounters = newValue.filter(
-      (item) => item.category.toLowerCase() === 'temperature'
-    )
-  },
-  { deep: true, immediate: true }
-)
-watch(
-  () => props.mainSelectedRow,
-  () => {
-    updateAllSelectedSelectedRow()
-  },
-  { deep: true, immediate: true }
-)
-watch(
-  selectedView,
-  () => {
-    updateAllSelectedSelectedRow()
-  },
-  { deep: true }
-)
-
-const unitsCount = ref<number>(0)
-const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
-const temperatureCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
-const powerSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
-const temperatureSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
-
-watch(
-  () => props.countersTableData,
-  (newValue) => {
-    if (!newValue.length) return
-
-    powerCountersTableData.value = []
-    temperatureCountersTableData.value = []
-
-    newValue.forEach((item, key) => {
-      const newData: UI_I_HardwareHealthSensorsGraph = {
-        id: key,
-        name: item.name,
-        description: item.category,
-        measurement: '',
-        units: '',
-        nameEn: item.mainName || '',
-        testId: `counters-table-${item.name}-item`,
-        hidden: item.hidden,
-      }
-      if (item.category.toLowerCase() === 'power')
-        powerCountersTableData.value.push(newData)
-      else if (item.category.toLowerCase() === 'temperature')
-        temperatureCountersTableData.value.push(newData)
-    })
-  },
-  { immediate: true, deep: true }
-)
-
-const selectAllCounters = (): void => {
-  if (!powerCountersTableData.value)
-    setTimeout(() => {
-      selectAllCounters()
-    }, 2000)
-  else {
-    powerCountersTableData.value.forEach((item) => {
-      selectedPowerCountersKeys.value.push(item.id)
-    })
-    temperatureCountersTableData.value.forEach((item) => {
-      if (!item.hidden) selectedTemperatureCountersKeys.value.push(item.id)
-    })
-  }
-}
-
-onMounted(() => {
-  selectAllCounters()
-})
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const powerDataLocal = ref<I_LineGraph | null>(null)
-const temperatureDataLocal = ref<I_LineGraph | null>(null)
-const updatePowerHelper = ref<number>(0)
-const updateTemperatureHelper = ref<number>(0)
-let dateFormat = ''
-const powerChart = ref<any>(null)
-const temperatureChart = ref<any>(null)
-const timespanPeriodType = ref<string>('last')
-
-const powerChartCallback = (newValue: any): void => {
-  newValue && (powerChart.value = newValue)
-}
-
-const temperatureChartCallback = (newValue: any): void => {
-  newValue && (temperatureChart.value = newValue)
-}
-
-const updatePowerChart = (): void => {
-  if (!props.powerData) return
-
-  powerDataLocal.value = graphDataFunc(
-    props.powerData,
-    props.isDarkMode,
-    localization.value,
-    () => {},
-    false,
-    false,
-    true,
-    'spline',
-    '',
-    undefined,
-    powerChartCallback,
-    props.formattedDatetime,
-    format,
-    dateFormat
-  )
-
-  updatePowerHelper.value++
-}
-
-const updateTemperatureChart = (): void => {
-  if (!props.temperatureData) return
-
-  temperatureDataLocal.value = graphDataFunc(
-    props.temperatureData,
-    props.isDarkMode,
-    localization.value,
-    () => {},
-    false,
-    false,
-    true,
-    'spline',
-    '',
-    undefined,
-    temperatureChartCallback,
-    props.formattedDatetime,
-    format,
-    dateFormat
-  )
-
-  updateTemperatureHelper.value++
-}
-
-watch(
-  () => [props.powerData, props.isDarkMode, props.language],
-  (newValue) => {
-    dateFormat = props.getDateFormat(newValue[2])
-    updatePowerChart()
-  },
-  { immediate: true, deep: true }
-)
-
-watch(
-  () => [props.temperatureData, props.isDarkMode, props.language],
-  (newValue) => {
-    dateFormat = props.getDateFormat(newValue[2])
-    updateTemperatureChart()
-  },
-  { immediate: true, deep: true }
-)
-
-const updateSelectedCountersKeys = (metricType: string): void => {
-  if (metricType === 'power') {
-    const newKeys: number[] = []
-
-    powerSelectedRowsLocal.value.forEach((item) => {
-      newKeys.push(item.id)
-    })
-    selectedPowerCountersKeys.value = newKeys
-  } else if (metricType === 'temperature') {
-    const newKeys: number[] = []
-
-    temperatureSelectedRowsLocal.value.forEach((item) => {
-      newKeys.push(item.id)
-    })
-    selectedTemperatureCountersKeys.value = newKeys
-  }
-}
-
-const tools = {
-  periodName: 'real_time',
-  view: 'power',
-  metricType: selectedMetric.value,
-  period: [],
-}
-
-const onSubmitOptions = (data: UI_I_OptionsForm): void => {
-  selectedTimespanType.value = data.periodName
-  updateSelectedCountersKeys(data.metric)
-  if (data.metric === 'power')
-    $store.dispatch(
-      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
-      data
-    )
-  if (data.metric === 'temperature')
-    $store.dispatch(
-      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
-      data
-    )
-}
-
-const getAllMetrics = (): void => {
-  $store.dispatch(
-    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
-    tools
-  )
-  $store.dispatch(
-    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
-    tools
-  )
-}
-
-const onUpdateTools = (data: UI_I_SensorsGraphPayload): void => {
-  const storageChartOptions = useLocalStorage(
-    data.view + 'ChartOptionsSensors',
-    undefined
-  )
-
-  selectedChartOptionName.value = ''
-
-  if (storageChartOptions) {
-    selectedChartOptionName.value = data.view
-  } else {
-    selectedMetric.value = 'power'
-  }
-
-  tools.periodName = data.periodName
-  tools.view = data.view
-  tools.period = data.period
-  tools.metricType = data.metricType || selectedMetric.value
-
-  getAllMetrics()
-}
-
-const onDeleteOption = (): void => {}
-</script>
-
-<style scoped lang="scss">
-.history-testimony-graph {
-  display: grid;
-  align-items: center;
-  grid-gap: 20px;
-  grid-template-columns: 1fr 1fr;
-
-  //&.medium {
-  //  grid-template-columns: 1fr;
-  //}
-  &.power {
-    grid-template-columns: 1fr 0;
-
-    & > div:nth-child(2) {
-      visibility: hidden;
-    }
-  }
-  &.temperature {
-    grid-template-columns: 0 1fr;
-
-    & > div:nth-child(1) {
-      visibility: hidden;
-    }
-  }
-
-  &__loader-block {
-    height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 300px;
-  }
-  &__empty-content {
-    height: inherit;
-  }
-}
-</style>
+<template>
+  <common-pages-hardware-health-history-testimony-tools
+    v-model:selected-view="selectedView"
+    v-model:selected-timespan-type="selectedTimespanType"
+    :selected-chart-option-name="selectedChartOptionName"
+    :is-show-chart-modal="isShowChartModal"
+    :chart-title="props.powerData?.groupName || ''"
+    :selected-metric="selectedMetric"
+    :selected-power-counters-keys="selectedPowerCountersKeys"
+    :power-selected-rows-local="powerSelectedRowsLocal"
+    :selected-temperature-counters-keys="selectedTemperatureCountersKeys"
+    :temperature-selected-rows-local="temperatureSelectedRowsLocal"
+    :units-count="unitsCount"
+    :power-counters-table-data="powerCountersTableData"
+    :temperature-counters-table-data="temperatureCountersTableData"
+    :language="props.language"
+    :custom-date-from="customDateFrom"
+    :custom-date-to="customDateTo"
+    :custom-time-from="customTimeFrom"
+    :custom-time-to="customTimeTo"
+    :start-date="props.powerData?.pointStart || 0"
+    :timespan-period-type="timespanPeriodType"
+    @power-selected-rows-local="powerSelectedRowsLocal = $event"
+    @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
+    @show-chart-modal="isShowChartModal = true"
+    @hide-chart-modal="isShowChartModal = false"
+    @update-tools="onUpdateTools"
+    @delete-option="onDeleteOption"
+    @submit-options="onSubmitOptions"
+    @update-timespan-period-type="timespanPeriodType = $event"
+  />
+  <div
+    ref="historyTestimonyGraph"
+    :class="[
+      `history-testimony-graph ${selectedView}`,
+      { medium: isMediumSizeGraphsContainer },
+    ]"
+  >
+    <div class="graph-container">
+      <common-graph
+        v-if="powerDataLocal && !props.powerLoading"
+        :data="powerDataLocal"
+        :update="updatePowerHelper"
+        :chart="powerChart"
+        :selected-row="selectedRowPower"
+      />
+      <div
+        v-else-if="props.powerLoading"
+        class="history-testimony-graph__loader-block"
+      >
+        <div class="spinner"></div>
+      </div>
+      <div v-else class="history-testimony-graph__empty-content"></div>
+    </div>
+    <div class="graph-container">
+      <common-graph
+        v-if="temperatureDataLocal && !props.temperatureLoading"
+        :data="temperatureDataLocal"
+        :update="updateTemperatureHelper"
+        :chart="temperatureChart"
+        :selected-row="selectedRowTemperature"
+      />
+      <div
+        v-else-if="props.temperatureLoading"
+        class="history-testimony-graph__loader-block"
+      >
+        <div class="spinner"></div>
+      </div>
+      <div v-else class="history-testimony-graph__empty-content"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { format } from 'date-fns'
+import type {
+  I_SeriesLine,
+  I_LineGraph,
+} from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import { graphDataFunc } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/utils/renderGraph'
+import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
+import { containerMediumSize } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/config/containerSizes'
+
+const props = defineProps<{
+  powerData: I_SeriesLine | null
+  temperatureData: I_SeriesLine | null
+  countersTableData: UI_I_HardwareHealthSensors[]
+  language: string
+  powerLoading: boolean
+  temperatureLoading: boolean
+  formattedDatetime: any
+  isDarkMode: boolean
+  getDateFormat: any
+  mainSelectedRow: number[]
+}>()
+const selectedView = defineModel<string>('selectedView')
+
+const { $store }: any = useNuxtApp()
+
+const historyTestimonyGraph = ref<any>(null)
+const { width } = useElementSize(historyTestimonyGraph)
+const isMediumSizeGraphsContainer = computed<boolean>(
+  () => width.value < containerMediumSize
+)
+
+// const historyTestimonyGraph = ref(null)
+// const contentWidth = ref<number>(
+//   useElementSize(historyTestimonyGraph)?.width || 0
+// )
+// watch(contentWidth, (newValue) => {
+//   if (newValue) {
+//     updatePowerChart()
+//     updateTemperatureChart()
+//   }
+//   if (!powerChart.value || !temperatureChart.value) return
+//
+//   powerChart.value.setSize(1, powerChart.chartHeight)
+//   temperatureChart.value.setSize(1, temperatureChart.chartHeight)
+//
+//   setTimeout(() => {
+//     powerChart.value.setSize(newValue, powerChart.chartHeight)
+//     temperatureChart.value.setSize(newValue, temperatureChart.chartHeight)
+//   }, 1000)
+// })
+// const isContentMediumSize = computed<boolean>(() => contentWidth.value <= 1200)
+
+const selectedChartOptionName = ref<string>('')
+const isShowChartModal = ref<boolean>(false)
+const selectedMetric = ref<UI_T_Chart>('power')
+const selectedPowerCountersKeys = ref<number[]>([])
+const selectedTemperatureCountersKeys = ref<number[]>([])
+const selectedTimespanType = ref<string>('')
+const customDateFrom = ref<string>('')
+const customDateTo = ref<string>('')
+const customTimeFrom = ref<string>('')
+const customTimeTo = ref<string>('')
+
+const selectedRowPower = ref<number[]>([])
+const selectedRowTemperature = ref<number[]>([])
+let powerCounters: UI_I_HardwareHealthSensors[] = []
+let temperatureCounters: UI_I_HardwareHealthSensors[] = []
+const updateAllSelectedSelectedRow = (): void => {
+  selectedRowPower.value = []
+  selectedRowTemperature.value = []
+
+  if (!props.mainSelectedRow.length) return
+
+  props.mainSelectedRow.forEach((key) => {
+    const selectedItem = props.countersTableData[key]
+    const category = selectedItem.category.toLowerCase()
+
+    if (category === 'power') {
+      const currentKey = powerCounters.findIndex(
+        (item) => item.id === selectedItem.id
+      )
+      selectedRowPower.value.push(currentKey)
+    } else if (category === 'temperature') {
+      const currentKey = temperatureCounters.findIndex(
+        (item) => item.id === selectedItem.id
+      )
+      selectedRowTemperature.value.push(currentKey)
+    }
+  })
+}
+watch(
+  () => props.countersTableData,
+  (newValue) => {
+    powerCounters = newValue.filter(
+      (item) => item.category.toLowerCase() === 'power'
+    )
+    temperatureCounters = newValue.filter(
+      (item) => item.category.toLowerCase() === 'temperature'
+    )
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.mainSelectedRow,
+  () => {
+    updateAllSelectedSelectedRow()
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  selectedView,
+  () => {
+    updateAllSelectedSelectedRow()
+  },
+  { deep: true }
+)
+
+const unitsCount = ref<number>(0)
+const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const powerSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+
+watch(
+  () => props.countersTableData,
+  (newValue) => {
+    if (!newValue.length) return
+
+    powerCountersTableData.value = []
+    temperatureCountersTableData.value = []
+
+    newValue.forEach((item, key) => {
+      const newData: UI_I_HardwareHealthSensorsGraph = {
+        id: key,
+        name: item.name,
+        description: item.category,
+        measurement: '',
+        units: '',
+        nameEn: item.mainName || '',
+        testId: `counters-table-${item.name}-item`,
+        hidden: item.hidden,
+      }
+      if (item.category.toLowerCase() === 'power')
+        powerCountersTableData.value.push(newData)
+      else if (item.category.toLowerCase() === 'temperature')
+        temperatureCountersTableData.value.push(newData)
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const selectAllCounters = (): void => {
+  if (!powerCountersTableData.value)
+    setTimeout(() => {
+      selectAllCounters()
+    }, 2000)
+  else {
+    powerCountersTableData.value.forEach((item) => {
+      selectedPowerCountersKeys.value.push(item.id)
+    })
+    temperatureCountersTableData.value.forEach((item) => {
+      if (!item.hidden) selectedTemperatureCountersKeys.value.push(item.id)
+    })
+  }
+}
+
+onMounted(() => {
+  selectAllCounters()
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const powerDataLocal = ref<I_LineGraph | null>(null)
+const temperatureDataLocal = ref<I_LineGraph | null>(null)
+const updatePowerHelper = ref<number>(0)
+const updateTemperatureHelper = ref<number>(0)
+let dateFormat = ''
+const powerChart = ref<any>(null)
+const temperatureChart = ref<any>(null)
+const timespanPeriodType = ref<string>('last')
+
+const powerChartCallback = (newValue: any): void => {
+  newValue && (powerChart.value = newValue)
+}
+
+const temperatureChartCallback = (newValue: any): void => {
+  newValue && (temperatureChart.value = newValue)
+}
+
+const updatePowerChart = (): void => {
+  if (!props.powerData) return
+
+  powerDataLocal.value = graphDataFunc(
+    props.powerData,
+    props.isDarkMode,
+    localization.value,
+    () => {},
+    false,
+    false,
+    true,
+    'spline',
+    '',
+    undefined,
+    powerChartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  updatePowerHelper.value++
+}
+
+const updateTemperatureChart = (): void => {
+  if (!props.temperatureData) return
+
+  temperatureDataLocal.value = graphDataFunc(
+    props.temperatureData,
+    props.isDarkMode,
+    localization.value,
+    () => {},
+    false,
+    false,
+    true,
+    'spline',
+    '',
+    undefined,
+    temperatureChartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  updateTemperatureHelper.value++
+}
+
+watch(
+  () => [props.powerData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updatePowerChart()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => [props.temperatureData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updateTemperatureChart()
+  },
+  { immediate: true, deep: true }
+)
+
+const updateSelectedCountersKeys = (metricType: string): void => {
+  if (metricType === 'power') {
+    const newKeys: number[] = []
+
+    powerSelectedRowsLocal.value.forEach((item) => {
+      newKeys.push(item.id)
+    })
+    selectedPowerCountersKeys.value = newKeys
+  } else if (metricType === 'temperature') {
+    const newKeys: number[] = []
+
+    temperatureSelectedRowsLocal.value.forEach((item) => {
+      newKeys.push(item.id)
+    })
+    selectedTemperatureCountersKeys.value = newKeys
+  }
+}
+
+const tools = {
+  periodName: 'real_time',
+  view: 'power',
+  metricType: selectedMetric.value,
+  period: [],
+}
+
+const onSubmitOptions = (data: UI_I_OptionsForm): void => {
+  selectedTimespanType.value = data.periodName
+  updateSelectedCountersKeys(data.metric)
+  if (data.metric === 'power')
+    $store.dispatch(
+      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
+      data
+    )
+  if (data.metric === 'temperature')
+    $store.dispatch(
+      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
+      data
+    )
+}
+
+const getAllMetrics = (): void => {
+  $store.dispatch(
+    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
+    tools
+  )
+  $store.dispatch(
+    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
+    tools
+  )
+}
+
+const onUpdateTools = (data: UI_I_SensorsGraphPayload): void => {
+  const storageChartOptions = useLocalStorage(
+    data.view + 'ChartOptionsSensors',
+    undefined
+  )
+
+  selectedChartOptionName.value = ''
+
+  if (storageChartOptions) {
+    selectedChartOptionName.value = data.view
+  } else {
+    selectedMetric.value = 'power'
+  }
+
+  tools.periodName = data.periodName
+  tools.view = data.view
+  tools.period = data.period
+  tools.metricType = data.metricType || selectedMetric.value
+
+  getAllMetrics()
+}
+
+const onDeleteOption = (): void => {}
+</script>
+
+<style scoped lang="scss">
+.history-testimony-graph {
+  display: flex;
+  align-items: center;
+  grid-gap: 20px;
+
+  &.medium {
+    flex-direction: column;
+
+    .graph-container {
+      width: 100%;
+    }
+  }
+  .graph-container {
+    width: calc(50% - 10px);
+  }
+  &.power {
+    & > div:nth-child(1) {
+      width: 100%;
+    }
+    & > div:nth-child(2) {
+      display: none;
+      width: 0;
+    }
+  }
+  &.temperature {
+    & > div:nth-child(1) {
+      display: none;
+      width: 0;
+    }
+    & > div:nth-child(2) {
+      width: 100%;
+    }
+  }
+
+  &__loader-block {
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+  }
+  &__empty-content {
+    height: inherit;
+  }
+}
+</style>