bfg-common 1.4.861 → 1.4.862

package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalNew.vue

@@ -1,181 +1,186 @@
-<template>
-  <ui-modal
-    show
-    :title="titleLocal"
-    :subtitle="props.selectedItemName"
-    :texts="modalTexts"
-    test-id="overview-custom-interval-modal"
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #content>
-      <div class="time-range">
-        <ui-alert
-          v-show="alertShow"
-          status="alert-danger"
-          :messages="props.alertItems"
-          class="overview-alert"
-          test-id="overview-alert"
-          @remove="alertShow = false"
-        />
-
-        <p class="date-time-format-description">
-          {{ localization.inventoryMonitor.dateTimeIsoFormat }}
-        </p>
-
-        <div class="filed-wrap from">
-          <lable for="date-from" class="filed-lable">{{
-            localization.common.from
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-from"
-            v-model="currentDateFromLocal"
-            test-id="date-from"
-            format="mm-dd-yyyy"
-            time-format="12"
-          />
-        </div>
-
-        <div class="filed-wrap">
-          <lable for="date-to" class="filed-lable">{{
-            localization.common.to
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-to"
-            v-model="currentDateToLocal"
-            test-id="date-to"
-            format="mm-dd-yyyy"
-            time-format="12"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #footerLeftContent><span></span></template>
-  </ui-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
-
-const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<string>('current-date-from')
-// const dateFrom = defineModel<string>('date-from')
-const currentTimeFrom = defineModel<string>('current-time-from')
-const currentDateTo = defineModel<string>('current-date-to')
-// const dateTo = defineModel<string>('date-to')
-const currentTimeTo = defineModel<string>('current-time-to')
-
-const props = defineProps<{
-  titleIntervalModal: string
-  selectedItemName: string
-  currentLang: string
-  alertItems: any[]
-  formatDate: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-  (event: 'update-date-from', value: any): void
-  (event: 'update-date-to', value: any): void
-}>()
-
-const { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const titleLocal = computed<string>(() =>
-  props.titleIntervalModal.replace(':', '')
-)
-const modalTexts = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.save,
-}))
-
-const currentDateFromLocal = computed<number>({
-  get() {
-    // console.log(currentDateFrom.value, 11111, currentTimeFrom.value)
-    // TODO fix PM
-    return $isDate(currentDateFrom.value)
-      ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
-      : 0
-  },
-  set(newValue) {
-    // console.log($formattedDate(new Date(newValue), props.formatDate), 22222)
-    // console.log($formattedTime(newValue, '', true), 33333)
-    currentDateFrom.value = $formattedDate(new Date(newValue), props.formatDate)
-    currentTimeFrom.value = $formattedTime(newValue, '', true)
-  },
-})
-const currentDateToLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    return $isDate(currentDateTo.value)
-      ? $getUnixByDate(currentDateTo.value + ' ' + currentTimeTo.value)
-      : 0
-  },
-  set(newValue) {
-    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
-    currentTimeTo.value = $formattedTime(newValue, '', true)
-  },
-})
-
-// const onUpdateDateFrom = (event: any): void => {
-//   emits('update-date-from', event)
-// }
-// const onUpdateDateTo = (event: any): void => {
-//   emits('update-date-to', event)
-// }
-
-const onSubmit = (): void => {
-  emits('submit')
-}
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style>
-:root {
-  --overview-time-range-lable-color: #4d5d69;
-  --overview-time-range-border-color: #e9ebed;
-}
-:root.dark-theme {
-  --overview-time-range-lable-color: #e9eaec;
-  --overview-time-range-border-color: #e9ebed1f;
-}
-</style>
-<style scoped lang="scss">
-.time-range {
-  padding: 0 32px;
-
-  .overview-alert {
-    margin-bottom: 16px;
-  }
-
-  .date-time-format-description {
-    font-size: 12px;
-    color: #9da6ad;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--overview-time-range-border-color);
-  }
-
-  .filed-wrap {
-    margin-bottom: 16px;
-
-    &.from {
-      margin-bottom: 24px;
-    }
-    .filed-lable {
-      display: block;
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--overview-time-range-lable-color);
-      margin: 16px 0;
-      text-transform: capitalize;
-    }
-  }
-}
-</style>
+<template>
+  <ui-modal
+    show
+    :title="titleLocal"
+    :subtitle="props.selectedItemName"
+    :texts="modalTexts"
+    test-id="overview-custom-interval-modal"
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #content>
+      <div class="time-range">
+        <ui-alert
+          v-show="alertShow"
+          status="alert-danger"
+          :messages="props.alertItems"
+          class="overview-alert"
+          test-id="overview-alert"
+          @remove="alertShow = false"
+        />
+
+        <p class="date-time-format-description">
+          {{ localization.inventoryMonitor.dateTimeIsoFormat }}
+        </p>
+
+        <div class="filed-wrap from">
+          <lable for="date-from" class="filed-lable">{{
+            localization.common.from
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-from"
+            v-model="currentDateFromLocal"
+            :format="datepickerFormat"
+            test-id="date-from"
+            time-format="12"
+          />
+        </div>
+
+        <div class="filed-wrap">
+          <lable for="date-to" class="filed-lable">{{
+            localization.common.to
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-to"
+            v-model="currentDateToLocal"
+            :format="datepickerFormat"
+            test-id="date-to"
+            time-format="12"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #footerLeftContent><span></span></template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+
+const alertShow = defineModel<boolean>('alert-show')
+const currentDateFrom = defineModel<string>('current-date-from')
+// const dateFrom = defineModel<string>('date-from')
+const currentTimeFrom = defineModel<string>('current-time-from')
+const currentDateTo = defineModel<string>('current-date-to')
+// const dateTo = defineModel<string>('date-to')
+const currentTimeTo = defineModel<string>('current-time-to')
+
+const props = defineProps<{
+  titleIntervalModal: string
+  selectedItemName: string
+  currentLang: string
+  alertItems: any[]
+  formatDate: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+  (event: 'update-date-from', value: any): void
+  (event: 'update-date-to', value: any): void
+}>()
+
+const { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerFormat = computed<string>(() =>
+  getUiDatepickerFormatByLanguage(props.currentLang)
+)
+
+const titleLocal = computed<string>(() =>
+  props.titleIntervalModal.replace(':', '')
+)
+const modalTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+}))
+
+const currentDateFromLocal = computed<number>({
+  get() {
+    // console.log(currentDateFrom.value, 11111, currentTimeFrom.value)
+    // TODO fix PM
+    return $isDate(currentDateFrom.value)
+      ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
+      : 0
+  },
+  set(newValue) {
+    // console.log($formattedDate(new Date(newValue), props.formatDate), 22222)
+    // console.log($formattedTime(newValue, '', true), 33333)
+    currentDateFrom.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeFrom.value = $formattedTime(newValue, '', true)
+  },
+})
+const currentDateToLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    return $isDate(currentDateTo.value)
+      ? $getUnixByDate(currentDateTo.value + ' ' + currentTimeTo.value)
+      : 0
+  },
+  set(newValue) {
+    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeTo.value = $formattedTime(newValue, '', true)
+  },
+})
+
+// const onUpdateDateFrom = (event: any): void => {
+//   emits('update-date-from', event)
+// }
+// const onUpdateDateTo = (event: any): void => {
+//   emits('update-date-to', event)
+// }
+
+const onSubmit = (): void => {
+  emits('submit')
+}
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style>
+:root {
+  --overview-time-range-lable-color: #4d5d69;
+  --overview-time-range-border-color: #e9ebed;
+}
+:root.dark-theme {
+  --overview-time-range-lable-color: #e9eaec;
+  --overview-time-range-border-color: #e9ebed1f;
+}
+</style>
+<style scoped lang="scss">
+.time-range {
+  padding: 0 32px;
+
+  .overview-alert {
+    margin-bottom: 16px;
+  }
+
+  .date-time-format-description {
+    font-size: 12px;
+    color: #9da6ad;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--overview-time-range-border-color);
+  }
+
+  .filed-wrap {
+    margin-bottom: 16px;
+
+    &.from {
+      margin-bottom: 24px;
+    }
+    .filed-lable {
+      display: block;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--overview-time-range-lable-color);
+      margin: 16px 0;
+      text-transform: capitalize;
+    }
+  }
+}
+</style>

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

