bfg-common 1.6.111 → 1.6.113

package/components/common/configure/advancedSystemSettings/tableView/{field → old/field}/Field.vue

@@ -1,37 +1,67 @@
 <template>
-  <component
-    :is="currentComponent"
-    v-model:value="valueLocal"
-    :data="props.data"
-    :invalid="invalid"
-    :error-message="errorMessage"
-    @change="onChangeSetting"
-  />
+  <atoms-tooltip-error :has-error="invalid">
+    <template #elem>
+      <div v-if="props.data.type === 'number'">
+        <input
+          v-model="valueLocal"
+          type="number"
+          :class="{ 'has-error': invalid }"
+          @input="onChangeSetting($event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'string'">
+        <input
+          v-model="valueLocal"
+          type="text"
+          :class="{ 'has-error': invalid }"
+          @input="onChangeSetting($event)"
+        />
+      </div>
+      <div v-if="props.data.type === 'boolean'" class="select">
+        <select
+          v-model="valueLocal"
+          @change="onChangeSetting($event)"
+          :class="{ 'has-error': invalid }"
+        >
+          <option value="false">false</option>
+          <option value="true">true</option>
+        </select>
+      </div>
+      <!--      <div v-if="props.data.type === 'select'" class="select">-->
+      <!--        <select-->
+      <!--          v-model="valueLocal"-->
+      <!--          @change="onChangeSetting($event)"-->
+      <!--          :class="{ 'has-error': invalid }"-->
+      <!--        >-->
+      <!--          <option-->
+      <!--            v-for="item2 in props.data.options"-->
+      <!--            :key="item2.key"-->
+      <!--            :value="item2.key"-->
+      <!--          >-->
+      <!--            {{ item2.value }}-->
+      <!--          </option>-->
+      <!--        </select>-->
+      <!--      </div>-->
+    </template>
+    <template #content>
+      {{ errorMessage }}
+    </template>
+  </atoms-tooltip-error>
 </template>
 
 <script setup lang="ts">
 import type { UI_I_AdvancedSystemSettingsEditData } from '~/components/common/configure/advancedSystemSettings/tableView/old/lib/models/interfaces'
