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