@ironsource/shared-ui 2.2.0-test.15 → 2.2.0-test.17
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-container[data-v-9def0684]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%;overflow:hidden}.chart-planes[data-v-9def0684]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-9def0684]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-9def0684]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-9def0684]{border-left:1px solid var(--common-divider)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./Chart.vue2.js";
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../Chart.
|
|
4
|
-
const
|
|
2
|
+
/* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../Chart.vue_vue_type_style_index_0_scoped_9def0684_lang.css"; //*');
|
|
4
|
+
const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9def0684"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
p as default
|
|
7
7
|
};
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import "../../Chart.
|
|
1
|
+
import "../../Chart.vue_vue_type_style_index_0_scoped_9def0684_lang.css"; import { defineComponent as P, ref as U, computed as d, openBlock as n, createElementBlock as y, Fragment as S, createBlock as D, unref as l, isRef as b, withCtx as s, renderSlot as u, createCommentVNode as A, createElementVNode as L, mergeProps as g, normalizeClass as $, createVNode as k, createSlots as M, renderList as R } from "vue";
|
|
2
2
|
import { useVModel as B } from "@vueuse/core";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import K from "./ChartLegend.vue.js";
|
|
4
|
+
import X from "./SettingsHeader.vue.js";
|
|
5
5
|
import V from "./ChartPlane.vue.js";
|
|
6
|
-
import { useColorsMap as
|
|
7
|
-
import { DEFAULT_TICK_COUNT as
|
|
8
|
-
import { ChartType as
|
|
9
|
-
import { useChartHeight as
|
|
10
|
-
import { TotalType as
|
|
11
|
-
import { useTestIdAttrs as
|
|
6
|
+
import { useColorsMap as z } from "./composables/useColorsMap.js";
|
|
7
|
+
import { DEFAULT_TICK_COUNT as G, DEFAULT_MIN_VISIBLE as Y, DEFAULT_MAX_VISIBLE as j } from "./consts.js";
|
|
8
|
+
import { ChartType as q, DateInterval as J, TooltipOrder as Q, TrendDirection as W } from "./types.js";
|
|
9
|
+
import { useChartHeight as Z } from "./composables/useChartHeight.js";
|
|
10
|
+
import { TotalType as _, calculateTotal as tt } from "../../utils/totals.js";
|
|
11
|
+
import { useTestIdAttrs as et } from "../../utils/testIds.js";
|
|
12
12
|
import { ChartTestIdModifiers as p } from "../../testids/index.js";
|
|
13
|
-
const
|
|
13
|
+
const at = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "chart-sidebar"
|
|
16
|
-
},
|
|
16
|
+
}, mt = /* @__PURE__ */ P({
|
|
17
17
|
__name: "Chart",
|
|
18
18
|
props: {
|
|
19
19
|
dataSets: { default: () => [] },
|
|
20
20
|
visibleIds: { default: () => [] },
|
|
21
|
-
chartType: { default:
|
|
21
|
+
chartType: { default: q.Line },
|
|
22
22
|
parsing: { default: void 0 },
|
|
23
23
|
xAxisFormat: { default: "string" },
|
|
24
24
|
yAxisFormat: { default: "number" },
|
|
25
|
-
xAxisDateInterval: { default:
|
|
26
|
-
tickCount: { default:
|
|
25
|
+
xAxisDateInterval: { default: J.DAILY },
|
|
26
|
+
tickCount: { default: G },
|
|
27
27
|
truncateTickLabels: { type: Boolean, default: !1 },
|
|
28
28
|
loading: { type: Boolean, default: !1 },
|
|
29
29
|
empty: { type: Boolean, default: !1 },
|
|
30
30
|
withAnimation: { type: Boolean, default: !0 },
|
|
31
31
|
totalsChart: { type: Boolean, default: !1 },
|
|
32
|
-
tooltipTotalType: { default:
|
|
32
|
+
tooltipTotalType: { default: _.Total },
|
|
33
33
|
headerTooltip: { default: null },
|
|
34
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
35
|
-
tooltipOrder: { default:
|
|
34
|
+
tooltipTotalCalcFn: { type: Function, default: tt },
|
|
35
|
+
tooltipOrder: { default: Q.Legend },
|
|
36
36
|
valueSuffix: { default: "" },
|
|
37
37
|
valuePrefix: { default: "" },
|
|
38
38
|
indicateIncompleteData: { type: Boolean, default: !1 },
|
|
@@ -43,15 +43,15 @@ const lt = {
|
|
|
43
43
|
subheaderTooltip: { default: null },
|
|
44
44
|
keepSubheaderVisible: { type: Boolean, default: !1 },
|
|
45
45
|
trendValue: { default: null },
|
|
46
|
-
trendDirection: { default:
|
|
46
|
+
trendDirection: { default: W.UP },
|
|
47
47
|
trendTooltip: { default: null },
|
|
48
48
|
noteText: { default: "" },
|
|
49
49
|
noDataIcon: { default: "file-search" },
|
|
50
50
|
noDataTitle: { default: "No data to display" },
|
|
51
51
|
noDataSubtitle: { default: "Search again with different filters" },
|
|
52
52
|
hideLegend: { type: Boolean, default: !1 },
|
|
53
|
-
minVisible: { default:
|
|
54
|
-
maxVisible: { default:
|
|
53
|
+
minVisible: { default: Y },
|
|
54
|
+
maxVisible: { default: j },
|
|
55
55
|
maxLimitTooltipText: { default: "" },
|
|
56
56
|
sortSelected: { default: null },
|
|
57
57
|
sortOptions: { default: () => [] },
|
|
@@ -64,8 +64,8 @@ const lt = {
|
|
|
64
64
|
colorVariant: { default: "default" }
|
|
65
65
|
},
|
|
66
66
|
emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
|
|
67
|
-
setup(
|
|
68
|
-
const t =
|
|
67
|
+
setup(e, { emit: c }) {
|
|
68
|
+
const t = e, r = B(t, "chartType", c), f = B(t, "sortSelected", c), h = U(null), v = d(() => ({
|
|
69
69
|
dataSets: t.dataSets,
|
|
70
70
|
visibleIds: t.visibleIds,
|
|
71
71
|
parsing: t.parsing,
|
|
@@ -85,7 +85,7 @@ const lt = {
|
|
|
85
85
|
withAnimation: t.withAnimation,
|
|
86
86
|
typeSwitcher: !t.withSettingsHeader,
|
|
87
87
|
height: N.value,
|
|
88
|
-
compactHeader:
|
|
88
|
+
compactHeader: C.value > 1,
|
|
89
89
|
trendValue: t.trendValue,
|
|
90
90
|
trendDirection: t.trendDirection,
|
|
91
91
|
trendTooltip: t.trendTooltip,
|
|
@@ -96,95 +96,93 @@ const lt = {
|
|
|
96
96
|
tooltipTotalType: t.tooltipTotalType,
|
|
97
97
|
tooltipTotalCalcFn: t.tooltipTotalCalcFn,
|
|
98
98
|
tooltipOrder: t.tooltipOrder,
|
|
99
|
-
highlightedId:
|
|
99
|
+
highlightedId: h.value,
|
|
100
100
|
valueSuffix: t.valueSuffix,
|
|
101
101
|
valuePrefix: t.valuePrefix,
|
|
102
102
|
indicateIncompleteData: t.indicateIncompleteData,
|
|
103
103
|
tooltipExcludeTotalItem: t.tooltipExcludeTotalItem,
|
|
104
104
|
headerTooltip: t.headerTooltip,
|
|
105
105
|
testId: t.testId
|
|
106
|
-
})), E =
|
|
106
|
+
})), E = d(() => t.dataSets), I = d(() => t.visibleIds), x = d(() => t.extraCharts.length), C = d(() => 1 + x.value), F = (a) => a === x.value - 1, { colorsMap: m } = z({
|
|
107
107
|
dataSets: E,
|
|
108
|
-
visibleIds:
|
|
108
|
+
visibleIds: I,
|
|
109
109
|
variant: t.colorVariant
|
|
110
|
-
}),
|
|
111
|
-
id:
|
|
112
|
-
label:
|
|
113
|
-
caption:
|
|
114
|
-
color: m.value[
|
|
115
|
-
icon:
|
|
116
|
-
iconType:
|
|
117
|
-
}))), { containerProps:
|
|
118
|
-
chartPlanesCount:
|
|
110
|
+
}), w = d(() => t.dataSets.map((a) => ({
|
|
111
|
+
id: a.id,
|
|
112
|
+
label: a.label,
|
|
113
|
+
caption: a.caption || null,
|
|
114
|
+
color: m.value[a.id] || null,
|
|
115
|
+
icon: a.icon || null,
|
|
116
|
+
iconType: a.iconType || "branded"
|
|
117
|
+
}))), { containerProps: H, eachPlaneHeight: N } = Z({
|
|
118
|
+
chartPlanesCount: C,
|
|
119
119
|
useFullHeight: t.fullHeight,
|
|
120
120
|
bottomSpacing: t.fullHeightBottomSpacing
|
|
121
|
-
}),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
return (l, i) => (d(), T(C, null, [
|
|
125
|
-
a.withSettingsHeader ? (d(), D(z, {
|
|
121
|
+
}), O = et(t.testId, p);
|
|
122
|
+
return (a, i) => (n(), y(S, null, [
|
|
123
|
+
e.withSettingsHeader ? (n(), D(X, {
|
|
126
124
|
key: 0,
|
|
127
|
-
"chart-type":
|
|
128
|
-
"onUpdate:chart-type": i[0] || (i[0] = (o) =>
|
|
129
|
-
"hide-legend":
|
|
130
|
-
"test-id":
|
|
125
|
+
"chart-type": l(r),
|
|
126
|
+
"onUpdate:chart-type": i[0] || (i[0] = (o) => b(r) ? r.value = o : null),
|
|
127
|
+
"hide-legend": e.hideLegend,
|
|
128
|
+
"test-id": e.testId
|
|
131
129
|
}, {
|
|
132
130
|
"before-chart-type": s(() => [
|
|
133
|
-
u(
|
|
131
|
+
u(a.$slots, "before-chart-type", {}, void 0, !0)
|
|
134
132
|
]),
|
|
135
133
|
metric: s(() => [
|
|
136
|
-
u(
|
|
134
|
+
u(a.$slots, "metric", {}, void 0, !0)
|
|
137
135
|
]),
|
|
138
136
|
breakdowns: s(() => [
|
|
139
|
-
u(
|
|
137
|
+
u(a.$slots, "breakdowns", {}, void 0, !0)
|
|
140
138
|
]),
|
|
141
139
|
_: 3
|
|
142
140
|
}, 8, ["chart-type", "hide-legend", "test-id"])) : A("", !0),
|
|
143
|
-
L("div",
|
|
144
|
-
...
|
|
145
|
-
...
|
|
146
|
-
}, { style:
|
|
141
|
+
L("div", g({ class: "chart-container" }, {
|
|
142
|
+
...l(H),
|
|
143
|
+
...l(O)[l(p).CONTAINER]
|
|
144
|
+
}, { style: { height: "auto" } }), [
|
|
147
145
|
L("section", {
|
|
148
|
-
class:
|
|
146
|
+
class: $(["chart-planes", [{ "with-legend": !e.hideLegend }]])
|
|
149
147
|
}, [
|
|
150
|
-
k(V,
|
|
151
|
-
"chart-type":
|
|
152
|
-
"onUpdate:chart-type": i[1] || (i[1] = (o) =>
|
|
153
|
-
},
|
|
154
|
-
|
|
148
|
+
k(V, g({
|
|
149
|
+
"chart-type": l(r),
|
|
150
|
+
"onUpdate:chart-type": i[1] || (i[1] = (o) => b(r) ? r.value = o : null)
|
|
151
|
+
}, l(v)), M({ _: 2 }, [
|
|
152
|
+
a.$slots["subheader-tooltip"] ? {
|
|
155
153
|
name: "subheader-tooltip",
|
|
156
154
|
fn: s(() => [
|
|
157
|
-
u(
|
|
155
|
+
u(a.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
158
156
|
]),
|
|
159
157
|
key: "0"
|
|
160
158
|
} : void 0
|
|
161
159
|
]), 1040, ["chart-type"]),
|
|
162
|
-
(
|
|
163
|
-
key:
|
|
160
|
+
(n(!0), y(S, null, R(e.extraCharts, (o, T) => (n(), D(V, g({
|
|
161
|
+
key: T,
|
|
164
162
|
class: "extra-chart-plane"
|
|
165
|
-
}, { ...
|
|
166
|
-
"chart-type":
|
|
167
|
-
"colors-map":
|
|
163
|
+
}, { ...l(v), ...o }, {
|
|
164
|
+
"chart-type": l(r),
|
|
165
|
+
"colors-map": l(m),
|
|
168
166
|
"type-switcher": !1,
|
|
169
|
-
"tooltip-respects-top-edge": !F(
|
|
170
|
-
"test-id": `${
|
|
167
|
+
"tooltip-respects-top-edge": !F(T),
|
|
168
|
+
"test-id": `${e.testId}-${l(p).EXTRA_CHART}-${T}`
|
|
171
169
|
}), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge", "test-id"]))), 128))
|
|
172
170
|
], 2),
|
|
173
|
-
|
|
174
|
-
k(
|
|
175
|
-
"sort-selected":
|
|
176
|
-
"onUpdate:sort-selected": i[2] || (i[2] = (o) =>
|
|
177
|
-
"highlighted-id":
|
|
178
|
-
"onUpdate:highlighted-id": i[3] || (i[3] = (o) =>
|
|
179
|
-
items:
|
|
180
|
-
"visible-ids":
|
|
181
|
-
"max-limit-tooltip-text":
|
|
182
|
-
"sort-options":
|
|
183
|
-
"sort-option-name-key":
|
|
184
|
-
"min-visible":
|
|
185
|
-
"max-visible":
|
|
186
|
-
"test-id": `${
|
|
187
|
-
"onUpdate:visibleIds": i[4] || (i[4] = (o) =>
|
|
171
|
+
e.hideLegend ? A("", !0) : (n(), y("section", at, [
|
|
172
|
+
k(K, {
|
|
173
|
+
"sort-selected": l(f),
|
|
174
|
+
"onUpdate:sort-selected": i[2] || (i[2] = (o) => b(f) ? f.value = o : null),
|
|
175
|
+
"highlighted-id": h.value,
|
|
176
|
+
"onUpdate:highlighted-id": i[3] || (i[3] = (o) => h.value = o),
|
|
177
|
+
items: l(w),
|
|
178
|
+
"visible-ids": l(I),
|
|
179
|
+
"max-limit-tooltip-text": e.maxLimitTooltipText,
|
|
180
|
+
"sort-options": e.sortOptions,
|
|
181
|
+
"sort-option-name-key": e.sortOptionNameKey,
|
|
182
|
+
"min-visible": e.minVisible,
|
|
183
|
+
"max-visible": e.maxVisible,
|
|
184
|
+
"test-id": `${e.testId}-${l(p).LEGEND}`,
|
|
185
|
+
"onUpdate:visibleIds": i[4] || (i[4] = (o) => c("update:visibleIds", o))
|
|
188
186
|
}, null, 8, ["sort-selected", "highlighted-id", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key", "min-visible", "max-visible", "test-id"])
|
|
189
187
|
]))
|
|
190
188
|
], 16)
|
|
@@ -192,5 +190,5 @@ const lt = {
|
|
|
192
190
|
}
|
|
193
191
|
});
|
|
194
192
|
export {
|
|
195
|
-
|
|
193
|
+
mt as default
|
|
196
194
|
};
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_214ddaf4_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-a7fb79c8]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-a7fb79c8]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-a7fb79c8]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-a7fb79c8]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-a7fb79c8]{border-left:1px solid var(--common-divider)}
|