bfg-common 1.4.884 → 1.4.885

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/assets/localization/local_be.json +3025 -3018
  2. package/assets/localization/local_en.json +3029 -3022
  3. package/assets/localization/local_hy.json +3029 -3022
  4. package/assets/localization/local_kk.json +8 -1
  5. package/assets/localization/local_ru.json +8 -1
  6. package/assets/localization/local_zh.json +8 -2
  7. package/components/common/graph/GraphNew.vue +179 -178
  8. package/components/common/monitor/advanced/tools/chartOptionsModal/actions/Actions.vue +106 -106
  9. package/components/common/monitor/advanced/tools/chartOptionsModal/actions/ActionsNew.vue +1 -0
  10. package/components/common/monitor/advanced/tools/chartOptionsModal/actions/lib/utils/optionsActions.ts +28 -25
  11. package/components/common/monitor/overview/Overview.vue +132 -224
  12. package/components/common/monitor/overview/OverviewNew.vue +120 -142
  13. package/components/common/monitor/overview/filters/Filters.vue +169 -166
  14. package/components/common/monitor/overview/filters/FiltersNew.vue +183 -172
  15. package/components/common/monitor/overview/filters/FiltersOld.vue +2 -0
  16. package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModal.vue +173 -175
  17. package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalNew.vue +206 -186
  18. package/components/common/monitor/overview/filters/customIntervalModal/CustomIntervalModalOld.vue +2 -2
  19. package/package.json +2 -2
package/assets/localization/local_kk.json CHANGED
@@ -634,6 +634,8 @@
634
634
  "groupHelpTooltipDesc": "Белгілі бір топ атауын табу үшін «Табу» опциясын пайдаланыңыз және enter/қайтару пернесін басыңыз.",
635
635
  "userHelpTooltipDesc": "Аты, тегін немесе пайдаланушы атын іздеу үшін «Табу» опциясын пайдаланыңыз және енгізу/қайтару пернесін басыңыз.",
636
636
  "helpUsImprove": "Пікіріңізді командамен бөлісу арқылы Procurator Client-ті жақсартуға көмектесіңіз!",
637
+ "hhMmSs": "сс:мм:сс",
638
+ "ddMmYyyy": "кк.кк.жжжж",
637
639
  "hhMmSs24HourFormat": "hh:mm:ss(24-hour format)",
638
640
  "hideKeyboard": "Пернетақтаны жасыру",
639
641
  "high": "Жоғары",
@@ -2062,6 +2064,10 @@
2062
2064
  "weekShort": "Ап",
2063
2065
  "monthShort": "Ай",
2064
2066
  "yearShort": "Ж",
2067
+ "thisYear": "Биыл",
2068
+ "thisMonth": "Осы Айда",
2069
+ "today": "Бүгін",
2070
+ "now": "Қазір",
2065
2071
  "noNetworks": "Желілер жоқ",
2066
2072
  "addAdditionalPhysicalAdapterToSwitch": "Коммутаторға қосымша физикалық желі адаптерін қосыңыз.",
2067
2073
  "currentVariable": "Ағымдағы {0}",
@@ -2763,7 +2769,8 @@
2763
2769
  "availableCapacity": "Қолжетімді Сыйымдылық",
2764
2770
  "dateTimeIsoFormat": "Күн мен уақыт ISO 8601. форматында",
2765
2771
  "deleteConfirmationChartOption": "Растауды жою",
2766
- "deleteConfirmationChartOptionDesc": "\"{0}\" диаграмма опцияларын \"Әдепкіден\" өшіргіңіз келетініне сенімдісіз бе."
2772
+ "deleteConfirmationChartOptionDesc": "\"{0}\" диаграмма опцияларын \"Әдепкіден\" өшіргіңіз келетініне сенімдісіз бе.",
2773
+ "from": "Бастап"
2767
2774
  },
