bfg-common 1.2.53 → 1.2.55

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

@@ -1,389 +1,389 @@
-import { format } from 'date-fns'
-import { Ref } from 'vue'
-import type {
-  I_CurrentColor,
-  I_LineGraph,
-  I_DiskGraph,
-  I_Title,
-  I_LineSeries,
-  I_SeriesLine,
-  I_SeriesDisk,
-  I_SeriesLineItem,
-} from 'bfg-nuxt-3-graph/graph/models/interfaces'
-
-import { UI_I_Localization } from '~/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 format(new Date(data), 'h:mm').toUpperCase()
-    else
-      return $formattedDatetime(new Date(data), '', true)
-        .replace(' ', ', ')
-        .toUpperCase()
-  }
-
-  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.viewFullScreen,
-        },
-        printChart: {
-          text: localization.printChart,
-        },
-        downloadPNG: {
-          text: localization.exportPng,
-        },
-        downloadJPEG: {
-          text: localization.exportJpeg,
-        },
-        downloadSVG: {
-          text: localization.exportSvg,
-        },
-        downloadCSV: {
-          text: localization.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.viewFullScreen,
-        },
-        printChart: {
-          text: localization.printChart,
-        },
-        downloadPNG: {
-          text: localization.exportPng,
-        },
-        downloadJPEG: {
-          text: localization.exportJpeg,
-        },
-        downloadSVG: {
-          text: localization.exportSvg,
-        },
-        downloadCSV: {
-          text: localization.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,
-      },
-    ],
-  }
-}
+import { format } from 'date-fns'
+import { Ref } from 'vue'
+import type {
+  I_CurrentColor,
+  I_LineGraph,
+  I_DiskGraph,
+  I_Title,
+  I_LineSeries,
+  I_SeriesLine,
+  I_SeriesDisk,
+  I_SeriesLineItem,
+} from 'bfg-nuxt-3-graph/graph/models/interfaces'
+
+import { UI_I_Localization } from '~/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 format(new Date(data), 'h:mm').toUpperCase()
+    else
+      return $formattedDatetime(new Date(data), '', true)
+        .replace(' ', ', ')
+        .toUpperCase()
+  }
+
+  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.viewFullScreen,
+        },
+        printChart: {
+          text: localization.printChart,
+        },
+        downloadPNG: {
+          text: localization.exportPng,
+        },
+        downloadJPEG: {
+          text: localization.exportJpeg,
+        },
+        downloadSVG: {
+          text: localization.exportSvg,
+        },
+        downloadCSV: {
+          text: localization.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.viewFullScreen,
+        },
+        printChart: {
+          text: localization.printChart,
+        },
+        downloadPNG: {
+          text: localization.exportPng,
+        },
+        downloadJPEG: {
+          text: localization.exportJpeg,
+        },
+        downloadSVG: {
+          text: localization.exportSvg,
+        },
+        downloadCSV: {
+          text: localization.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,
+      },
+    ],
+  }
+}