bfg-common 1.5.26 → 1.5.27

package/components/common/graph/GraphNew.vue

@@ -0,0 +1,179 @@
+<template>
+  <div :class="['graph-content', ...hiddenButtons]">
+    <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
+}>()
+
+const hiddenButtons = computed<string[]>(() => {
+  const result = []
+  const chartOptions = props.chartOptions
+  if (chartOptions) {
+    const { openNewWindow } = chartOptions.exporting.menuItemDefinitions || {}
+
+    if (openNewWindow.isHide) result.push('hide-new-window')
+  }
+
+  return result
+})
+</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: rgba(233, 235, 237, 0.4);
+
+  --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");
+  --chart-menu-new-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 2H14V6' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66699 9.33333L14.0003 2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33333 4H3.33333C2.59695 4 2 4.59695 2 5.33333V12.6667C2 13.403 2.59695 14 3.33333 14H10.6667C11.403 14 12 13.403 12 12.6667V8.66667' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
+  --chart-menu-new-tab-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 2H14V6' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66699 9.33333L14.0003 2' stroke='%23182531' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33333 4H3.33333C2.59695 4 2 4.59695 2 5.33333V12.6667C2 13.403 2.59695 14 3.33333 14H10.6667C11.403 14 12 13.403 12 12.6667V8.66667' stroke='%23182531' stroke-width='1.4' stroke-linecap='round'/%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");
+  --chart-menu-new-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 2H14V6' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66699 9.33333L14.0003 2' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33333 4H3.33333C2.59695 4 2 4.59695 2 5.33333V12.6667C2 13.403 2.59695 14 3.33333 14H10.6667C11.403 14 12 13.403 12 12.6667V8.66667' stroke='%23E9EAEC' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
+  --chart-menu-new-tab-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10 2H14V6' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66699 9.33333L14.0003 2' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33333 4H3.33333C2.59695 4 2 4.59695 2 5.33333V12.6667C2 13.403 2.59695 14 3.33333 14H10.6667C11.403 14 12 13.403 12 12.6667V8.66667' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+</style>
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  &.hide-new-window {
+    :deep(.highcharts-menu) {
+      .highcharts-menu-item:first-child {
+        display: none;
+      }
+    }
+  }
+
+  .graph-block {
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px 0 #00000014;
+    overflow: hidden;
+  }
+}
+
+: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-new-tab-icon-hover);
+      }
+      &:nth-child(2)::before {
+        content: var(--chart-menu-full-screen-icon-hover);
+      }
+      &:nth-child(3)::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-new-tab-icon);
+    }
+    &:nth-child(2)::before {
+      content: var(--chart-menu-full-screen-icon);
+    }
+    &:nth-child(3)::before {
+      content: var(--chart-menu-print-icon);
+    }
+  }
+  hr {
+    margin: 0 8px;
+    border: unset;
+    width: calc(100% - 16px);
+    height: 1px;
+    background-color: var(--chart-menu-border-color);
+  }
+}
+</style>

package/components/common/layout/theHeader/helpMenu/About.vue

