@ironsource/shared-ui 2.1.12-rc.32 → 2.1.12-rc.34
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_3da25a36_lang.css +1 -0
- package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_2f916aeb_lang.css +1 -0
- package/ChartPlane.vue_vue_type_style_index_0_scoped_f871962e_lang.css +1 -0
- package/RadioButton.vue_vue_type_style_index_0_scoped_dac25b9f_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +10 -0
- package/components/chart/Chart.vue.js +2 -2
- package/components/chart/Chart.vue2.js +29 -25
- package/components/chart/ChartHeaderTrend.vue.js +2 -2
- package/components/chart/ChartHeaderTrend.vue2.js +34 -33
- package/components/chart/ChartPlane.vue.d.ts +10 -0
- package/components/chart/ChartPlane.vue.js +4 -4
- package/components/chart/ChartPlane.vue2.js +158 -147
- package/components/chart/ChartStoryArgs.d.ts +12 -0
- package/components/chart/consts.d.ts +4 -0
- package/components/chart/consts.js +30 -26
- package/components/chart/index.d.ts +39 -1
- package/components/chart/mockData.d.ts +15 -0
- package/components/chart/types.d.ts +2 -1
- package/components/chart/types.js +5 -5
- package/components/radioButton/v3/RadioButton.vue.js +2 -2
- package/components/radioButton/v3/RadioButton.vue2.js +40 -38
- package/index.js +1 -1
- package/package.json +1 -1
- package/Chart.vue_vue_type_style_index_0_scoped_fa533a3d_lang.css +0 -1
- package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_db8a902c_lang.css +0 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_4f67d41d_lang.css +0 -1
- package/RadioButton.vue_vue_type_style_index_0_scoped_1da367f8_lang.css +0 -1
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import "../../ChartPlane.
|
|
2
|
-
import { Chart as
|
|
3
|
-
import { HoverVerticalLine as
|
|
4
|
-
import { prepareTickLabel as
|
|
5
|
-
import { DEFAULT_TICK_COUNT as
|
|
6
|
-
import { ChartType as
|
|
7
|
-
import { useTooltipPosition as
|
|
8
|
-
import
|
|
1
|
+
import "../../ChartPlane.vue_vue_type_style_index_0_scoped_f871962e_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as i, ref as S, onMounted as ne, watch as T, nextTick as se, openBlock as p, createElementBlock as E, createVNode as de, isRef as ce, createSlots as ue, withCtx as fe, renderSlot as pe, createCommentVNode as L, createElementVNode as R, normalizeStyle as he, createBlock as D } from "vue";
|
|
2
|
+
import { Chart as V, ArcElement as me, LineElement as ve, BarElement as Te, PointElement as ye, LineController as Ce, BarController as be, PieController as ge, ScatterController as xe, CategoryScale as Ae, LinearScale as ke, Filler as Se, Tooltip as Ee } from "chart.js";
|
|
3
|
+
import { HoverVerticalLine as Le } from "./plugins/HoverVerticalLine.js";
|
|
4
|
+
import { prepareTickLabel as Re, formatValue as De } from "./utils/utils.js";
|
|
5
|
+
import { DEFAULT_TICK_COUNT as Be, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ie, BASE_COLOR_KEY as _, CHART_PADDING as Oe, POINT_BORDER_COLOR as Ne, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as Y, TICKS_EXTRA_PADDING as Pe, GRID_LINE_COLOR as K, HEADER_HEIGHT as He, COMPACT_HEADER_HEIGHT as we, HOVER_AREA_TRANSPARENCY as Ve, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Fe, INCOMPLETE_DATA_BAR_TRANSPARENCY as _e, STACKED_LINE_TRANSPARENCY as Me } from "./consts.js";
|
|
6
|
+
import { ChartType as d, DateInterval as Ye, TooltipOrder as U, TrendDirection as Ke } from "./types.js";
|
|
7
|
+
import { useTooltipPosition as Ue } from "./composables/useTooltipPosition.js";
|
|
8
|
+
import Ge from "./ChartTooltip.vue.js";
|
|
9
9
|
import { hexColorToRgba as h } from "../../utils/color.js";
|
|
10
|
-
import
|
|
11
|
-
import { useMemoize as
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import { DEFAULT_CHART_COLOR as
|
|
15
|
-
import { TotalType as
|
|
16
|
-
import { isNullOrUndefined as
|
|
17
|
-
import { storeOriginalDatasetColors as
|
|
18
|
-
const
|
|
10
|
+
import $e from "./ChartHeader.vue.js";
|
|
11
|
+
import { useMemoize as ze, useVModel as We } from "@vueuse/core";
|
|
12
|
+
import Ze from "../emptyState/v4/EmptyStateV4.vue.js";
|
|
13
|
+
import Xe from "./ChartLoader.vue.js";
|
|
14
|
+
import { DEFAULT_CHART_COLOR as je } from "./colorPalette.js";
|
|
15
|
+
import { TotalType as G, calculateTotal as qe } from "../../utils/totals.js";
|
|
16
|
+
import { isNullOrUndefined as Je } from "../../utils/utils.js";
|
|
17
|
+
import { storeOriginalDatasetColors as Qe, restoreOriginalDatasetColors as et } from "./utils/highlightUtils.js";
|
|
18
|
+
const tt = { class: "chart-plane-container" }, at = {
|
|
19
19
|
key: 0,
|
|
20
20
|
class: "header-wrapper"
|
|
21
|
-
},
|
|
21
|
+
}, ot = {
|
|
22
22
|
key: 1,
|
|
23
23
|
class: "chart-plane"
|
|
24
|
-
},
|
|
24
|
+
}, lt = { class: "chart" }, xt = /* @__PURE__ */ re({
|
|
25
25
|
__name: "ChartPlane",
|
|
26
26
|
props: {
|
|
27
27
|
dataSets: { default: () => [] },
|
|
28
28
|
visibleIds: { default: () => [] },
|
|
29
29
|
highlightedId: { default: null },
|
|
30
|
-
chartType: { default:
|
|
30
|
+
chartType: { default: d.Line },
|
|
31
31
|
parsing: { default: void 0 },
|
|
32
32
|
xAxisFormat: { default: "string" },
|
|
33
33
|
yAxisFormat: { default: "number" },
|
|
34
|
-
xAxisDateInterval: { default:
|
|
35
|
-
tickCount: { default:
|
|
34
|
+
xAxisDateInterval: { default: Ye.DAILY },
|
|
35
|
+
tickCount: { default: Be },
|
|
36
36
|
truncateTickLabels: { type: Boolean, default: !1 },
|
|
37
37
|
header: { default: "" },
|
|
38
38
|
subheader: { default: "" },
|
|
@@ -49,85 +49,94 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
49
49
|
compactHeader: { type: Boolean, default: !1 },
|
|
50
50
|
noteText: { default: "" },
|
|
51
51
|
tooltipRespectsTopEdge: { type: Boolean, default: !0 },
|
|
52
|
-
tooltipTotalType: { default:
|
|
53
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
54
|
-
tooltipOrder: { default:
|
|
52
|
+
tooltipTotalType: { default: G.Total },
|
|
53
|
+
tooltipTotalCalcFn: { type: Function, default: qe },
|
|
54
|
+
tooltipOrder: { default: U.Legend },
|
|
55
55
|
trendValue: { default: null },
|
|
56
|
-
trendDirection: { default:
|
|
56
|
+
trendDirection: { default: Ke.UP },
|
|
57
57
|
trendTooltip: { default: null },
|
|
58
58
|
totalsChart: { type: Boolean, default: !1 },
|
|
59
59
|
colorsMap: { default: () => ({}) },
|
|
60
60
|
valueSuffix: { default: "" },
|
|
61
|
-
valuePrefix: { default: "" }
|
|
61
|
+
valuePrefix: { default: "" },
|
|
62
|
+
indicateIncompleteData: { type: Boolean, default: !1 },
|
|
63
|
+
tooltipExcludeTotalItem: { type: Boolean, default: !1 }
|
|
62
64
|
},
|
|
63
65
|
emits: ["update:chartType"],
|
|
64
|
-
setup(o, { emit:
|
|
66
|
+
setup(o, { emit: $ }) {
|
|
65
67
|
const e = o;
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
|
|
68
|
+
ie((t) => ({
|
|
69
|
+
"019b28ee": s(ae),
|
|
70
|
+
"8d0b964e": o.height
|
|
69
71
|
}));
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
fe,
|
|
73
|
-
pe,
|
|
74
|
-
he,
|
|
72
|
+
const z = ze(Re);
|
|
73
|
+
V.register(
|
|
75
74
|
me,
|
|
76
75
|
ve,
|
|
77
|
-
ye,
|
|
78
76
|
Te,
|
|
77
|
+
ye,
|
|
79
78
|
Ce,
|
|
80
79
|
be,
|
|
81
80
|
ge,
|
|
82
81
|
xe,
|
|
82
|
+
Ae,
|
|
83
83
|
ke,
|
|
84
|
-
|
|
84
|
+
Se,
|
|
85
|
+
Ee,
|
|
86
|
+
Le
|
|
85
87
|
);
|
|
86
|
-
const
|
|
88
|
+
const C = We(e, "chartType", $), W = i(
|
|
87
89
|
() => e.withAnimation ? "" : "none"
|
|
88
|
-
),
|
|
90
|
+
), v = S(null);
|
|
89
91
|
let n = null;
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
},
|
|
93
|
-
n && (n.data.datasets =
|
|
92
|
+
const B = i(() => e.empty || e.dataSets.length === 0), u = i(() => !e.loading && !B.value), b = () => {
|
|
93
|
+
v.value && (n && n.destroy(), n = new V(v.value, N.value));
|
|
94
|
+
}, Z = () => {
|
|
95
|
+
n && (n.data.datasets = O.value, n.options = N.value.options, n.update(W.value));
|
|
94
96
|
};
|
|
95
|
-
|
|
96
|
-
t && (await
|
|
97
|
-
}),
|
|
97
|
+
ne(b), T(() => e.chartType, b), T(u, async (t) => {
|
|
98
|
+
t && (await se(), b());
|
|
99
|
+
}), T(
|
|
98
100
|
[
|
|
99
101
|
() => e.visibleIds,
|
|
100
102
|
() => e.dataSets,
|
|
101
103
|
() => e.valuePrefix,
|
|
102
104
|
() => e.valueSuffix
|
|
103
105
|
],
|
|
104
|
-
|
|
106
|
+
Z
|
|
105
107
|
);
|
|
106
|
-
const f =
|
|
107
|
-
() => e.chartType ===
|
|
108
|
-
),
|
|
109
|
-
() => e.chartType ===
|
|
110
|
-
),
|
|
108
|
+
const f = i(() => e.totalsChart), g = i(
|
|
109
|
+
() => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
|
|
110
|
+
), x = i(
|
|
111
|
+
() => e.chartType === d.Line || e.chartType === d.StackedLine
|
|
112
|
+
), X = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), j = i(() => f.value ? e.dataSets.map((t) => ({
|
|
111
113
|
...t,
|
|
112
|
-
data: t.data.map((
|
|
113
|
-
...
|
|
114
|
-
[
|
|
114
|
+
data: t.data.map((r) => ({
|
|
115
|
+
...r,
|
|
116
|
+
[F]: t.label
|
|
115
117
|
}))
|
|
116
|
-
})) : e.dataSets),
|
|
117
|
-
() =>
|
|
118
|
-
),
|
|
119
|
-
() =>
|
|
118
|
+
})) : e.dataSets), A = i(
|
|
119
|
+
() => j.value.filter((t) => e.visibleIds.includes(t.id))
|
|
120
|
+
), q = (t) => e.colorsMap[t] || je, I = i(
|
|
121
|
+
() => A.value.length && A.value.every(
|
|
120
122
|
(t) => t.data.length === 1
|
|
121
123
|
)
|
|
122
|
-
),
|
|
123
|
-
const a =
|
|
124
|
+
), J = (t) => (r) => {
|
|
125
|
+
const a = r.chart.data.labels.length - 1;
|
|
126
|
+
let l = Fe;
|
|
127
|
+
return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = _e : e.chartType === d.StackedLine && (l = Me), h(t, l);
|
|
128
|
+
}, O = i(() => A.value.map((t, r) => {
|
|
129
|
+
const a = q(t.id), l = g.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
|
|
130
|
+
borderDash: (w) => {
|
|
131
|
+
if (w.p1DataIndex === w.chart.data.labels.length - 1)
|
|
132
|
+
return Ie;
|
|
133
|
+
}
|
|
134
|
+
} : void 0, k = J(a);
|
|
124
135
|
return {
|
|
125
136
|
...t,
|
|
126
|
-
fill:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
e.chartType === u.StackedLine ? 10 : 70
|
|
130
|
-
),
|
|
137
|
+
fill: l,
|
|
138
|
+
segment: m,
|
|
139
|
+
backgroundColor: k,
|
|
131
140
|
borderColor: a,
|
|
132
141
|
pointBackgroundColor: a,
|
|
133
142
|
pointHoverBorderColor: a,
|
|
@@ -136,20 +145,22 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
136
145
|
// draw a bit outside the chart area
|
|
137
146
|
icon: t.icon || null,
|
|
138
147
|
iconType: t.iconType || "branded",
|
|
139
|
-
[
|
|
148
|
+
[_]: a
|
|
140
149
|
// store base color for later use
|
|
141
150
|
};
|
|
142
|
-
})),
|
|
143
|
-
() => e.tooltipTotalType ===
|
|
144
|
-
),
|
|
145
|
-
|
|
151
|
+
})), Q = i(
|
|
152
|
+
() => e.tooltipTotalType === G.Total ? "Total" : "Mean"
|
|
153
|
+
), ee = (t) => t.filter(
|
|
154
|
+
(r) => !r.dataset.isTotal
|
|
155
|
+
), N = i(() => ({
|
|
156
|
+
type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
|
|
146
157
|
// Chart Data
|
|
147
158
|
data: {
|
|
148
|
-
datasets:
|
|
159
|
+
datasets: O.value
|
|
149
160
|
},
|
|
150
161
|
// Chart Options
|
|
151
162
|
options: {
|
|
152
|
-
parsing:
|
|
163
|
+
parsing: X.value,
|
|
153
164
|
interaction: {
|
|
154
165
|
intersect: !1,
|
|
155
166
|
mode: f.value ? "point" : "index",
|
|
@@ -159,27 +170,27 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
159
170
|
plugins: {
|
|
160
171
|
legend: { display: !1 },
|
|
161
172
|
title: { display: !1 },
|
|
162
|
-
hoverVerticalLine:
|
|
173
|
+
hoverVerticalLine: x.value,
|
|
163
174
|
// tooltip
|
|
164
175
|
tooltip: {
|
|
165
176
|
enabled: !1,
|
|
166
177
|
position: "average",
|
|
167
178
|
external: ({ tooltip: t }) => {
|
|
168
|
-
|
|
179
|
+
c.value = { ...t };
|
|
169
180
|
},
|
|
170
181
|
callbacks: {
|
|
171
182
|
footer: (t) => {
|
|
172
|
-
const
|
|
173
|
-
|
|
183
|
+
const a = (e.tooltipExcludeTotalItem && t.length > 1 ? ee(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
|
|
184
|
+
a,
|
|
174
185
|
e.tooltipTotalType
|
|
175
186
|
);
|
|
176
|
-
return [
|
|
187
|
+
return [Q.value, String(l)];
|
|
177
188
|
}
|
|
178
189
|
},
|
|
179
|
-
itemSort: (t,
|
|
180
|
-
if (e.tooltipOrder ===
|
|
181
|
-
const a = t.parsed.y || 0,
|
|
182
|
-
return a ===
|
|
190
|
+
itemSort: (t, r) => {
|
|
191
|
+
if (e.tooltipOrder === U.YAxis) {
|
|
192
|
+
const a = t.parsed.y || 0, l = r.parsed.y || 0;
|
|
193
|
+
return a === l ? 0 : a > l ? -1 : 1;
|
|
183
194
|
}
|
|
184
195
|
return 0;
|
|
185
196
|
}
|
|
@@ -189,7 +200,7 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
189
200
|
responsive: !0,
|
|
190
201
|
maintainAspectRatio: !1,
|
|
191
202
|
layout: {
|
|
192
|
-
padding:
|
|
203
|
+
padding: Oe
|
|
193
204
|
},
|
|
194
205
|
// basic styles
|
|
195
206
|
elements: {
|
|
@@ -198,12 +209,12 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
198
209
|
tension: 0.3
|
|
199
210
|
},
|
|
200
211
|
point: {
|
|
201
|
-
radius:
|
|
212
|
+
radius: I.value ? 3 : 1,
|
|
202
213
|
hitRadius: 8,
|
|
203
214
|
borderWidth: 0,
|
|
204
215
|
hoverRadius: 4,
|
|
205
216
|
hoverBorderWidth: 2,
|
|
206
|
-
pointHoverBackgroundColor:
|
|
217
|
+
pointHoverBackgroundColor: Ne
|
|
207
218
|
},
|
|
208
219
|
bar: {
|
|
209
220
|
borderRadius: 4
|
|
@@ -213,24 +224,24 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
213
224
|
// Horizontal Axis (X)
|
|
214
225
|
x: {
|
|
215
226
|
beginAtZero: !0,
|
|
216
|
-
offset: !
|
|
227
|
+
offset: !x.value || I.value,
|
|
217
228
|
border: { display: !1 },
|
|
218
|
-
stacked:
|
|
229
|
+
stacked: g.value,
|
|
219
230
|
// stack on top of each other
|
|
220
231
|
// ticks
|
|
221
232
|
ticks: {
|
|
222
|
-
color:
|
|
223
|
-
font:
|
|
233
|
+
color: M,
|
|
234
|
+
font: Y,
|
|
224
235
|
padding: 4,
|
|
225
236
|
maxRotation: 0,
|
|
226
237
|
autoSkip: !e.truncateTickLabels,
|
|
227
238
|
autoSkipPadding: 8,
|
|
228
|
-
callback: function(t,
|
|
229
|
-
const
|
|
230
|
-
return
|
|
231
|
-
label:
|
|
239
|
+
callback: function(t, r, a) {
|
|
240
|
+
const l = this.getLabelForValue(t), m = x.value && !f.value ? a.length - 1 : a.length, k = this.chart.scales?.x?.width / m - Pe;
|
|
241
|
+
return z({
|
|
242
|
+
label: l,
|
|
232
243
|
format: e.xAxisFormat,
|
|
233
|
-
availableSpace:
|
|
244
|
+
availableSpace: k,
|
|
234
245
|
truncate: e.truncateTickLabels
|
|
235
246
|
});
|
|
236
247
|
}
|
|
@@ -249,16 +260,16 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
249
260
|
beginAtZero: !0,
|
|
250
261
|
border: { display: !1 },
|
|
251
262
|
// hide left borderline
|
|
252
|
-
stacked:
|
|
263
|
+
stacked: g.value,
|
|
253
264
|
// stack on top of each other
|
|
254
265
|
// ticks
|
|
255
266
|
ticks: {
|
|
256
|
-
color:
|
|
257
|
-
font:
|
|
267
|
+
color: M,
|
|
268
|
+
font: Y,
|
|
258
269
|
count: e.tickCount + 1,
|
|
259
270
|
padding: 8,
|
|
260
271
|
min: 0,
|
|
261
|
-
callback: (t) => e.valuePrefix +
|
|
272
|
+
callback: (t) => e.valuePrefix + De(t, e.yAxisFormat) + e.valueSuffix
|
|
262
273
|
},
|
|
263
274
|
// grid lines
|
|
264
275
|
grid: {
|
|
@@ -269,102 +280,102 @@ const Ze = { class: "chart-plane-container" }, Xe = {
|
|
|
269
280
|
}
|
|
270
281
|
}
|
|
271
282
|
}
|
|
272
|
-
})),
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
283
|
+
})), P = S(null), c = S(null), { position: H } = Ue(
|
|
284
|
+
v,
|
|
285
|
+
P,
|
|
286
|
+
c,
|
|
276
287
|
e.tooltipRespectsTopEdge
|
|
277
|
-
),
|
|
288
|
+
), te = i(() => ({
|
|
278
289
|
left: `${H.value.left}px`,
|
|
279
290
|
top: `${H.value.top}px`,
|
|
280
|
-
opacity:
|
|
281
|
-
})),
|
|
282
|
-
() => (e.compactHeader ?
|
|
291
|
+
opacity: c.value?.opacity || 0
|
|
292
|
+
})), ae = i(
|
|
293
|
+
() => (e.compactHeader ? we : He) + "px"
|
|
283
294
|
);
|
|
284
|
-
|
|
295
|
+
T(
|
|
285
296
|
() => e.highlightedId,
|
|
286
297
|
(t) => {
|
|
287
|
-
n && (
|
|
298
|
+
n && (Je(t) ? le() : oe(t), n.update());
|
|
288
299
|
}
|
|
289
300
|
);
|
|
290
|
-
const
|
|
301
|
+
const oe = (t) => {
|
|
291
302
|
(n?.data.datasets || []).forEach((a) => {
|
|
292
|
-
|
|
293
|
-
const
|
|
294
|
-
a.id === t ? e.chartType ===
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
)) : (a.backgroundColor = h(
|
|
303
|
+
Qe(a);
|
|
304
|
+
const l = a[_];
|
|
305
|
+
a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
|
|
306
|
+
l,
|
|
307
|
+
Ve
|
|
308
|
+
)) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
|
|
298
309
|
});
|
|
299
|
-
},
|
|
300
|
-
(n?.data.datasets || []).forEach(
|
|
310
|
+
}, le = () => {
|
|
311
|
+
(n?.data.datasets || []).forEach(et);
|
|
301
312
|
};
|
|
302
|
-
return (t,
|
|
303
|
-
s(
|
|
304
|
-
|
|
305
|
-
"chart-type": s(
|
|
306
|
-
"onUpdate:chart-type":
|
|
307
|
-
"type-switcher": s(
|
|
308
|
-
header: s(
|
|
313
|
+
return (t, r) => (p(), E("div", tt, [
|
|
314
|
+
s(u) || o.keepSubheaderVisible ? (p(), E("div", at, [
|
|
315
|
+
de($e, {
|
|
316
|
+
"chart-type": s(C),
|
|
317
|
+
"onUpdate:chart-type": r[0] || (r[0] = (a) => ce(C) ? C.value = a : null),
|
|
318
|
+
"type-switcher": s(u) ? o.typeSwitcher : !1,
|
|
319
|
+
header: s(u) ? o.header : null,
|
|
309
320
|
subheader: o.subheader,
|
|
310
321
|
"subheader-tooltip": o.subheaderTooltip,
|
|
311
322
|
"trend-tooltip": o.trendTooltip,
|
|
312
323
|
compact: o.compactHeader,
|
|
313
|
-
"trend-value": s(
|
|
324
|
+
"trend-value": s(u) ? o.trendValue : null,
|
|
314
325
|
"trend-direction": o.trendDirection,
|
|
315
326
|
"note-text": o.noteText
|
|
316
|
-
},
|
|
327
|
+
}, ue({ _: 2 }, [
|
|
317
328
|
t.$slots["subheader-tooltip"] ? {
|
|
318
329
|
name: "subheader-tooltip",
|
|
319
|
-
fn:
|
|
320
|
-
|
|
330
|
+
fn: fe(() => [
|
|
331
|
+
pe(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
321
332
|
]),
|
|
322
333
|
key: "0"
|
|
323
334
|
} : void 0
|
|
324
335
|
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text"])
|
|
325
|
-
])) :
|
|
326
|
-
s(
|
|
327
|
-
|
|
328
|
-
|
|
336
|
+
])) : L("", !0),
|
|
337
|
+
s(u) ? (p(), E("section", ot, [
|
|
338
|
+
R("div", lt, [
|
|
339
|
+
R("canvas", {
|
|
329
340
|
ref_key: "chartRef",
|
|
330
|
-
ref:
|
|
341
|
+
ref: v,
|
|
331
342
|
class: "chart__canvas"
|
|
332
343
|
}, null, 512),
|
|
333
|
-
|
|
344
|
+
R("div", {
|
|
334
345
|
ref_key: "tooltipRef",
|
|
335
|
-
ref:
|
|
346
|
+
ref: P,
|
|
336
347
|
class: "chart__tooltip",
|
|
337
|
-
style:
|
|
348
|
+
style: he(s(te))
|
|
338
349
|
}, [
|
|
339
|
-
|
|
350
|
+
c.value ? (p(), D(Ge, {
|
|
340
351
|
key: 0,
|
|
341
352
|
"totals-chart": s(f),
|
|
342
|
-
title: String(
|
|
343
|
-
"data-points":
|
|
353
|
+
title: String(c.value.title),
|
|
354
|
+
"data-points": c.value.dataPoints,
|
|
344
355
|
"x-axis-format": o.xAxisFormat,
|
|
345
356
|
"y-axis-format": o.yAxisFormat,
|
|
346
357
|
"x-axis-date-interval": o.xAxisDateInterval,
|
|
347
|
-
"total-label":
|
|
348
|
-
"total-value": Number(
|
|
358
|
+
"total-label": c.value.footer?.[0],
|
|
359
|
+
"total-value": Number(c.value.footer?.[1]),
|
|
349
360
|
"value-suffix": o.valueSuffix,
|
|
350
361
|
"value-prefix": o.valuePrefix
|
|
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"])) :
|
|
362
|
+
}, 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"])) : L("", !0)
|
|
352
363
|
], 4)
|
|
353
364
|
])
|
|
354
|
-
])) : o.loading ? (p(),
|
|
365
|
+
])) : o.loading ? (p(), D(Xe, {
|
|
355
366
|
key: 2,
|
|
356
367
|
class: "chart-loading"
|
|
357
|
-
})) : s(
|
|
368
|
+
})) : s(B) ? (p(), D(s(Ze), {
|
|
358
369
|
key: 3,
|
|
359
370
|
class: "chart-empty",
|
|
360
371
|
variant: null,
|
|
361
372
|
title: o.noDataTitle,
|
|
362
373
|
subtitle: o.noDataSubtitle,
|
|
363
374
|
"icon-name": o.noDataIcon
|
|
364
|
-
}, null, 8, ["title", "subtitle", "icon-name"])) :
|
|
375
|
+
}, null, 8, ["title", "subtitle", "icon-name"])) : L("", !0)
|
|
365
376
|
]));
|
|
366
377
|
}
|
|
367
378
|
});
|
|
368
379
|
export {
|
|
369
|
-
|
|
380
|
+
xt as default
|
|
370
381
|
};
|
|
@@ -181,4 +181,16 @@ export declare const chartStoryArgs: {
|
|
|
181
181
|
control: string;
|
|
182
182
|
options: string[];
|
|
183
183
|
};
|
|
184
|
+
indicateIncompleteData: {
|
|
185
|
+
description: string;
|
|
186
|
+
control: {
|
|
187
|
+
type: string;
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
tooltipExcludeTotalItem: {
|
|
191
|
+
description: string;
|
|
192
|
+
control: {
|
|
193
|
+
type: string;
|
|
194
|
+
};
|
|
195
|
+
};
|
|
184
196
|
};
|
|
@@ -26,6 +26,10 @@ export declare const NETWORK_PANGLE = "Pangle";
|
|
|
26
26
|
export declare const NETWORK_LIFTOFF = "Liftoff Monetize";
|
|
27
27
|
export declare const HOVER_TRANSPARENCY = 10;
|
|
28
28
|
export declare const HOVER_AREA_TRANSPARENCY = 70;
|
|
29
|
+
export declare const STACKED_LINE_TRANSPARENCY = 10;
|
|
30
|
+
export declare const CHART_ITEM_TRANSPARENCY = 70;
|
|
31
|
+
export declare const INCOMPLETE_DATA_BAR_TRANSPARENCY = 40;
|
|
32
|
+
export declare const LINE_DASH_STYLE: number[];
|
|
29
33
|
export declare const CHART_PADDING: {
|
|
30
34
|
left: number;
|
|
31
35
|
right: number;
|
|
@@ -1,47 +1,51 @@
|
|
|
1
1
|
import { ChartType as _ } from "./types.js";
|
|
2
|
-
const
|
|
2
|
+
const T = "#fcfcfc", t = "#E4E4E4", n = "#646464", A = {
|
|
3
3
|
size: 12,
|
|
4
4
|
weight: 400,
|
|
5
5
|
family: "Inter"
|
|
6
|
-
},
|
|
6
|
+
}, o = 4, R = 1, N = 5, O = [
|
|
7
7
|
{ id: _.Line, name: "Line" },
|
|
8
8
|
{ id: _.StackedLine, name: "Stack" },
|
|
9
9
|
{ id: _.Bar, name: "Bar" }
|
|
10
|
-
],
|
|
10
|
+
], c = 76, L = 43, s = 312, I = 187, C = "__TOTALS_HELPER_KEY__", D = "___BASE_COLOR__", e = "Bidding", P = "ironSource", S = "UnityAds", i = "Meta", H = "Google", K = "Mintegral", B = "AppLovin", M = "InMobi", a = "DT Exchange", G = "Pangle", r = "Liftoff Monetize", F = 10, W = 70, Y = 10, f = 70, d = 40, g = [4, 4], U = {
|
|
11
11
|
left: 18,
|
|
12
12
|
right: 18,
|
|
13
13
|
top: 18,
|
|
14
14
|
bottom: 11
|
|
15
|
-
},
|
|
15
|
+
}, m = 6, p = "dateLong";
|
|
16
16
|
export {
|
|
17
17
|
D as BASE_COLOR_KEY,
|
|
18
|
-
|
|
19
|
-
f as
|
|
18
|
+
e as BIDDING_PREFIX,
|
|
19
|
+
f as CHART_ITEM_TRANSPARENCY,
|
|
20
|
+
U as CHART_PADDING,
|
|
20
21
|
L as COMPACT_HEADER_HEIGHT,
|
|
21
22
|
s as DEFAULT_CHART_PLANE_HEIGHT,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
N as DEFAULT_MAX_VISIBLE,
|
|
24
|
+
R as DEFAULT_MIN_VISIBLE,
|
|
25
|
+
o as DEFAULT_TICK_COUNT,
|
|
26
|
+
O as DROPDOWN_TYPE_OPTIONS,
|
|
27
|
+
t as GRID_LINE_COLOR,
|
|
28
|
+
c as HEADER_HEIGHT,
|
|
28
29
|
W as HOVER_AREA_TRANSPARENCY,
|
|
29
30
|
F as HOVER_TRANSPARENCY,
|
|
30
|
-
|
|
31
|
+
d as INCOMPLETE_DATA_BAR_TRANSPARENCY,
|
|
32
|
+
g as LINE_DASH_STYLE,
|
|
33
|
+
p as LONG_DATE_FORMAT,
|
|
31
34
|
I as MIN_PLANE_HEIGHT,
|
|
32
35
|
H as NETWORK_AD_MOB,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
B as NETWORK_APPLOVIN,
|
|
37
|
+
a as NETWORK_DT_EXCHANGE,
|
|
38
|
+
i as NETWORK_FACEBOOK_META,
|
|
39
|
+
M as NETWORK_INMOBI,
|
|
40
|
+
P as NETWORK_IRON_SOURCE,
|
|
38
41
|
r as NETWORK_LIFTOFF,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
K as NETWORK_MINTEGRAL,
|
|
43
|
+
G as NETWORK_PANGLE,
|
|
44
|
+
S as NETWORK_UNITY_ADS,
|
|
45
|
+
T as POINT_BORDER_COLOR,
|
|
46
|
+
Y as STACKED_LINE_TRANSPARENCY,
|
|
47
|
+
m as TICKS_EXTRA_PADDING,
|
|
48
|
+
n as TICK_LABEL_COLOR,
|
|
49
|
+
A as TICK_LABEL_FONT,
|
|
50
|
+
C as TOTALS_HELPER_KEY
|
|
47
51
|
};
|