@ironsource/shared-ui 2.1.12-test.60 → 2.1.12-test.62
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.
- package/Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css +1 -0
- package/ChartHeader.vue_vue_type_style_index_0_scoped_bd4ef110_lang.css +1 -0
- package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_78a8c051_lang.css +1 -0
- package/ChartLegend.vue_vue_type_style_index_0_scoped_fd9e4ea2_lang.css +1 -0
- package/ChartPlane.vue_vue_type_style_index_0_scoped_10b18e17_lang.css +1 -0
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_81cdfd5e_lang.css +1 -0
- package/SubHeader.vue_vue_type_style_index_0_scoped_74a5418e_lang.css +1 -0
- package/TooltipHeader.vue_vue_type_style_index_0_scoped_40d98a66_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +23 -8
- package/components/chart/Chart.vue.js +4 -4
- package/components/chart/Chart.vue2.js +99 -90
- package/components/chart/ChartHeader.vue.d.ts +7 -7
- package/components/chart/ChartHeader.vue.js +3 -3
- package/components/chart/ChartHeader.vue2.js +48 -79
- package/components/chart/ChartHeaderTrend.vue.d.ts +6 -5
- package/components/chart/ChartHeaderTrend.vue.js +3 -3
- package/components/chart/ChartHeaderTrend.vue2.js +15 -14
- package/components/chart/ChartLegend.vue.d.ts +7 -0
- package/components/chart/ChartLegend.vue.js +3 -3
- package/components/chart/ChartLegend.vue2.js +75 -68
- package/components/chart/ChartPlane.vue.d.ts +29 -9
- package/components/chart/ChartPlane.vue.js +3 -3
- package/components/chart/ChartPlane.vue2.js +290 -252
- package/components/chart/ChartStoryArgs.d.ts +27 -2
- package/components/chart/ChartTooltip.vue.d.ts +6 -1
- package/components/chart/ChartTooltip.vue.js +2 -2
- package/components/chart/ChartTooltip.vue2.js +48 -58
- package/components/chart/components/SubHeader.vue.d.ts +52 -0
- package/components/chart/components/SubHeader.vue.js +7 -0
- package/components/chart/components/SubHeader.vue2.js +61 -0
- package/components/chart/components/TooltipHeader.vue.d.ts +45 -0
- package/components/chart/components/TooltipHeader.vue.js +7 -0
- package/components/chart/components/TooltipHeader.vue2.js +59 -0
- package/components/chart/consts.d.ts +12 -6
- package/components/chart/consts.js +31 -21
- package/components/chart/index.d.ts +101 -43
- package/components/chart/mockData.d.ts +11 -0
- package/components/chart/types.d.ts +25 -5
- package/components/chart/types.js +4 -2
- package/components/chart/utils/highlightUtils.d.ts +3 -0
- package/components/chart/utils/highlightUtils.js +18 -0
- package/components/chart/utils/utils.d.ts +2 -1
- package/components/chart/utils/utils.js +23 -8
- package/consts/common.d.ts +1 -0
- package/consts/common.js +4 -0
- package/consts/regex.d.ts +1 -0
- package/consts/regex.js +2 -1
- package/index.js +13 -9
- package/package.json +1 -1
- package/utils/text.d.ts +3 -0
- package/utils/text.js +24 -5
- package/utils/utils.d.ts +1 -0
- package/utils/utils.js +4 -0
- package/Chart.vue_vue_type_style_index_0_scoped_de950ffe_lang.css +0 -1
- package/ChartHeader.vue_vue_type_style_index_0_scoped_1ff0e54f_lang.css +0 -1
- package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_21ce0774_lang.css +0 -1
- package/ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css +0 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_ae87f435_lang.css +0 -1
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_25d0e129_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-container[data-v-82f5b24e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-82f5b24e]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-82f5b24e]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-82f5b24e]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-82f5b24e]{border-left:1px solid var(--common-divider)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-header[data-v-bd4ef110]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header--compact[data-v-bd4ef110]{padding-top:22px}.chart-header--compact .header-texts[data-v-bd4ef110]{flex-direction:row}.chart-header--compact .header-text[data-v-bd4ef110]{color:var(--text-secondary)}.header-row[data-v-bd4ef110]{display:flex;align-items:flex-end;gap:4px}.header-texts[data-v-bd4ef110]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px;cursor:default}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-trend[data-v-78a8c051]{display:flex}.chart-trend--up[data-v-78a8c051]{color:var(--success-contrast-text)}.chart-trend--up .trend-icon[data-v-78a8c051]{color:var(--success-darker)}.chart-trend--down[data-v-78a8c051]{color:var(--error-contrast-text)}.chart-trend--down .trend-icon[data-v-78a8c051]{color:var(--error-dark)}.chart-trend--right[data-v-78a8c051]{color:var(--warning-contrast-text)}.chart-trend--right .trend-icon[data-v-78a8c051]{color:var(--warning-dark)}.trend-icon[data-v-78a8c051]{display:flex;align-self:normal}.chart-trend-tooltip[data-v-78a8c051]{align-items:normal}.trend-tooltip[data-v-78a8c051]{display:flex;flex-direction:column}.trend-tooltip__header[data-v-78a8c051]{margin-bottom:.375rem}.trend-tooltip__text[data-v-78a8c051]{color:var(--text-secondary)}.separator[data-v-78a8c051]{display:flex;align-items:center;gap:.5rem;justify-content:center;height:1.1875rem}.separator__text[data-v-78a8c051]{display:block;color:var(--text-secondary)}.separator hr[data-v-78a8c051]{width:100%;height:1px;border:0;background:var(--common-divider)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.disabled-tooltip[data-v-fd9e4ea2],.disabled-tooltip[data-v-fd9e4ea2] .container{width:100%}.chart-legend[data-v-fd9e4ea2]{display:flex;flex-direction:column;width:240px;height:100%;padding:0 8px 8px 12px}.search-box[data-v-fd9e4ea2]{padding:12px 0 4px;display:flex;align-items:center;gap:4px}.legend[data-v-fd9e4ea2]{overflow-y:auto;color:var(--text-primary);height:100%;overflow-x:hidden}.legend__list[data-v-fd9e4ea2]{list-style:none;padding:0}.legend__list>li[data-v-fd9e4ea2]{display:flex;align-items:center;gap:8px;padding:6px 8px}.legend__list>li[data-v-fd9e4ea2]:hover{background-color:var(--action-hover);border-radius:8px;cursor:pointer}.legend__list>li.disabled-item[data-v-fd9e4ea2]{cursor:not-allowed!important;opacity:.5;background:var(--background-paper)}.legend__list>li.empty-list[data-v-fd9e4ea2]{display:flex;align-items:center;justify-content:flex-start;height:32px;color:var(--text-disabled)}.legend__list>li.empty-list[data-v-fd9e4ea2]:hover{background-color:transparent;cursor:default}.legend__list>li .item-wrapper[data-v-fd9e4ea2]{display:flex;align-items:center;gap:8px;width:100%}.legend__list>li .item-wrapper .legend-label[data-v-fd9e4ea2]{width:80%}.legend__list>li .item-wrapper .icon-color[data-v-fd9e4ea2]{color:var(--action-active)}.legend__list>li .item-wrapper .label-container[data-v-fd9e4ea2]{display:flex;flex-direction:column;width:100%}.legend__list>li .item-wrapper .label-container .legend-caption[data-v-fd9e4ea2]{display:flex;color:var(--text-secondary)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-plane-container[data-v-10b18e17]{--headerHeight: var(--a21c731a);width:100%;height:var(--2855275e);position:relative}.header-wrapper[data-v-10b18e17]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-10b18e17]{padding-top:var(--headerHeight);height:100%}.chart[data-v-10b18e17]{width:100%;height:100%;position:relative}.chart__canvas[data-v-10b18e17]{width:100%;height:100%}.chart__tooltip[data-v-10b18e17]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-tooltip[data-v-81cdfd5e]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-81cdfd5e]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-81cdfd5e]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-81cdfd5e]{list-style:none;margin:0;padding:0}.list__item[data-v-81cdfd5e]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-81cdfd5e]:last-child{margin-bottom:0}.platform-icon[data-v-81cdfd5e]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-81cdfd5e]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-81cdfd5e]{max-width:90%}.tooltip-footer[data-v-81cdfd5e]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-81cdfd5e]{flex-grow:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.header-row[data-v-74a5418e]{display:flex;align-items:flex-end;gap:4px}.subheader[data-v-74a5418e]{color:var(--text-secondary)}.subheader-tooltip[data-v-74a5418e]{display:flex;flex-direction:column;gap:.25rem}.subheader-tooltip__text[data-v-74a5418e]{color:var(--text-secondary)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.tooltip-title-wrapper[data-v-40d98a66]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-40d98a66]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-40d98a66]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-40d98a66]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-40d98a66]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-40d98a66]{color:var(--action-active)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChartDataSet, ChartParsingConfig, ChartType, ValueFormat } from './types';
|
|
1
|
+
import { ChartDataSet, ChartParsingConfig, ChartType, TooltipOrder, TrendDirection, ValueFormat } from './types';
|
|
2
2
|
import { TotalType } from '@/utils/totals';
|
|
3
3
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
4
|
dataSets: ChartDataSet[];
|
|
@@ -8,19 +8,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
8
8
|
xAxisFormat?: ValueFormat;
|
|
9
9
|
yAxisFormat?: ValueFormat;
|
|
10
10
|
tickCount?: number;
|
|
11
|
+
truncateTickLabels?: boolean;
|
|
11
12
|
loading?: boolean;
|
|
12
13
|
withAnimation?: boolean;
|
|
13
14
|
totalsChart?: boolean;
|
|
14
15
|
tooltipTotalType?: TotalType;
|
|
15
16
|
tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
|
|
17
|
+
tooltipOrder?: TooltipOrder;
|
|
16
18
|
header?: string;
|
|
17
19
|
subheader?: string;
|
|
18
20
|
subheaderTooltip?: {
|
|
19
21
|
header?: string;
|
|
20
22
|
text?: string;
|
|
21
23
|
};
|
|
24
|
+
keepSubheaderVisible?: boolean;
|
|
22
25
|
trendValue?: string | number;
|
|
23
|
-
trendDirection?:
|
|
26
|
+
trendDirection?: TrendDirection;
|
|
24
27
|
trendTooltip?: {
|
|
25
28
|
header?: string;
|
|
26
29
|
rangeCurrent?: string;
|
|
@@ -47,16 +50,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
47
50
|
yAxisFormat: string;
|
|
48
51
|
parsing: any;
|
|
49
52
|
tickCount: number;
|
|
53
|
+
truncateTickLabels: boolean;
|
|
50
54
|
loading: boolean;
|
|
51
55
|
withAnimation: boolean;
|
|
52
56
|
totalsChart: boolean;
|
|
53
57
|
tooltipTotalType: TotalType;
|
|
54
58
|
tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
|
|
59
|
+
tooltipOrder: TooltipOrder;
|
|
55
60
|
header: string;
|
|
56
61
|
subheader: string;
|
|
57
62
|
subheaderTooltip: any;
|
|
63
|
+
keepSubheaderVisible: boolean;
|
|
58
64
|
trendValue: any;
|
|
59
|
-
trendDirection:
|
|
65
|
+
trendDirection: TrendDirection;
|
|
60
66
|
trendTooltip: any;
|
|
61
67
|
noDataIcon: string;
|
|
62
68
|
noDataTitle: string;
|
|
@@ -83,19 +89,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
83
89
|
xAxisFormat?: ValueFormat;
|
|
84
90
|
yAxisFormat?: ValueFormat;
|
|
85
91
|
tickCount?: number;
|
|
92
|
+
truncateTickLabels?: boolean;
|
|
86
93
|
loading?: boolean;
|
|
87
94
|
withAnimation?: boolean;
|
|
88
95
|
totalsChart?: boolean;
|
|
89
96
|
tooltipTotalType?: TotalType;
|
|
90
97
|
tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
|
|
98
|
+
tooltipOrder?: TooltipOrder;
|
|
91
99
|
header?: string;
|
|
92
100
|
subheader?: string;
|
|
93
101
|
subheaderTooltip?: {
|
|
94
102
|
header?: string;
|
|
95
103
|
text?: string;
|
|
96
104
|
};
|
|
105
|
+
keepSubheaderVisible?: boolean;
|
|
97
106
|
trendValue?: string | number;
|
|
98
|
-
trendDirection?:
|
|
107
|
+
trendDirection?: TrendDirection;
|
|
99
108
|
trendTooltip?: {
|
|
100
109
|
header?: string;
|
|
101
110
|
rangeCurrent?: string;
|
|
@@ -122,16 +131,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
122
131
|
yAxisFormat: string;
|
|
123
132
|
parsing: any;
|
|
124
133
|
tickCount: number;
|
|
134
|
+
truncateTickLabels: boolean;
|
|
125
135
|
loading: boolean;
|
|
126
136
|
withAnimation: boolean;
|
|
127
137
|
totalsChart: boolean;
|
|
128
138
|
tooltipTotalType: TotalType;
|
|
129
139
|
tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
|
|
140
|
+
tooltipOrder: TooltipOrder;
|
|
130
141
|
header: string;
|
|
131
142
|
subheader: string;
|
|
132
143
|
subheaderTooltip: any;
|
|
144
|
+
keepSubheaderVisible: boolean;
|
|
133
145
|
trendValue: any;
|
|
134
|
-
trendDirection:
|
|
146
|
+
trendDirection: TrendDirection;
|
|
135
147
|
trendTooltip: any;
|
|
136
148
|
noDataIcon: string;
|
|
137
149
|
noDataTitle: string;
|
|
@@ -163,22 +175,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
163
175
|
chartType: ChartType;
|
|
164
176
|
hideLegend: boolean;
|
|
165
177
|
xAxisFormat: ValueFormat;
|
|
166
|
-
|
|
178
|
+
totalsChart: boolean;
|
|
167
179
|
parsing: ChartParsingConfig;
|
|
180
|
+
yAxisFormat: ValueFormat;
|
|
168
181
|
dataSets: ChartDataSet[];
|
|
169
182
|
trendTooltip: any;
|
|
170
183
|
subheader: string;
|
|
171
184
|
subheaderTooltip: any;
|
|
172
185
|
trendValue: string | number;
|
|
173
|
-
trendDirection:
|
|
186
|
+
trendDirection: TrendDirection;
|
|
174
187
|
tickCount: number;
|
|
188
|
+
truncateTickLabels: boolean;
|
|
189
|
+
keepSubheaderVisible: boolean;
|
|
175
190
|
noDataIcon: string;
|
|
176
191
|
noDataTitle: string;
|
|
177
192
|
noDataSubtitle: string;
|
|
178
193
|
withAnimation: boolean;
|
|
179
194
|
tooltipTotalType: TotalType;
|
|
180
195
|
tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
|
|
181
|
-
|
|
196
|
+
tooltipOrder: TooltipOrder;
|
|
182
197
|
fullHeight: boolean;
|
|
183
198
|
withSettingsHeader: boolean;
|
|
184
199
|
extraCharts: Record<string, unknown>[];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../Chart.
|
|
4
|
-
const p = /* @__PURE__ */ o
|
|
1
|
+
import o from "./Chart.vue2.js";
|
|
2
|
+
/* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css"; //*');
|
|
4
|
+
const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-82f5b24e"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1,43 +1,46 @@
|
|
|
1
|
-
import "../../Chart.
|
|
2
|
-
import { useVModel as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { useColorsMap as
|
|
7
|
-
import { DEFAULT_TICK_COUNT as
|
|
8
|
-
import { ChartType as
|
|
9
|
-
import { useChartHeight as
|
|
10
|
-
import { TotalType as
|
|
11
|
-
const
|
|
1
|
+
import "../../Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css"; import { defineComponent as O, ref as E, computed as n, openBlock as s, createElementBlock as m, Fragment as x, createBlock as k, unref as l, isRef as y, withCtx as d, renderSlot as u, createCommentVNode as I, createElementVNode as L, mergeProps as b, normalizeClass as N, createVNode as D, createSlots as P, renderList as M } from "vue";
|
|
2
|
+
import { useVModel as F } from "@vueuse/core";
|
|
3
|
+
import $ from "./ChartLegend.vue.js";
|
|
4
|
+
import K from "./SettingsHeader.vue.js";
|
|
5
|
+
import V from "./ChartPlane.vue.js";
|
|
6
|
+
import { useColorsMap as z } from "./composables/useColorsMap.js";
|
|
7
|
+
import { DEFAULT_TICK_COUNT as R, DEFAULT_MIN_VISIBLE as X, DEFAULT_MAX_VISIBLE as j } from "./consts.js";
|
|
8
|
+
import { ChartType as q, TooltipOrder as G, TrendDirection as J } from "./types.js";
|
|
9
|
+
import { useChartHeight as Q } from "./composables/useChartHeight.js";
|
|
10
|
+
import { TotalType as W, calculateTotal as Y } from "../../utils/totals.js";
|
|
11
|
+
const Z = {
|
|
12
12
|
key: 0,
|
|
13
13
|
class: "chart-sidebar"
|
|
14
|
-
},
|
|
14
|
+
}, de = /* @__PURE__ */ O({
|
|
15
15
|
__name: "Chart",
|
|
16
16
|
props: {
|
|
17
17
|
dataSets: { default: () => [] },
|
|
18
18
|
visibleIds: { default: () => [] },
|
|
19
|
-
chartType: { default:
|
|
19
|
+
chartType: { default: q.Line },
|
|
20
20
|
parsing: { default: void 0 },
|
|
21
21
|
xAxisFormat: { default: "string" },
|
|
22
22
|
yAxisFormat: { default: "number" },
|
|
23
|
-
tickCount: { default:
|
|
23
|
+
tickCount: { default: R },
|
|
24
|
+
truncateTickLabels: { type: Boolean, default: !0 },
|
|
24
25
|
loading: { type: Boolean, default: !1 },
|
|
25
26
|
withAnimation: { type: Boolean, default: !0 },
|
|
26
27
|
totalsChart: { type: Boolean, default: !1 },
|
|
27
|
-
tooltipTotalType: { default:
|
|
28
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
28
|
+
tooltipTotalType: { default: W.Total },
|
|
29
|
+
tooltipTotalCalcFn: { type: Function, default: Y },
|
|
30
|
+
tooltipOrder: { default: G.Legend },
|
|
29
31
|
header: { default: "" },
|
|
30
32
|
subheader: { default: "" },
|
|
31
33
|
subheaderTooltip: { default: null },
|
|
34
|
+
keepSubheaderVisible: { type: Boolean, default: !1 },
|
|
32
35
|
trendValue: { default: null },
|
|
33
|
-
trendDirection: { default:
|
|
36
|
+
trendDirection: { default: J.UP },
|
|
34
37
|
trendTooltip: { default: null },
|
|
35
38
|
noDataIcon: { default: "file-search" },
|
|
36
39
|
noDataTitle: { default: "No data to display" },
|
|
37
40
|
noDataSubtitle: { default: "Search again with different filters" },
|
|
38
41
|
hideLegend: { type: Boolean, default: !1 },
|
|
39
|
-
minVisible: { default:
|
|
40
|
-
maxVisible: { default:
|
|
42
|
+
minVisible: { default: X },
|
|
43
|
+
maxVisible: { default: j },
|
|
41
44
|
maxLimitTooltipText: { default: "" },
|
|
42
45
|
sortSelected: { default: null },
|
|
43
46
|
sortOptions: { default: () => [] },
|
|
@@ -47,106 +50,112 @@ const J = {
|
|
|
47
50
|
extraCharts: { default: () => [] }
|
|
48
51
|
},
|
|
49
52
|
emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
|
|
50
|
-
setup(
|
|
51
|
-
const
|
|
52
|
-
dataSets:
|
|
53
|
-
visibleIds:
|
|
54
|
-
parsing:
|
|
55
|
-
xAxisFormat:
|
|
56
|
-
yAxisFormat:
|
|
57
|
-
tickCount:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
53
|
+
setup(i, { emit: p }) {
|
|
54
|
+
const e = i, r = F(e, "chartType", p), h = F(e, "sortSelected", p), c = E(null), g = n(() => ({
|
|
55
|
+
dataSets: e.dataSets,
|
|
56
|
+
visibleIds: e.visibleIds,
|
|
57
|
+
parsing: e.parsing,
|
|
58
|
+
xAxisFormat: e.xAxisFormat,
|
|
59
|
+
yAxisFormat: e.yAxisFormat,
|
|
60
|
+
tickCount: e.tickCount,
|
|
61
|
+
truncateTickLabels: e.truncateTickLabels,
|
|
62
|
+
header: e.header,
|
|
63
|
+
subheader: e.subheader,
|
|
64
|
+
loading: e.loading,
|
|
65
|
+
noDataIcon: e.noDataIcon,
|
|
66
|
+
noDataTitle: e.noDataTitle,
|
|
67
|
+
noDataSubtitle: e.noDataSubtitle,
|
|
68
|
+
withAnimation: e.withAnimation,
|
|
69
|
+
typeSwitcher: !e.withSettingsHeader,
|
|
70
|
+
height: U.value,
|
|
67
71
|
compactHeader: C.value > 1,
|
|
68
|
-
trendValue:
|
|
69
|
-
trendDirection:
|
|
70
|
-
trendTooltip:
|
|
71
|
-
totalsChart:
|
|
72
|
-
subheaderTooltip:
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
trendValue: e.trendValue,
|
|
73
|
+
trendDirection: e.trendDirection,
|
|
74
|
+
trendTooltip: e.trendTooltip,
|
|
75
|
+
totalsChart: e.totalsChart,
|
|
76
|
+
subheaderTooltip: e.subheaderTooltip,
|
|
77
|
+
keepSubheaderVisible: e.keepSubheaderVisible,
|
|
78
|
+
colorsMap: f.value,
|
|
79
|
+
tooltipTotalType: e.tooltipTotalType,
|
|
80
|
+
tooltipTotalCalcFn: e.tooltipTotalCalcFn,
|
|
81
|
+
tooltipOrder: e.tooltipOrder,
|
|
82
|
+
highlightedId: c.value
|
|
83
|
+
})), w = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), C = n(() => 1 + v.value), A = (t) => t === v.value - 1, { colorsMap: f } = z({
|
|
77
84
|
dataSets: w,
|
|
78
|
-
visibleIds:
|
|
79
|
-
}), B = n(() =>
|
|
80
|
-
id:
|
|
81
|
-
label:
|
|
82
|
-
caption:
|
|
83
|
-
color:
|
|
84
|
-
icon:
|
|
85
|
-
iconType:
|
|
86
|
-
}))), { containerProps:
|
|
85
|
+
visibleIds: T
|
|
86
|
+
}), B = n(() => e.dataSets.map((t) => ({
|
|
87
|
+
id: t.id,
|
|
88
|
+
label: t.label,
|
|
89
|
+
caption: t.caption || null,
|
|
90
|
+
color: f.value[t.id] || null,
|
|
91
|
+
icon: t.icon || null,
|
|
92
|
+
iconType: t.iconType || "branded"
|
|
93
|
+
}))), { containerProps: H, eachPlaneHeight: U } = Q({
|
|
87
94
|
chartPlanesCount: C,
|
|
88
|
-
useFullHeight:
|
|
95
|
+
useFullHeight: e.fullHeight
|
|
89
96
|
});
|
|
90
|
-
return (
|
|
91
|
-
|
|
97
|
+
return (t, o) => (s(), m(x, null, [
|
|
98
|
+
i.withSettingsHeader ? (s(), k(K, {
|
|
92
99
|
key: 0,
|
|
93
|
-
"chart-type":
|
|
94
|
-
"onUpdate:chart-type":
|
|
95
|
-
"hide-legend":
|
|
100
|
+
"chart-type": l(r),
|
|
101
|
+
"onUpdate:chart-type": o[0] || (o[0] = (a) => y(r) ? r.value = a : null),
|
|
102
|
+
"hide-legend": i.hideLegend
|
|
96
103
|
}, {
|
|
97
104
|
"before-chart-type": d(() => [
|
|
98
|
-
u(
|
|
105
|
+
u(t.$slots, "before-chart-type", {}, void 0, !0)
|
|
99
106
|
]),
|
|
100
107
|
metric: d(() => [
|
|
101
|
-
u(
|
|
108
|
+
u(t.$slots, "metric", {}, void 0, !0)
|
|
102
109
|
]),
|
|
103
110
|
breakdowns: d(() => [
|
|
104
|
-
u(
|
|
111
|
+
u(t.$slots, "breakdowns", {}, void 0, !0)
|
|
105
112
|
]),
|
|
106
113
|
_: 3
|
|
107
114
|
}, 8, ["chart-type", "hide-legend"])) : I("", !0),
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
class: N(["chart-planes", [{ "with-legend": !
|
|
115
|
+
L("div", b({ class: "chart-container" }, l(H)), [
|
|
116
|
+
L("section", {
|
|
117
|
+
class: N(["chart-planes", [{ "with-legend": !i.hideLegend }]])
|
|
111
118
|
}, [
|
|
112
|
-
|
|
113
|
-
"chart-type":
|
|
114
|
-
"onUpdate:chart-type":
|
|
115
|
-
},
|
|
116
|
-
|
|
119
|
+
D(V, b({
|
|
120
|
+
"chart-type": l(r),
|
|
121
|
+
"onUpdate:chart-type": o[1] || (o[1] = (a) => y(r) ? r.value = a : null)
|
|
122
|
+
}, l(g)), P({ _: 2 }, [
|
|
123
|
+
t.$slots["subheader-tooltip"] ? {
|
|
117
124
|
name: "subheader-tooltip",
|
|
118
125
|
fn: d(() => [
|
|
119
|
-
u(
|
|
126
|
+
u(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
120
127
|
]),
|
|
121
128
|
key: "0"
|
|
122
129
|
} : void 0
|
|
123
130
|
]), 1040, ["chart-type"]),
|
|
124
|
-
(s(!0), m(
|
|
125
|
-
key:
|
|
131
|
+
(s(!0), m(x, null, M(i.extraCharts, (a, S) => (s(), k(V, b({
|
|
132
|
+
key: S,
|
|
126
133
|
class: "extra-chart-plane"
|
|
127
|
-
}, { ...
|
|
128
|
-
"chart-type":
|
|
129
|
-
"colors-map":
|
|
134
|
+
}, { ...l(g), ...a }, {
|
|
135
|
+
"chart-type": l(r),
|
|
136
|
+
"colors-map": l(f),
|
|
130
137
|
"type-switcher": !1,
|
|
131
|
-
"tooltip-respects-top-edge": !A(
|
|
138
|
+
"tooltip-respects-top-edge": !A(S)
|
|
132
139
|
}), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
|
|
133
140
|
], 2),
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
"sort-selected":
|
|
137
|
-
"onUpdate:sort-selected":
|
|
138
|
-
|
|
139
|
-
"
|
|
140
|
-
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
|
|
141
|
+
i.hideLegend ? I("", !0) : (s(), m("section", Z, [
|
|
142
|
+
D($, {
|
|
143
|
+
"sort-selected": l(h),
|
|
144
|
+
"onUpdate:sort-selected": o[2] || (o[2] = (a) => y(h) ? h.value = a : null),
|
|
145
|
+
"highlighted-id": c.value,
|
|
146
|
+
"onUpdate:highlighted-id": o[3] || (o[3] = (a) => c.value = a),
|
|
147
|
+
items: l(B),
|
|
148
|
+
"visible-ids": l(T),
|
|
149
|
+
"max-limit-tooltip-text": i.maxLimitTooltipText,
|
|
150
|
+
"sort-options": i.sortOptions,
|
|
151
|
+
"sort-option-name-key": i.sortOptionNameKey,
|
|
152
|
+
"onUpdate:visibleIds": o[4] || (o[4] = (a) => p("update:visibleIds", a))
|
|
153
|
+
}, null, 8, ["sort-selected", "highlighted-id", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
|
|
145
154
|
]))
|
|
146
155
|
], 16)
|
|
147
156
|
], 64));
|
|
148
157
|
}
|
|
149
158
|
});
|
|
150
159
|
export {
|
|
151
|
-
|
|
160
|
+
de as default
|
|
152
161
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChartType } from '@/components/chart/types';
|
|
1
|
+
import { ChartType, TrendDirection } from '@/components/chart/types';
|
|
2
2
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
3
|
chartType: ChartType;
|
|
4
4
|
typeSwitcher: boolean;
|
|
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
15
15
|
};
|
|
16
16
|
compact: boolean;
|
|
17
17
|
trendValue?: string | number;
|
|
18
|
-
trendDirection?:
|
|
18
|
+
trendDirection?: TrendDirection;
|
|
19
19
|
}>, {
|
|
20
20
|
chartType: ChartType;
|
|
21
21
|
typeSwitcher: boolean;
|
|
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
25
25
|
trendTooltip: any;
|
|
26
26
|
compact: boolean;
|
|
27
27
|
trendValue: any;
|
|
28
|
-
trendDirection:
|
|
28
|
+
trendDirection: TrendDirection;
|
|
29
29
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
30
30
|
"update:chartType": (type: ChartType) => void;
|
|
31
31
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
44
44
|
};
|
|
45
45
|
compact: boolean;
|
|
46
46
|
trendValue?: string | number;
|
|
47
|
-
trendDirection?:
|
|
47
|
+
trendDirection?: TrendDirection;
|
|
48
48
|
}>, {
|
|
49
49
|
chartType: ChartType;
|
|
50
50
|
typeSwitcher: boolean;
|
|
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
54
54
|
trendTooltip: any;
|
|
55
55
|
compact: boolean;
|
|
56
56
|
trendValue: any;
|
|
57
|
-
trendDirection:
|
|
57
|
+
trendDirection: TrendDirection;
|
|
58
58
|
}>>> & {
|
|
59
59
|
"onUpdate:chartType"?: (type: ChartType) => any;
|
|
60
60
|
}, {
|
|
@@ -62,11 +62,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
62
62
|
compact: boolean;
|
|
63
63
|
chartType: ChartType;
|
|
64
64
|
trendTooltip: any;
|
|
65
|
-
typeSwitcher: boolean;
|
|
66
65
|
subheader: string;
|
|
67
66
|
subheaderTooltip: any;
|
|
67
|
+
typeSwitcher: boolean;
|
|
68
68
|
trendValue: string | number;
|
|
69
|
-
trendDirection:
|
|
69
|
+
trendDirection: TrendDirection;
|
|
70
70
|
}>, {
|
|
71
71
|
"subheader-tooltip"?(_: {}): any;
|
|
72
72
|
}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "./ChartHeader.vue2.js";
|
|
2
2
|
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../ChartHeader.
|
|
4
|
-
const
|
|
3
|
+
// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_bd4ef110_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-bd4ef110"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
s as default
|
|
7
7
|
};
|