bfg-common 1.6.113 → 1.6.114

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

@@ -1,393 +0,0 @@
-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,
-      },
-    ],
-  }
-}