2768
2775
  "inventoryTabs": {
2769
2776
  "summary": "Түйіндеме",
package/assets/localization/local_ru.json CHANGED
@@ -635,6 +635,8 @@
635
635
  "groupHelpTooltipDesc": "Используйте опцию «Найти», чтобы найти определенное имя группы, и нажмите клавишу Enter / Return. Результаты будут занесены в таблицу ниже.",
636
636
  "userHelpTooltipDesc": "Используйте опцию «Найти», чтобы найти имя, фамилию или имя пользователя, и нажмите клавишу ввода/возврата.",
637
637
  "helpUsImprove": "Помогите нам улучшить клиент Прокуратор, поделившись своим отзывом!",
638
+ "hhMmSs": "чч:мм:сс",
639
+ "ddMmYyyy": "дд.мм.гггг",
638
640
  "hhMmSs24HourFormat": "hh:mm:ss(24-hour format)",
639
641
  "hideKeyboard": "Скрыть клавиатуру",
640
642
  "high": "Высокий",
@@ -2064,6 +2066,10 @@
2064
2066
  "weekShort": "Н",
2065
2067
  "monthShort": "М",
2066
2068
  "yearShort": "Г",
2069
+ "thisYear": "Этот год",
2070
+ "thisMonth": "В этом месяце",
2071
+ "today": "Сегодня",
2072
+ "now": "Сейчас",
2067
2073
  "noNetworks": "Нет сетей",
2068
2074
  "addAdditionalPhysicalAdapterToSwitch": "Добавьте к коммутатору дополнительный физический сетевой адаптер.",
2069
2075
  "currentVariable": "Текущий {0}",
@@ -2765,7 +2771,8 @@
2765
2771
  "availableCapacity": "Доступная емкость",
2766
2772
  "dateTimeIsoFormat": "Дата и время в формате ISO 8601.",
2767
2773
  "deleteConfirmationChartOption": "Подтверждение удаления",
2768
- "deleteConfirmationChartOptionDesc": "Вы уверены, что хотите удалить параметры диаграммы «{0}» из «По умолчанию»?"
2774
+ "deleteConfirmationChartOptionDesc": "Вы уверены, что хотите удалить параметры диаграммы «{0}» из «По умолчанию»?",
2775
+ "from": "С"
2769
2776
  },
2770
2777
  "inventoryTabs": {
2771
2778
  "summary": "Сводка",
package/assets/localization/local_zh.json CHANGED
@@ -634,7 +634,8 @@
634
634
  "groupHelpTooltipDesc": "使用“查找”选项查找特定的组名，然后按回车/返回键。",
635
635
  "userHelpTooltipDesc": "使用“查找”选项查找名字、姓氏或用户名，然后按回车/返回键。",
636
636
  "helpUsImprove": "通過與團隊分享您的反饋來幫助我們改進 Procurator Client！",
637
- "hhMmSs24HourFormat": "hh:mm:ss(24-hour format)",
637
+ "hhMmSs": "时:分:秒",
638
+ "ddMmYyyy": "日.月.年",
638
639
  "hideKeyboard": "隐藏键盘",
639
640
  "high": "高的",
640
641
  "highAvailability": "医管局状态",
@@ -2062,6 +2063,10 @@
2062
2063
  "weekShort": "周",
2063
2064
  "monthShort": "月",
2064
2065
  "yearShort": "年",
2066
+ "thisYear": "今年",
2067
+ "thisMonth": "本月",
2068
+ "today": "今天",
2069
+ "now": "现在",
2065
2070
  "noNetworks": "没有网络",
2066
2071
  "addAdditionalPhysicalAdapterToSwitch": "向交换机添加额外的物理网络适配器。",
2067
2072
  "currentVariable": "当前的 {0}",
@@ -2762,7 +2767,8 @@
2762
2767
  "availableCapacity": "可用容量",
2763
2768
  "dateTimeIsoFormat": "日期和时间为ISO 8601格式。",
2764
2769
  "deleteConfirmationChartOption": "删除确认",
2765
- "deleteConfirmationChartOptionDesc": "您确定要从“默认”中删除图表选项“{0}”吗？"
2770
+ "deleteConfirmationChartOptionDesc": "您确定要从“默认”中删除图表选项“{0}”吗？",
2771
+ "from": "从"
2766
2772
  },
