@ironsource/shared-ui 2.1.8-test.1 → 2.1.9
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_ea1e5c3e_lang.css +1 -0
- package/ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css +1 -0
- package/ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_62a620ee_lang.css +1 -0
- package/GroupOption.vue_vue_type_style_index_0_scoped_5f372a81_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +5 -0
- package/components/chart/Chart.vue.js +4 -4
- package/components/chart/Chart.vue2.js +51 -49
- package/components/chart/ChartHeader.vue.d.ts +5 -0
- package/components/chart/ChartHeader.vue.js +2 -2
- package/components/chart/ChartHeader.vue2.js +35 -22
- package/components/chart/ChartLegend.vue.js +3 -3
- package/components/chart/ChartLegend.vue2.js +35 -28
- package/components/chart/index.d.ts +20 -1
- package/components/dropdown/common/Dropdown.common.d.ts +1 -0
- package/components/dropdown/common/Dropdown.common.js +207 -178
- package/components/dropdown/common/consts.d.ts +1 -0
- package/components/dropdown/common/consts.js +4 -0
- package/components/dropdown/common/useGroupedOptions.d.ts +10 -0
- package/components/dropdown/common/useGroupedOptions.js +57 -0
- package/components/dropdown/v4/DropdownV4.vue.d.ts +6 -0
- package/components/dropdown/v4/DropdownV4.vue.js +4 -4
- package/components/dropdown/v4/DropdownV4.vue2.js +136 -125
- package/components/dropdown/v4/GroupOption.vue.d.ts +9 -0
- package/components/dropdown/v4/GroupOption.vue.js +7 -0
- package/components/dropdown/v4/GroupOption.vue2.js +29 -0
- package/components/dropdown/v4/dropdownStoryArgs.d.ts +8 -0
- package/components/dropdown/v4/index.d.ts +21 -1
- package/index.d.ts +42 -3
- package/index.js +111 -116
- package/mocks/apps.d.ts +7 -0
- package/package.json +1 -1
- package/utils/formatNumbers.js +7 -15
- package/Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css +0 -1
- package/ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css +0 -1
- package/ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_00ccab6b_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-container[data-v-ea1e5c3e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px}.header-wrapper[data-v-ea1e5c3e]{height:76px}.chart-content[data-v-ea1e5c3e]{flex:1}.chart-sidebar[data-v-ea1e5c3e]{border-left:1px solid var(--common-divider)}.chart[data-v-ea1e5c3e]{width:100%;height:312px;position:relative}.chart__canvas[data-v-ea1e5c3e]{width:100%;height:100%}.chart__tooltip[data-v-ea1e5c3e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-header[data-v-4c37736e]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header .subheader[data-v-4c37736e]{color:var(--text-secondary)}.header-texts[data-v-4c37736e]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px}.type-switch[data-v-4c37736e]{display:flex;align-items:center;gap:4px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-legend[data-v-c0f71a49]{display:flex;flex-direction:column;width:220px;height:100%;padding-bottom:8px}.search-box[data-v-c0f71a49]{padding:12px 12px 4px}.legend[data-v-c0f71a49]{overflow-y:auto;color:var(--text-primary)}.legend__list[data-v-c0f71a49]{list-style:none;padding:0 12px 0 20px}.legend__list>li[data-v-c0f71a49]{display:flex;align-items:center;gap:8px;height:32px}.legend__list>li .legend-label[data-v-c0f71a49]{width:80%}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-enter-active[data-v-62a620ee],.v-leave-active[data-v-62a620ee]{transition:opacity .25s ease}ol[data-v-62a620ee],ul[data-v-62a620ee],menu[data-v-62a620ee]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-62a620ee],.dropdown.full-width .button__container[data-v-62a620ee]{width:100%}.dropdown-list-wrapper[data-v-62a620ee]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-62a620ee]{padding:.5rem}.list-container--multi[data-v-62a620ee]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-62a620ee]{padding-bottom:.25rem}.inline-search .list-container[data-v-62a620ee]{padding-top:0}.no-result-container[data-v-62a620ee]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-62a620ee]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-62a620ee]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-62a620ee]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-62a620ee]{margin-right:.5rem}.actions-wrapper[data-v-62a620ee]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-62a620ee]{margin-left:.5rem}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.group-option[data-v-5f372a81]{padding:0 .5rem;box-sizing:border-box;height:35px;display:flex;align-items:center;color:var(--text-secondary)}
|
|
@@ -9,6 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
9
9
|
tickCount?: number;
|
|
10
10
|
header?: string;
|
|
11
11
|
subheader?: string;
|
|
12
|
+
subheaderTooltip?: string;
|
|
12
13
|
hideLegend?: boolean;
|
|
13
14
|
minVisible?: number;
|
|
14
15
|
maxVisible?: number;
|
|
@@ -27,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
27
28
|
tickCount: number;
|
|
28
29
|
header: string;
|
|
29
30
|
subheader: string;
|
|
31
|
+
subheaderTooltip: string;
|
|
30
32
|
hideLegend: boolean;
|
|
31
33
|
minVisible: number;
|
|
32
34
|
maxVisible: number;
|
|
@@ -48,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
48
50
|
tickCount?: number;
|
|
49
51
|
header?: string;
|
|
50
52
|
subheader?: string;
|
|
53
|
+
subheaderTooltip?: string;
|
|
51
54
|
hideLegend?: boolean;
|
|
52
55
|
minVisible?: number;
|
|
53
56
|
maxVisible?: number;
|
|
@@ -66,6 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
66
69
|
tickCount: number;
|
|
67
70
|
header: string;
|
|
68
71
|
subheader: string;
|
|
72
|
+
subheaderTooltip: string;
|
|
69
73
|
hideLegend: boolean;
|
|
70
74
|
minVisible: number;
|
|
71
75
|
maxVisible: number;
|
|
@@ -89,6 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
89
93
|
chartType: ChartType;
|
|
90
94
|
withSettingsHeader: boolean;
|
|
91
95
|
subheader: string;
|
|
96
|
+
subheaderTooltip: string;
|
|
92
97
|
dataSets: ChartDataSet[];
|
|
93
98
|
hideLegend: boolean;
|
|
94
99
|
tickCount: number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../Chart.
|
|
4
|
-
const a = /* @__PURE__ */ e
|
|
1
|
+
import e from "./Chart.vue2.js";
|
|
2
|
+
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ea1e5c3e"]]);
|
|
5
5
|
export {
|
|
6
6
|
a as default
|
|
7
7
|
};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import "../../Chart.
|
|
1
|
+
import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as m, unref as u, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
|
|
2
2
|
import { useVModel as Q } from "@vueuse/core";
|
|
3
|
-
import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as
|
|
4
|
-
import { HoverVerticalLine as
|
|
3
|
+
import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ue } from "chart.js";
|
|
4
|
+
import { HoverVerticalLine as ce } from "./plugins/HoverVerticalLine.js";
|
|
5
5
|
import { formatValue as H, calcStepSize as fe } from "./utils/utils.js";
|
|
6
|
-
import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as
|
|
6
|
+
import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as he, DEFAULT_MAX_VISIBLE as me, COLOR_PALETTE as ve, POINT_BORDER_COLOR as be, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
|
|
7
7
|
import { ChartType as n } from "./types.js";
|
|
8
|
-
import { useTooltipPosition as
|
|
8
|
+
import { useTooltipPosition as ye } from "./composables/useTooltipPosition.js";
|
|
9
9
|
import ge from "./ChartTooltip.vue.js";
|
|
10
10
|
import Ce from "./ChartLegend.vue.js";
|
|
11
11
|
import ke from "./ChartHeader.vue.js";
|
|
12
|
-
import { hexColorToRgba as
|
|
13
|
-
import { useChartValues as
|
|
12
|
+
import { hexColorToRgba as Te } from "../../utils/color.js";
|
|
13
|
+
import { useChartValues as Se } from "./composables/useChartValues.js";
|
|
14
14
|
import Le from "./ChartLoader.vue.js";
|
|
15
15
|
import xe from "../emptyState/v4/EmptyStateV4.vue.js";
|
|
16
16
|
import Be from "./SettingsHeader.vue.js";
|
|
@@ -29,9 +29,10 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
29
29
|
tickCount: { default: pe },
|
|
30
30
|
header: { default: "" },
|
|
31
31
|
subheader: { default: "" },
|
|
32
|
+
subheaderTooltip: { default: "" },
|
|
32
33
|
hideLegend: { type: Boolean, default: !1 },
|
|
33
|
-
minVisible: { default:
|
|
34
|
-
maxVisible: { default:
|
|
34
|
+
minVisible: { default: he },
|
|
35
|
+
maxVisible: { default: me },
|
|
35
36
|
loading: { type: Boolean, default: !1 },
|
|
36
37
|
noDataIcon: { default: "file-x" },
|
|
37
38
|
noDataTitle: { default: "No data to display" },
|
|
@@ -39,7 +40,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
39
40
|
withSettingsHeader: { type: Boolean, default: !0 }
|
|
40
41
|
},
|
|
41
42
|
emits: ["update:chartType", "update:visibleIds"],
|
|
42
|
-
setup(a, { emit:
|
|
43
|
+
setup(a, { emit: T }) {
|
|
43
44
|
const t = a;
|
|
44
45
|
N.register(
|
|
45
46
|
Y,
|
|
@@ -53,31 +54,31 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
53
54
|
ne,
|
|
54
55
|
se,
|
|
55
56
|
de,
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
ue,
|
|
58
|
+
ce
|
|
58
59
|
);
|
|
59
|
-
const
|
|
60
|
+
const c = Q(t, "chartType", T), p = g(null);
|
|
60
61
|
let s = null;
|
|
61
|
-
const
|
|
62
|
+
const S = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !S.value), b = () => {
|
|
62
63
|
p.value && (s && s.destroy(), s = new N(p.value, B.value));
|
|
63
64
|
}, z = () => {
|
|
64
|
-
s && (s.data.datasets =
|
|
65
|
+
s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
|
|
65
66
|
};
|
|
66
|
-
j(
|
|
67
|
-
e && (await q(),
|
|
67
|
+
j(b), C(() => t.chartType, b), C(L, async (e) => {
|
|
68
|
+
e && (await q(), b());
|
|
68
69
|
}), C([() => t.visibleIds, () => t.dataSets], z);
|
|
69
|
-
const
|
|
70
|
+
const h = i(
|
|
70
71
|
() => t.chartType === n.StackedLine || t.chartType === n.StackedBar
|
|
71
|
-
),
|
|
72
|
+
), $ = i(
|
|
72
73
|
() => t.chartType === n.Line || t.chartType === n.StackedLine
|
|
73
74
|
), x = i(
|
|
74
75
|
() => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
|
|
75
|
-
),
|
|
76
|
+
), y = i(() => x.value.map((e, o) => {
|
|
76
77
|
const r = e.color || ve[o] || "#000000";
|
|
77
78
|
return {
|
|
78
79
|
...e,
|
|
79
|
-
fill:
|
|
80
|
-
backgroundColor:
|
|
80
|
+
fill: h.value ? "start" : void 0,
|
|
81
|
+
backgroundColor: Te(
|
|
81
82
|
r,
|
|
82
83
|
t.chartType === n.StackedLine ? 10 : 70
|
|
83
84
|
),
|
|
@@ -93,7 +94,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
93
94
|
type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
|
|
94
95
|
// Chart Data
|
|
95
96
|
data: {
|
|
96
|
-
datasets:
|
|
97
|
+
datasets: y.value
|
|
97
98
|
},
|
|
98
99
|
// Chart Options
|
|
99
100
|
options: {
|
|
@@ -107,7 +108,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
107
108
|
plugins: {
|
|
108
109
|
legend: { display: !1 },
|
|
109
110
|
title: { display: !1 },
|
|
110
|
-
hoverVerticalLine:
|
|
111
|
+
hoverVerticalLine: $.value,
|
|
111
112
|
// tooltip
|
|
112
113
|
tooltip: {
|
|
113
114
|
enabled: !1,
|
|
@@ -145,7 +146,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
145
146
|
borderWidth: 0,
|
|
146
147
|
hoverRadius: 4,
|
|
147
148
|
hoverBorderWidth: 2,
|
|
148
|
-
pointHoverBackgroundColor:
|
|
149
|
+
pointHoverBackgroundColor: be
|
|
149
150
|
},
|
|
150
151
|
bar: {
|
|
151
152
|
borderRadius: 4
|
|
@@ -156,7 +157,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
156
157
|
x: {
|
|
157
158
|
beginAtZero: !0,
|
|
158
159
|
border: { display: !1 },
|
|
159
|
-
stacked:
|
|
160
|
+
stacked: h.value,
|
|
160
161
|
// stack on top of each other
|
|
161
162
|
// ticks
|
|
162
163
|
ticks: {
|
|
@@ -184,7 +185,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
184
185
|
beginAtZero: !0,
|
|
185
186
|
border: { display: !1 },
|
|
186
187
|
// hide left borderline
|
|
187
|
-
stacked:
|
|
188
|
+
stacked: h.value,
|
|
188
189
|
// stack on top of each other
|
|
189
190
|
// ticks
|
|
190
191
|
ticks: {
|
|
@@ -206,32 +207,32 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
206
207
|
}
|
|
207
208
|
}
|
|
208
209
|
})
|
|
209
|
-
),
|
|
210
|
-
() =>
|
|
211
|
-
),
|
|
210
|
+
), K = i(
|
|
211
|
+
() => y.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
|
|
212
|
+
), W = i(() => t.dataSets.map((e) => ({
|
|
212
213
|
id: e.id,
|
|
213
214
|
label: e.label,
|
|
214
|
-
color:
|
|
215
|
-
}))), I = g(null), l = g(null), { position: w } =
|
|
215
|
+
color: K.value[e.id] || null
|
|
216
|
+
}))), I = g(null), l = g(null), { position: w } = ye(
|
|
216
217
|
p,
|
|
217
218
|
I,
|
|
218
219
|
l
|
|
219
|
-
),
|
|
220
|
+
), Z = i(() => ({
|
|
220
221
|
left: `${w.value.left}px`,
|
|
221
222
|
top: `${w.value.top}px`,
|
|
222
223
|
opacity: l.value?.opacity || 0
|
|
223
|
-
})), { minValue: A, maxValue:
|
|
224
|
+
})), { minValue: A, maxValue: _ } = Se({
|
|
224
225
|
parsingConfig: t.parsing,
|
|
225
226
|
dataSets: x,
|
|
226
|
-
isStacked:
|
|
227
|
+
isStacked: h
|
|
227
228
|
}), E = i(
|
|
228
|
-
() => fe(A.value,
|
|
229
|
+
() => fe(A.value, _.value, t.tickCount)
|
|
229
230
|
);
|
|
230
231
|
return (e, o) => (d(), k(R, null, [
|
|
231
|
-
a.withSettingsHeader ? (d(),
|
|
232
|
+
a.withSettingsHeader ? (d(), m(Be, {
|
|
232
233
|
key: 0,
|
|
233
|
-
"chart-type": c
|
|
234
|
-
"onUpdate:chart-type": o[0] || (o[0] = (r) => V(
|
|
234
|
+
"chart-type": u(c),
|
|
235
|
+
"onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
|
|
235
236
|
"hide-legend": a.hideLegend
|
|
236
237
|
}, {
|
|
237
238
|
metric: O(() => [
|
|
@@ -243,16 +244,17 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
243
244
|
_: 3
|
|
244
245
|
}, 8, ["chart-type", "hide-legend"])) : v("", !0),
|
|
245
246
|
f("div", Ie, [
|
|
246
|
-
|
|
247
|
+
u(L) ? (d(), k(R, { key: 0 }, [
|
|
247
248
|
f("section", we, [
|
|
248
249
|
f("div", Ae, [
|
|
249
250
|
F(ke, {
|
|
250
|
-
"chart-type": c
|
|
251
|
-
"onUpdate:chart-type": o[1] || (o[1] = (r) => V(
|
|
251
|
+
"chart-type": u(c),
|
|
252
|
+
"onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
|
|
252
253
|
"with-settings-header": a.withSettingsHeader,
|
|
253
254
|
header: a.header,
|
|
254
|
-
subheader: a.subheader
|
|
255
|
-
|
|
255
|
+
subheader: a.subheader,
|
|
256
|
+
"subheader-tooltip": a.subheaderTooltip
|
|
257
|
+
}, null, 8, ["chart-type", "with-settings-header", "header", "subheader", "subheader-tooltip"])
|
|
256
258
|
]),
|
|
257
259
|
f("div", Ee, [
|
|
258
260
|
f("canvas", {
|
|
@@ -264,9 +266,9 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
264
266
|
ref_key: "tooltipRef",
|
|
265
267
|
ref: I,
|
|
266
268
|
class: "chart__tooltip",
|
|
267
|
-
style: J(
|
|
269
|
+
style: J(u(Z))
|
|
268
270
|
}, [
|
|
269
|
-
l.value ? (d(),
|
|
271
|
+
l.value ? (d(), m(ge, {
|
|
270
272
|
key: 0,
|
|
271
273
|
title: String(l.value.title),
|
|
272
274
|
"data-points": l.value.dataPoints,
|
|
@@ -280,12 +282,12 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
|
|
|
280
282
|
]),
|
|
281
283
|
a.hideLegend ? v("", !0) : (d(), k("section", Re, [
|
|
282
284
|
F(Ce, {
|
|
283
|
-
items:
|
|
285
|
+
items: u(W),
|
|
284
286
|
"visible-ids": a.visibleIds,
|
|
285
|
-
"onUpdate:visibleIds": o[2] || (o[2] = (r) =>
|
|
287
|
+
"onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
|
|
286
288
|
}, null, 8, ["items", "visible-ids"])
|
|
287
289
|
]))
|
|
288
|
-
], 64)) : a.loading ? (d(),
|
|
290
|
+
], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
|
|
289
291
|
key: 2,
|
|
290
292
|
title: a.noDataTitle,
|
|
291
293
|
subtitle: a.noDataSubtitle,
|
|
@@ -4,11 +4,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
4
4
|
withSettingsHeader: boolean;
|
|
5
5
|
header?: string;
|
|
6
6
|
subheader?: string;
|
|
7
|
+
subheaderTooltip?: string;
|
|
7
8
|
}>, {
|
|
8
9
|
chartType: ChartType;
|
|
9
10
|
withSettingsHeader: boolean;
|
|
10
11
|
header: string;
|
|
11
12
|
subheader: string;
|
|
13
|
+
subheaderTooltip: string;
|
|
12
14
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
13
15
|
"update:chartType": (type: ChartType) => void;
|
|
14
16
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
@@ -16,11 +18,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
16
18
|
withSettingsHeader: boolean;
|
|
17
19
|
header?: string;
|
|
18
20
|
subheader?: string;
|
|
21
|
+
subheaderTooltip?: string;
|
|
19
22
|
}>, {
|
|
20
23
|
chartType: ChartType;
|
|
21
24
|
withSettingsHeader: boolean;
|
|
22
25
|
header: string;
|
|
23
26
|
subheader: string;
|
|
27
|
+
subheaderTooltip: string;
|
|
24
28
|
}>>> & {
|
|
25
29
|
"onUpdate:chartType"?: (type: ChartType) => any;
|
|
26
30
|
}, {
|
|
@@ -28,6 +32,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
28
32
|
chartType: ChartType;
|
|
29
33
|
withSettingsHeader: boolean;
|
|
30
34
|
subheader: string;
|
|
35
|
+
subheaderTooltip: string;
|
|
31
36
|
}>;
|
|
32
37
|
export default _default;
|
|
33
38
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -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 s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4c37736e"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|
|
@@ -1,53 +1,66 @@
|
|
|
1
|
-
import "../../ChartHeader.
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; import { defineComponent as y, computed as T, openBlock as c, createElementBlock as x, createElementVNode as V, createVNode as d, unref as t, withCtx as i, createTextVNode as u, toDisplayString as s, createBlock as b, isRef as g, createCommentVNode as k } from "vue";
|
|
2
|
+
import h from "../typography/v4/Typography.vue.js";
|
|
3
|
+
import v from "../switch/v4/SwitchV4.vue.js";
|
|
4
4
|
import { ChartType as r } from "./types.js";
|
|
5
|
-
|
|
5
|
+
import B from "../tooltip/v4/TooltipV4.vue.js";
|
|
6
|
+
const C = { class: "chart-header" }, S = { class: "header-texts" }, E = /* @__PURE__ */ y({
|
|
6
7
|
__name: "ChartHeader",
|
|
7
8
|
props: {
|
|
8
9
|
chartType: { default: r.Line },
|
|
9
10
|
withSettingsHeader: { type: Boolean, default: !0 },
|
|
10
11
|
header: { default: "" },
|
|
11
|
-
subheader: { default: "" }
|
|
12
|
+
subheader: { default: "" },
|
|
13
|
+
subheaderTooltip: { default: "" }
|
|
12
14
|
},
|
|
13
15
|
emits: ["update:chartType"],
|
|
14
|
-
setup(e, { emit:
|
|
16
|
+
setup(e, { emit: p }) {
|
|
15
17
|
const m = e, n = [
|
|
16
18
|
{ id: r.Line, icon: "chart-line-up" },
|
|
17
19
|
{ id: r.Bar, icon: "chart-bar" },
|
|
18
20
|
{ id: r.StackedLine, icon: "chart-line" }
|
|
19
21
|
], o = T({
|
|
20
22
|
get() {
|
|
21
|
-
return n.find(({ id:
|
|
23
|
+
return n.find(({ id: a }) => a === m.chartType);
|
|
22
24
|
},
|
|
23
|
-
set(
|
|
24
|
-
|
|
25
|
+
set(a) {
|
|
26
|
+
p("update:chartType", a.id);
|
|
25
27
|
}
|
|
26
28
|
});
|
|
27
|
-
return (
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
return (a, l) => (c(), x("div", C, [
|
|
30
|
+
V("div", S, [
|
|
31
|
+
d(t(B), {
|
|
32
|
+
text: e.subheaderTooltip,
|
|
33
|
+
placement: "right"
|
|
34
|
+
}, {
|
|
35
|
+
default: i(() => [
|
|
36
|
+
d(t(h), {
|
|
37
|
+
class: "subheader",
|
|
38
|
+
variant: "h5"
|
|
39
|
+
}, {
|
|
40
|
+
default: i(() => [
|
|
41
|
+
u(s(e.subheader), 1)
|
|
42
|
+
]),
|
|
43
|
+
_: 1
|
|
44
|
+
})
|
|
32
45
|
]),
|
|
33
46
|
_: 1
|
|
34
|
-
}),
|
|
35
|
-
|
|
36
|
-
default:
|
|
37
|
-
s(
|
|
47
|
+
}, 8, ["text"]),
|
|
48
|
+
d(t(h), { variant: "chart2" }, {
|
|
49
|
+
default: i(() => [
|
|
50
|
+
u(s(e.header), 1)
|
|
38
51
|
]),
|
|
39
52
|
_: 1
|
|
40
53
|
})
|
|
41
54
|
]),
|
|
42
|
-
e.withSettingsHeader ?
|
|
55
|
+
e.withSettingsHeader ? k("", !0) : (c(), b(t(v), {
|
|
43
56
|
key: 0,
|
|
44
|
-
modelValue:
|
|
45
|
-
"onUpdate:modelValue":
|
|
57
|
+
modelValue: t(o),
|
|
58
|
+
"onUpdate:modelValue": l[0] || (l[0] = (f) => g(o) ? o.value = f : null),
|
|
46
59
|
options: n
|
|
47
60
|
}, null, 8, ["modelValue"]))
|
|
48
61
|
]));
|
|
49
62
|
}
|
|
50
63
|
});
|
|
51
64
|
export {
|
|
52
|
-
|
|
65
|
+
E as default
|
|
53
66
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "./ChartLegend.vue2.js";
|
|
2
2
|
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../ChartLegend.
|
|
4
|
-
const
|
|
3
|
+
// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c0f71a49"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
a as default
|
|
7
7
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../ChartLegend.
|
|
1
|
+
import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; import { defineComponent as E, ref as T, computed as r, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as i, mergeProps as p, Fragment as y, renderList as w, withCtx as S, createTextVNode as U, toDisplayString as B } from "vue";
|
|
2
2
|
import { useVirtualList as D } from "@vueuse/core";
|
|
3
3
|
import N from "../typography/v4/Typography.vue.js";
|
|
4
4
|
import A from "../checkbox/v4/CheckboxV4.vue.js";
|
|
@@ -13,47 +13,54 @@ const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE
|
|
|
13
13
|
maxVisible: { default: M }
|
|
14
14
|
},
|
|
15
15
|
emits: ["update:visibleIds"],
|
|
16
|
-
setup(
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
return
|
|
20
|
-
(
|
|
16
|
+
setup(m, { emit: b }) {
|
|
17
|
+
const s = m, h = 32, o = T(""), f = r(() => {
|
|
18
|
+
const t = o.value.toLowerCase();
|
|
19
|
+
return s.items.filter(
|
|
20
|
+
(l) => l.label.toLowerCase().includes(t)
|
|
21
21
|
);
|
|
22
|
-
}),
|
|
23
|
-
() =>
|
|
24
|
-
), I =
|
|
25
|
-
() =>
|
|
26
|
-
), _ = (
|
|
22
|
+
}), a = (t) => s.visibleIds.includes(t.id), v = r(
|
|
23
|
+
() => s.visibleIds.length >= s.maxVisible
|
|
24
|
+
), I = r(
|
|
25
|
+
() => s.visibleIds.length <= s.minVisible
|
|
26
|
+
), _ = (t) => I.value && a(t) || v.value && !a(t), V = (t, l) => {
|
|
27
27
|
b(
|
|
28
28
|
"update:visibleIds",
|
|
29
|
-
|
|
29
|
+
t ? [...s.visibleIds, l.id] : s.visibleIds.filter((e) => e !== l.id)
|
|
30
30
|
);
|
|
31
|
-
}, { list:
|
|
31
|
+
}, { list: g, containerProps: L, wrapperProps: x } = D(f, {
|
|
32
32
|
itemHeight: h,
|
|
33
33
|
overscan: 10
|
|
34
34
|
});
|
|
35
|
-
return (
|
|
35
|
+
return (t, l) => (d(), n("div", P, [
|
|
36
36
|
c("div", R, [
|
|
37
|
-
u(
|
|
37
|
+
u(i(F), {
|
|
38
38
|
modelValue: o.value,
|
|
39
|
-
"onUpdate:modelValue":
|
|
39
|
+
"onUpdate:modelValue": l[0] || (l[0] = (e) => o.value = e)
|
|
40
40
|
}, null, 8, ["modelValue"])
|
|
41
41
|
]),
|
|
42
|
-
c("div",
|
|
43
|
-
c("ul",
|
|
44
|
-
(d(!0), n(y, null,
|
|
45
|
-
u(
|
|
46
|
-
color:
|
|
47
|
-
"is-checked":
|
|
48
|
-
disabled: _(
|
|
49
|
-
"onUpdate:isChecked": (
|
|
42
|
+
c("div", p({ class: "legend" }, i(L)), [
|
|
43
|
+
c("ul", p({ class: "legend__list" }, i(x)), [
|
|
44
|
+
(d(!0), n(y, null, w(i(g), ({ data: e, index: k }) => (d(), n("li", { key: k }, [
|
|
45
|
+
u(i(A), {
|
|
46
|
+
color: e.color,
|
|
47
|
+
"is-checked": a(e),
|
|
48
|
+
disabled: _(e),
|
|
49
|
+
"onUpdate:isChecked": (C) => V(C, e)
|
|
50
50
|
}, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
|
|
51
|
-
u(
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
u(i(N), {
|
|
52
|
+
variant: "body2",
|
|
53
|
+
"is-truncated": "",
|
|
54
|
+
class: "legend-label",
|
|
55
|
+
"with-tooltip": "",
|
|
56
|
+
"tooltip-text": e.label,
|
|
57
|
+
"tooltip-placement": "top"
|
|
58
|
+
}, {
|
|
59
|
+
default: S(() => [
|
|
60
|
+
U(B(e.label), 1)
|
|
54
61
|
]),
|
|
55
62
|
_: 2
|
|
56
|
-
},
|
|
63
|
+
}, 1032, ["tooltip-text"])
|
|
57
64
|
]))), 128))
|
|
58
65
|
], 16)
|
|
59
66
|
], 16)
|
|
@@ -15,6 +15,7 @@ declare const ChartTypes: () => ({
|
|
|
15
15
|
chartType: import("./types").ChartType;
|
|
16
16
|
withSettingsHeader: boolean;
|
|
17
17
|
subheader: string;
|
|
18
|
+
subheaderTooltip: string;
|
|
18
19
|
dataSets: import("./types").ChartDataSet[];
|
|
19
20
|
hideLegend: boolean;
|
|
20
21
|
tickCount: number;
|
|
@@ -67,6 +68,10 @@ declare const ChartTypes: () => ({
|
|
|
67
68
|
type: import("vue").PropType<string>;
|
|
68
69
|
default: string;
|
|
69
70
|
};
|
|
71
|
+
subheaderTooltip: {
|
|
72
|
+
type: import("vue").PropType<string>;
|
|
73
|
+
default: string;
|
|
74
|
+
};
|
|
70
75
|
dataSets: {
|
|
71
76
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
72
77
|
required: true;
|
|
@@ -95,7 +100,7 @@ declare const ChartTypes: () => ({
|
|
|
95
100
|
}>> & {
|
|
96
101
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
97
102
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
98
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
|
|
103
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "subheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle">;
|
|
99
104
|
$attrs: {
|
|
100
105
|
[x: string]: unknown;
|
|
101
106
|
};
|
|
@@ -155,6 +160,10 @@ declare const ChartTypes: () => ({
|
|
|
155
160
|
type: import("vue").PropType<string>;
|
|
156
161
|
default: string;
|
|
157
162
|
};
|
|
163
|
+
subheaderTooltip: {
|
|
164
|
+
type: import("vue").PropType<string>;
|
|
165
|
+
default: string;
|
|
166
|
+
};
|
|
158
167
|
dataSets: {
|
|
159
168
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
160
169
|
required: true;
|
|
@@ -198,6 +207,7 @@ declare const ChartTypes: () => ({
|
|
|
198
207
|
chartType: import("./types").ChartType;
|
|
199
208
|
withSettingsHeader: boolean;
|
|
200
209
|
subheader: string;
|
|
210
|
+
subheaderTooltip: string;
|
|
201
211
|
dataSets: import("./types").ChartDataSet[];
|
|
202
212
|
hideLegend: boolean;
|
|
203
213
|
tickCount: number;
|
|
@@ -270,6 +280,10 @@ declare const ChartTypes: () => ({
|
|
|
270
280
|
type: import("vue").PropType<string>;
|
|
271
281
|
default: string;
|
|
272
282
|
};
|
|
283
|
+
subheaderTooltip: {
|
|
284
|
+
type: import("vue").PropType<string>;
|
|
285
|
+
default: string;
|
|
286
|
+
};
|
|
273
287
|
dataSets: {
|
|
274
288
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
275
289
|
required: true;
|
|
@@ -348,6 +362,10 @@ declare const ChartTypes: () => ({
|
|
|
348
362
|
type: import("vue").PropType<string>;
|
|
349
363
|
default: string;
|
|
350
364
|
};
|
|
365
|
+
subheaderTooltip: {
|
|
366
|
+
type: import("vue").PropType<string>;
|
|
367
|
+
default: string;
|
|
368
|
+
};
|
|
351
369
|
dataSets: {
|
|
352
370
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
353
371
|
required: true;
|
|
@@ -391,6 +409,7 @@ declare const ChartTypes: () => ({
|
|
|
391
409
|
chartType: import("./types").ChartType;
|
|
392
410
|
withSettingsHeader: boolean;
|
|
393
411
|
subheader: string;
|
|
412
|
+
subheaderTooltip: string;
|
|
394
413
|
dataSets: import("./types").ChartDataSet[];
|
|
395
414
|
hideLegend: boolean;
|
|
396
415
|
tickCount: number;
|