@@ -283,22 +283,20 @@ const temperatureChartCallback = (newValue: any): void => {
 const updatePowerChart = (): void => {
   if (!props.powerData) return
 
-  powerDataLocal.value = graphDataFunc(
-    props.powerData,
-    props.isDarkMode,
-    localization.value,
-    () => {},
-    false,
-    false,
-    true,
-    'spline',
-    '',
-    undefined,
-    powerChartCallback,
-    props.formattedDatetime,
+  powerDataLocal.value = graphDataFunc({
     format,
-    dateFormat
-  )
+    graphData: props.powerData,
+    isDarkMode: props.isDarkMode,
+    localization: localization.value,
+    fullScreenCallBack: () => {},
+    disabledTitle: false,
+    disabledExportButton: false,
+    disabledLegends: true,
+    graphType: 'spline',
+    chartCallBack: powerChartCallback,
+    formattedDatetime: props.formattedDatetime,
+    formatDate: dateFormat,
+  })
 
   updatePowerHelper.value++
 }
@@ -306,22 +304,20 @@ const updatePowerChart = (): void => {
 const updateTemperatureChart = (): void => {
   if (!props.temperatureData) return
 
-  temperatureDataLocal.value = graphDataFunc(
-    props.temperatureData,
-    props.isDarkMode,
-    localization.value,
-    () => {},
-    false,
-    false,
-    true,
-    'spline',
-    '',
-    undefined,
-    temperatureChartCallback,
-    props.formattedDatetime,
+  temperatureDataLocal.value = graphDataFunc({
     format,
-    dateFormat
-  )
+    graphData: props.temperatureData,
+    isDarkMode: props.isDarkMode,
+    localization: localization.value,
+    fullScreenCallBack: () => {},
+    disabledTitle: false,
+    disabledExportButton: false,
+    disabledLegends: true,
+    graphType: 'spline',
+    chartCallBack: temperatureChartCallback,
+    formattedDatetime: props.formattedDatetime,
+    formatDate: dateFormat,
+  })
 
   updateTemperatureHelper.value++
 }

package/lib/utils/date.ts

@@ -0,0 +1,12 @@
+export const getUiDatepickerFormatByLanguage = (language: string): string => {
+  let result = 'mm-dd-yyyy'
+  switch (language) {
+    case 'en_US':
+      result = 'mm-dd-yyyy'
+      break
+    case 'ru_RU':
+      result = 'dd.mm.yyyy'
+      break
+  }
+  return result
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.861",
+  "version": "1.4.862",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -34,7 +34,7 @@
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
-    "bfg-nuxt-3-graph": "1.0.20",
+    "bfg-nuxt-3-graph": "1.0.21",
     "bfg-uikit": "1.0.356",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"