bfg-common 1.5.419 → 1.5.421

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -1,502 +1,502 @@
-<template>
-  <div class="chart-options-modal">
-    <atoms-modal
-      :title="localization.inventoryMonitor.chartOptions"
-      :disabled-submit="isDisabledSubmit"
-      width="1150px"
-      show
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <common-monitor-advanced-tools-chart-options-modal-notification
-          v-show="isShowAlerts"
-          :alerts="alerts"
-          @remove="onRemoveAlerts"
-        />
-        <div>
-          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
-            :is-disabled-save="!currentSelectedRows.length"
-            :options-names="optionsNames"
-            :selected-chart-option-name="localSelectedChartOptionName"
-            @save="onSaveOptions"
-            @check-validation="checkValidations"
-            @select-local-option-name="onSelectLocalOptionName"
-            @delete-chart-name="onDeleteChartName"
-          />
-
-          <div class="horizontal-flex-container chart-options-content">
-            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
-              v-model:selected-metric="selectedMetric"
-              :metrics-items="metricsItems"
-            />
-            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
-              :chart="selectedMetric"
-              :selected-power-keys="localSelectedPowerCountersKeys"
-              :selected-temperature-keys="localSelectedTemperatureCountersKeys"
-              :power-counters-table-data="props.powerCountersTableData"
-              :temperature-counters-table-data="
-                props.temperatureCountersTableData
-              "
-              :language="props.language"
-              :selected-chart-type="localSelectedChartType"
-              :selected-timespan-type="localSelectedTimespanType"
-              :units-count="localUnitsCount"
-              :period-type="localTimespanPeriodType"
-              :selected-custom-time="localCustomTime"
-              :custom-date-from="props.customDateFrom"
-              :custom-date-to="props.customDateTo"
-              :custom-time-from="props.customTimeFrom"
-              :custom-time-to="props.customTimeTo"
-              :valid-date-end="props.validDateEnd"
-              @select-power-row="onSelectPowerRow"
-              @select-temperature-row="onSelectTemperatureRow"
-              @update-chart-type="selectedChartTypeLocal = $event"
-              @update-custom-time="localCustomTime = $event"
-              @update-timespan-type="timespanType = $event"
-              @update-unit-count="unitCount = $event"
-              @update-period-type="localTimespanPeriodType = $event"
-              @update-custom-date-from="onUpdateCustomDateFrom"
-              @update-custom-date-to="onUpdateCustomDateTo"
-              @update-custom-time-from="onUpdateCustomTimeFrom"
-              @update-custom-time-to="onUpdateCustomTimeTo"
-            />
-          </div>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
-import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import { metricsFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/config/optionsMetrics'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
-
-const props = defineProps<{
-  selectedChartOptionName: string
-  selectedMetric: UI_T_Chart
-  selectedChartType: string
-  selectedPowerCountersKeys: number[]
-  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
-  selectedTemperatureCountersKeys: number[]
-  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
-  unitsCount: number
-  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  language: string
-  selectedTimespanType: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  timespanPeriodType: string
-  validDateEnd: number
-  formatDate: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'select-metric-local', value: string): void
-  (
-    event: 'power-selected-rows-local',
-    value: UI_I_HardwareHealthSensorsGraph[]
-  ): void
-  (
-    event: 'temperature-selected-rows-local',
-    value: UI_I_HardwareHealthSensorsGraph[]
-  ): void
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'delete-option'): void
-  (event: 'save-option-name'): void
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-}>()
-
-const routeType = '' + useRoute().params.type
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localCustomDateFrom = ref<string>('')
-const onUpdateCustomDateFrom = (value: string): void => {
-  localCustomDateFrom.value = value
-}
-const localCustomDateTo = ref<string>('')
-const onUpdateCustomDateTo = (value: string): void => {
-  localCustomDateTo.value = value
-}
-const localCustomTimeFrom = ref<string>('')
-const onUpdateCustomTimeFrom = (value: string): void => {
-  localCustomTimeFrom.value = value
-}
-const localCustomTimeTo = ref<string>('')
-const onUpdateCustomTimeTo = (value: string): void => {
-  localCustomTimeTo.value = value
-}
-
-const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
-  metricsFunc(localization.value)
-)
-const selectedMetric = ref<UI_T_Chart>(
-  props.selectedMetric || '' + metricsItems.value[0]?.value
-)
-
-const localSelectedPowerCountersKeys = ref<number[]>([])
-watch(
-  () => props.selectedPowerCountersKeys,
-  (newValue) => {
-    localSelectedPowerCountersKeys.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-
-const localSelectedTemperatureCountersKeys = ref<number[]>([])
-watch(
-  () => props.selectedTemperatureCountersKeys,
-  (newValue) => {
-    localSelectedTemperatureCountersKeys.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-
-const localSelectedChartType = ref<string>('')
-watch(
-  () => props.selectedChartType,
-  (newValue) => {
-    localSelectedChartType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localSelectedTimespanType = ref<string>('')
-watch(
-  () => props.selectedTimespanType,
-  (newValue) => {
-    localSelectedTimespanType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localUnitsCount = ref<number>(0)
-watch(
-  () => props.unitsCount,
-  (newValue) => {
-    localUnitsCount.value = newValue
-  },
-  { immediate: true }
-)
-
-const localTimespanPeriodType = ref<string>('')
-watch(
-  () => props.timespanPeriodType,
-  (newValue) => {
-    localTimespanPeriodType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localCustomTime = ref<string>('')
-
-const isShowAlerts = ref<boolean>(false)
-const alerts = ref<string[]>([])
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-
-const onSelectPowerRow = (data: UI_I_HardwareHealthSensorsGraph[]): void => {
-  emits('power-selected-rows-local', data)
-}
-const onSelectTemperatureRow = (
-  data: UI_I_HardwareHealthSensorsGraph[]
-): void => {
-  emits('temperature-selected-rows-local', data)
-}
-
-const currentSelectedRows = computed<UI_I_HardwareHealthSensorsGraph[]>(() => {
-  let result: UI_I_HardwareHealthSensorsGraph[] = []
-
-  switch (selectedMetric.value) {
-    case 'power':
-      result = props.powerSelectedRowsLocal
-      break
-    case 'temperature':
-      result = props.temperatureSelectedRowsLocal
-      break
-  }
-
-  return result
-})
-
-const selectedChartTypeLocal = ref<string>('')
-
-const checkValidations = (): boolean => {
-  const checkDateResult = checkDateFunc(
-    localization.value,
-    localCustomDateFrom.value,
-    localCustomDateTo.value,
-    localCustomTimeFrom.value,
-    localCustomTimeTo.value,
-    props.validDateEnd,
-    props.formatDate
-  )
-
-  if (isDisabledSubmit.value) {
-    alerts.value = [localization.value.inventoryMonitor.noCountersSelected]
-    isShowAlerts.value = true
-    return false
-  } else if (
-    timespanType.value === 'custom_interval' &&
-    localTimespanPeriodType.value === 'period' &&
-    checkDateResult !== '' &&
-    typeof checkDateResult === 'string'
-  ) {
-    alerts.value = [checkDateResult]
-    isShowAlerts.value = true
-    return false
-  }
-
-  return true
-}
-
-const localSelectedChartOptionName = ref<string>('')
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOptionName.value = newValue
-  },
-  { immediate: true }
-)
-
-const selectedLocalOptionName = ref<string>('')
-
-const currentFieldsByArray = (
-  data: UI_I_HardwareHealthSensorsGraph[]
-): string => {
-  const result: string[] = []
-  data.forEach((item) => {
-    result.push(item.nameEn)
-  })
-  return result.join('>>')
-}
-
-const onSubmit = (): void => {
-  if (!checkValidations()) return
-
-  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
-    selectedLocalOptionName.value = 'custom'
-
-  onSaveOptions(selectedLocalOptionName.value)
-
-  const currentFields = currentFieldsByArray(currentSelectedRows.value)
-
-  const validPeriod = getValidDateByOptionFunc(
-    timespanType.value,
-    null,
-    unitCount.value,
-    localCustomTime.value
-  )
-  if (
-    timespanType.value === 'custom_interval' &&
-    localTimespanPeriodType.value === 'period'
-  ) {
-    const checkDateResult = checkDateFunc(
-      localization.value,
-      localCustomDateFrom.value,
-      localCustomDateTo.value,
-      localCustomTimeFrom.value,
-      localCustomTimeTo.value,
-      props.validDateEnd,
-      props.formatDate
-    )
-    if (Array.isArray(checkDateResult)) {
-      validPeriod[0] = checkDateResult[0]
-      validPeriod[1] = checkDateResult[1]
-    }
-  }
-
-  const savedObject = {
-    fields: currentFields,
-    optionName: selectedLocalOptionName.value,
-    metric: selectedMetric.value,
-    periodName: timespanType.value,
-    periodType: localTimespanPeriodType.value,
-    unitCount: unitCount.value,
-    localTimespanType: localCustomTime.value,
-    dateFrom: localCustomDateFrom.value,
-    timeFrom: localCustomTimeFrom.value,
-    dateTo: localCustomDateTo.value,
-    timeTo: localCustomTimeTo.value,
-    chartType: selectedChartTypeLocal.value,
-    period: validPeriod,
-  }
-
-  emits('update-period-type', savedObject.periodType)
-  emits('submit-options', savedObject)
-  onHide()
-}
-
-const timespanType = ref<string>('')
-const unitCount = ref<number>(1)
-
-const optionsNames = ref<string[]>([])
-
-const onSaveOptions = (name: string): void => {
-  const counters = currentSelectedRows.value.map((item) => {
-    return {
-      id: item.id,
-      name: item.nameEn,
-    }
-  })
-  let chartType = 'line_graph'
-  if (selectedChartTypeLocal.value === 'spline') chartType = 'line_graph'
-  else if (selectedChartTypeLocal.value === 'area') chartType = 'stacked_graph'
-
-  const saveOptionsData = {
-    routeType,
-    chartType,
-    counters,
-    metric: selectedMetric.value,
-    timespan: {
-      periodType: localTimespanPeriodType.value,
-      units: localCustomTime.value,
-      unitsCount: unitCount.value,
-      type: timespanType.value,
-    },
-  }
-  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  localSelectedChartOptionName.value = name
-  emits('save-option-name')
-}
-
-const setSelectOptions = (): void => {
-  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
-}
-
-const setDefaultOptions = (): void => {
-  selectedMetric.value = metricsItems.value[0]?.value
-  localSelectedPowerCountersKeys.value = []
-  localSelectedTemperatureCountersKeys.value = []
-  localSelectedChartType.value = 'spline'
-  localSelectedTimespanType.value = ''
-  localUnitsCount.value = 0
-  localTimespanPeriodType.value = ''
-  localCustomTime.value = ''
-}
-
-const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
-
-  if (selectedValue.routeType !== routeType) return
-
-  let currentChartType = ''
-  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
-  else if (selectedValue.chartType === 'stacked_graph')
-    currentChartType = 'area'
-
-  selectedMetric.value = selectedValue.metric
-  if (selectedMetric.value === 'power')
-    localSelectedPowerCountersKeys.value = selectedValue.counters.map(
-      (item) => item.id
-    )
-  if (selectedMetric.value === 'temperature')
-    localSelectedTemperatureCountersKeys.value = selectedValue.counters.map(
-      (item) => item.id
-    )
-  localSelectedChartType.value = currentChartType
-  localSelectedTimespanType.value = selectedValue.timespan.type
-  localUnitsCount.value = selectedValue.timespan.unitsCount
-  localTimespanPeriodType.value = selectedValue.timespan.periodType
-  localCustomTime.value = selectedValue.timespan.units
-}
-
-const onSelectLocalOptionName = (name: string): void => {
-  selectedLocalOptionName.value = name
-
-  if (optionsNames.value.includes(name)) setCustomOptions(name)
-  else if (name === 'default') setDefaultOptions()
-  else if (name === 'select_options') setSelectOptions()
-}
-
-watch(
-  localSelectedChartOptionName,
-  (newValue) => {
-    if (!newValue) return
-
-    setCustomOptions(newValue)
-  },
-  { immediate: true }
-)
-
-const onDeleteChartName = (name: string): void => {
-  window.localStorage.removeItem(name + 'ChartOptionsSensors')
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  setSelectOptions()
-  emits('delete-option')
-}
-
-const isDisabledSubmit = computed<boolean>(
-  () => !currentSelectedRows.value.length
-)
-
-watch(
-  selectedMetric,
-  (newValue) => {
-    emits('select-metric-local', newValue)
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
-})
-</script>
-
-<style scoped lang="scss">
-.chart-options-modal {
-  .loader-on :deep(.modal-body) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  :deep(.modal-title) {
-    text-transform: capitalize;
-  }
-
-  #loader {
-    min-height: 90px;
-    text-align: center;
-  }
-
-  .chart-options-content {
-    display: flex;
-    flex-direction: row;
-    flex-basis: 90%;
-    overflow-y: hidden;
-  }
-}
-@media (max-width: 1024px) {
-  .chart-options-content {
-    flex-direction: column !important;
-  }
-}
-</style>
+<template>
+  <div class="chart-options-modal">
+    <atoms-modal
+      :title="localization.inventoryMonitor.chartOptions"
+      :disabled-submit="isDisabledSubmit"
+      width="1150px"
+      show
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <common-monitor-advanced-tools-chart-options-modal-notification
+          v-show="isShowAlerts"
+          :alerts="alerts"
+          @remove="onRemoveAlerts"
+        />
+        <div>
+          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
+            :is-disabled-save="!currentSelectedRows.length"
+            :options-names="optionsNames"
+            :selected-chart-option-name="localSelectedChartOptionName"
+            @save="onSaveOptions"
+            @check-validation="checkValidations"
+            @select-local-option-name="onSelectLocalOptionName"
+            @delete-chart-name="onDeleteChartName"
+          />
+
+          <div class="horizontal-flex-container chart-options-content">
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
+              v-model:selected-metric="selectedMetric"
+              :metrics-items="metricsItems"
+            />
+            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
+              :chart="selectedMetric"
+              :selected-power-keys="localSelectedPowerCountersKeys"
+              :selected-temperature-keys="localSelectedTemperatureCountersKeys"
+              :power-counters-table-data="props.powerCountersTableData"
+              :temperature-counters-table-data="
+                props.temperatureCountersTableData
+              "
+              :language="props.language"
+              :selected-chart-type="localSelectedChartType"
+              :selected-timespan-type="localSelectedTimespanType"
+              :units-count="localUnitsCount"
+              :period-type="localTimespanPeriodType"
+              :selected-custom-time="localCustomTime"
+              :custom-date-from="props.customDateFrom"
+              :custom-date-to="props.customDateTo"
+              :custom-time-from="props.customTimeFrom"
+              :custom-time-to="props.customTimeTo"
+              :valid-date-end="props.validDateEnd"
+              @select-power-row="onSelectPowerRow"
+              @select-temperature-row="onSelectTemperatureRow"
+              @update-chart-type="selectedChartTypeLocal = $event"
+              @update-custom-time="localCustomTime = $event"
+              @update-timespan-type="timespanType = $event"
+              @update-unit-count="unitCount = $event"
+              @update-period-type="localTimespanPeriodType = $event"
+              @update-custom-date-from="onUpdateCustomDateFrom"
+              @update-custom-date-to="onUpdateCustomDateTo"
+              @update-custom-time-from="onUpdateCustomTimeFrom"
+              @update-custom-time-to="onUpdateCustomTimeTo"
+            />
+          </div>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import { metricsFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/config/optionsMetrics'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
+import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+
+const props = defineProps<{
+  selectedChartOptionName: string
+  selectedMetric: UI_T_Chart
+  selectedChartType: string
+  selectedPowerCountersKeys: number[]
+  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  selectedTemperatureCountersKeys: number[]
+  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  unitsCount: number
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedTimespanType: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  timespanPeriodType: string
+  validDateEnd: number
+  formatDate: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'select-metric-local', value: string): void
+  (
+    event: 'power-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (
+    event: 'temperature-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'delete-option'): void
+  (event: 'save-option-name'): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+}>()
+
+const routeType = '' + useRoute().params.type
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localCustomDateFrom = ref<string>('')
+const onUpdateCustomDateFrom = (value: string): void => {
+  localCustomDateFrom.value = value
+}
+const localCustomDateTo = ref<string>('')
+const onUpdateCustomDateTo = (value: string): void => {
+  localCustomDateTo.value = value
+}
+const localCustomTimeFrom = ref<string>('')
+const onUpdateCustomTimeFrom = (value: string): void => {
+  localCustomTimeFrom.value = value
+}
+const localCustomTimeTo = ref<string>('')
+const onUpdateCustomTimeTo = (value: string): void => {
+  localCustomTimeTo.value = value
+}
+
+const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
+  metricsFunc(localization.value)
+)
+const selectedMetric = ref<UI_T_Chart>(
+  props.selectedMetric || '' + metricsItems.value[0]?.value
+)
+
+const localSelectedPowerCountersKeys = ref<number[]>([])
+watch(
+  () => props.selectedPowerCountersKeys,
+  (newValue) => {
+    localSelectedPowerCountersKeys.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+const localSelectedTemperatureCountersKeys = ref<number[]>([])
+watch(
+  () => props.selectedTemperatureCountersKeys,
+  (newValue) => {
+    localSelectedTemperatureCountersKeys.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+const localSelectedChartType = ref<string>('')
+watch(
+  () => props.selectedChartType,
+  (newValue) => {
+    localSelectedChartType.value = newValue
+  },
+  { immediate: true }
+)
+
+const localSelectedTimespanType = ref<string>('')
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespanType.value = newValue
+  },
+  { immediate: true }
+)
+
+const localUnitsCount = ref<number>(0)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localUnitsCount.value = newValue
+  },
+  { immediate: true }
+)
+
+const localTimespanPeriodType = ref<string>('')
+watch(
+  () => props.timespanPeriodType,
+  (newValue) => {
+    localTimespanPeriodType.value = newValue
+  },
+  { immediate: true }
+)
+
+const localCustomTime = ref<string>('')
+
+const isShowAlerts = ref<boolean>(false)
+const alerts = ref<string[]>([])
+
+const onRemoveAlerts = (): void => {
+  isShowAlerts.value = false
+  alerts.value = []
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const onSelectPowerRow = (data: UI_I_HardwareHealthSensorsGraph[]): void => {
+  emits('power-selected-rows-local', data)
+}
+const onSelectTemperatureRow = (
+  data: UI_I_HardwareHealthSensorsGraph[]
+): void => {
+  emits('temperature-selected-rows-local', data)
+}
+
+const currentSelectedRows = computed<UI_I_HardwareHealthSensorsGraph[]>(() => {
+  let result: UI_I_HardwareHealthSensorsGraph[] = []
+
+  switch (selectedMetric.value) {
+    case 'power':
+      result = props.powerSelectedRowsLocal
+      break
+    case 'temperature':
+      result = props.temperatureSelectedRowsLocal
+      break
+  }
+
+  return result
+})
+
+const selectedChartTypeLocal = ref<string>('')
+
+const checkValidations = (): boolean => {
+  const checkDateResult = checkDateFunc(
+    localization.value,
+    localCustomDateFrom.value,
+    localCustomDateTo.value,
+    localCustomTimeFrom.value,
+    localCustomTimeTo.value,
+    props.validDateEnd,
+    props.formatDate
+  )
+
+  if (isDisabledSubmit.value) {
+    alerts.value = [localization.value.inventoryMonitor.noCountersSelected]
+    isShowAlerts.value = true
+    return false
+  } else if (
+    timespanType.value === 'custom_interval' &&
+    localTimespanPeriodType.value === 'period' &&
+    checkDateResult !== '' &&
+    typeof checkDateResult === 'string'
+  ) {
+    alerts.value = [checkDateResult]
+    isShowAlerts.value = true
+    return false
+  }
+
+  return true
+}
+
+const localSelectedChartOptionName = ref<string>('')
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    localSelectedChartOptionName.value = newValue
+  },
+  { immediate: true }
+)
+
+const selectedLocalOptionName = ref<string>('')
+
+const currentFieldsByArray = (
+  data: UI_I_HardwareHealthSensorsGraph[]
+): string => {
+  const result: string[] = []
+  data.forEach((item) => {
+    result.push(item.nameEn)
+  })
+  return result.join('>>')
+}
+
+const onSubmit = (): void => {
+  if (!checkValidations()) return
+
+  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
+    selectedLocalOptionName.value = 'custom'
+
+  onSaveOptions(selectedLocalOptionName.value)
+
+  const currentFields = currentFieldsByArray(currentSelectedRows.value)
+
+  const validPeriod = getValidDateByOptionFunc(
+    timespanType.value,
+    null,
+    unitCount.value,
+    localCustomTime.value
+  )
+  if (
+    timespanType.value === 'custom_interval' &&
+    localTimespanPeriodType.value === 'period'
+  ) {
+    const checkDateResult = checkDateFunc(
+      localization.value,
+      localCustomDateFrom.value,
+      localCustomDateTo.value,
+      localCustomTimeFrom.value,
+      localCustomTimeTo.value,
+      props.validDateEnd,
+      props.formatDate
+    )
+    if (Array.isArray(checkDateResult)) {
+      validPeriod[0] = checkDateResult[0]
+      validPeriod[1] = checkDateResult[1]
+    }
+  }
+
+  const savedObject = {
+    fields: currentFields,
+    optionName: selectedLocalOptionName.value,
+    metric: selectedMetric.value,
+    periodName: timespanType.value,
+    periodType: localTimespanPeriodType.value,
+    unitCount: unitCount.value,
+    localTimespanType: localCustomTime.value,
+    dateFrom: localCustomDateFrom.value,
+    timeFrom: localCustomTimeFrom.value,
+    dateTo: localCustomDateTo.value,
+    timeTo: localCustomTimeTo.value,
+    chartType: selectedChartTypeLocal.value,
+    period: validPeriod,
+  }
+
+  emits('update-period-type', savedObject.periodType)
+  emits('submit-options', savedObject)
+  onHide()
+}
+
+const timespanType = ref<string>('')
+const unitCount = ref<number>(1)
+
+const optionsNames = ref<string[]>([])
+
+const onSaveOptions = (name: string): void => {
+  const counters = currentSelectedRows.value.map((item) => {
+    return {
+      id: item.id,
+      name: item.nameEn,
+    }
+  })
+  let chartType = 'line_graph'
+  if (selectedChartTypeLocal.value === 'spline') chartType = 'line_graph'
+  else if (selectedChartTypeLocal.value === 'area') chartType = 'stacked_graph'
+
+  const saveOptionsData = {
+    routeType,
+    chartType,
+    counters,
+    metric: selectedMetric.value,
+    timespan: {
+      periodType: localTimespanPeriodType.value,
+      units: localCustomTime.value,
+      unitsCount: unitCount.value,
+      type: timespanType.value,
+    },
+  }
+  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  localSelectedChartOptionName.value = name
+  emits('save-option-name')
+}
+
+const setSelectOptions = (): void => {
+  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
+}
+
+const setDefaultOptions = (): void => {
+  selectedMetric.value = metricsItems.value[0]?.value
+  localSelectedPowerCountersKeys.value = []
+  localSelectedTemperatureCountersKeys.value = []
+  localSelectedChartType.value = 'spline'
+  localSelectedTimespanType.value = ''
+  localUnitsCount.value = 0
+  localTimespanPeriodType.value = ''
+  localCustomTime.value = ''
+}
+
+const setCustomOptions = (name: string): void => {
+  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
+
+  if (selectedValue.routeType !== routeType) return
+
+  let currentChartType = ''
+  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
+  else if (selectedValue.chartType === 'stacked_graph')
+    currentChartType = 'area'
+
+  selectedMetric.value = selectedValue.metric
+  if (selectedMetric.value === 'power')
+    localSelectedPowerCountersKeys.value = selectedValue.counters.map(
+      (item) => item.id
+    )
+  if (selectedMetric.value === 'temperature')
+    localSelectedTemperatureCountersKeys.value = selectedValue.counters.map(
+      (item) => item.id
+    )
+  localSelectedChartType.value = currentChartType
+  localSelectedTimespanType.value = selectedValue.timespan.type
+  localUnitsCount.value = selectedValue.timespan.unitsCount
+  localTimespanPeriodType.value = selectedValue.timespan.periodType
+  localCustomTime.value = selectedValue.timespan.units
+}
+
+const onSelectLocalOptionName = (name: string): void => {
+  selectedLocalOptionName.value = name
+
+  if (optionsNames.value.includes(name)) setCustomOptions(name)
+  else if (name === 'default') setDefaultOptions()
+  else if (name === 'select_options') setSelectOptions()
+}
+
+watch(
+  localSelectedChartOptionName,
+  (newValue) => {
+    if (!newValue) return
+
+    setCustomOptions(newValue)
+  },
+  { immediate: true }
+)
+
+const onDeleteChartName = (name: string): void => {
+  window.localStorage.removeItem(name + 'ChartOptionsSensors')
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  setSelectOptions()
+  emits('delete-option')
+}
+
+const isDisabledSubmit = computed<boolean>(
+  () => !currentSelectedRows.value.length
+)
+
+watch(
+  selectedMetric,
+  (newValue) => {
+    emits('select-metric-local', newValue)
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+})
+</script>
+
+<style scoped lang="scss">
+.chart-options-modal {
+  .loader-on :deep(.modal-body) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.modal-title) {
+    text-transform: capitalize;
+  }
+
+  #loader {
+    min-height: 90px;
+    text-align: center;
+  }
+
+  .chart-options-content {
+    display: flex;
+    flex-direction: row;
+    flex-basis: 90%;
+    overflow-y: hidden;
+  }
+}
+@media (max-width: 1024px) {
+  .chart-options-content {
+    flex-direction: column !important;
+  }
+}
+</style>