bfg-common 1.0.0

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

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

package/components/common/headline/Headline.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="heading-block">
+    <h3 class="heading-block__title">{{ props.headline }}</h3>
+    <div v-if="$slots.action" class="heading-block__actions">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  headline: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+.heading-block {
+  @include flex($just: space-between, $align: flex-start);
+  padding: 4px 2px 0;
+  &__title {
+    @include text($fs: 22px, $fw: 400);
+    display: inline-block;
+    vertical-align: middle;
+  }
+  &__actions {
+    :deep(.btn) {
+      margin: 0;
+    }
+  }
+}
+</style>