bfg-common 1.5.92 → 1.5.94

package/components/common/graph/graphNew/GraphNew.vue

@@ -1,194 +1,194 @@
-<template>
-  <div
-    ref="chartContainer"
-    :class="[
-      'graph-content',
-      { 'header-in-block': props.isHeaderInBlock },
-      { 'full-screen': isFullscreen },
-    ]"
-  >
-    <template v-if="props.chartOptions">
-      <client-only>
-        <div class="metric-header">
-          <span class="chart-title">{{ props.chartOptions.title.text }}</span>
-          <div class="chart-export-dropdown-container">
-            <ui-button
-              :test-id="`button-metric-${uniqueId}`"
-              :class="['metric-export-button', { active: isShowDropdown }]"
-              is-without-sizes
-              is-without-height
-              variant="text"
-              @click="isShowDropdown = !isShowDropdown"
-            >
-              <ui-icon name="burger" width="20" height="20" />
-            </ui-button>
-            <ui-dropdown
-              :test-id="`metric-${uniqueId}-dropdown`"
-              :show="isShowDropdown"
-              :items="dropdownItems"
-              :elem-id="`button-metric-${uniqueId}`"
-              left
-              width="max-content"
-              @select="onSelect($event)"
-              @hide="isShowDropdown = false"
-            />
-          </div>
-        </div>
-        <highchart
-          :options="props.chartOptions"
-          :modules="['exporting', 'export-data']"
-          class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-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 { E_ChartExportIconByKey } from '~/components/common/graph/graphNew/lib/models/enums'
-
-const props = withDefaults(
-  defineProps<{
-    chartOptions: any
-    isHeaderInBlock?: boolean
-  }>(),
-  {
-    isHeaderInBlock: true,
-  }
-)
-const emits = defineEmits<{
-  (event: 'select-item', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const uniqueId = ref<number>(useUniqueId())
-
-const chartContainer = ref<any>(null)
-const { isFullscreen, toggle } = useFullscreen(chartContainer)
-
-const isShowDropdown = ref<boolean>(false)
-const dropdownItems = computed<UI_I_Dropdown[]>(() => {
-  const result = []
-
-  const exportItems = props.chartOptions?.exporting?.menuItemDefinitions
-  for (const key in exportItems) {
-    if (!exportItems[key].isHide)
-      result.push({
-        text: exportItems[key].text,
-        value: key,
-        iconName: E_ChartExportIconByKey[key],
-        divider: key === 'printChart',
-      })
-  }
-
-  if (isFullscreen.value) {
-    result.map((item) => {
-      if (item.value === 'viewFullscreen') {
-        item.text = localization.value.common.exitFullscreen
-        item.iconName = 'exit-full-screen'
-      }
-
-      return item
-    })
-  }
-
-  return result
-})
-
-const onSelect = (value: string): void => {
-  switch (value) {
-    case 'viewFullscreen':
-      toggle()
-      break
-    default:
-      emits('select-item', value)
-  }
-}
-</script>
-
-<style>
-:root {
-  --chart-block-title-color: #4d5d69;
-  --chart-block-header-bg-color: #ffffff;
-  --chart-block-export-button-color: #4d5d69;
-  --chart-block-export-button-hover-color: #213444;
-  --chart-block-export-button-active-color: #008fd6;
-}
-:root.dark-theme {
-  --chart-block-title-color: #e9eaec;
-  --chart-block-header-bg-color: #334453;
-  --chart-block-export-button-color: #e9eaec;
-  --chart-block-export-button-hover-color: #ffffff;
-  --chart-block-export-button-active-color: #2ba2de;
-}
-</style>
-<style scoped lang="scss">
-.graph-content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  box-shadow: 0 1px 4px 0 #00000014;
-  border-radius: 8px;
-
-  &.full-screen {
-    .metric-header {
-      border-radius: 0;
-
-      .chart-title {
-        font-size: 22px;
-      }
-      .metric-export-button {
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-    .graph-block {
-      border-radius: 0;
-    }
-  }
-  .metric-header {
-    display: grid;
-    align-items: center;
-    grid-template-columns: max-content max-content;
-    justify-content: space-between;
-    padding: 16px;
-    background-color: var(--chart-block-header-bg-color);
-    border-radius: 8px 8px 0px 0px;
-
-    .chart-title {
-      color: var(--chart-block-title-color);
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 500;
-    }
-    .chart-export-dropdown-container {
-      position: relative;
-
-      .metric-export-button {
-        color: var(--chart-block-export-button-color);
-
-        &:hover {
-          color: var(--chart-block-export-button-hover-color);
-        }
-        &.active {
-          color: var(--chart-block-export-button-active-color);
-        }
-      }
-    }
-  }
-
-  .graph-block {
-    height: 100%;
-    overflow: hidden;
-    border-radius: 0px 0px 8px 8px;
-    background-color: var(--chart-block-header-bg-color);
-  }
-}
-</style>
+<template>
+  <div
+    ref="chartContainer"
+    :class="[
+      'graph-content',
+      { 'header-in-block': props.isHeaderInBlock },
+      { 'full-screen': isFullscreen },
+    ]"
+  >
+    <template v-if="props.chartOptions">
+      <client-only>
+        <div class="metric-header">
+          <span class="chart-title">{{ props.chartOptions.title.text }}</span>
+          <div class="chart-export-dropdown-container">
+            <ui-button
+              :test-id="`button-metric-${uniqueId}`"
+              :class="['metric-export-button', { active: isShowDropdown }]"
+              is-without-sizes
+              is-without-height
+              variant="text"
+              @click="isShowDropdown = !isShowDropdown"
+            >
+              <ui-icon name="burger" width="20" height="20" />
+            </ui-button>
+            <ui-dropdown
+              :test-id="`metric-${uniqueId}-dropdown`"
+              :show="isShowDropdown"
+              :items="dropdownItems"
+              :elem-id="`button-metric-${uniqueId}`"
+              left
+              width="max-content"
+              @select="onSelect($event)"
+              @hide="isShowDropdown = false"
+            />
+          </div>
+        </div>
+        <highchart
+          :options="props.chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 { E_ChartExportIconByKey } from '~/components/common/graph/graphNew/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    chartOptions: any
+    isHeaderInBlock?: boolean
+  }>(),
+  {
+    isHeaderInBlock: true,
+  }
+)
+const emits = defineEmits<{
+  (event: 'select-item', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const uniqueId = ref<number>(useUniqueId())
+
+const chartContainer = ref<any>(null)
+const { isFullscreen, toggle } = useFullscreen(chartContainer)
+
+const isShowDropdown = ref<boolean>(false)
+const dropdownItems = computed<UI_I_Dropdown[]>(() => {
+  const result = []
+
+  const exportItems = props.chartOptions?.exporting?.menuItemDefinitions
+  for (const key in exportItems) {
+    if (!exportItems[key].isHide)
+      result.push({
+        text: exportItems[key].text,
+        value: key,
+        iconName: E_ChartExportIconByKey[key],
+        divider: key === 'printChart',
+      })
+  }
+
+  if (isFullscreen.value) {
+    result.map((item) => {
+      if (item.value === 'viewFullscreen') {
+        item.text = localization.value.common.exitFullscreen
+        item.iconName = 'exit-full-screen'
+      }
+
+      return item
+    })
+  }
+
+  return result
+})
+
+const onSelect = (value: string): void => {
+  switch (value) {
+    case 'viewFullscreen':
+      toggle()
+      break
+    default:
+      emits('select-item', value)
+  }
+}
+</script>
+
+<style>
+:root {
+  --chart-block-title-color: #4d5d69;
+  --chart-block-header-bg-color: #ffffff;
+  --chart-block-export-button-color: #4d5d69;
+  --chart-block-export-button-hover-color: #213444;
+  --chart-block-export-button-active-color: #008fd6;
+}
+:root.dark-theme {
+  --chart-block-title-color: #e9eaec;
+  --chart-block-header-bg-color: #334453;
+  --chart-block-export-button-color: #e9eaec;
+  --chart-block-export-button-hover-color: #ffffff;
+  --chart-block-export-button-active-color: #2ba2de;
+}
+</style>
+<style scoped lang="scss">
+.graph-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 4px 0 #00000014;
+  border-radius: 8px;
+
+  &.full-screen {
+    .metric-header {
+      border-radius: 0;
+
+      .chart-title {
+        font-size: 22px;
+      }
+      .metric-export-button {
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+    .graph-block {
+      border-radius: 0;
+    }
+  }
+  .metric-header {
+    display: grid;
+    align-items: center;
+    grid-template-columns: max-content max-content;
+    justify-content: space-between;
+    padding: 16px;
+    background-color: var(--chart-block-header-bg-color);
+    border-radius: 8px 8px 0px 0px;
+
+    .chart-title {
+      color: var(--chart-block-title-color);
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 500;
+    }
+    .chart-export-dropdown-container {
+      position: relative;
+
+      .metric-export-button {
+        color: var(--chart-block-export-button-color);
+
+        &:hover {
+          color: var(--chart-block-export-button-hover-color);
+        }
+        &.active {
+          color: var(--chart-block-export-button-active-color);
+        }
+      }
+    }
+  }
+
+  .graph-block {
+    height: 100%;
+    overflow: hidden;
+    border-radius: 0px 0px 8px 8px;
+    background-color: var(--chart-block-header-bg-color);
+  }
+}
+</style>