@ironsource/shared-ui 2.1.12-test.85 → 2.1.12-test.87
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_e8f25a03_lang.css +1 -0
- package/ChartHeader.vue_vue_type_style_index_0_scoped_af520313_lang.css +1 -0
- package/ChartPlane.vue_vue_type_style_index_0_scoped_4f67d41d_lang.css +1 -0
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_f5204c04_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +5 -0
- package/components/chart/Chart.vue.js +3 -3
- package/components/chart/Chart.vue2.js +6 -4
- package/components/chart/ChartHeader.vue.d.ts +5 -0
- package/components/chart/ChartHeader.vue.js +2 -2
- package/components/chart/ChartHeader.vue2.js +43 -35
- package/components/chart/ChartPlane.vue.d.ts +5 -0
- package/components/chart/ChartPlane.vue.js +4 -4
- package/components/chart/ChartPlane.vue2.js +33 -31
- package/components/chart/index.d.ts +20 -1
- package/components/dropdown/v4/ConditionalDropdown.vue.js +2 -2
- package/components/dropdown/v4/ConditionalDropdown.vue2.js +119 -110
- package/index.js +1 -1
- package/package.json +1 -1
- package/Chart.vue_vue_type_style_index_0_scoped_03771fa3_lang.css +0 -1
- package/ChartHeader.vue_vue_type_style_index_0_scoped_da34b108_lang.css +0 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_ff7e556e_lang.css +0 -1
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_683b8a75_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-container[data-v-e8f25a03]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-e8f25a03]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-e8f25a03]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-e8f25a03]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-e8f25a03]{border-left:1px solid var(--common-divider)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-header[data-v-af520313]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header--compact[data-v-af520313]{padding-top:22px}.chart-header--compact .header-texts[data-v-af520313]{flex-direction:row}.chart-header--compact .header-text[data-v-af520313]{color:var(--text-secondary)}.header-row[data-v-af520313]{display:flex;align-items:flex-end;gap:4px}.header-texts[data-v-af520313]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px;cursor:default}.header-actions[data-v-af520313]{display:flex;align-items:center;gap:var(--spacing-200)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-plane-container[data-v-4f67d41d]{--headerHeight: var(--11153e48);width:100%;height:var(--30644433);position:relative}.header-wrapper[data-v-4f67d41d]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-4f67d41d]{padding-top:var(--headerHeight);height:100%}.chart-empty[data-v-4f67d41d]{background:var(--background-paper)}.chart[data-v-4f67d41d]{width:100%;height:100%;position:relative}.chart__canvas[data-v-4f67d41d]{width:100%;height:100%}.chart__tooltip[data-v-4f67d41d]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.custom-list-area[data-v-f5204c04]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 10px}.inline-search[data-v-f5204c04]{width:100%}.contain-accept[data-v-f5204c04]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-f5204c04]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-f5204c04]{margin-left:4px;display:inline-flex;color:var(--primary-main)}
|
|
@@ -33,6 +33,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
33
33
|
rangeCurrent?: string;
|
|
34
34
|
rangePrevious?: string;
|
|
35
35
|
};
|
|
36
|
+
noteText?: string;
|
|
36
37
|
noDataIcon?: string;
|
|
37
38
|
noDataTitle?: string;
|
|
38
39
|
noDataSubtitle?: string;
|
|
@@ -73,6 +74,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
73
74
|
trendValue: any;
|
|
74
75
|
trendDirection: TrendDirection;
|
|
75
76
|
trendTooltip: any;
|
|
77
|
+
noteText: string;
|
|
76
78
|
noDataIcon: string;
|
|
77
79
|
noDataTitle: string;
|
|
78
80
|
noDataSubtitle: string;
|
|
@@ -124,6 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
124
126
|
rangeCurrent?: string;
|
|
125
127
|
rangePrevious?: string;
|
|
126
128
|
};
|
|
129
|
+
noteText?: string;
|
|
127
130
|
noDataIcon?: string;
|
|
128
131
|
noDataTitle?: string;
|
|
129
132
|
noDataSubtitle?: string;
|
|
@@ -164,6 +167,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
164
167
|
trendValue: any;
|
|
165
168
|
trendDirection: TrendDirection;
|
|
166
169
|
trendTooltip: any;
|
|
170
|
+
noteText: string;
|
|
167
171
|
noDataIcon: string;
|
|
168
172
|
noDataTitle: string;
|
|
169
173
|
noDataSubtitle: string;
|
|
@@ -206,6 +210,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
206
210
|
subheaderTooltip: any;
|
|
207
211
|
trendValue: string | number;
|
|
208
212
|
trendDirection: TrendDirection;
|
|
213
|
+
noteText: string;
|
|
209
214
|
dataSets: ChartDataSet[];
|
|
210
215
|
tickCount: number;
|
|
211
216
|
truncateTickLabels: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./Chart.vue2.js";
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../Chart.
|
|
4
|
-
const a = /* @__PURE__ */
|
|
2
|
+
/* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../Chart.vue_vue_type_style_index_0_scoped_e8f25a03_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e8f25a03"]]);
|
|
5
5
|
export {
|
|
6
6
|
a as default
|
|
7
7
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../Chart.
|
|
1
|
+
import "../../Chart.vue_vue_type_style_index_0_scoped_e8f25a03_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as g, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
|
|
2
2
|
import { useVModel as A } from "@vueuse/core";
|
|
3
3
|
import $ from "./ChartLegend.vue.js";
|
|
4
4
|
import K from "./SettingsHeader.vue.js";
|
|
@@ -39,6 +39,7 @@ const _ = {
|
|
|
39
39
|
trendValue: { default: null },
|
|
40
40
|
trendDirection: { default: J.UP },
|
|
41
41
|
trendTooltip: { default: null },
|
|
42
|
+
noteText: { default: "" },
|
|
42
43
|
noDataIcon: { default: "file-search" },
|
|
43
44
|
noDataTitle: { default: "No data to display" },
|
|
44
45
|
noDataSubtitle: { default: "Search again with different filters" },
|
|
@@ -67,6 +68,7 @@ const _ = {
|
|
|
67
68
|
truncateTickLabels: e.truncateTickLabels,
|
|
68
69
|
header: e.header,
|
|
69
70
|
subheader: e.subheader,
|
|
71
|
+
noteText: e.noteText,
|
|
70
72
|
loading: e.loading,
|
|
71
73
|
empty: e.empty,
|
|
72
74
|
noDataIcon: e.noDataIcon,
|
|
@@ -89,9 +91,9 @@ const _ = {
|
|
|
89
91
|
highlightedId: h.value,
|
|
90
92
|
valueSuffix: e.valueSuffix,
|
|
91
93
|
valuePrefix: e.valuePrefix
|
|
92
|
-
})), V = n(() => e.dataSets),
|
|
94
|
+
})), V = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), x = n(() => 1 + v.value), F = (t) => t === v.value - 1, { colorsMap: f } = z({
|
|
93
95
|
dataSets: V,
|
|
94
|
-
visibleIds:
|
|
96
|
+
visibleIds: T
|
|
95
97
|
}), w = n(() => e.dataSets.map((t) => ({
|
|
96
98
|
id: t.id,
|
|
97
99
|
label: t.label,
|
|
@@ -155,7 +157,7 @@ const _ = {
|
|
|
155
157
|
"highlighted-id": h.value,
|
|
156
158
|
"onUpdate:highlighted-id": o[3] || (o[3] = (l) => h.value = l),
|
|
157
159
|
items: i(w),
|
|
158
|
-
"visible-ids": i(
|
|
160
|
+
"visible-ids": i(T),
|
|
159
161
|
"max-limit-tooltip-text": a.maxLimitTooltipText,
|
|
160
162
|
"sort-options": a.sortOptions,
|
|
161
163
|
"sort-option-name-key": a.sortOptionNameKey,
|
|
@@ -16,6 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
16
16
|
compact: boolean;
|
|
17
17
|
trendValue?: string | number;
|
|
18
18
|
trendDirection?: TrendDirection;
|
|
19
|
+
noteText?: string;
|
|
19
20
|
}>, {
|
|
20
21
|
chartType: ChartType;
|
|
21
22
|
typeSwitcher: boolean;
|
|
@@ -26,6 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
26
27
|
compact: boolean;
|
|
27
28
|
trendValue: any;
|
|
28
29
|
trendDirection: TrendDirection;
|
|
30
|
+
noteText: string;
|
|
29
31
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
30
32
|
"update:chartType": (type: ChartType) => void;
|
|
31
33
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -45,6 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
45
47
|
compact: boolean;
|
|
46
48
|
trendValue?: string | number;
|
|
47
49
|
trendDirection?: TrendDirection;
|
|
50
|
+
noteText?: string;
|
|
48
51
|
}>, {
|
|
49
52
|
chartType: ChartType;
|
|
50
53
|
typeSwitcher: boolean;
|
|
@@ -55,6 +58,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
55
58
|
compact: boolean;
|
|
56
59
|
trendValue: any;
|
|
57
60
|
trendDirection: TrendDirection;
|
|
61
|
+
noteText: string;
|
|
58
62
|
}>>> & {
|
|
59
63
|
"onUpdate:chartType"?: (type: ChartType) => any;
|
|
60
64
|
}, {
|
|
@@ -67,6 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
67
71
|
typeSwitcher: boolean;
|
|
68
72
|
trendValue: string | number;
|
|
69
73
|
trendDirection: TrendDirection;
|
|
74
|
+
noteText: string;
|
|
70
75
|
}>, {
|
|
71
76
|
"subheader-tooltip"?(_: {}): any;
|
|
72
77
|
}>;
|
|
@@ -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 r = /* @__PURE__ */ o(e, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_af520313_lang.css"; //*');
|
|
4
|
+
const r = /* @__PURE__ */ o(e, [["__scopeId", "data-v-af520313"]]);
|
|
5
5
|
export {
|
|
6
6
|
r as default
|
|
7
7
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import "../../ChartHeader.
|
|
2
|
-
import
|
|
1
|
+
import "../../ChartHeader.vue_vue_type_style_index_0_scoped_af520313_lang.css"; import { defineComponent as k, computed as m, openBlock as r, createElementBlock as C, normalizeClass as S, createElementVNode as c, createVNode as p, createSlots as w, withCtx as f, renderSlot as x, unref as a, createTextVNode as B, toDisplayString as N, createBlock as l, normalizeProps as y, mergeProps as T, createCommentVNode as d, isRef as g } from "vue";
|
|
2
|
+
import D from "../typography/v4/Typography.vue.js";
|
|
3
3
|
import P from "../switch/v4/SwitchV4.vue.js";
|
|
4
|
-
import
|
|
4
|
+
import H from "../chip/v4/ChipV4.vue.js";
|
|
5
|
+
import { ChartType as n, TrendDirection as L } from "./types.js";
|
|
5
6
|
import b from "./ChartHeaderTrend.vue.js";
|
|
6
|
-
import
|
|
7
|
-
const z = { class: "header-texts" }, E = { class: "header-row" },
|
|
7
|
+
import $ from "./SubHeader.vue.js";
|
|
8
|
+
const z = { class: "header-texts" }, E = { class: "header-row" }, U = { class: "header-actions" }, I = /* @__PURE__ */ k({
|
|
8
9
|
__name: "ChartHeader",
|
|
9
10
|
props: {
|
|
10
|
-
chartType: { default:
|
|
11
|
+
chartType: { default: n.Line },
|
|
11
12
|
typeSwitcher: { type: Boolean, default: !0 },
|
|
12
13
|
header: { default: "" },
|
|
13
14
|
subheader: { default: "" },
|
|
@@ -15,66 +16,73 @@ const z = { class: "header-texts" }, E = { class: "header-row" }, A = /* @__PURE
|
|
|
15
16
|
trendTooltip: { default: null },
|
|
16
17
|
compact: { type: Boolean, default: !1 },
|
|
17
18
|
trendValue: { default: null },
|
|
18
|
-
trendDirection: { default:
|
|
19
|
+
trendDirection: { default: L.UP },
|
|
20
|
+
noteText: { default: "" }
|
|
19
21
|
},
|
|
20
22
|
emits: ["update:chartType"],
|
|
21
23
|
setup(e, { emit: V }) {
|
|
22
|
-
const
|
|
23
|
-
{ id:
|
|
24
|
-
{ id:
|
|
25
|
-
{ id:
|
|
26
|
-
],
|
|
24
|
+
const o = e, u = [
|
|
25
|
+
{ id: n.Line, icon: "chart-line-up" },
|
|
26
|
+
{ id: n.Bar, icon: "chart-bar" },
|
|
27
|
+
{ id: n.StackedLine, icon: "chart-line" }
|
|
28
|
+
], i = m({
|
|
27
29
|
get() {
|
|
28
|
-
return
|
|
30
|
+
return u.find(({ id: t }) => t === o.chartType);
|
|
29
31
|
},
|
|
30
32
|
set(t) {
|
|
31
33
|
V("update:chartType", t.id);
|
|
32
34
|
}
|
|
33
|
-
}),
|
|
34
|
-
value:
|
|
35
|
-
direction:
|
|
36
|
-
trendTooltip:
|
|
35
|
+
}), s = m(() => ({
|
|
36
|
+
value: o.trendValue,
|
|
37
|
+
direction: o.trendDirection,
|
|
38
|
+
trendTooltip: o.trendTooltip
|
|
37
39
|
}));
|
|
38
|
-
return (t,
|
|
39
|
-
class:
|
|
40
|
+
return (t, h) => (r(), C("div", {
|
|
41
|
+
class: S(["chart-header", { "chart-header--compact": e.compact }])
|
|
40
42
|
}, [
|
|
41
|
-
|
|
42
|
-
p(
|
|
43
|
+
c("div", z, [
|
|
44
|
+
p($, {
|
|
43
45
|
subheader: e.subheader,
|
|
44
46
|
"subheader-tooltip": e.subheaderTooltip,
|
|
45
47
|
"show-separator": e.compact && (!!e.header || !!e.trendValue)
|
|
46
|
-
},
|
|
48
|
+
}, w({ _: 2 }, [
|
|
47
49
|
t.$slots["subheader-tooltip"] ? {
|
|
48
50
|
name: "subheader-tooltip",
|
|
49
51
|
fn: f(() => [
|
|
50
|
-
|
|
52
|
+
x(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
51
53
|
]),
|
|
52
54
|
key: "0"
|
|
53
55
|
} : void 0
|
|
54
56
|
]), 1032, ["subheader", "subheader-tooltip", "show-separator"]),
|
|
55
|
-
|
|
56
|
-
p(a(
|
|
57
|
+
c("div", E, [
|
|
58
|
+
p(a(D), {
|
|
57
59
|
class: "header-text",
|
|
58
60
|
variant: e.compact ? "h5" : "chart2"
|
|
59
61
|
}, {
|
|
60
62
|
default: f(() => [
|
|
61
|
-
|
|
63
|
+
B(N(e.header), 1)
|
|
62
64
|
]),
|
|
63
65
|
_: 1
|
|
64
66
|
}, 8, ["variant"]),
|
|
65
|
-
!e.compact && e.trendValue !== null ? (
|
|
67
|
+
!e.compact && e.trendValue !== null ? (r(), l(b, y(T({ key: 0 }, a(s))), null, 16)) : d("", !0)
|
|
66
68
|
]),
|
|
67
|
-
e.compact && e.trendValue !== null ? (
|
|
69
|
+
e.compact && e.trendValue !== null ? (r(), l(b, y(T({ key: 0 }, a(s))), null, 16)) : d("", !0)
|
|
68
70
|
]),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
c("div", U, [
|
|
72
|
+
e.noteText ? (r(), l(a(H), {
|
|
73
|
+
key: 0,
|
|
74
|
+
label: `Note: ${e.noteText}`
|
|
75
|
+
}, null, 8, ["label"])) : d("", !0),
|
|
76
|
+
e.typeSwitcher ? (r(), l(a(P), {
|
|
77
|
+
key: 1,
|
|
78
|
+
modelValue: a(i),
|
|
79
|
+
"onUpdate:modelValue": h[0] || (h[0] = (v) => g(i) ? i.value = v : null),
|
|
80
|
+
options: u
|
|
81
|
+
}, null, 8, ["modelValue"])) : d("", !0)
|
|
82
|
+
])
|
|
75
83
|
], 2));
|
|
76
84
|
}
|
|
77
85
|
});
|
|
78
86
|
export {
|
|
79
|
-
|
|
87
|
+
I as default
|
|
80
88
|
};
|
|
@@ -27,6 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
27
27
|
typeSwitcher?: boolean;
|
|
28
28
|
height?: string;
|
|
29
29
|
compactHeader?: boolean;
|
|
30
|
+
noteText?: string;
|
|
30
31
|
tooltipRespectsTopEdge?: boolean;
|
|
31
32
|
tooltipTotalType?: TotalType;
|
|
32
33
|
tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
|
|
@@ -66,6 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
66
67
|
typeSwitcher: boolean;
|
|
67
68
|
height: string;
|
|
68
69
|
compactHeader: boolean;
|
|
70
|
+
noteText: string;
|
|
69
71
|
tooltipRespectsTopEdge: boolean;
|
|
70
72
|
tooltipTotalType: TotalType;
|
|
71
73
|
tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
|
|
@@ -106,6 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
106
108
|
typeSwitcher?: boolean;
|
|
107
109
|
height?: string;
|
|
108
110
|
compactHeader?: boolean;
|
|
111
|
+
noteText?: string;
|
|
109
112
|
tooltipRespectsTopEdge?: boolean;
|
|
110
113
|
tooltipTotalType?: TotalType;
|
|
111
114
|
tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
|
|
@@ -145,6 +148,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
145
148
|
typeSwitcher: boolean;
|
|
146
149
|
height: string;
|
|
147
150
|
compactHeader: boolean;
|
|
151
|
+
noteText: string;
|
|
148
152
|
tooltipRespectsTopEdge: boolean;
|
|
149
153
|
tooltipTotalType: TotalType;
|
|
150
154
|
tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
|
|
@@ -178,6 +182,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
178
182
|
typeSwitcher: boolean;
|
|
179
183
|
trendValue: string | number;
|
|
180
184
|
trendDirection: TrendDirection;
|
|
185
|
+
noteText: string;
|
|
181
186
|
dataSets: ChartDataSet[];
|
|
182
187
|
tickCount: number;
|
|
183
188
|
truncateTickLabels: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../ChartPlane.
|
|
4
|
-
const a = /* @__PURE__ */ o
|
|
1
|
+
import o from "./ChartPlane.vue2.js";
|
|
2
|
+
/* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4f67d41d_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4f67d41d"]]);
|
|
5
5
|
export {
|
|
6
6
|
a as default
|
|
7
7
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import "../../ChartPlane.
|
|
1
|
+
import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4f67d41d_lang.css"; import { defineComponent as ae, useCssVars as oe, unref as s, computed as l, ref as k, onMounted as le, watch as v, nextTick as re, openBlock as p, createElementBlock as A, createVNode as ie, isRef as ne, createSlots as se, withCtx as ue, renderSlot as de, createCommentVNode as S, createElementVNode as L, normalizeStyle as ce, createBlock as E } from "vue";
|
|
2
2
|
import { Chart as P, ArcElement as fe, LineElement as pe, BarElement as he, PointElement as me, LineController as ve, BarController as ye, PieController as Te, ScatterController as Ce, CategoryScale as be, LinearScale as ge, Filler as xe, Tooltip as ke } from "chart.js";
|
|
3
3
|
import { HoverVerticalLine as Ae } from "./plugins/HoverVerticalLine.js";
|
|
4
4
|
import { prepareTickLabel as Se, formatValue as Le } from "./utils/utils.js";
|
|
5
5
|
import { DEFAULT_TICK_COUNT as Ee, TOTALS_HELPER_KEY as w, BASE_COLOR_KEY as V, CHART_PADDING as Re, POINT_BORDER_COLOR as Be, TICK_LABEL_COLOR as N, TICK_LABEL_FONT as F, TICKS_EXTRA_PADDING as De, GRID_LINE_COLOR as K, HEADER_HEIGHT as Oe, COMPACT_HEADER_HEIGHT as Ie, HOVER_AREA_TRANSPARENCY as He, HOVER_TRANSPARENCY as y } from "./consts.js";
|
|
6
|
-
import { ChartType as
|
|
6
|
+
import { ChartType as u, DateInterval as Pe, TooltipOrder as M, TrendDirection as we } from "./types.js";
|
|
7
7
|
import { useTooltipPosition as Ve } from "./composables/useTooltipPosition.js";
|
|
8
8
|
import Ne from "./ChartTooltip.vue.js";
|
|
9
9
|
import { hexColorToRgba as h } from "../../utils/color.js";
|
|
@@ -11,8 +11,8 @@ import Fe from "./ChartHeader.vue.js";
|
|
|
11
11
|
import { useMemoize as Ke, useVModel as Me } from "@vueuse/core";
|
|
12
12
|
import Ue from "../emptyState/v4/EmptyStateV4.vue.js";
|
|
13
13
|
import Ye from "./ChartLoader.vue.js";
|
|
14
|
-
import { DEFAULT_CHART_COLOR as
|
|
15
|
-
import { TotalType as U, calculateTotal as
|
|
14
|
+
import { DEFAULT_CHART_COLOR as Ge } from "./colorPalette.js";
|
|
15
|
+
import { TotalType as U, calculateTotal as _e } from "../../utils/totals.js";
|
|
16
16
|
import { isNullOrUndefined as $e } from "../../utils/utils.js";
|
|
17
17
|
import { storeOriginalDatasetColors as ze, restoreOriginalDatasetColors as We } from "./utils/highlightUtils.js";
|
|
18
18
|
const Ze = { class: "chart-plane-container" }, Xe = {
|
|
@@ -27,7 +27,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
27
27
|
dataSets: { default: () => [] },
|
|
28
28
|
visibleIds: { default: () => [] },
|
|
29
29
|
highlightedId: { default: null },
|
|
30
|
-
chartType: { default:
|
|
30
|
+
chartType: { default: u.Line },
|
|
31
31
|
parsing: { default: void 0 },
|
|
32
32
|
xAxisFormat: { default: "string" },
|
|
33
33
|
yAxisFormat: { default: "number" },
|
|
@@ -47,9 +47,10 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
47
47
|
typeSwitcher: { type: Boolean, default: !0 },
|
|
48
48
|
height: { default: "100%" },
|
|
49
49
|
compactHeader: { type: Boolean, default: !1 },
|
|
50
|
+
noteText: { default: "" },
|
|
50
51
|
tooltipRespectsTopEdge: { type: Boolean, default: !0 },
|
|
51
52
|
tooltipTotalType: { default: U.Total },
|
|
52
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
53
|
+
tooltipTotalCalcFn: { type: Function, default: _e },
|
|
53
54
|
tooltipOrder: { default: M.Legend },
|
|
54
55
|
trendValue: { default: null },
|
|
55
56
|
trendDirection: { default: we.UP },
|
|
@@ -63,10 +64,10 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
63
64
|
setup(o, { emit: Y }) {
|
|
64
65
|
const e = o;
|
|
65
66
|
oe((t) => ({
|
|
66
|
-
"
|
|
67
|
-
|
|
67
|
+
"11153e48": s(q),
|
|
68
|
+
30644433: o.height
|
|
68
69
|
}));
|
|
69
|
-
const
|
|
70
|
+
const G = Ke(Se);
|
|
70
71
|
P.register(
|
|
71
72
|
fe,
|
|
72
73
|
pe,
|
|
@@ -82,14 +83,14 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
82
83
|
ke,
|
|
83
84
|
Ae
|
|
84
85
|
);
|
|
85
|
-
const T = Me(e, "chartType", Y),
|
|
86
|
+
const T = Me(e, "chartType", Y), _ = l(
|
|
86
87
|
() => e.withAnimation ? "" : "none"
|
|
87
88
|
), m = k(null);
|
|
88
89
|
let n = null;
|
|
89
90
|
const R = l(() => e.empty || e.dataSets.length === 0), c = l(() => !e.loading && !R.value), C = () => {
|
|
90
91
|
m.value && (n && n.destroy(), n = new P(m.value, O.value));
|
|
91
92
|
}, $ = () => {
|
|
92
|
-
n && (n.data.datasets = D.value, n.options = O.value.options, n.update(
|
|
93
|
+
n && (n.data.datasets = D.value, n.options = O.value.options, n.update(_.value));
|
|
93
94
|
};
|
|
94
95
|
le(C), v(() => e.chartType, C), v(c, async (t) => {
|
|
95
96
|
t && (await re(), C());
|
|
@@ -103,9 +104,9 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
103
104
|
$
|
|
104
105
|
);
|
|
105
106
|
const f = l(() => e.totalsChart), b = l(
|
|
106
|
-
() => e.chartType ===
|
|
107
|
+
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar || f.value
|
|
107
108
|
), g = l(
|
|
108
|
-
() => e.chartType ===
|
|
109
|
+
() => e.chartType === u.Line || e.chartType === u.StackedLine
|
|
109
110
|
), z = l(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: w } : e.parsing), W = l(() => f.value ? e.dataSets.map((t) => ({
|
|
110
111
|
...t,
|
|
111
112
|
data: t.data.map((i) => ({
|
|
@@ -114,7 +115,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
114
115
|
}))
|
|
115
116
|
})) : e.dataSets), x = l(
|
|
116
117
|
() => W.value.filter((t) => e.visibleIds.includes(t.id))
|
|
117
|
-
), Z = (t) => e.colorsMap[t] ||
|
|
118
|
+
), Z = (t) => e.colorsMap[t] || Ge, B = l(
|
|
118
119
|
() => x.value.length && x.value.every(
|
|
119
120
|
(t) => t.data.length === 1
|
|
120
121
|
)
|
|
@@ -125,7 +126,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
125
126
|
fill: r,
|
|
126
127
|
backgroundColor: h(
|
|
127
128
|
a,
|
|
128
|
-
e.chartType ===
|
|
129
|
+
e.chartType === u.StackedLine ? 10 : 70
|
|
129
130
|
),
|
|
130
131
|
borderColor: a,
|
|
131
132
|
pointBackgroundColor: a,
|
|
@@ -141,7 +142,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
141
142
|
})), X = l(
|
|
142
143
|
() => e.tooltipTotalType === U.Total ? "Total" : "Mean"
|
|
143
144
|
), O = l(() => ({
|
|
144
|
-
type: e.chartType ==
|
|
145
|
+
type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
|
|
145
146
|
// Chart Data
|
|
146
147
|
data: {
|
|
147
148
|
datasets: D.value
|
|
@@ -164,7 +165,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
164
165
|
enabled: !1,
|
|
165
166
|
position: "average",
|
|
166
167
|
external: ({ tooltip: t }) => {
|
|
167
|
-
|
|
168
|
+
d.value = { ...t };
|
|
168
169
|
},
|
|
169
170
|
callbacks: {
|
|
170
171
|
footer: (t) => {
|
|
@@ -226,7 +227,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
226
227
|
autoSkipPadding: 8,
|
|
227
228
|
callback: function(t, i, a) {
|
|
228
229
|
const r = this.getLabelForValue(t), ee = g.value && !f.value ? a.length - 1 : a.length, te = this.chart.scales?.x?.width / ee - De;
|
|
229
|
-
return
|
|
230
|
+
return G({
|
|
230
231
|
label: r,
|
|
231
232
|
format: e.xAxisFormat,
|
|
232
233
|
availableSpace: te,
|
|
@@ -268,15 +269,15 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
268
269
|
}
|
|
269
270
|
}
|
|
270
271
|
}
|
|
271
|
-
})), I = k(null),
|
|
272
|
+
})), I = k(null), d = k(null), { position: H } = Ve(
|
|
272
273
|
m,
|
|
273
274
|
I,
|
|
274
|
-
|
|
275
|
+
d,
|
|
275
276
|
e.tooltipRespectsTopEdge
|
|
276
277
|
), j = l(() => ({
|
|
277
278
|
left: `${H.value.left}px`,
|
|
278
279
|
top: `${H.value.top}px`,
|
|
279
|
-
opacity:
|
|
280
|
+
opacity: d.value?.opacity || 0
|
|
280
281
|
})), q = l(
|
|
281
282
|
() => (e.compactHeader ? Ie : Oe) + "px"
|
|
282
283
|
);
|
|
@@ -290,7 +291,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
290
291
|
(n?.data.datasets || []).forEach((a) => {
|
|
291
292
|
ze(a);
|
|
292
293
|
const r = a[V];
|
|
293
|
-
a.id === t ? e.chartType ===
|
|
294
|
+
a.id === t ? e.chartType === u.StackedLine && (a.backgroundColor = h(
|
|
294
295
|
r,
|
|
295
296
|
He
|
|
296
297
|
)) : (a.backgroundColor = h(r, y), a.borderColor = h(r, y), a.pointBackgroundColor = h(r, y), a.pointHoverBorderColor = h(r, y));
|
|
@@ -310,16 +311,17 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
310
311
|
"trend-tooltip": o.trendTooltip,
|
|
311
312
|
compact: o.compactHeader,
|
|
312
313
|
"trend-value": s(c) ? o.trendValue : null,
|
|
313
|
-
"trend-direction": o.trendDirection
|
|
314
|
+
"trend-direction": o.trendDirection,
|
|
315
|
+
"note-text": o.noteText
|
|
314
316
|
}, se({ _: 2 }, [
|
|
315
317
|
t.$slots["subheader-tooltip"] ? {
|
|
316
318
|
name: "subheader-tooltip",
|
|
317
|
-
fn:
|
|
318
|
-
|
|
319
|
+
fn: ue(() => [
|
|
320
|
+
de(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
319
321
|
]),
|
|
320
322
|
key: "0"
|
|
321
323
|
} : void 0
|
|
322
|
-
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
|
|
324
|
+
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text"])
|
|
323
325
|
])) : S("", !0),
|
|
324
326
|
s(c) ? (p(), A("section", je, [
|
|
325
327
|
L("div", qe, [
|
|
@@ -334,16 +336,16 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
334
336
|
class: "chart__tooltip",
|
|
335
337
|
style: ce(s(j))
|
|
336
338
|
}, [
|
|
337
|
-
|
|
339
|
+
d.value ? (p(), E(Ne, {
|
|
338
340
|
key: 0,
|
|
339
341
|
"totals-chart": s(f),
|
|
340
|
-
title: String(
|
|
341
|
-
"data-points":
|
|
342
|
+
title: String(d.value.title),
|
|
343
|
+
"data-points": d.value.dataPoints,
|
|
342
344
|
"x-axis-format": o.xAxisFormat,
|
|
343
345
|
"y-axis-format": o.yAxisFormat,
|
|
344
346
|
"x-axis-date-interval": o.xAxisDateInterval,
|
|
345
|
-
"total-label":
|
|
346
|
-
"total-value": Number(
|
|
347
|
+
"total-label": d.value.footer?.[0],
|
|
348
|
+
"total-value": Number(d.value.footer?.[1]),
|
|
347
349
|
"value-suffix": o.valueSuffix,
|
|
348
350
|
"value-prefix": o.valuePrefix
|
|
349
351
|
}, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix"])) : S("", !0)
|
|
@@ -28,6 +28,7 @@ declare const ChartTypes: () => ({
|
|
|
28
28
|
subheaderTooltip: any;
|
|
29
29
|
trendValue: string | number;
|
|
30
30
|
trendDirection: TrendDirection;
|
|
31
|
+
noteText: string;
|
|
31
32
|
dataSets: import("./types").ChartDataSet[];
|
|
32
33
|
tickCount: number;
|
|
33
34
|
truncateTickLabels: boolean;
|
|
@@ -145,6 +146,10 @@ declare const ChartTypes: () => ({
|
|
|
145
146
|
type: import("vue").PropType<TrendDirection>;
|
|
146
147
|
default: TrendDirection;
|
|
147
148
|
};
|
|
149
|
+
noteText: {
|
|
150
|
+
type: import("vue").PropType<string>;
|
|
151
|
+
default: string;
|
|
152
|
+
};
|
|
148
153
|
dataSets: {
|
|
149
154
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
150
155
|
required: true;
|
|
@@ -214,7 +219,7 @@ declare const ChartTypes: () => ({
|
|
|
214
219
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
215
220
|
"onUpdate:sortSelected"?: (sortOption: unknown) => any;
|
|
216
221
|
"onUpdate:chartType"?: (chartType: ChartType) => any;
|
|
217
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
|
|
222
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
|
|
218
223
|
$attrs: {
|
|
219
224
|
[x: string]: unknown;
|
|
220
225
|
};
|
|
@@ -329,6 +334,10 @@ declare const ChartTypes: () => ({
|
|
|
329
334
|
type: import("vue").PropType<TrendDirection>;
|
|
330
335
|
default: TrendDirection;
|
|
331
336
|
};
|
|
337
|
+
noteText: {
|
|
338
|
+
type: import("vue").PropType<string>;
|
|
339
|
+
default: string;
|
|
340
|
+
};
|
|
332
341
|
dataSets: {
|
|
333
342
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
334
343
|
required: true;
|
|
@@ -426,6 +435,7 @@ declare const ChartTypes: () => ({
|
|
|
426
435
|
subheaderTooltip: any;
|
|
427
436
|
trendValue: string | number;
|
|
428
437
|
trendDirection: TrendDirection;
|
|
438
|
+
noteText: string;
|
|
429
439
|
dataSets: import("./types").ChartDataSet[];
|
|
430
440
|
tickCount: number;
|
|
431
441
|
truncateTickLabels: boolean;
|
|
@@ -563,6 +573,10 @@ declare const ChartTypes: () => ({
|
|
|
563
573
|
type: import("vue").PropType<TrendDirection>;
|
|
564
574
|
default: TrendDirection;
|
|
565
575
|
};
|
|
576
|
+
noteText: {
|
|
577
|
+
type: import("vue").PropType<string>;
|
|
578
|
+
default: string;
|
|
579
|
+
};
|
|
566
580
|
dataSets: {
|
|
567
581
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
568
582
|
required: true;
|
|
@@ -737,6 +751,10 @@ declare const ChartTypes: () => ({
|
|
|
737
751
|
type: import("vue").PropType<TrendDirection>;
|
|
738
752
|
default: TrendDirection;
|
|
739
753
|
};
|
|
754
|
+
noteText: {
|
|
755
|
+
type: import("vue").PropType<string>;
|
|
756
|
+
default: string;
|
|
757
|
+
};
|
|
740
758
|
dataSets: {
|
|
741
759
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
742
760
|
required: true;
|
|
@@ -834,6 +852,7 @@ declare const ChartTypes: () => ({
|
|
|
834
852
|
subheaderTooltip: any;
|
|
835
853
|
trendValue: string | number;
|
|
836
854
|
trendDirection: TrendDirection;
|
|
855
|
+
noteText: string;
|
|
837
856
|
dataSets: import("./types").ChartDataSet[];
|
|
838
857
|
tickCount: number;
|
|
839
858
|
truncateTickLabels: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./ConditionalDropdown.vue2.js";
|
|
2
2
|
/* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../../ConditionalDropdown.
|
|
4
|
-
const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_f5204c04_lang.css"; //*');
|
|
4
|
+
const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f5204c04"]]);
|
|
5
5
|
export {
|
|
6
6
|
n as default
|
|
7
7
|
};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import "../../../ConditionalDropdown.
|
|
2
|
-
import
|
|
1
|
+
import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_f5204c04_lang.css"; import { defineComponent as q, computed as w, ref as s, watch as m, onMounted as G, openBlock as F, createBlock as H, unref as c, createSlots as J, withCtx as v, createVNode as C, mergeProps as X, createElementVNode as Y, isRef as Z, normalizeProps as _, guardReactiveProps as ee, createElementBlock as le, createTextVNode as oe, toDisplayString as te, createCommentVNode as ae, renderSlot as ne } from "vue";
|
|
2
|
+
import B from "./DropdownV4.vue.js";
|
|
3
3
|
import "./DefaultDropdownTrigger.vue.js";
|
|
4
4
|
import "./IconButtonDropdownTrigger.vue.js";
|
|
5
|
-
import
|
|
5
|
+
import ie from "./ChipDropdownTrigger.vue.js";
|
|
6
6
|
import "./AppDropdownTrigger.vue.js";
|
|
7
7
|
import "./ButtonDropdownTrigger.vue.js";
|
|
8
|
-
import
|
|
8
|
+
import ue from "./ButtonFilterDropdownTrigger.vue.js";
|
|
9
9
|
import "./TreeDropdown.vue.js";
|
|
10
10
|
import "./OptionV4.vue.js";
|
|
11
11
|
import "./ConditionalDropdown.vue.js";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import { useDebounceFn as
|
|
15
|
-
const
|
|
12
|
+
import re from "../../search/v4/SearchV4.vue.js";
|
|
13
|
+
import se from "../../typography/v4/Typography.vue.js";
|
|
14
|
+
import { useDebounceFn as de } from "@vueuse/core";
|
|
15
|
+
const ce = { class: "conditional-container" }, pe = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "custom-list-area"
|
|
18
|
-
},
|
|
18
|
+
}, Ne = /* @__PURE__ */ q({
|
|
19
19
|
__name: "ConditionalDropdown",
|
|
20
20
|
props: {
|
|
21
21
|
selectedCondition: null,
|
|
@@ -42,47 +42,56 @@ const de = { class: "conditional-container" }, ce = {
|
|
|
42
42
|
triggerShownValuesCount: { default: 1 }
|
|
43
43
|
},
|
|
44
44
|
emits: ["update:selectedCondition", "update:appliedSelections", "clear", "closed"],
|
|
45
|
-
setup(
|
|
46
|
-
const e =
|
|
45
|
+
setup(u, { emit: g }) {
|
|
46
|
+
const e = u, y = w({
|
|
47
47
|
get: () => e.appliedSelections,
|
|
48
48
|
set: (l) => {
|
|
49
|
-
|
|
49
|
+
g("update:appliedSelections", l);
|
|
50
50
|
}
|
|
51
|
-
}),
|
|
52
|
-
|
|
51
|
+
}), T = s(
|
|
52
|
+
e.selectedCondition || e.conditionalOptions[0]
|
|
53
|
+
), n = w({
|
|
54
|
+
get: () => T.value || e.conditionalOptions[0],
|
|
53
55
|
set: (l) => {
|
|
54
|
-
|
|
56
|
+
T.value = l;
|
|
55
57
|
}
|
|
56
|
-
})
|
|
58
|
+
});
|
|
59
|
+
m(
|
|
60
|
+
() => e.selectedCondition,
|
|
61
|
+
(l) => {
|
|
62
|
+
l && l.value !== n.value?.value && (n.value = l, k());
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
const A = () => {
|
|
57
66
|
const { appliedSelections: l } = e;
|
|
58
67
|
return l ? Array.isArray(l) ? l : [l] : [];
|
|
59
|
-
},
|
|
68
|
+
}, N = s(null), p = s(!0), a = s([]), i = s(A()), D = s(!0), d = s(!1), O = s(!1), r = s(e.searchQuery), U = s(""), h = s(e.label), K = s([]), I = w(() => (!r.value || r.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} characters to begin` : "No results found"), M = w(() => {
|
|
60
69
|
const l = p.value ? 4 : 4.5, t = a.value.length > 4 ? a.value.length : l;
|
|
61
70
|
if (e.groupedOptions) {
|
|
62
71
|
let o = 0;
|
|
63
|
-
return a.value.forEach((
|
|
64
|
-
|
|
72
|
+
return a.value.forEach((S) => {
|
|
73
|
+
S.options && (o = o + S.options.length);
|
|
65
74
|
}), o > 4 ? o : l;
|
|
66
75
|
}
|
|
67
76
|
return t > l ? t : l;
|
|
68
|
-
}),
|
|
69
|
-
if (e.infiniteLoading &&
|
|
70
|
-
const o = [],
|
|
77
|
+
}), E = (l, t) => {
|
|
78
|
+
if (e.infiniteLoading && n.value.multi && Array.isArray(i.value) && i.value.length && l && t.length) {
|
|
79
|
+
const o = [], S = i.value.filter(
|
|
71
80
|
(f) => f[e.optionNameKey].includes(l)
|
|
72
81
|
);
|
|
73
82
|
return t.forEach((f) => {
|
|
74
|
-
|
|
75
|
-
(
|
|
83
|
+
S.find(
|
|
84
|
+
(W) => W[e.comparingKey] === f[e.comparingKey]
|
|
76
85
|
) && o.push(f[e.comparingKey]);
|
|
77
|
-
}),
|
|
86
|
+
}), S.filter(
|
|
78
87
|
(f) => !o.includes(f[e.comparingKey])
|
|
79
88
|
);
|
|
80
89
|
}
|
|
81
90
|
return [];
|
|
82
|
-
},
|
|
91
|
+
}, L = async (l) => {
|
|
83
92
|
try {
|
|
84
93
|
d.value = !0;
|
|
85
|
-
const t = await e.fetchFnCallback(l), o =
|
|
94
|
+
const t = await e.fetchFnCallback(l), o = E(
|
|
86
95
|
l,
|
|
87
96
|
t
|
|
88
97
|
);
|
|
@@ -90,164 +99,164 @@ const de = { class: "conditional-container" }, ce = {
|
|
|
90
99
|
} catch (t) {
|
|
91
100
|
d.value = !1, console.error("Error fetching data:", t);
|
|
92
101
|
}
|
|
93
|
-
},
|
|
102
|
+
}, Q = async () => {
|
|
94
103
|
if (e.infiniteLoading)
|
|
95
104
|
try {
|
|
96
|
-
|
|
105
|
+
O.value = !0;
|
|
97
106
|
const l = await e.loadMoreFn();
|
|
98
|
-
|
|
107
|
+
O.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
|
|
99
108
|
} catch (l) {
|
|
100
|
-
|
|
109
|
+
O.value = !1, console.error("Error fetching data:", l);
|
|
101
110
|
}
|
|
102
|
-
},
|
|
103
|
-
|
|
111
|
+
}, V = de(
|
|
112
|
+
L,
|
|
104
113
|
e.fetchDataDebounceTime
|
|
105
|
-
),
|
|
106
|
-
l.length >= e.minCharsToStart ? (
|
|
107
|
-
},
|
|
108
|
-
r.value && a.value.length && !d.value && !
|
|
114
|
+
), b = (l) => {
|
|
115
|
+
l.length >= e.minCharsToStart ? (V(l), N.value?.scrollTo(0)) : e.infiniteLoading && n.value.multi ? a.value = K.value || [] : a.value = [];
|
|
116
|
+
}, $ = () => {
|
|
117
|
+
r.value && a.value.length && !d.value && !n.value.multi ? a.value[0].conditionalOptions ? a.value[0] = {
|
|
109
118
|
[e.optionNameKey]: r.value,
|
|
110
119
|
conditionalOptions: !0,
|
|
111
|
-
conditionalName:
|
|
120
|
+
conditionalName: n.value.label,
|
|
112
121
|
[e.comparingKey]: r.value
|
|
113
122
|
} : a.value = [
|
|
114
123
|
{
|
|
115
124
|
[e.optionNameKey]: r.value,
|
|
116
125
|
conditionalOptions: !0,
|
|
117
|
-
conditionalName:
|
|
126
|
+
conditionalName: n.value.label,
|
|
118
127
|
[e.comparingKey]: r.value
|
|
119
128
|
},
|
|
120
129
|
...a.value
|
|
121
130
|
] : a.value.length && a.value[0].conditionalOptions && a.value.shift();
|
|
122
|
-
},
|
|
123
|
-
p.value &&
|
|
131
|
+
}, k = () => {
|
|
132
|
+
p.value && i.value.length === 0 ? h.value = e.label : h.value = `${e.label} ${n.value.label.toLowerCase()}`;
|
|
124
133
|
};
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}),
|
|
128
|
-
|
|
129
|
-
}),
|
|
134
|
+
m(r, () => {
|
|
135
|
+
b(r.value);
|
|
136
|
+
}), m([n, a], () => {
|
|
137
|
+
$();
|
|
138
|
+
}), m(
|
|
130
139
|
() => e.loadingOverride,
|
|
131
140
|
(l, t) => {
|
|
132
|
-
!l && t && !e.infiniteLoading &&
|
|
141
|
+
!l && t && !e.infiniteLoading && L(e.searchQuery);
|
|
133
142
|
}
|
|
134
143
|
);
|
|
135
|
-
const
|
|
136
|
-
p.value &&
|
|
144
|
+
const x = () => {
|
|
145
|
+
p.value && i.value.length === 0 ? (y.value = [], n.value = null) : (U.value = r.value, y.value = p.value ? [...i.value] : { ...i.value }, D.value = p.value), g("update:selectedCondition", n.value), k();
|
|
137
146
|
};
|
|
138
|
-
|
|
139
|
-
|
|
147
|
+
m(n, (l, t) => {
|
|
148
|
+
n.value.multi ? (d.value = !0, !t.multi && l.multi && (Array.isArray(e.appliedSelections) ? i.value = e.appliedSelections : i.value = [e.appliedSelections]), setTimeout(() => {
|
|
140
149
|
d.value = !1, p.value = !0;
|
|
141
150
|
}, 100)) : (!t.multi && !l.multi && (d.value = !0), setTimeout(() => {
|
|
142
151
|
!t.multi && !l.multi && (d.value = !1), p.value = !1;
|
|
143
152
|
}, 100));
|
|
144
|
-
}),
|
|
145
|
-
|
|
153
|
+
}), m(y, () => {
|
|
154
|
+
i.value = A();
|
|
146
155
|
});
|
|
147
|
-
const
|
|
156
|
+
const P = (l) => {
|
|
148
157
|
K.value = l;
|
|
149
|
-
},
|
|
150
|
-
|
|
151
|
-
},
|
|
152
|
-
l &&
|
|
158
|
+
}, R = () => {
|
|
159
|
+
i.value = [], y.value = [], n.value = null, g("update:selectedCondition", null), h.value = e.label, r.value = "", g("clear");
|
|
160
|
+
}, z = (l) => {
|
|
161
|
+
n.value === null && (n.value = e.conditionalOptions[0]), l && n.value.multi && e.infiniteLoading && i.value && (a.value = i.value, r.value && b(r.value));
|
|
153
162
|
};
|
|
154
|
-
|
|
155
|
-
(e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) &&
|
|
163
|
+
G(() => {
|
|
164
|
+
(e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) && b(e.searchQuery), e.appliedSelections && Array.isArray(e.appliedSelections) && (a.value = e.appliedSelections, i.value = e.appliedSelections, K.value = e.appliedSelections), k();
|
|
156
165
|
});
|
|
157
|
-
const
|
|
158
|
-
|
|
166
|
+
const j = () => {
|
|
167
|
+
g("closed");
|
|
159
168
|
};
|
|
160
|
-
return (l, t) => (F(),
|
|
169
|
+
return (l, t) => (F(), H(c(B), {
|
|
161
170
|
ref_key: "dropdownRef",
|
|
162
|
-
ref:
|
|
163
|
-
selected:
|
|
164
|
-
"onUpdate:selected": t[2] || (t[2] = (o) =>
|
|
171
|
+
ref: N,
|
|
172
|
+
selected: i.value,
|
|
173
|
+
"onUpdate:selected": t[2] || (t[2] = (o) => i.value = o),
|
|
165
174
|
"predefined-trigger": "chip",
|
|
166
|
-
"display-value": (o) => o?.[
|
|
175
|
+
"display-value": (o) => o?.[u.optionNameKey],
|
|
167
176
|
multi: p.value,
|
|
168
177
|
options: a.value,
|
|
169
|
-
placeholder:
|
|
178
|
+
placeholder: h.value,
|
|
170
179
|
"search-placeholder": "Search",
|
|
171
|
-
"option-name-key":
|
|
180
|
+
"option-name-key": u.optionNameKey,
|
|
172
181
|
"with-conditions": "",
|
|
173
182
|
"inline-search": "",
|
|
174
|
-
"custom-number-of-displayed-options": c(
|
|
183
|
+
"custom-number-of-displayed-options": c(M),
|
|
175
184
|
"options-list-width": "330px",
|
|
176
|
-
loading: d.value ||
|
|
177
|
-
"load-more-loading":
|
|
178
|
-
"comparing-key":
|
|
179
|
-
"is-open":
|
|
180
|
-
"infinite-loading":
|
|
181
|
-
"show-select-all": !
|
|
182
|
-
"grouped-options":
|
|
183
|
-
"option-flag-key":
|
|
184
|
-
"option-image-key":
|
|
185
|
-
"option-icon-key":
|
|
186
|
-
"option-icon-type":
|
|
187
|
-
"trigger-shown-values-count":
|
|
188
|
-
"onUpdate:isOpen":
|
|
189
|
-
onOnsearch:
|
|
190
|
-
onApply:
|
|
191
|
-
onLoadMore:
|
|
192
|
-
onUnsavedSelectionUpdate:
|
|
193
|
-
onClosed:
|
|
194
|
-
},
|
|
185
|
+
loading: d.value || u.loadingOverride,
|
|
186
|
+
"load-more-loading": O.value,
|
|
187
|
+
"comparing-key": u.comparingKey,
|
|
188
|
+
"is-open": u.isOpen,
|
|
189
|
+
"infinite-loading": u.infiniteLoading,
|
|
190
|
+
"show-select-all": !u.infiniteLoading && !r.value,
|
|
191
|
+
"grouped-options": u.groupedOptions,
|
|
192
|
+
"option-flag-key": u.optionFlagKey,
|
|
193
|
+
"option-image-key": u.optionImageKey,
|
|
194
|
+
"option-icon-key": u.optionIconKey,
|
|
195
|
+
"option-icon-type": u.optionIconType,
|
|
196
|
+
"trigger-shown-values-count": u.triggerShownValuesCount,
|
|
197
|
+
"onUpdate:isOpen": z,
|
|
198
|
+
onOnsearch: b,
|
|
199
|
+
onApply: x,
|
|
200
|
+
onLoadMore: Q,
|
|
201
|
+
onUnsavedSelectionUpdate: P,
|
|
202
|
+
onClosed: j
|
|
203
|
+
}, J({
|
|
195
204
|
"dropdown-trigger": v(({ defaultTriggerProps: o }) => [
|
|
196
|
-
|
|
197
|
-
label:
|
|
198
|
-
"selected-option": c(
|
|
199
|
-
multi:
|
|
205
|
+
C(c(ie), X(o, {
|
|
206
|
+
label: h.value,
|
|
207
|
+
"selected-option": c(y),
|
|
208
|
+
multi: D.value,
|
|
200
209
|
"cancel-all-selected-display": "",
|
|
201
|
-
"display-value-in-quotes": !Array.isArray(
|
|
202
|
-
"shown-values-count":
|
|
203
|
-
onClear:
|
|
210
|
+
"display-value-in-quotes": !Array.isArray(i.value) && i.value.conditionalOptions,
|
|
211
|
+
"shown-values-count": u.triggerShownValuesCount,
|
|
212
|
+
onClear: R
|
|
204
213
|
}), null, 16, ["label", "selected-option", "multi", "display-value-in-quotes", "shown-values-count"])
|
|
205
214
|
]),
|
|
206
215
|
"dropdown-conditions": v(() => [
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
selected: c(
|
|
210
|
-
"onUpdate:selected": t[0] || (t[0] = (o) =>
|
|
211
|
-
options:
|
|
216
|
+
Y("div", ce, [
|
|
217
|
+
C(c(B), {
|
|
218
|
+
selected: c(n),
|
|
219
|
+
"onUpdate:selected": t[0] || (t[0] = (o) => Z(n) ? n.value = o : null),
|
|
220
|
+
options: u.conditionalOptions,
|
|
212
221
|
"option-name-key": "label",
|
|
213
222
|
"display-value": (o) => o?.label,
|
|
214
223
|
container: ".conditional-container",
|
|
215
224
|
size: "small"
|
|
216
225
|
}, {
|
|
217
226
|
"dropdown-trigger": v(({ buttonTriggerProps: o }) => [
|
|
218
|
-
|
|
227
|
+
C(c(ue), _(ee(o)), null, 16)
|
|
219
228
|
]),
|
|
220
229
|
_: 1
|
|
221
230
|
}, 8, ["selected", "options", "display-value"])
|
|
222
231
|
])
|
|
223
232
|
]),
|
|
224
233
|
"inline-search": v(() => [
|
|
225
|
-
|
|
234
|
+
C(c(re), {
|
|
226
235
|
modelValue: r.value,
|
|
227
236
|
"onUpdate:modelValue": t[1] || (t[1] = (o) => r.value = o),
|
|
228
237
|
class: "inline-search",
|
|
229
238
|
placeholder: "Search",
|
|
230
239
|
variant: "transparent",
|
|
231
240
|
size: "md",
|
|
232
|
-
"auto-focus":
|
|
241
|
+
"auto-focus": u.autoFocusSearch
|
|
233
242
|
}, null, 8, ["modelValue", "auto-focus"])
|
|
234
243
|
]),
|
|
235
244
|
"custom-list-area": v(() => [
|
|
236
|
-
!a.value.length && !d.value ? (F(),
|
|
237
|
-
|
|
245
|
+
!a.value.length && !d.value ? (F(), le("div", pe, [
|
|
246
|
+
C(se, { variant: "body1" }, {
|
|
238
247
|
default: v(() => [
|
|
239
|
-
|
|
248
|
+
oe(te(c(I)), 1)
|
|
240
249
|
]),
|
|
241
250
|
_: 1
|
|
242
251
|
})
|
|
243
|
-
])) :
|
|
252
|
+
])) : ae("", !0)
|
|
244
253
|
]),
|
|
245
254
|
_: 2
|
|
246
255
|
}, [
|
|
247
256
|
l.$slots["option-end"] ? {
|
|
248
257
|
name: "option-end",
|
|
249
258
|
fn: v(({ option: o }) => [
|
|
250
|
-
|
|
259
|
+
ne(l.$slots, "option-end", { option: o }, void 0, !0)
|
|
251
260
|
]),
|
|
252
261
|
key: "0"
|
|
253
262
|
} : void 0
|
|
@@ -255,5 +264,5 @@ const de = { class: "conditional-container" }, ce = {
|
|
|
255
264
|
}
|
|
256
265
|
});
|
|
257
266
|
export {
|
|
258
|
-
|
|
267
|
+
Ne as default
|
|
259
268
|
};
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_lang.css';
|
|
2
2
|
import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
|
|
3
3
|
import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
|
|
4
4
|
import { MenuItemTypes as ao } from "./components/menuItem/index.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.chart-container[data-v-03771fa3]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-03771fa3]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-03771fa3]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-03771fa3]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-03771fa3]{border-left:1px solid var(--common-divider)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.chart-header[data-v-da34b108]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header--compact[data-v-da34b108]{padding-top:22px}.chart-header--compact .header-texts[data-v-da34b108]{flex-direction:row}.chart-header--compact .header-text[data-v-da34b108]{color:var(--text-secondary)}.header-row[data-v-da34b108]{display:flex;align-items:flex-end;gap:4px}.header-texts[data-v-da34b108]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px;cursor:default}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.chart-plane-container[data-v-ff7e556e]{--headerHeight: var(--2f09324f);width:100%;height:var(--0d942f3a);position:relative}.header-wrapper[data-v-ff7e556e]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-ff7e556e]{padding-top:var(--headerHeight);height:100%}.chart-empty[data-v-ff7e556e]{background:var(--background-paper)}.chart[data-v-ff7e556e]{width:100%;height:100%;position:relative}.chart__canvas[data-v-ff7e556e]{width:100%;height:100%}.chart__tooltip[data-v-ff7e556e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.custom-list-area[data-v-683b8a75]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 10px}.inline-search[data-v-683b8a75]{width:100%}.contain-accept[data-v-683b8a75]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-683b8a75]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-683b8a75]{margin-left:4px;display:inline-flex;color:var(--primary-main)}
|