bfg-common 1.5.24 → 1.5.26

package/components/atoms/tooltip/Signpost.vue~

@@ -0,0 +1,229 @@
+<template>
+  <Teleport to="body">
+    <div
+      id="signpost"
+      :class="['signpost', signpostClass]"
+      :data-id="`${props.testId}-signpost`"
+      :style="signpostStyles"
+      @click.stop
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+    >
+      <div class="signpost-wrap">
+        <div class="popover-pointer" />
+        <div class="signpost-content-header">
+          <button
+            :id="`${props.testId}-close-icon`"
+            :data-id="`${props.testId}-close-icon`"
+            class="signpost-action close"
+            @click="hide"
+          >
+            <atoms-the-icon class="close-icon" name="close" />
+          </button>
+        </div>
+        <div class="signpost-content-body">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ElPosition } from '~/components/atoms/tooltip/lib/models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    elemId: string
+    testId?: string
+  }>(),
+  { testId: 'ui-signpost' }
+)
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+const hide = (): void => {
+  emits('hide')
+}
+
+const signpostStyles = ref<UI_I_ElPosition | null>(null)
+watch(
+  () => props.elemId,
+  (newValue: string) => {
+    const element =
+      (document.getElementById(newValue) as HTMLDivElement) || null
+    const { width, x, y } = element.getBoundingClientRect()
+
+    signpostStyles.value = {
+      top: `${y}px`,
+      left: `${x + width / 2}px`,
+    }
+    setTimeout(() => {
+      setSignpostPosition()
+    }, 0)
+  },
+  { immediate: true }
+)
+const signpostClass = ref<string[]>([])
+const setSignpostPosition = (): void => {
+  const signpost =
+    (document.getElementById('signpost') as HTMLDivElement) || null
+  const signpostRect = (signpost?.getBoundingClientRect() as DOMRect) || null
+
+  type PositionX = 'right' | 'left'
+  let positionX: PositionX = 'right'
+
+  type PositionY = 'top' | 'middle'
+  let positionY: PositionY = 'middle'
+
+  const isOutRight = signpostRect.left + signpostRect.width > window.innerWidth
+  const isOutTop = signpostRect.top < 0
+
+  if (isOutTop) {
+    positionY = 'top'
+  }
+  if (isOutRight) {
+    positionX = 'left'
+  }
+
+  signpostClass.value.push(positionY)
+  signpostClass.value.push(positionX)
+  signpostClass.value.push('show')
+}
+
+const hovered = ref<boolean>(false)
+const windowClick = (): void => {
+  hide()
+}
+const windowScroll = (): void => {
+  if (hovered.value) {
+    return
+  }
+  hide()
+}
+onMounted(() => {
+  setTimeout(() => {
+    window.addEventListener('click', windowClick)
+    window.addEventListener('scroll', windowScroll, true)
+  })
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+  window.removeEventListener('scroll', windowScroll, true)
+})
+</script>
+
+<style scoped lang="scss">
+.signpost {
+  opacity: 0;
+  position: fixed;
+  cursor: default;
+  transform: translateY(calc(-50% + 14px)) translateX(20px);
+  z-index: var(--z-popover);
+
+  &.show {
+    opacity: 1;
+  }
+  &.left {
+    transform: translateY(calc(-50% + 14px)) translateX(calc(-100% - 20px));
+
+    .signpost-wrap {
+      .popover-pointer {
+        left: 100%;
+        border-right: unset;
+        border-left: 12px solid var(--signpost-border-color);
+
+        &::before {
+          border-right: unset;
+          border-left: 12px solid var(--signpost-bgcolor);
+          left: unset;
+          right: 2px;
+        }
+      }
+    }
+  }
+  &.top {
+    transform: translateY(calc(0% + 10px)) translateX(20px);
+
+    &.left {
+      transform: translateY(calc(0% + 10px)) translateX(calc(-100% - 20px));
+
+      .popover-pointer {
+        top: 5px;
+      }
+    }
+
+    .signpost-wrap {
+      .popover-pointer {
+        top: 5px;
+      }
+    }
+  }
+
+  .signpost-wrap {
+    border-radius: 3px;
+    border: 1px solid var(--signpost-border-color);
+    background-color: var(--signpost-bgcolor);
+    position: relative;
+
+    .popover-pointer {
+      border-bottom: 12px solid transparent;
+      top: 50%;
+      transform: translateY(-50%);
+      border-right: 12px solid var(--signpost-border-color);
+      left: -12px;
+      height: 0;
+      width: 0;
+      position: absolute;
+
+      &::before {
+        border-bottom: 12px solid transparent;
+        top: 1px;
+        border-right: 12px solid var(--signpost-bgcolor);
+        left: 2px;
+        content: '';
+        height: 0;
+        width: 0;
+        position: absolute;
+      }
+    }
+
+    .signpost-content-header {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      width: 100%;
+      background-color: inherit;
+      top: 0;
+
+      button {
+        line-height: 24px;
+
+        .close-icon {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    .signpost-content-body {
+      padding: 24px;
+      max-height: 480px;
+      overflow-y: auto;
+      text-transform: none;
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --signpost-bgcolor: #fff;
+  --signpost-border-color: #b3b3b3;
+  --signpost-color: #acbac3;
+}
+:root.dark-theme {
+  --signpost-bgcolor: #21333b;
+  --signpost-border-color: #000;
+  --signpost-color: #acbac3;
+}
+</style>

package/components/common/graph/Graph.vue

@@ -1,5 +1,9 @@
 <template>
-  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
+  <common-graph-graph-new
+    v-if="isNewView"
+    :chart-options="chartOptions"
+    @select-item="onSelectNewViewExportItem"
+  />
   <common-graph-old v-else :chart-options="chartOptions" />
 </template>
 
@@ -36,6 +40,28 @@ const exportChart = (type: string): void => {
     })
   } else if (type === 'csv') {
     localChart.downloadCSV()
+  } else if (type === 'print') {
+    localChart.print()
+  }
+}
+
+const onSelectNewViewExportItem = (value: string): void => {
+  switch (value) {
+    case 'downloadPNG':
+      exportChart('png')
+      break
+    case 'downloadJPEG':
+      exportChart('jpeg')
+      break
+    case 'downloadSVG':
+      exportChart('svg')
+      break
+    case 'downloadCSV':
+      exportChart('csv')
+      break
+    case 'printChart':
+      exportChart('print')
+      break
   }
 }
 
@@ -91,14 +117,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/graph/Graph.vue~

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

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

@@ -0,0 +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}`"
+              is-without-sizes
+              is-without-height
+              variant="text"
+              :class="['metric-export-button', { active: isShowDropdown }]"
+              @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, key)"
+              @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>

package/components/common/graph/graphNew/lib/models/enums.ts

@@ -0,0 +1,9 @@
+export enum E_ChartExportIconByKey {
+  'openNewWindow' = 'new-tab',
+  'printChart' = 'print',
+  'viewFullscreen' = 'view-full-screen',
+  'downloadPNG' = 'download-2',
+  'downloadJPEG' = 'download-2',
+  'downloadSVG' = 'download-2',
+  'downloadCSV' = 'download-2',
+}

package/components/common/pages/home/widgets/services/ServicesNew.vue

@@ -5,7 +5,7 @@
     </template>
     <div v-else class="services-table">
       <div class="services-table__title">
-        <h1>{{ localization.common.services }}</h1>
+        <h1>{{ localization.inventoryConfigure.services }}</h1>
         <span>({{ props.services.length }})</span>
       </div>
 

package/components/common/pages/home/widgets/services/ServicesOld.vue

@@ -2,7 +2,7 @@
   <div class="clr-col-md-6 clr-col-sm-12">
     <div class="entity-status">
       <common-pages-home-card
-        :title="localization.common.services"
+        :title="localization.inventoryConfigure.services"
         :count="props.services.length"
         icon-name="icon-content-libraries"
         class="most-alerts"

package/components/common/pages/tasks/Tasks.vue

@@ -103,9 +103,9 @@ onUnmounted(() => {
     margin-bottom: 22px;
   }
 
-  :deep(.data-table-header) {
-    z-index: var(--z-sticky) !important; // TODO надо удалить потом (clr style)
-  }
+  //:deep(.data-table-header) {
+  //  z-index: var(--z-sticky) !important; // TODO надо удалить потом (clr style)
+  //}
 }
 
 :deep(.table-container) {

package/components/common/split/vertical/VerticalNew.vue

@@ -115,7 +115,7 @@ const props = defineProps<{
     overflow: hidden;
     flex: 1;
     box-shadow: var(--second-panel-box-shadow);
-    z-index: calc(var(--z-default) + 1);
+    //z-index: calc(var(--z-default) + 1);
   }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.24",
+  "version": "1.5.26",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -34,8 +34,8 @@
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
-    "bfg-nuxt-3-graph": "1.0.21",
-    "bfg-uikit": "1.0.378",
+    "bfg-nuxt-3-graph": "1.0.22",
+    "bfg-uikit": "1.0.379",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }

package/package.json~

@@ -0,0 +1,42 @@
+{
+  "name": "bfg-common",
+  "private": false,
+  "version": "1.5.25",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --port=3002",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "minify": "node minify.js",
+    "prepublishOnly": "node minify.js"
+  },
+  "devDependencies": {
+    "@novnc/novnc": "1.4.0",
+    "@vueuse/core": "10.1.2",
+    "@vueuse/nuxt": "10.1.2",
+    "eslint-config-prettier": "^8.5.0",
+    "nuxt": "3.11.2",
+    "prettier": "2.7.1",
+    "sass": "^1.54.9",
+    "sass-loader": "^10.3.1",
+    "terser": "^5.22.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "xterm": "^5.1.0",
+    "xterm-addon-attach": "^0.8.0",
+    "xterm-addon-fit": "^0.7.0",
+    "xterm-addon-serialize": "^0.9.0",
+    "xterm-addon-unicode11": "^0.5.0",
+    "xterm-addon-web-links": "^0.8.0",
+    "eslint-plugin-myrules": "file:./eslint"
+  },
+  "dependencies": {
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@vueuse/components": "^10.1.2",
+    "date-fns": "^2.29.3",
+    "bfg-nuxt-3-graph": "1.0.22",
+    "bfg-uikit": "1.0.379",
+    "html2canvas": "^1.4.1",
+    "prettier-eslint": "^15.0.1"
+  }
+}