@@ -1,82 +1,82 @@
-<template>
-  <Teleport to="body">
-    <common-layout-the-header-help-menu-about-new
-      v-if="isNewView"
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-
-    <common-layout-the-header-help-menu-about-old
-      v-else
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  version: string
-  projectName: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-const config = useRuntimeConfig()
-
-const companyName = computed<string>(
-  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
-)
-const brandName = computed<string>(
-  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
-)
-
-const companyWebSitePath = ref<string>('https://iridium-soft.com/')
-
-const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
-const subtitle = computed<string>(() =>
-  localization.value.layout.aboutWebClientVersion
-    .replace('{0}', props.projectName)
-    .replace('{1}', props.version)
-)
-
-const aboutHeadingText = computed<string>(() =>
-  localization.value.layout.aboutHeading.replace(
-    '{companyName}',
-    companyName.value
-  ).replace(
-    '{year}',
-      new Date().getFullYear() + ''
-  )
-)
-
-const aboutDesc1 = computed<string>(() =>
-  localization.value.layout.aboutDesc1
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-const aboutDesc2 = computed<string>(() =>
-  localization.value.layout.aboutDesc2
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
+<template>
+  <Teleport to="body">
+    <common-layout-the-header-help-menu-about-new
+      v-if="isNewView"
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+
+    <common-layout-the-header-help-menu-about-old
+      v-else
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  version: string
+  projectName: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const config = useRuntimeConfig()
+
+const companyName = computed<string>(
+  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
+)
+const brandName = computed<string>(
+  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
+)
+
+const companyWebSitePath = ref<string>('https://iridium-soft.com/')
+
+const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
+const subtitle = computed<string>(() =>
+  localization.value.layout.aboutWebClientVersion
+    .replace('{0}', props.projectName)
+    .replace('{1}', props.version)
+)
+
+const aboutHeadingText = computed<string>(() =>
+  localization.value.layout.aboutHeading.replace(
+    '{companyName}',
+    companyName.value
+  ).replace(
+    '{year}',
+      new Date().getFullYear() + ''
+  )
+)
+
+const aboutDesc1 = computed<string>(() =>
+  localization.value.layout.aboutDesc1
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+const aboutDesc2 = computed<string>(() =>
+  localization.value.layout.aboutDesc2
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>

package/components/common/layout/theHeader/helpMenu/aboutNew/AboutNew.vue

@@ -1,103 +1,103 @@
-<template>
-  <ui-modal
-    test-id="about-modal"
-    width="720px"
-    :title="props.title"
-    :subtitle="props.subtitle"
-    class="about-modal"
-    @hide="onHideModal"
-  >
-    <template #content>
-      <ui-modal-block-standard>
-        <div class="about-modal__text">
-          <p>{{ aboutHeadingText }}</p>
-
-          <p>{{ localization.layout.aboutSubtitle }}</p>
-        </div>
-
-        <div class="about-modal__description">
-          {{ props.aboutDescOne }}
-
-          (<a
-            id="about-description-link"
-            data-id="about-description-link"
-            :href="url"
-            target="_blank"
-            class="about-modal__description-link"
-          >
-            {{ props.url }} </a
-          >)
-
-          {{ props.aboutDescSecond }}
-        </div>
-      </ui-modal-block-standard>
-    </template>
-    <template #footerContent><span /></template>
-    <template #footerLeftContent><span /></template>
-  </ui-modal>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  subtitle: string
-  aboutHeadingText: string
-  aboutDescOne: string
-  aboutDescSecond: string
-  projectName: string
-  url: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style>
-:root {
-  --about-text-color: #4d5d69;
-  --about-text-link-hover-color: #0081c1;
-}
-:root.dark-theme {
-  --about-text-color: #9da6ad;
-  --about-text-link-hover-color: #008fd6;
-}
-</style>
-
-<style lang="scss" scoped>
-.about-modal {
-  &__text {
-    color: var(--about-text-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 15.73px;
-
-    p:last-child {
-      margin: 16px 0;
-    }
-  }
-  &__description {
-    color: var(--about-text-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 15.73px;
-
-    &-link {
-      color: #0786d2;
-      &:hover {
-        color: var(--about-text-link-hover-color);
-      }
-    }
-  }
-}
-:deep(.title-wrapper__subtitle) {
-  max-width: 400px;
-}
-</style>
+<template>
+  <ui-modal
+    test-id="about-modal"
+    width="720px"
+    :title="props.title"
+    :subtitle="props.subtitle"
+    class="about-modal"
+    @hide="onHideModal"
+  >
+    <template #content>
+      <ui-modal-block-standard>
+        <div class="about-modal__text">
+          <p>{{ aboutHeadingText }}</p>
+
+          <p>{{ localization.layout.aboutSubtitle }}</p>
+        </div>
+
+        <div class="about-modal__description">
+          {{ props.aboutDescOne }}
+
+          (<a
+            id="about-description-link"
+            data-id="about-description-link"
+            :href="url"
+            target="_blank"
+            class="about-modal__description-link"
+          >
+            {{ props.url }} </a
+          >)
+
+          {{ props.aboutDescSecond }}
+        </div>
+      </ui-modal-block-standard>
+    </template>
+    <template #footerContent><span /></template>
+    <template #footerLeftContent><span /></template>
+  </ui-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  subtitle: string
+  aboutHeadingText: string
+  aboutDescOne: string
+  aboutDescSecond: string
+  projectName: string
+  url: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style>
+:root {
+  --about-text-color: #4d5d69;
+  --about-text-link-hover-color: #0081c1;
+}
+:root.dark-theme {
+  --about-text-color: #9da6ad;
+  --about-text-link-hover-color: #008fd6;
+}
+</style>
+
+<style lang="scss" scoped>
+.about-modal {
+  &__text {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
+
+    p:last-child {
+      margin: 16px 0;
+    }
+  }
+  &__description {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
+
+    &-link {
+      color: #0786d2;
+      &:hover {
+        color: var(--about-text-link-hover-color);
+      }
+    }
+  }
+}
+:deep(.title-wrapper__subtitle) {
+  max-width: 400px;
+}
+</style>