2767
2773
  "inventoryTabs": {
2768
2774
  "summary": "概括",
package/components/common/graph/GraphNew.vue CHANGED
@@ -1,178 +1,179 @@
1
- <template>
2
- <div :class="['graph-content', ...hiddenButtons]">
3
- <template v-if="props.chartOptions">
4
- <client-only>
5
- <highchart
6
- :options="props.chartOptions"
7
- :modules="['exporting', 'export-data']"
8
- class="graph-block"
9
- />
10
- </client-only>
11
- </template>
12
- </div>
13
- </template>
14
-
15
- <script setup lang="ts">
16
- const props = defineProps<{
17
- chartOptions: any
18
- }>()
19
-
20
- const hiddenButtons = computed<string[]>(() => {
21
- const result = []
22
- const chartOptions = props.chartOptions
23
- if (chartOptions) {
24
- const { openNewWindow } = chartOptions.exporting.menuItemDefinitions || {}
25
-
26
- if (openNewWindow.isHide) result.push('hide-new-window')
27
- }
28
-
29
- return result
30
- })
31
- </script>
32
-
33
- <style>
34
- :root {
35
- --chart-background-color: #ffffff;
36
- --chart-menu-line-color: #4d5d69;
37
- --chart-menu-line-hover-color: #213444;
38
- --chart-menu-line-active-color: #008fd6;
39
- --chart-menu-background-color: #ffffff;
40
- --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f;
41
- --chart-menu-border-color: #e9ebed;
42
- --chart-menu-item-color: #4d5d69;
43
- --chart-menu-item-hover-color: #182531;
44
- --chart-menu-item-hover-background-color: rgba(233, 235, 237, 0.4);
45
-
46
- --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");
47
- --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");
48
- --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");
49
- --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");
50
- --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");
51
- --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");
52
- --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");
53
- --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");
54
- }
55
- :root.dark-theme {
56
- --chart-background-color: #334453;
57
- --chart-menu-line-color: #e9eaec;
58
- --chart-menu-line-hover-color: #ffffff;
59
- --chart-menu-line-active-color: #2ba2de;
60
- --chart-menu-background-color: #334453;
61
- --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f,
62
- 0px -1px 12px 0px #00000014;
63
- --chart-menu-border-color: #e9ebed1f;
64
- --chart-menu-item-color: #e9eaec;
65
- --chart-menu-item-hover-color: #ffffff;
66
- --chart-menu-item-hover-background-color: #e9ebed0f;
67
-
68
- --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");
69
- --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");
70
- --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");
71
- --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");
72
- --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");
73
- --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");
74
- --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");
75
- --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");
76
- }
77
- </style>
78
- <style scoped lang="scss">
79
- .graph-content {
80
- width: 100%;
81
- //height: inherit;
82
- height: 100%;
83
-
84
- &.hide-new-window {
85
- :deep(.highcharts-menu) {
86
- .highcharts-menu-item:first-child {
87
- display: none;
88
- }
89
- }
90
- }
91
-
92
- .graph-block {
93
- height: 100%;
94
- border-radius: 8px;
95
- box-shadow: 0 1px 4px 0 #00000014;
96
- overflow: hidden;
97
- }
98
- }
99
-
100
- :deep(.highcharts-background) {
101
- fill: var(--chart-background-color);
102
- }
103
- :deep(.highcharts-button-box) {
104
- fill: transparent;
105
-
106
- &:hover + .highcharts-button-symbol {
107
- stroke: var(--chart-menu-line-hover-color);
108
- }
109
- }
110
- // TODO найти решение по лучше
111
- :deep(.highcharts-button-box[fill='#e6e9ff'] + .highcharts-button-symbol) {
112
- stroke: var(--chart-menu-line-active-color);
113
- }
114
- :deep(.highcharts-button-symbol) {
115
- stroke: var(--chart-menu-line-color);
116
- stroke-width: 2px;
117
- }
118
- :deep(.highcharts-menu) {
119
- display: flex;
120
- flex-direction: column;
121
- gap: 8px;
122
- background-color: var(--chart-menu-background-color) !important;
123
- box-shadow: var(--chart-menu-box-shadow) !important;
124
- padding: 8px !important;
125
- border-radius: 8px !important;
126
-
127
- .highcharts-menu-item {
128
- display: flex;
129
- align-items: center;
130
- gap: 8px;
131
- font-size: 13px !important;
132
- font-weight: 500 !important;
133
- color: var(--chart-menu-item-color) !important;
134
- padding: 8px !important;
135
-
136
- &:hover {
137
- color: var(--chart-menu-item-hover-color) !important;
138
- background-color: var(
139
- --chart-menu-item-hover-background-color
140
- ) !important;
141
-
142
- &::before {
143
- content: var(--chart-menu-download-icon-hover);
144
- }
145
- &:first-child::before {
146
- content: var(--chart-menu-new-tab-icon-hover);
147
- }
148
- &:nth-child(2)::before {
149
- content: var(--chart-menu-full-screen-icon-hover);
150
- }
151
- &:nth-child(3)::before {
152
- content: var(--chart-menu-print-icon-hover);
153
- }
154
- }
155
- &::before {
156
- content: var(--chart-menu-download-icon);
157
- display: inline-block;
158
- width: 16px;
159
- height: 16px;
160
- }
161
- &:first-child::before {
162
- content: var(--chart-menu-new-tab-icon);
163
- }
164
- &:nth-child(2)::before {
165
- content: var(--chart-menu-full-screen-icon);
166
- }
167
- &:nth-child(3)::before {
168
- content: var(--chart-menu-print-icon);
169
- }
170
- }
171
- hr {
172
- border-color: var(--chart-menu-border-color);
173
- border-style: solid;
174
- margin: 0 8px;
175
- border-width: 1px;
176
- }
177
- }
178
- </style>
1
+ <template>
2
+ <div :class="['graph-content', ...hiddenButtons]">
3
+ <template v-if="props.chartOptions">
4
+ <client-only>
5
+ <highchart
6
+ :options="props.chartOptions"
7
+ :modules="['exporting', 'export-data']"
8
+ class="graph-block"
9
+ />
10
+ </client-only>
11
+ </template>
12
+ </div>
13
+ </template>
14
+
15
+ <script setup lang="ts">
16
+ const props = defineProps<{
17
+ chartOptions: any
18
+ }>()
19
+
20
+ const hiddenButtons = computed<string[]>(() => {
21
+ const result = []
22
+ const chartOptions = props.chartOptions
23
+ if (chartOptions) {
24
+ const { openNewWindow } = chartOptions.exporting.menuItemDefinitions || {}
25
+
26
+ if (openNewWindow.isHide) result.push('hide-new-window')
27
+ }
28
+
29
+ return result
30
+ })
31
+ </script>
32
+
33
+ <style>
34
+ :root {
35
+ --chart-background-color: #ffffff;
36
+ --chart-menu-line-color: #4d5d69;
37
+ --chart-menu-line-hover-color: #213444;
38
+ --chart-menu-line-active-color: #008fd6;
39
+ --chart-menu-background-color: #ffffff;
40
+ --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f;
41
+ --chart-menu-border-color: #e9ebed;
42
+ --chart-menu-item-color: #4d5d69;
43
+ --chart-menu-item-hover-color: #182531;
44
+ --chart-menu-item-hover-background-color: rgba(233, 235, 237, 0.4);
45
+
46
+ --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");
47
+ --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");
48
+ --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");
49
+ --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");
50
+ --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");
51
+ --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");
52
+ --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");
53
+ --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");
54
+ }
55
+ :root.dark-theme {
56
+ --chart-background-color: #334453;
57
+ --chart-menu-line-color: #e9eaec;
58
+ --chart-menu-line-hover-color: #ffffff;
59
+ --chart-menu-line-active-color: #2ba2de;
60
+ --chart-menu-background-color: #334453;
61
+ --chart-menu-box-shadow: 0px 4px 20px 0px #0000001f,
62
+ 0px -1px 12px 0px #00000014;
63
+ --chart-menu-border-color: #e9ebed1f;
64
+ --chart-menu-item-color: #e9eaec;
65
+ --chart-menu-item-hover-color: #ffffff;
66
+ --chart-menu-item-hover-background-color: #e9ebed0f;
67
+
68
+ --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");
69
+ --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");
70
+ --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");
71
+ --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");
72
+ --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");
73
+ --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");
74
+ --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");
75
+ --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");
76
+ }
77
+ </style>
78
+ <style scoped lang="scss">
79
+ .graph-content {
80
+ width: 100%;
81
+ //height: inherit;
82
+ height: 100%;
83
+
84
+ &.hide-new-window {
85
+ :deep(.highcharts-menu) {
86
+ .highcharts-menu-item:first-child {
87
+ display: none;
88
+ }
89
+ }
90
+ }
91
+
92
+ .graph-block {
93
+ height: 100%;
94
+ border-radius: 8px;
95
+ box-shadow: 0 1px 4px 0 #00000014;
96
+ overflow: hidden;
97
+ }
98
+ }
99
+
100
+ :deep(.highcharts-background) {
101
+ fill: var(--chart-background-color);
102
+ }
103
+ :deep(.highcharts-button-box) {
104
+ fill: transparent;
105
+
106
+ &:hover + .highcharts-button-symbol {
107
+ stroke: var(--chart-menu-line-hover-color);
108
+ }
109
+ }
110
+ // TODO найти решение по лучше
111
+ :deep(.highcharts-button-box[fill='#e6e9ff'] + .highcharts-button-symbol) {
112
+ stroke: var(--chart-menu-line-active-color);
113
+ }
114
+ :deep(.highcharts-button-symbol) {
115
+ stroke: var(--chart-menu-line-color);
116
+ stroke-width: 2px;
117
+ }
118
+ :deep(.highcharts-menu) {
119
+ display: flex;
120
+ flex-direction: column;
121
+ gap: 8px;
122
+ background-color: var(--chart-menu-background-color) !important;
123
+ box-shadow: var(--chart-menu-box-shadow) !important;
124
+ padding: 8px !important;
125
+ border-radius: 8px !important;
126
+
127
+ .highcharts-menu-item {
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 8px;
131
+ font-size: 13px !important;
132
+ font-weight: 500 !important;
133
+ color: var(--chart-menu-item-color) !important;
134
+ padding: 8px !important;
135
+
136
+ &:hover {
137
+ color: var(--chart-menu-item-hover-color) !important;
138
+ background-color: var(
139
+ --chart-menu-item-hover-background-color
140
+ ) !important;
141
+
142
+ &::before {
143
+ content: var(--chart-menu-download-icon-hover);
144
+ }
145
+ &:first-child::before {
146
+ content: var(--chart-menu-new-tab-icon-hover);
147
+ }
148
+ &:nth-child(2)::before {
149
+ content: var(--chart-menu-full-screen-icon-hover);
150
+ }
151
+ &:nth-child(3)::before {
152
+ content: var(--chart-menu-print-icon-hover);
153
+ }
154
+ }
155
+ &::before {
156
+ content: var(--chart-menu-download-icon);
157
+ display: inline-block;
158
+ width: 16px;
159
+ height: 16px;
160
+ }
161
+ &:first-child::before {
162
+ content: var(--chart-menu-new-tab-icon);
163
+ }
164
+ &:nth-child(2)::before {
165
+ content: var(--chart-menu-full-screen-icon);
166
+ }
167
+ &:nth-child(3)::before {
168
+ content: var(--chart-menu-print-icon);
169
+ }
170
+ }
171
+ hr {
172
+ margin: 0 8px;
173
+ border: unset;
174
+ width: calc(100% - 16px);
175
+ height: 1px;
176
+ background-color: var(--chart-menu-border-color);
177
+ }
178
+ }
179
+ </style>