@ironsource/shared-ui 2.1.11-test.9 → 2.1.11-test.91
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/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_604dfc6f_lang.css +1 -0
- package/Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css +1 -0
- package/ChartHeader.vue_vue_type_style_index_0_scoped_b8213498_lang.css +1 -0
- package/ChartLegend.vue_vue_type_style_index_0_scoped_a1c626cd_lang.css +1 -0
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css +1 -0
- package/CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css +1 -0
- package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css +1 -0
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_2c6a03f9_lang.css +1 -0
- package/DataGrid.vue_vue_type_style_index_0_scoped_26488faf_lang.css +1 -0
- package/DataGridMenu.vue_vue_type_style_index_0_scoped_ddfaf207_lang.css +1 -0
- package/DialogV4.vue_vue_type_style_index_0_scoped_37da643b_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_75002075_lang.css +1 -0
- package/EditableV4.vue_vue_type_style_index_0_scoped_1bbe222a_lang.css +1 -0
- package/EmptyStateV4.vue_vue_type_style_index_0_scoped_18728498_lang.css +1 -0
- package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_383011d3_lang.css +1 -0
- package/FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css +1 -0
- package/IconFlag.vue_vue_type_style_index_0_scoped_be9dc7bb_lang.css +1 -0
- package/OptionV4.vue_vue_type_style_index_0_scoped_2c2947b3_lang.css +1 -0
- package/PopoverV4.vue_vue_type_style_index_0_scoped_66694b4e_lang.css +1 -0
- package/README.md +4 -15
- package/SnackbarV4.vue_vue_type_style_index_0_scoped_89fe8aa1_lang.css +1 -0
- package/SortableItem.vue_vue_type_style_index_0_scoped_2ca7b24c_lang.css +1 -0
- package/SortableItemLabel.vue_vue_type_style_index_0_scoped_f2ced2f4_lang.css +1 -0
- package/SortableList.vue_vue_type_style_index_0_scoped_8f267f88_lang.css +1 -0
- package/TextField.vue_vue_type_style_index_0_scoped_fce3948c_lang.css +1 -0
- package/ThemeWrapper.vue_vue_type_style_index_1_lang.css +1 -1
- package/TooltipV4.vue_vue_type_style_index_0_scoped_66eab856_lang.css +1 -0
- package/TooltipV4.vue_vue_type_style_index_1_lang.css +1 -1
- package/TreeDropdown.vue_vue_type_style_index_0_scoped_b883d1fa_lang.css +1 -0
- package/Typography.vue_vue_type_style_index_0_scoped_5714d43e_lang.css +1 -0
- package/components/autocomplete/Autocomplete.vue2.js +1 -1
- package/components/chart/Chart.vue.d.ts +16 -3
- package/components/chart/Chart.vue.js +5 -5
- package/components/chart/Chart.vue2.js +127 -110
- package/components/chart/ChartHeader.vue.d.ts +13 -6
- package/components/chart/ChartHeader.vue.js +2 -2
- package/components/chart/ChartHeader.vue2.js +32 -29
- package/components/chart/ChartLegend.vue.d.ts +5 -0
- package/components/chart/ChartLegend.vue.js +3 -3
- package/components/chart/ChartLegend.vue2.js +99 -49
- package/components/chart/ChartTooltip.vue.d.ts +4 -5
- package/components/chart/ChartTooltip.vue.js +2 -2
- package/components/chart/ChartTooltip.vue2.js +64 -43
- package/components/chart/SettingsHeader.vue2.js +1 -1
- package/components/chart/index.d.ts +55 -16
- package/components/chart/mockData.d.ts +15 -2
- package/components/chart/types.d.ts +15 -1
- package/components/chart/utils/utils.js +5 -5
- package/components/checkbox/v4/CheckboxV4.vue.js +3 -3
- package/components/checkbox/v4/CheckboxV4.vue2.js +2 -2
- package/components/datePicker/v4/DatePickerV4.vue2.js +1 -1
- package/components/dateRange/v4/DateRangeV4.vue2.js +1 -1
- package/components/dialog/v4/DialogV4.vue.d.ts +15 -0
- package/components/dialog/v4/DialogV4.vue.js +3 -3
- package/components/dialog/v4/DialogV4.vue2.js +80 -73
- package/components/dialog/v4/index.d.ts +58 -1
- package/components/dropdown/common/Dropdown.common.js +180 -169
- package/components/dropdown/v3/index.d.ts +12 -12
- package/components/dropdown/v4/ButtonDropdownTrigger.vue.d.ts +15 -0
- package/components/dropdown/v4/ButtonDropdownTrigger.vue.js +2 -2
- package/components/dropdown/v4/ButtonDropdownTrigger.vue2.js +42 -20
- package/components/dropdown/v4/ChipDropdownTrigger.vue.d.ts +10 -0
- package/components/dropdown/v4/ChipDropdownTrigger.vue.js +3 -3
- package/components/dropdown/v4/ChipDropdownTrigger.vue2.js +59 -40
- package/components/dropdown/v4/{ConditionalDroprown.vue.d.ts → ConditionalDropdown.vue.d.ts} +58 -0
- package/components/dropdown/v4/ConditionalDropdown.vue.js +7 -0
- package/components/dropdown/v4/ConditionalDropdown.vue2.js +234 -0
- package/components/dropdown/v4/DropdownV4.vue.d.ts +18 -5
- package/components/dropdown/v4/DropdownV4.vue.js +3 -3
- package/components/dropdown/v4/DropdownV4.vue2.js +52 -50
- package/components/dropdown/v4/OptionV4.vue.js +2 -2
- package/components/dropdown/v4/OptionV4.vue2.js +2 -2
- package/components/dropdown/v4/TreeDropdown.vue.js +2 -2
- package/components/dropdown/v4/TreeDropdown.vue2.js +87 -87
- package/components/dropdown/v4/index.d.ts +203 -35
- package/components/dropdown/v4/index.js +3 -3
- package/components/emptyState/v4/EmptyStateV4.vue.js +3 -3
- package/components/emptyState/v4/EmptyStateV4.vue2.js +1 -1
- package/components/filtersPanel/v4/FiltersPanelV4.vue.js +2 -2
- package/components/filtersPanel/v4/FiltersPanelV4.vue2.js +8 -9
- package/components/forms/FormCard.vue.js +3 -3
- package/components/forms/FormCard.vue2.js +1 -1
- package/components/icon/v4/IconFlag.vue.js +3 -3
- package/components/icon/v4/IconFlag.vue2.js +1 -1
- package/components/icon/v4/consts.d.ts +1 -1
- package/components/icon/v4/consts.js +1 -1
- package/components/input/v4/TextField.vue.js +3 -3
- package/components/input/v4/TextField.vue2.js +185 -165
- package/components/multibar/MultiBarMenu.vue2.js +1 -1
- package/components/popover/v4/PopoverV4.vue.d.ts +11 -1
- package/components/popover/v4/PopoverV4.vue.js +2 -2
- package/components/popover/v4/PopoverV4.vue2.js +40 -26
- package/components/popover/v4/index.d.ts +46 -8
- package/components/snackbar/v4/SnackbarV4.vue.d.ts +7 -116
- package/components/snackbar/v4/SnackbarV4.vue.js +5 -5
- package/components/snackbar/v4/SnackbarV4.vue2.js +62 -60
- package/components/sortableList/SortableItem.vue.d.ts +5 -0
- package/components/sortableList/SortableItem.vue.js +2 -2
- package/components/sortableList/SortableItem.vue2.js +86 -70
- package/components/sortableList/SortableItemLabel.vue.js +3 -3
- package/components/sortableList/SortableItemLabel.vue2.js +20 -23
- package/components/sortableList/SortableList.vue.d.ts +17 -1
- package/components/sortableList/SortableList.vue.js +4 -4
- package/components/sortableList/SortableList.vue2.js +113 -94
- package/components/sortableList/index.d.ts +63 -5
- package/components/table/common/Table.common.d.ts +1 -1
- package/components/table/common/Table.common.js +82 -74
- package/components/table/common/Table.types.d.ts +1 -1
- package/components/table/common/consts.d.ts +4 -0
- package/components/table/common/consts.js +7 -0
- package/components/table/v3/Table.vue.d.ts +1 -1
- package/components/table/v3/index.d.ts +5 -5
- package/components/table/v4/DataGrid.vue.d.ts +12 -2
- package/components/table/v4/DataGrid.vue.js +2 -2
- package/components/table/v4/DataGrid.vue2.js +164 -155
- package/components/table/v4/DataGridMenu.vue.js +5 -5
- package/components/table/v4/DataGridMenu.vue2.js +2 -2
- package/components/table/v4/MultipleDataGrid.vue.d.ts +1 -1
- package/components/table/v4/index.d.ts +84 -46
- package/components/table-cells/common/Editable.common.js +29 -23
- package/components/table-cells/common/EditableContext.d.ts +1 -0
- package/components/table-cells/v4/EditableV4.vue.d.ts +5 -0
- package/components/table-cells/v4/EditableV4.vue.js +3 -3
- package/components/table-cells/v4/EditableV4.vue2.js +11 -10
- package/components/table-cells/v4/index.d.ts +20 -1
- package/components/tooltip/v4/TooltipV4.vue.d.ts +10 -0
- package/components/tooltip/v4/TooltipV4.vue.js +3 -3
- package/components/tooltip/v4/TooltipV4.vue2.js +24 -21
- package/components/tooltip/v4/index.d.ts +39 -1
- package/components/typography/v4/Typography.vue.js +3 -3
- package/components/typography/v4/Typography.vue2.js +24 -18
- package/design-foundation.stories/icons/iconsData.d.ts +1 -1
- package/index.d.ts +1093 -204
- package/index.js +1 -1
- package/mocks/words.d.ts +1 -1
- package/package.json +3 -3
- package/style/v4/grid.css +1 -1
- package/style/v4/grid.css.map +1 -1
- package/style/v4/spacings.scss +1 -0
- package/testids/index.d.ts +2 -0
- package/testids/index.js +13 -13
- package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_76c74f58_lang.css +0 -1
- package/Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css +0 -1
- package/ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css +0 -1
- package/ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css +0 -1
- package/ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css +0 -1
- package/CheckboxV4.vue_vue_type_style_index_0_scoped_8e5b619a_lang.css +0 -1
- package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_ba28c717_lang.css +0 -1
- package/ConditionalDroprown.vue_vue_type_style_index_0_scoped_546e19a9_lang.css +0 -1
- package/DataGrid.vue_vue_type_style_index_0_scoped_0cd8af73_lang.css +0 -1
- package/DataGridMenu.vue_vue_type_style_index_0_scoped_a6e4672f_lang.css +0 -1
- package/DialogV4.vue_vue_type_style_index_0_scoped_09c488cf_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_f88a132e_lang.css +0 -1
- package/EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css +0 -1
- package/EmptyStateV4.vue_vue_type_style_index_0_scoped_24001caa_lang.css +0 -1
- package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css +0 -1
- package/FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css +0 -1
- package/IconFlag.vue_vue_type_style_index_0_scoped_7b09cc85_lang.css +0 -1
- package/OptionV4.vue_vue_type_style_index_0_scoped_df830bf5_lang.css +0 -1
- package/PopoverV4.vue_vue_type_style_index_0_scoped_43b5cba4_lang.css +0 -1
- package/SnackbarV4.vue_vue_type_style_index_0_scoped_49c5ccea_lang.css +0 -1
- package/SortableItem.vue_vue_type_style_index_0_scoped_9dd4d372_lang.css +0 -1
- package/SortableItemLabel.vue_vue_type_style_index_0_scoped_1386ae20_lang.css +0 -1
- package/SortableList.vue_vue_type_style_index_0_scoped_e9cd63b8_lang.css +0 -1
- package/TextField.vue_vue_type_style_index_0_scoped_4d9bf5b2_lang.css +0 -1
- package/TooltipV4.vue_vue_type_style_index_0_scoped_fcdb9d02_lang.css +0 -1
- package/TreeDropdown.vue_vue_type_style_index_0_scoped_bdfb0aef_lang.css +0 -1
- package/Typography.vue_vue_type_style_index_0_scoped_992962bc_lang.css +0 -1
- package/components/dropdown/v4/ConditionalDroprown.vue.js +0 -7
- package/components/dropdown/v4/ConditionalDroprown.vue2.js +0 -157
|
@@ -1,72 +1,122 @@
|
|
|
1
|
-
import "../../ChartLegend.
|
|
2
|
-
import { useVirtualList as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { DEFAULT_MIN_VISIBLE as
|
|
7
|
-
|
|
1
|
+
import "../../ChartLegend.vue_vue_type_style_index_0_scoped_a1c626cd_lang.css"; import { defineComponent as M, ref as N, computed as p, openBlock as r, createElementBlock as u, createElementVNode as a, createVNode as n, unref as i, mergeProps as x, Fragment as S, renderList as P, normalizeClass as A, withCtx as m, withModifiers as F, createBlock as H, createCommentVNode as U, createTextVNode as h, toDisplayString as I } from "vue";
|
|
2
|
+
import { useVirtualList as z } from "@vueuse/core";
|
|
3
|
+
import _ from "../typography/v4/Typography.vue.js";
|
|
4
|
+
import R from "../checkbox/v4/CheckboxV4.vue.js";
|
|
5
|
+
import q from "../search/v4/SearchV4.vue.js";
|
|
6
|
+
import { DEFAULT_MIN_VISIBLE as G, DEFAULT_MAX_VISIBLE as X } from "./consts.js";
|
|
7
|
+
import $ from "../icon/v4/IconV4.vue.js";
|
|
8
|
+
import "../icon/v4/IconFlag.vue.js";
|
|
9
|
+
import j from "../tooltip/v4/TooltipV4.vue.js";
|
|
10
|
+
const J = { class: "chart-legend" }, K = { class: "search-box" }, O = ["onClick"], Q = { class: "label-container" }, ae = /* @__PURE__ */ M({
|
|
8
11
|
__name: "ChartLegend",
|
|
9
12
|
props: {
|
|
10
13
|
items: { default: () => [] },
|
|
11
14
|
visibleIds: { default: () => [] },
|
|
12
|
-
minVisible: { default:
|
|
13
|
-
maxVisible: { default:
|
|
15
|
+
minVisible: { default: G },
|
|
16
|
+
maxVisible: { default: X },
|
|
17
|
+
maxLimitTooltipText: { default: "" }
|
|
14
18
|
},
|
|
15
19
|
emits: ["update:visibleIds"],
|
|
16
|
-
setup(
|
|
17
|
-
const
|
|
18
|
-
const t =
|
|
19
|
-
return
|
|
20
|
+
setup(b, { emit: L }) {
|
|
21
|
+
const o = b, T = 32, d = N(""), g = p(() => {
|
|
22
|
+
const t = d.value.toLowerCase();
|
|
23
|
+
return o.items.filter(
|
|
20
24
|
(l) => l.label.toLowerCase().includes(t)
|
|
21
25
|
);
|
|
22
|
-
}),
|
|
23
|
-
() =>
|
|
24
|
-
),
|
|
25
|
-
() =>
|
|
26
|
-
),
|
|
27
|
-
|
|
26
|
+
}), s = (t) => o.visibleIds.includes(t.id), f = p(
|
|
27
|
+
() => o.visibleIds.length >= o.maxVisible
|
|
28
|
+
), k = p(
|
|
29
|
+
() => o.visibleIds.length <= o.minVisible
|
|
30
|
+
), c = (t) => k.value && s(t) || f.value && !s(t), C = (t) => !o.maxLimitTooltipText || s(t) || !f.value, V = (t, l) => {
|
|
31
|
+
L(
|
|
28
32
|
"update:visibleIds",
|
|
29
|
-
t ? [...
|
|
33
|
+
t ? [...o.visibleIds, l.id] : o.visibleIds.filter((e) => e !== l.id)
|
|
30
34
|
);
|
|
31
|
-
}, { list:
|
|
32
|
-
itemHeight:
|
|
35
|
+
}, { list: y, containerProps: w, wrapperProps: E } = z(g, {
|
|
36
|
+
itemHeight: T,
|
|
33
37
|
overscan: 10
|
|
34
|
-
})
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
}), B = (t) => {
|
|
39
|
+
c(t) || V(!s(t), t);
|
|
40
|
+
};
|
|
41
|
+
return (t, l) => (r(), u("div", J, [
|
|
42
|
+
a("div", K, [
|
|
43
|
+
n(i(q), {
|
|
44
|
+
modelValue: d.value,
|
|
45
|
+
"onUpdate:modelValue": l[0] || (l[0] = (e) => d.value = e)
|
|
40
46
|
}, null, 8, ["modelValue"])
|
|
41
47
|
]),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
variant: "body2",
|
|
53
|
-
"is-truncated": "",
|
|
54
|
-
class: "legend-label",
|
|
55
|
-
"with-tooltip": "",
|
|
56
|
-
"tooltip-text": e.label,
|
|
57
|
-
"tooltip-placement": "top"
|
|
48
|
+
a("div", x({ class: "legend" }, i(w)), [
|
|
49
|
+
a("ul", x({ class: "legend__list" }, i(E)), [
|
|
50
|
+
(r(!0), u(S, null, P(i(y), ({ data: e, index: D }) => (r(), u("li", {
|
|
51
|
+
key: D,
|
|
52
|
+
class: A({ "disabled-item": c(e) })
|
|
53
|
+
}, [
|
|
54
|
+
n(i(j), {
|
|
55
|
+
text: b.maxLimitTooltipText,
|
|
56
|
+
disabled: C(e),
|
|
57
|
+
class: "disabled-tooltip"
|
|
58
58
|
}, {
|
|
59
|
-
default:
|
|
60
|
-
|
|
59
|
+
default: m(() => [
|
|
60
|
+
a("div", {
|
|
61
|
+
class: "item-wrapper",
|
|
62
|
+
onClick: (v) => B(e)
|
|
63
|
+
}, [
|
|
64
|
+
n(i(R), {
|
|
65
|
+
color: e.color,
|
|
66
|
+
"is-checked": s(e),
|
|
67
|
+
disabled: c(e),
|
|
68
|
+
onClick: l[1] || (l[1] = F(
|
|
69
|
+
(v) => {
|
|
70
|
+
v.stopPropagation();
|
|
71
|
+
},
|
|
72
|
+
["stop"]
|
|
73
|
+
))
|
|
74
|
+
}, null, 8, ["color", "is-checked", "disabled"]),
|
|
75
|
+
e.icon ? (r(), H(i($), {
|
|
76
|
+
key: 0,
|
|
77
|
+
class: "icon-color",
|
|
78
|
+
type: e.iconType,
|
|
79
|
+
name: e.icon,
|
|
80
|
+
size: "16px"
|
|
81
|
+
}, null, 8, ["type", "name"])) : U("", !0),
|
|
82
|
+
a("div", Q, [
|
|
83
|
+
n(i(_), {
|
|
84
|
+
variant: "body2",
|
|
85
|
+
class: "legend-label",
|
|
86
|
+
"is-truncated": "",
|
|
87
|
+
"with-tooltip": "",
|
|
88
|
+
"tooltip-text": e.label,
|
|
89
|
+
"tooltip-placement": "left"
|
|
90
|
+
}, {
|
|
91
|
+
default: m(() => [
|
|
92
|
+
h(I(e.label), 1)
|
|
93
|
+
]),
|
|
94
|
+
_: 2
|
|
95
|
+
}, 1032, ["tooltip-text"]),
|
|
96
|
+
n(i(_), {
|
|
97
|
+
variant: "caption",
|
|
98
|
+
class: "legend-caption legend-label",
|
|
99
|
+
"is-truncated": "",
|
|
100
|
+
"with-tooltip": "",
|
|
101
|
+
"tooltip-text": e.caption,
|
|
102
|
+
"tooltip-placement": "left"
|
|
103
|
+
}, {
|
|
104
|
+
default: m(() => [
|
|
105
|
+
h(I(e.caption), 1)
|
|
106
|
+
]),
|
|
107
|
+
_: 2
|
|
108
|
+
}, 1032, ["tooltip-text"])
|
|
109
|
+
])
|
|
110
|
+
], 8, O)
|
|
61
111
|
]),
|
|
62
112
|
_: 2
|
|
63
|
-
}, 1032, ["
|
|
64
|
-
]))), 128))
|
|
113
|
+
}, 1032, ["text", "disabled"])
|
|
114
|
+
], 2))), 128))
|
|
65
115
|
], 16)
|
|
66
116
|
], 16)
|
|
67
117
|
]));
|
|
68
118
|
}
|
|
69
119
|
});
|
|
70
120
|
export {
|
|
71
|
-
|
|
121
|
+
ae as default
|
|
72
122
|
};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ValueFormat } from '@/components/chart/types';
|
|
1
|
+
import { MyTooltipItem, ValueFormat } from '@/components/chart/types';
|
|
3
2
|
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
3
|
title?: string;
|
|
5
|
-
dataPoints:
|
|
4
|
+
dataPoints: MyTooltipItem<'line'>[];
|
|
6
5
|
xAxisFormat?: ValueFormat;
|
|
7
6
|
yAxisFormat?: ValueFormat;
|
|
8
7
|
totalLabel?: string;
|
|
@@ -16,7 +15,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
16
15
|
totalValue: any;
|
|
17
16
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
18
17
|
title?: string;
|
|
19
|
-
dataPoints:
|
|
18
|
+
dataPoints: MyTooltipItem<'line'>[];
|
|
20
19
|
xAxisFormat?: ValueFormat;
|
|
21
20
|
yAxisFormat?: ValueFormat;
|
|
22
21
|
totalLabel?: string;
|
|
@@ -30,7 +29,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
30
29
|
totalValue: any;
|
|
31
30
|
}>>>, {
|
|
32
31
|
title: string;
|
|
33
|
-
dataPoints:
|
|
32
|
+
dataPoints: MyTooltipItem<'line'>[];
|
|
34
33
|
xAxisFormat: ValueFormat;
|
|
35
34
|
yAxisFormat: ValueFormat;
|
|
36
35
|
totalLabel: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./ChartTooltip.vue2.js";
|
|
2
2
|
/* empty css */import t from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../ChartTooltip.
|
|
4
|
-
const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
3
|
+
// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; //*');
|
|
4
|
+
const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6744325c"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import "../../ChartTooltip.
|
|
2
|
-
import
|
|
3
|
-
import { formatValue as
|
|
4
|
-
|
|
1
|
+
import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; import { defineComponent as b, computed as x, openBlock as l, createElementBlock as c, createVNode as o, unref as t, withCtx as r, createTextVNode as i, toDisplayString as s, createCommentVNode as m, createElementVNode as f, Fragment as v, renderList as F, normalizeStyle as h, createBlock as g } from "vue";
|
|
2
|
+
import n from "../typography/v4/Typography.vue.js";
|
|
3
|
+
import { formatValue as d } from "./utils/utils.js";
|
|
4
|
+
import k from "../icon/v4/IconV4.vue.js";
|
|
5
|
+
import "../icon/v4/IconFlag.vue.js";
|
|
6
|
+
const A = { class: "chart-tooltip" }, V = {
|
|
5
7
|
key: 0,
|
|
8
|
+
class: "tooltip-title-wrapper"
|
|
9
|
+
}, C = { class: "list" }, T = { class: "popover-label-wrapper" }, _ = {
|
|
10
|
+
key: 1,
|
|
6
11
|
class: "tooltip-footer"
|
|
7
|
-
},
|
|
12
|
+
}, I = /* @__PURE__ */ b({
|
|
8
13
|
__name: "ChartTooltip",
|
|
9
14
|
props: {
|
|
10
15
|
title: { default: "" },
|
|
@@ -14,68 +19,84 @@ const F = { class: "chart-tooltip" }, V = { class: "tooltip-title" }, p = { clas
|
|
|
14
19
|
totalLabel: { default: "Total" },
|
|
15
20
|
totalValue: { default: null }
|
|
16
21
|
},
|
|
17
|
-
setup(
|
|
18
|
-
const
|
|
19
|
-
return (
|
|
20
|
-
|
|
21
|
-
t
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
setup(e) {
|
|
23
|
+
const u = e, y = x(() => u.xAxisFormat === "date" ? "dateLong" : u.xAxisFormat), p = x(() => u.xAxisFormat === "date" ? "day" : u.xAxisFormat);
|
|
24
|
+
return (w, B) => (l(), c("div", A, [
|
|
25
|
+
e.title ? (l(), c("div", V, [
|
|
26
|
+
o(t(n), { variant: "subtitle2" }, {
|
|
27
|
+
default: r(() => [
|
|
28
|
+
i(s(t(d)(e.title, t(y))), 1)
|
|
29
|
+
]),
|
|
30
|
+
_: 1
|
|
31
|
+
}),
|
|
32
|
+
o(t(n), {
|
|
33
|
+
class: "tooltip-sub-title",
|
|
34
|
+
variant: "caption"
|
|
24
35
|
}, {
|
|
25
|
-
default:
|
|
26
|
-
|
|
36
|
+
default: r(() => [
|
|
37
|
+
i(s(t(d)(e.title, t(p))), 1)
|
|
27
38
|
]),
|
|
28
39
|
_: 1
|
|
29
|
-
})
|
|
30
|
-
]),
|
|
31
|
-
|
|
32
|
-
(
|
|
33
|
-
key:
|
|
40
|
+
})
|
|
41
|
+
])) : m("", !0),
|
|
42
|
+
f("ul", C, [
|
|
43
|
+
(l(!0), c(v, null, F(e.dataPoints, (a) => (l(), c("li", {
|
|
44
|
+
key: a.datasetIndex,
|
|
34
45
|
class: "list__item"
|
|
35
46
|
}, [
|
|
36
|
-
|
|
47
|
+
f("span", {
|
|
37
48
|
class: "color-box",
|
|
38
|
-
style:
|
|
39
|
-
backgroundColor: String(
|
|
49
|
+
style: h({
|
|
50
|
+
backgroundColor: String(a.dataset.pointBackgroundColor)
|
|
40
51
|
})
|
|
41
52
|
}, null, 4),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
class: "
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
a.dataset.icon ? (l(), g(t(k), {
|
|
54
|
+
key: 0,
|
|
55
|
+
class: "platform-icon",
|
|
56
|
+
type: a.dataset.iconType,
|
|
57
|
+
name: a.dataset.icon,
|
|
58
|
+
size: "16px"
|
|
59
|
+
}, null, 8, ["type", "name"])) : m("", !0),
|
|
60
|
+
f("div", T, [
|
|
61
|
+
o(t(n), {
|
|
62
|
+
variant: "body2",
|
|
63
|
+
class: "flex-grow truncated-label",
|
|
64
|
+
"is-truncated": ""
|
|
65
|
+
}, {
|
|
66
|
+
default: r(() => [
|
|
67
|
+
i(s(a.dataset.label), 1)
|
|
68
|
+
]),
|
|
69
|
+
_: 2
|
|
70
|
+
}, 1024)
|
|
71
|
+
]),
|
|
72
|
+
o(t(n), { variant: "body2" }, {
|
|
73
|
+
default: r(() => [
|
|
74
|
+
i(s(t(d)(a.parsed.y, e.yAxisFormat)), 1)
|
|
54
75
|
]),
|
|
55
76
|
_: 2
|
|
56
77
|
}, 1024)
|
|
57
78
|
]))), 128))
|
|
58
79
|
]),
|
|
59
|
-
|
|
60
|
-
|
|
80
|
+
e.totalValue !== null ? (l(), c("div", _, [
|
|
81
|
+
o(t(n), {
|
|
61
82
|
variant: "body2",
|
|
62
83
|
class: "flex-grow"
|
|
63
84
|
}, {
|
|
64
|
-
default:
|
|
65
|
-
|
|
85
|
+
default: r(() => [
|
|
86
|
+
i(s(e.totalLabel), 1)
|
|
66
87
|
]),
|
|
67
88
|
_: 1
|
|
68
89
|
}),
|
|
69
|
-
|
|
70
|
-
default:
|
|
71
|
-
|
|
90
|
+
o(t(n), { variant: "body2" }, {
|
|
91
|
+
default: r(() => [
|
|
92
|
+
i(s(t(d)(e.totalValue, e.yAxisFormat)), 1)
|
|
72
93
|
]),
|
|
73
94
|
_: 1
|
|
74
95
|
})
|
|
75
|
-
])) :
|
|
96
|
+
])) : m("", !0)
|
|
76
97
|
]));
|
|
77
98
|
}
|
|
78
99
|
});
|
|
79
100
|
export {
|
|
80
|
-
|
|
101
|
+
I as default
|
|
81
102
|
};
|
|
@@ -8,7 +8,7 @@ import k from "../dropdown/v4/ButtonDropdownTrigger.vue.js";
|
|
|
8
8
|
import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
|
|
9
9
|
import "../dropdown/v4/TreeDropdown.vue.js";
|
|
10
10
|
import "../dropdown/v4/OptionV4.vue.js";
|
|
11
|
-
import "../dropdown/v4/
|
|
11
|
+
import "../dropdown/v4/ConditionalDropdown.vue.js";
|
|
12
12
|
import { DROPDOWN_TYPE_OPTIONS as c } from "./consts.js";
|
|
13
13
|
const _ = { class: "settings-header-container" }, B = { class: "chart-type-selection" }, x = /* @__PURE__ */ h({
|
|
14
14
|
__name: "SettingsHeader",
|
|
@@ -12,16 +12,18 @@ declare const ChartTypes: () => ({
|
|
|
12
12
|
visibleIds: unknown[];
|
|
13
13
|
minVisible: number;
|
|
14
14
|
maxVisible: number;
|
|
15
|
+
maxLimitTooltipText: string;
|
|
15
16
|
chartType: import("./types").ChartType;
|
|
16
17
|
withSettingsHeader: boolean;
|
|
17
18
|
subheader: string;
|
|
18
|
-
|
|
19
|
+
withSubheaderTooltip: boolean;
|
|
19
20
|
dataSets: import("./types").ChartDataSet[];
|
|
20
21
|
hideLegend: boolean;
|
|
21
22
|
tickCount: number;
|
|
22
23
|
noDataIcon: string;
|
|
23
24
|
noDataTitle: string;
|
|
24
25
|
noDataSubtitle: string;
|
|
26
|
+
withAnimation: boolean;
|
|
25
27
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
|
26
28
|
header: {
|
|
27
29
|
type: import("vue").PropType<string>;
|
|
@@ -56,6 +58,10 @@ declare const ChartTypes: () => ({
|
|
|
56
58
|
type: import("vue").PropType<number>;
|
|
57
59
|
default: number;
|
|
58
60
|
};
|
|
61
|
+
maxLimitTooltipText: {
|
|
62
|
+
type: import("vue").PropType<string>;
|
|
63
|
+
default: string;
|
|
64
|
+
};
|
|
59
65
|
chartType: {
|
|
60
66
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
61
67
|
default: import("./types").ChartType;
|
|
@@ -68,9 +74,9 @@ declare const ChartTypes: () => ({
|
|
|
68
74
|
type: import("vue").PropType<string>;
|
|
69
75
|
default: string;
|
|
70
76
|
};
|
|
71
|
-
|
|
72
|
-
type: import("vue").PropType<
|
|
73
|
-
default:
|
|
77
|
+
withSubheaderTooltip: {
|
|
78
|
+
type: import("vue").PropType<boolean>;
|
|
79
|
+
default: boolean;
|
|
74
80
|
};
|
|
75
81
|
dataSets: {
|
|
76
82
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -97,10 +103,14 @@ declare const ChartTypes: () => ({
|
|
|
97
103
|
type: import("vue").PropType<string>;
|
|
98
104
|
default: string;
|
|
99
105
|
};
|
|
106
|
+
withAnimation: {
|
|
107
|
+
type: import("vue").PropType<boolean>;
|
|
108
|
+
default: boolean;
|
|
109
|
+
};
|
|
100
110
|
}>> & {
|
|
101
111
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
102
112
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
103
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "chartType" | "withSettingsHeader" | "subheader" | "
|
|
113
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "withSettingsHeader" | "subheader" | "withSubheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation">;
|
|
104
114
|
$attrs: {
|
|
105
115
|
[x: string]: unknown;
|
|
106
116
|
};
|
|
@@ -148,6 +158,10 @@ declare const ChartTypes: () => ({
|
|
|
148
158
|
type: import("vue").PropType<number>;
|
|
149
159
|
default: number;
|
|
150
160
|
};
|
|
161
|
+
maxLimitTooltipText: {
|
|
162
|
+
type: import("vue").PropType<string>;
|
|
163
|
+
default: string;
|
|
164
|
+
};
|
|
151
165
|
chartType: {
|
|
152
166
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
153
167
|
default: import("./types").ChartType;
|
|
@@ -160,9 +174,9 @@ declare const ChartTypes: () => ({
|
|
|
160
174
|
type: import("vue").PropType<string>;
|
|
161
175
|
default: string;
|
|
162
176
|
};
|
|
163
|
-
|
|
164
|
-
type: import("vue").PropType<
|
|
165
|
-
default:
|
|
177
|
+
withSubheaderTooltip: {
|
|
178
|
+
type: import("vue").PropType<boolean>;
|
|
179
|
+
default: boolean;
|
|
166
180
|
};
|
|
167
181
|
dataSets: {
|
|
168
182
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -189,6 +203,10 @@ declare const ChartTypes: () => ({
|
|
|
189
203
|
type: import("vue").PropType<string>;
|
|
190
204
|
default: string;
|
|
191
205
|
};
|
|
206
|
+
withAnimation: {
|
|
207
|
+
type: import("vue").PropType<boolean>;
|
|
208
|
+
default: boolean;
|
|
209
|
+
};
|
|
192
210
|
}>> & {
|
|
193
211
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
194
212
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
@@ -204,16 +222,18 @@ declare const ChartTypes: () => ({
|
|
|
204
222
|
visibleIds: unknown[];
|
|
205
223
|
minVisible: number;
|
|
206
224
|
maxVisible: number;
|
|
225
|
+
maxLimitTooltipText: string;
|
|
207
226
|
chartType: import("./types").ChartType;
|
|
208
227
|
withSettingsHeader: boolean;
|
|
209
228
|
subheader: string;
|
|
210
|
-
|
|
229
|
+
withSubheaderTooltip: boolean;
|
|
211
230
|
dataSets: import("./types").ChartDataSet[];
|
|
212
231
|
hideLegend: boolean;
|
|
213
232
|
tickCount: number;
|
|
214
233
|
noDataIcon: string;
|
|
215
234
|
noDataTitle: string;
|
|
216
235
|
noDataSubtitle: string;
|
|
236
|
+
withAnimation: boolean;
|
|
217
237
|
}, {}, string> & {
|
|
218
238
|
beforeCreate?: (() => void) | (() => void)[];
|
|
219
239
|
created?: (() => void) | (() => void)[];
|
|
@@ -268,6 +288,10 @@ declare const ChartTypes: () => ({
|
|
|
268
288
|
type: import("vue").PropType<number>;
|
|
269
289
|
default: number;
|
|
270
290
|
};
|
|
291
|
+
maxLimitTooltipText: {
|
|
292
|
+
type: import("vue").PropType<string>;
|
|
293
|
+
default: string;
|
|
294
|
+
};
|
|
271
295
|
chartType: {
|
|
272
296
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
273
297
|
default: import("./types").ChartType;
|
|
@@ -280,9 +304,9 @@ declare const ChartTypes: () => ({
|
|
|
280
304
|
type: import("vue").PropType<string>;
|
|
281
305
|
default: string;
|
|
282
306
|
};
|
|
283
|
-
|
|
284
|
-
type: import("vue").PropType<
|
|
285
|
-
default:
|
|
307
|
+
withSubheaderTooltip: {
|
|
308
|
+
type: import("vue").PropType<boolean>;
|
|
309
|
+
default: boolean;
|
|
286
310
|
};
|
|
287
311
|
dataSets: {
|
|
288
312
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -309,6 +333,10 @@ declare const ChartTypes: () => ({
|
|
|
309
333
|
type: import("vue").PropType<string>;
|
|
310
334
|
default: string;
|
|
311
335
|
};
|
|
336
|
+
withAnimation: {
|
|
337
|
+
type: import("vue").PropType<boolean>;
|
|
338
|
+
default: boolean;
|
|
339
|
+
};
|
|
312
340
|
}>> & {
|
|
313
341
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
314
342
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
@@ -350,6 +378,10 @@ declare const ChartTypes: () => ({
|
|
|
350
378
|
type: import("vue").PropType<number>;
|
|
351
379
|
default: number;
|
|
352
380
|
};
|
|
381
|
+
maxLimitTooltipText: {
|
|
382
|
+
type: import("vue").PropType<string>;
|
|
383
|
+
default: string;
|
|
384
|
+
};
|
|
353
385
|
chartType: {
|
|
354
386
|
type: import("vue").PropType<import("./types").ChartType>;
|
|
355
387
|
default: import("./types").ChartType;
|
|
@@ -362,9 +394,9 @@ declare const ChartTypes: () => ({
|
|
|
362
394
|
type: import("vue").PropType<string>;
|
|
363
395
|
default: string;
|
|
364
396
|
};
|
|
365
|
-
|
|
366
|
-
type: import("vue").PropType<
|
|
367
|
-
default:
|
|
397
|
+
withSubheaderTooltip: {
|
|
398
|
+
type: import("vue").PropType<boolean>;
|
|
399
|
+
default: boolean;
|
|
368
400
|
};
|
|
369
401
|
dataSets: {
|
|
370
402
|
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
@@ -391,6 +423,10 @@ declare const ChartTypes: () => ({
|
|
|
391
423
|
type: import("vue").PropType<string>;
|
|
392
424
|
default: string;
|
|
393
425
|
};
|
|
426
|
+
withAnimation: {
|
|
427
|
+
type: import("vue").PropType<boolean>;
|
|
428
|
+
default: boolean;
|
|
429
|
+
};
|
|
394
430
|
}>> & {
|
|
395
431
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
396
432
|
"onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
|
|
@@ -406,20 +442,23 @@ declare const ChartTypes: () => ({
|
|
|
406
442
|
visibleIds: unknown[];
|
|
407
443
|
minVisible: number;
|
|
408
444
|
maxVisible: number;
|
|
445
|
+
maxLimitTooltipText: string;
|
|
409
446
|
chartType: import("./types").ChartType;
|
|
410
447
|
withSettingsHeader: boolean;
|
|
411
448
|
subheader: string;
|
|
412
|
-
|
|
449
|
+
withSubheaderTooltip: boolean;
|
|
413
450
|
dataSets: import("./types").ChartDataSet[];
|
|
414
451
|
hideLegend: boolean;
|
|
415
452
|
tickCount: number;
|
|
416
453
|
noDataIcon: string;
|
|
417
454
|
noDataTitle: string;
|
|
418
455
|
noDataSubtitle: string;
|
|
456
|
+
withAnimation: boolean;
|
|
419
457
|
}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
420
458
|
$slots: {
|
|
421
459
|
metric?(_: {}): any;
|
|
422
460
|
breakdowns?(_: {}): any;
|
|
461
|
+
"subheader-tooltip"?(_: {}): any;
|
|
423
462
|
};
|
|
424
463
|
}))[];
|
|
425
464
|
export type { ChartType, ChartDataRecord, ChartDataSet, ChartParsingConfig, } from './types';
|
|
@@ -13,12 +13,25 @@ export declare const SINGLE_DATASET_COUNTRY: {
|
|
|
13
13
|
value: number;
|
|
14
14
|
}[];
|
|
15
15
|
}[];
|
|
16
|
-
export declare const MULTIPLE_DATASETS_DATE: {
|
|
16
|
+
export declare const MULTIPLE_DATASETS_DATE: ({
|
|
17
17
|
id: string;
|
|
18
18
|
label: string;
|
|
19
|
+
caption: string;
|
|
20
|
+
icon: string;
|
|
19
21
|
data: {
|
|
20
22
|
date: string;
|
|
21
23
|
value: number;
|
|
22
24
|
}[];
|
|
23
|
-
|
|
25
|
+
iconType?: undefined;
|
|
26
|
+
} | {
|
|
27
|
+
id: string;
|
|
28
|
+
label: string;
|
|
29
|
+
caption: string;
|
|
30
|
+
icon: string;
|
|
31
|
+
iconType: string;
|
|
32
|
+
data: {
|
|
33
|
+
date: string;
|
|
34
|
+
value: number;
|
|
35
|
+
}[];
|
|
36
|
+
})[];
|
|
24
37
|
export declare const generateMockData: (numSeries?: number) => any[];
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
2
|
import { UseVirtualListItem } from '@vueuse/core';
|
|
3
|
+
import { IconTypes } from '../icon/v4/Icon.types';
|
|
4
|
+
import { ChartTypeRegistry, TooltipItem } from 'chart.js';
|
|
3
5
|
export declare enum ChartType {
|
|
4
6
|
Line = "line",
|
|
5
7
|
Bar = "bar",
|
|
@@ -11,18 +13,30 @@ export type ChartDataSet = {
|
|
|
11
13
|
id: string | number;
|
|
12
14
|
label: string;
|
|
13
15
|
data: ChartDataRecord[];
|
|
16
|
+
caption?: string;
|
|
14
17
|
color?: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
iconType?: IconTypes;
|
|
15
20
|
};
|
|
16
21
|
export type ChartParsingConfig = {
|
|
17
22
|
xAxisKey: string;
|
|
18
23
|
yAxisKey: string;
|
|
19
24
|
};
|
|
20
|
-
export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string';
|
|
25
|
+
export type ValueFormat = 'date' | 'dateLong' | 'number' | 'percent' | 'string' | 'day';
|
|
21
26
|
export type LegendItem = {
|
|
22
27
|
id: string | number;
|
|
23
28
|
label: string;
|
|
29
|
+
caption?: string;
|
|
24
30
|
color?: string;
|
|
31
|
+
icon?: string;
|
|
32
|
+
iconType?: IconTypes;
|
|
25
33
|
};
|
|
34
|
+
export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
|
|
35
|
+
dataset: {
|
|
36
|
+
icon?: string;
|
|
37
|
+
iconType?: IconTypes;
|
|
38
|
+
} & TooltipItem<T>['dataset'];
|
|
39
|
+
}
|
|
26
40
|
export type UseVirtualListResult = {
|
|
27
41
|
list: Ref<UseVirtualListItem<LegendItem>[]>;
|
|
28
42
|
containerProps: {
|