bfg-common 1.4.801 → 1.4.803

package/components/common/graph/Graph.vue

@@ -1,104 +1,104 @@
-<template>
-  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
-  <common-graph-old v-else :chart-options="chartOptions" />
-</template>
-
-<script setup lang="ts">
-import type {
-  I_LineGraph,
-  I_DiskGraph,
-} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
-
-const props = defineProps<{
-  chart?: any
-  data: I_LineGraph | I_DiskGraph
-  update: number
-  exportType?: string
-  selectedRow?: number[]
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-let localChart: any = null
-const exportChart = (type: string): void => {
-  if (type === 'png') {
-    localChart.exportChart({
-      type: 'image/png',
-    })
-  } else if (type === 'jpeg') {
-    localChart.exportChart({
-      type: 'image/jpeg',
-    })
-  } else if (type === 'svg') {
-    localChart.exportChart({
-      type: 'image/svg+xml',
-    })
-  } else if (type === 'csv') {
-    localChart.downloadCSV()
-  }
-}
-
-const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
-const initGraph = (): void => {
-  if (!props.data) return
-  setTimeout(() => {
-    chartOptions.value = props.data
-  }, 500)
-}
-
-watch(
-  () => props.update,
-  (newValue) => {
-    newValue && initGraph()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.exportType,
-  (newValue) => {
-    if (!newValue) return
-
-    exportChart(newValue)
-  }
-)
-
-watch(
-  () => props.chart,
-  (newValue) => {
-    if (newValue.series) localChart = newValue
-  },
-  { deep: true }
-)
-
-const updateSeriesStrokeWidth = (data: number[]): void => {
-  if (!localChart) return
-
-  const newChartOptions = chartOptions.value
-  newChartOptions.series.forEach((_: any, key: number) => {
-    newChartOptions.series[key].lineWidth = 1.5
-
-    if (data.includes(key)) newChartOptions.series[key].lineWidth = 3
-  })
-
-  chartOptions.value = newChartOptions
-}
-
-watch(
-  () => props.selectedRow,
-  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
-)
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
+  <common-graph-old v-else :chart-options="chartOptions" />
+</template>
+
+<script setup lang="ts">
+import type {
+  I_LineGraph,
+  I_DiskGraph,
+} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+
+const props = defineProps<{
+  chart?: any
+  data: I_LineGraph | I_DiskGraph
+  update: number
+  exportType?: string
+  selectedRow?: number[]
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+let localChart: any = null
+const exportChart = (type: string): void => {
+  if (type === 'png') {
+    localChart.exportChart({
+      type: 'image/png',
+    })
+  } else if (type === 'jpeg') {
+    localChart.exportChart({
+      type: 'image/jpeg',
+    })
+  } else if (type === 'svg') {
+    localChart.exportChart({
+      type: 'image/svg+xml',
+    })
+  } else if (type === 'csv') {
+    localChart.downloadCSV()
+  }
+}
+
+const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
+const initGraph = (): void => {
+  if (!props.data) return
+  setTimeout(() => {
+    chartOptions.value = props.data
+  }, 500)
+}
+
+watch(
+  () => props.update,
+  (newValue) => {
+    newValue && initGraph()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.exportType,
+  (newValue) => {
+    if (!newValue) return
+
+    exportChart(newValue)
+  }
+)
+
+watch(
+  () => props.chart,
+  (newValue) => {
+    if (newValue.series) localChart = newValue
+  },
+  { deep: true }
+)
+
+const updateSeriesStrokeWidth = (data: number[]): void => {
+  if (!localChart) return
+
+  const newChartOptions = chartOptions.value
+  newChartOptions.series.forEach((_: any, key: number) => {
+    newChartOptions.series[key].lineWidth = 1.5
+
+    if (data.includes(key)) newChartOptions.series[key].lineWidth = 3
+  })
+
+  chartOptions.value = newChartOptions
+}
+
+watch(
+  () => props.selectedRow,
+  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
+)
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>

package/components/common/graph/GraphNew.vue

@@ -1,71 +1,144 @@
-<template>
-  <div class="graph-content">
-    <template v-if="props.chartOptions">
-      <client-only>
-        <highchart
-            :options="props.chartOptions"
-            :modules="['exporting', 'export-data']"
-            class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  chartOptions: any
-}>()
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-    border-radius: 8px;
-    box-shadow: 0px 1px 4px 0px #00000014;
-  }
-}
-
-:deep(.highcharts-menu) {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background-color: #ffffff !important;
-  box-shadow: 0px 4px 20px 0px #0000001f !important;
-  padding: 8px !important;
-  border-radius: 8px !important;
-
-  .highcharts-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px !important;
-    font-weight: 500 !important;
-    color: #4d5d69 !important;
-    padding: 8px !important;
-
-    &::before {
-      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-    }
-    &:first-child::before {
-      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-    }
-    &:nth-child(2)::before {
-      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%234D5D69' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-    }
-  }
-  hr {
-    border-color: #e9ebed;
-    border-style: solid;
-    margin: 0 8px;
-  }
-}
-</style>
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+            :options="props.chartOptions"
+            :modules="['exporting', 'export-data']"
+            class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style>
+:root {
+  --chart-background-color: #ffffff;
+  --chart-menu-line-color: #4d5d69;
+  --chart-menu-line-hover-color: #213444;
+  --chart-menu-line-active-color: #008fd6;
+  --chart-menu-background-color: #ffffff;
+  --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f;
+  --chart-menu-border-color: #e9ebed;
+  --chart-menu-item-color: #4d5d69;
+  --chart-menu-item-hover-color: #182531;
+  --chart-menu-item-hover-background-color: #e9ebed;
+
+  --chart-menu-download-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --chart-menu-download-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --chart-menu-print-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%234D5D69' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+  --chart-menu-print-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%23182531' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+  --chart-menu-full-screen-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  --chart-menu-full-screen-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+:root.dark-theme {
+  --chart-background-color: #334453;
+  --chart-menu-line-color: #e9eaec;
+  --chart-menu-line-hover-color: #ffffff;
+  --chart-menu-line-active-color: #2ba2de;
+  --chart-menu-background-color: #334453;
+  --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f,
+  0px -1px 12px 0px #00000014;
+  --chart-menu-border-color: #e9ebed1f;
+  --chart-menu-item-color: #e9eaec;
+  --chart-menu-item-hover-color: #ffffff;
+  --chart-menu-item-hover-background-color: #e9ebed0f;
+
+  --chart-menu-download-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --chart-menu-download-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --chart-menu-print-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%23E9EAEC' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+  --chart-menu-print-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+  --chart-menu-full-screen-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  --chart-menu-full-screen-icon-hover: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+</style>
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 0px 1px 4px 0px #00000014;
+  }
+}
+
+:deep(.highcharts-background) {
+  fill: var(--chart-background-color);
+}
+:deep(.highcharts-button-box) {
+  fill: transparent;
+
+  &:hover + .highcharts-button-symbol {
+    stroke: var(--chart-menu-line-hover-color);
+  }
+}
+// TODO найти решение по лучше
+:deep(.highcharts-button-box[fill='#e6e9ff'] + .highcharts-button-symbol) {
+  stroke: var(--chart-menu-line-active-color);
+}
+:deep(.highcharts-button-symbol) {
+  stroke: var(--chart-menu-line-color);
+  stroke-width: 2px;
+}
+:deep(.highcharts-menu) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--chart-menu-background-color) !important;
+  box-shadow: var(--chart-menu-box-shadow) !important;
+  padding: 8px !important;
+  border-radius: 8px !important;
+
+  .highcharts-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: var(--chart-menu-item-color) !important;
+    padding: 8px !important;
+
+    &:hover {
+      color: var(--chart-menu-item-hover-color) !important;
+      background-color: var(--chart-menu-item-hover-background-color) !important;
+
+      &::before {
+        content: var(--chart-menu-download-icon-hover);
+      }
+      &:first-child::before {
+        content: var(--chart-menu-full-screen-icon-hover);
+      }
+      &:nth-child(2)::before {
+        content: var(--chart-menu-print-icon-hover);
+      }
+    }
+    &::before {
+      content: var(--chart-menu-download-icon);
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+    }
+    &:first-child::before {
+      content: var(--chart-menu-full-screen-icon);
+    }
+    &:nth-child(2)::before {
+      content: var(--chart-menu-print-icon);
+    }
+  }
+  hr {
+    border-color: var(--chart-menu-border-color);
+    border-style: solid;
+    margin: 0 8px;
+  }
+}
+</style>

package/components/common/graph/GraphOld.vue

@@ -1,31 +1,31 @@
-<template>
-  <div class="graph-content">
-    <template v-if="props.chartOptions">
-      <client-only>
-        <highchart
-          :options="props.chartOptions"
-          :modules="['exporting', 'export-data']"
-          class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  chartOptions: any
-}>()
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+          :options="props.chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>