-import { UI_E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/field/lib/models/enums'
+import { E_Format } from '~/components/common/configure/advancedSystemSettings/tableView/old/field/lib/models/enums'
 import { allRegExp } from '~/lib/config/regExp'
 
 const props = defineProps<{
   data: UI_I_AdvancedSystemSettingsEditData
 }>()
-
 const emits = defineEmits<{
   (event: 'change', value: UI_I_AdvancedSystemSettingsEditData['value']): void
   (event: 'error-message', value: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
 const valueLocal = ref<UI_I_AdvancedSystemSettingsEditData['value']>(
   props.data.value
 )
@@ -88,7 +118,7 @@ const onChangeSetting = (event: Event): void => {
   if (invalid.value) return
 
   if (validation.Format) {
-    const format = UI_E_Format[validation.Format]
+    const format = E_Format[validation.Format]
     invalid.value = !allRegExp[format].test(value)
     errorMessage.value = invalid.value ? `Value must be ${format}` : ''
   }

package/components/common/configure/advancedSystemSettings/tableView/old/field/lib/models/enums.ts

@@ -0,0 +1,14 @@
+export enum E_Format {
+    'unix path' = 'unixPath',
+    'win path' = 'winPath',
+    'mac' = 'mac',
+    'ip4' = 'ip4',
+    'ip6' = 'ip6',
+    'url' = 'url',
+    'uuid' = 'uuid',
+    'semver' = 'semver',
+    'domain' = 'domain',
+    'base64' = 'base64',
+    'regex' = 'regex',
+    'hex color' = 'hexColor',
+}

package/components/common/configure/advancedSystemSettings/tools/New.vue

@@ -1,66 +1,5 @@
-<template>
-  <div class="flex flex-wrap justify-between gap-4 mb-4">
-    <h3 class="advanced-system-settings-title text-[18px] font-[500]">
-      {{ props.title }}
-    </h3>
+<template>New</template>
 
-    <ui-button
-      test-id="advanced-system-settings-edit-toggle"
-      variant="text"
-      is-without-sizes
-      is-without-height
-      @click="emits('show-edit-modal')"
-    >
-      <ui-icon name="settings" width="18px" height="18px" />
-    </ui-button>
-  </div>
-</template>
+<script setup lang="ts"></script>
 
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
-}>()
-</script>
-
-<style>
-:root {
-  --advanced-system-settings-title: #4d5d69;
-  --advanced-system-settings-edit-border: #e9ebed;
-  --advanced-system-settings-edit-bg: #ffffff;
-  --advanced-system-settings-edit-color: #213444;
-  --advanced-system-settings-edit-hover-bg: #f6f7f8;
-  --advanced-system-settings-edit-hover-color: #1b2a37;
-}
-:root.dark-theme {
-  --advanced-system-settings-title: #e9eaec;
-  --advanced-system-settings-edit-border: #e9ebed1f;
-  --advanced-system-settings-edit-bg: #1b2a373d;
-  --advanced-system-settings-edit-color: #e9eaec;
-  --advanced-system-settings-edit-hover-bg: #283948;
-  --advanced-system-settings-edit-hover-color: #ffffff;
-}
-</style>
-
-<style scoped lang="scss">
-.advanced-system-settings-title {
-  color: var(--advanced-system-settings-title);
-}
-
-#advanced-system-settings-edit-toggle {
-  padding: 8px;
-  width: 34px;
-  height: 34px;
-  border: 1px solid var(--advanced-system-settings-edit-border);
-  color: var(--advanced-system-settings-edit-color);
-  background-color: var(--advanced-system-settings-edit-bg);
-
-  &:hover {
-    background-color: var(--advanced-system-settings-edit-hover-bg);
-    color: var(--advanced-system-settings-edit-hover-color);
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/configure/advancedSystemSettings/tools/Old.vue

@@ -3,7 +3,7 @@
     <template #action>
       <button
         class="btn btn-sm btn-secondary ng-star-inserted"
-        @click="emits('show-edit-modal')"
+        @click="emits('show-edit')"
       >
         {{ localization.common.edit }}...
       </button>
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
+  (event: 'show-edit'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/configure/advancedSystemSettings/tools/Tools.vue

@@ -2,7 +2,7 @@
   <component
     :is="currentComponent"
     :title="localization.common.advancedSystemSettings"
-    @show-edit-modal="emits('show-edit-modal')"
+    @show-edit="emits('show-edit')"
   />
 </template>
 
@@ -10,7 +10,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const emits = defineEmits<{
-  (event: 'show-edit-modal'): void
+  (event: 'show-edit'): void
 }>()
 
 const { $store }: any = useNuxtApp()

package/components/common/graph/Graph.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="common-graph-block">
-    <component
-      :is="currentComponent"
-      :chart-options="chartOptions"
-      @select-item="onSelectNewViewExportItem"
-    />
-  </div>
+  <common-graph-graph-new
+    v-if="isNewView"
+    :chart-options="chartOptions"
+    @select-item="onSelectNewViewExportItem"
+  />
+  <common-graph-old v-else :chart-options="chartOptions" />
 </template>
 
 <script setup lang="ts">
@@ -25,19 +24,13 @@ const props = withDefaults(
   {
     chart: undefined,
     exportType: undefined,
-    selectedRow: () => [],
+    selectedRow: [],
   }
 )
 
 const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./new/New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
 let localChart: any = null
 const exportChart = (type: string): void => {
   if (type === 'png') {
@@ -131,8 +124,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.common-graph-block {
-  display: contents;
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/graph/{new/New.vue → graphNew/GraphNew.vue}

@@ -15,9 +15,9 @@
             <ui-button
               :test-id="`button-metric-${uniqueId}`"
               :class="['metric-export-button', { active: isShowDropdown }]"
-              variant="text"
               is-without-sizes
               is-without-height
+              variant="text"
               @click="isShowDropdown = !isShowDropdown"
             >
               <ui-icon name="burger" width="20" height="20" />
@@ -27,8 +27,8 @@
               :show="isShowDropdown"
               :items="dropdownItems"
               :elem-id="`button-metric-${uniqueId}`"
-              width="max-content"
               left
+              width="max-content"
               @select="onSelect($event)"
               @hide="isShowDropdown = false"
             />
@@ -48,7 +48,7 @@
 import { useFullscreen } from '@vueuse/core'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_E_ChartExportIconByKey } from '~/components/common/graph/new/lib/models/enums'
+import { UI_E_ChartExportIconByKey } from '~/components/common/graph/graphNew/lib/models/enums'
 
 const props = withDefaults(
   defineProps<{

package/components/common/graph/lib/utils/renderGraph.ts

@@ -0,0 +1,393 @@
+import { Ref } from 'vue'
+import type {
+  I_CurrentColor,
+  I_LineGraph,
+  I_DiskGraph,
+  I_Title,
+  I_LineSeries,
+  I_SeriesLine,
+  I_SeriesDisk,
+  I_SeriesLineItem,
+} from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const graphDataFunc = (
+  graphData: I_SeriesLine,
+  isDarkMode: boolean,
+  localization: UI_I_Localization,
+  isFullScreen: Ref<boolean>,
+  disabledTitle: boolean,
+  disabledExportButton: boolean,
+  disabledLegends: boolean,
+  graphType?: string,
+  dateTimeFormat?: string,
+  width?: number,
+  chart?: Ref<any>
+): I_LineGraph => {
+  const currentColor: I_CurrentColor = {
+    backgroundColor: isDarkMode ? '#22343c' : 'white',
+    titleColor: isDarkMode ? 'white' : '#333333',
+    xAxisColor: isDarkMode ? '#ADBBC4' : '#707070',
+    textColor: isDarkMode ? '#ADBBC4' : '#707070',
+    legendItemColor: isDarkMode ? '#ADBBC4' : '#333333',
+  }
+
+  const yAxisLength = graphData.yAxis.length
+  const yAxisHelper: string[] = []
+  const yAxis = graphData.yAxis
+    .filter((_: string, key: number) => key >= yAxisLength - 2)
+    .map((text: string, i: number) => {
+      const opposite = !!i
+      if (opposite) yAxisHelper.push(text)
+
+      return {
+        title: {
+          text,
+          style: {
+            color: currentColor.textColor,
+          },
+        },
+        labels: {
+          style: {
+            color: currentColor.textColor,
+          },
+        },
+        min: text === '%' ? 0 : undefined,
+        max: text === '%' ? 100 : undefined,
+        opposite,
+        gridLineWidth: 0.5,
+      }
+    })
+
+  const { $formattedDatetime } = useNuxtApp()
+
+  const currentDateFunc = (data: number): string => {
+    if (dateTimeFormat === 'short')
+      return $formattedDatetime(new Date(data), {
+        hasSeconds: true,
+        separator: ', ',
+        formatTime: 'h:mm',
+      })
+    else
+      return $formattedDatetime(new Date(data), {
+        hasSeconds: true,
+        separator: ', ',
+      })
+  }
+
+  let xAxisCategories: string[] = []
+  let xAxisLabelPositions: number[] | null = null
+  const intervalDate = Math.round(
+    (graphData.pointEnd - graphData.pointStart) / graphData.lines[0].data.length
+  )
+  const series = graphData.lines.map(
+    (line: I_SeriesLineItem, key: number): I_LineSeries => {
+      const data =
+        line.units === 'ms' ? line.data.map((item) => item / 100) : line.data
+
+      if (key === 0) {
+        xAxisCategories = data.map((_: number, key2: number): string => {
+          const currentInterval = key2 ? key2 + 1 : 0
+          return currentDateFunc(
+            graphData.pointStart + intervalDate * currentInterval
+          )
+        })
+      }
+      if (width) {
+        xAxisLabelPositions = []
+        const count = Math.round(width / 250)
+        const positionInterval = Math.round(xAxisCategories.length / count)
+        for (let i = 0; i <= xAxisCategories.length; i += positionInterval) {
+          const currentIndex =
+            i === xAxisCategories.length ? xAxisCategories.length - 1 : i
+
+          if (
+            !xAxisLabelPositions?.length ||
+            currentIndex > xAxisLabelPositions[xAxisLabelPositions.length - 1]
+          ) {
+            xAxisLabelPositions?.push(currentIndex)
+          }
+
+          if (i + positionInterval === positionInterval * count) {
+            xAxisLabelPositions?.push(xAxisCategories.length - 1)
+          }
+        }
+      }
+
+      const visible = key < 10
+      return {
+        data,
+        visible,
+        name: `${line.measurement}`,
+        color: line.color,
+        lineWidth: line.lineWidth || 1.5,
+        yAxis: yAxisHelper.includes(line.units) ? 1 : 0,
+        marker: {
+          enabled: false,
+        },
+        tooltip: {
+          pointFormatter: function (): string {
+            const { x, y }: any = this
+            const currentDate = xAxisCategories.find((_, key) => key === x)
+            return `<b>${line.relatedDeviceName}<br>${currentDate}</b><br>${
+              line.name
+            }: ${new Intl.NumberFormat('en-US').format(y)}`
+          },
+        },
+      }
+    }
+  )
+
+  const title = (): I_Title => {
+    if (disabledTitle) {
+      return {
+        text: '',
+      }
+    } else {
+      return {
+        text: graphData.groupName,
+        style: {
+          color: currentColor.titleColor,
+        },
+      }
+    }
+  }
+
+  return {
+    chart: {
+      type: graphType || 'spline',
+      zooming: {
+        type: 'xy',
+      },
+      animation: false,
+      backgroundColor: currentColor.backgroundColor,
+      events: {
+        fullscreenOpen(): void {
+          isFullScreen.value = true
+        },
+        fullscreenClose(): void {
+          isFullScreen.value = false
+        },
+        load: function () {
+          if (chart) chart.value = this
+        },
+      },
+    },
+
+    title: title(),
+
+    exporting: {
+      menuItemDefinitions: {
+        viewFullscreen: {
+          text: localization.common.viewFullScreen,
+        },
+        printChart: {
+          text: localization.common.printChart,
+        },
+        downloadPNG: {
+          text: localization.common.exportPng,
+        },
+        downloadJPEG: {
+          text: localization.common.exportJpeg,
+        },
+        downloadSVG: {
+          text: localization.common.exportSvg,
+        },
+        downloadCSV: {
+          text: localization.common.exportCsv,
+        },
+      },
+      csv: {
+        dateFormat: '%_ISO',
+      },
+      buttons: {
+        contextButton: {
+          enabled: disabledExportButton,
+          menuItems: [
+            'viewFullscreen',
+            'printChart',
+            'separator',
+            'downloadPNG',
+            'downloadJPEG',
+            'downloadSVG',
+            'downloadCSV',
+          ],
+        },
+      },
+    },
+
+    accessibility: {
+      enabled: false,
+    },
+
+    credits: {
+      enabled: false,
+    },
+
+    tooltip: {
+      headerFormat: '',
+      style: {
+        width: '300px',
+        whiteSpace: 'normal',
+      },
+    },
+
+    legend: {
+      itemMarginBottom: 5,
+      maxHeight: 40,
+      itemStyle: {
+        color: currentColor.legendItemColor,
+      },
+      enabled: disabledLegends,
+    },
+
+    xAxis: {
+      type: 'datetime',
+      labels: {
+        autoRotationLimit: 0,
+        style: {
+          color: currentColor.textColor,
+        },
+      },
+      // tickInterval: 125,
+      tickPositions: xAxisLabelPositions,
+      categories: xAxisCategories,
+      gridLineWidth: 0.5,
+    },
+
+    yAxis,
+
+    plotOptions: {
+      series: {
+        animation: false,
+      },
+      line: {
+        animation: false,
+      },
+    },
+
+    series,
+  }
+}
+
+export const graphDiskDataFunc = (
+  graphData: I_SeriesDisk,
+  isDarkMode: boolean,
+  localization: UI_I_Localization,
+  isFullScreen: Ref<boolean>
+): I_DiskGraph => {
+  const currentColor: I_CurrentColor = {
+    backgroundColor: isDarkMode ? '#22343c' : 'white',
+    titleColor: isDarkMode ? 'white' : '#333333',
+    xAxisColor: isDarkMode ? '#ADBBC4' : '#707070',
+    textColor: isDarkMode ? '#ADBBC4' : '#707070',
+    legendItemColor: isDarkMode ? '#ADBBC4' : '#333333',
+  }
+
+  return {
+    chart: {
+      plotBackgroundColor: null,
+      plotBorderWidth: null,
+      plotShadow: false,
+      type: 'pie',
+      backgroundColor: currentColor.backgroundColor,
+      events: {
+        fullscreenOpen(): void {
+          isFullScreen.value = true
+        },
+        fullscreenClose(): void {
+          isFullScreen.value = false
+        },
+      },
+    },
+
+    exporting: {
+      menuItemDefinitions: {
+        viewFullscreen: {
+          text: localization.common.viewFullScreen,
+        },
+        printChart: {
+          text: localization.common.printChart,
+        },
+        downloadPNG: {
+          text: localization.common.exportPng,
+        },
+        downloadJPEG: {
+          text: localization.common.exportJpeg,
+        },
+        downloadSVG: {
+          text: localization.common.exportSvg,
+        },
+        downloadCSV: {
+          text: localization.common.exportCsv,
+        },
+      },
+      csv: {
+        dateFormat: '%_ISO',
+      },
+      buttons: {
+        contextButton: {
+          enabled: true,
+          menuItems: [
+            'viewFullscreen',
+            'printChart',
+            'separator',
+            'downloadPNG',
+            'downloadJPEG',
+            'downloadSVG',
+            'downloadCSV',
+          ],
+        },
+      },
+    },
+
+    title: {
+      text: graphData.title,
+      style: {
+        color: currentColor.titleColor,
+      },
+    },
+
+    accessibility: {
+      enabled: false,
+    },
+
+    credits: {
+      enabled: false,
+    },
+
+    tooltip: {
+      pointFormat: '{point.percentage:.1f}%',
+    },
+
+    plotOptions: {
+      pie: {
+        cursor: 'pointer',
+        dataLabels: {
+          enabled: false,
+        },
+        showInLegend: true,
+      },
+    },
+
+    legend: {
+      align: 'right',
+      layout: 'vertical',
+      itemStyle: {
+        color: currentColor.legendItemColor,
+      },
+      itemHoverStyle: {
+        color: currentColor.legendItemColor,
+      },
+    },
+
+    series: [
+      {
+        name: 'Brands',
+        colorByPoint: true,
+        data: graphData.data,
+        animation: false,
+      },
+    ],
+  }
+}

package/components/common/modals/confirmation/Confirmation.vue

@@ -10,7 +10,6 @@
     @hide-modal="emits('hide-modal')"
     @confirm="emits('confirm')"
   >
-<!--    TODO fix slot name-->
     <template #otherContent>
       <slot v-if="$slots.otherContent" name="otherContent" />
     </template>