@ironsource/shared-ui 2.1.12-test.80 → 2.1.12-test.81
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/ChartPlane.vue_vue_type_style_index_0_scoped_d6b5dadd_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +1 -1
- package/components/chart/ChartPlane.vue.d.ts +1 -1
- package/components/chart/ChartPlane.vue.js +5 -5
- package/components/chart/ChartPlane.vue2.js +136 -149
- package/components/chart/index.d.ts +24 -24
- package/components/chart/utils/utils.d.ts +0 -1
- package/components/chart/utils/utils.js +13 -19
- package/package.json +1 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_e2c0c2af_lang.css +0 -1
- package/components/chart/composables/useChartValues.d.ts +0 -12
- package/components/chart/composables/useChartValues.js +0 -32
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-plane-container[data-v-d6b5dadd]{--headerHeight: var(--3fe18254);width:100%;height:var(--87e95782);position:relative}.header-wrapper[data-v-d6b5dadd]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-d6b5dadd]{padding-top:var(--headerHeight);height:100%}.chart[data-v-d6b5dadd]{width:100%;height:100%;position:relative}.chart__canvas[data-v-d6b5dadd]{width:100%;height:100%}.chart__tooltip[data-v-d6b5dadd]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -201,12 +201,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
201
201
|
yAxisFormat: ValueFormat;
|
|
202
202
|
valueSuffix: string;
|
|
203
203
|
valuePrefix: string;
|
|
204
|
-
dataSets: ChartDataSet[];
|
|
205
204
|
trendTooltip: any;
|
|
206
205
|
subheader: string;
|
|
207
206
|
subheaderTooltip: any;
|
|
208
207
|
trendValue: string | number;
|
|
209
208
|
trendDirection: TrendDirection;
|
|
209
|
+
dataSets: ChartDataSet[];
|
|
210
210
|
tickCount: number;
|
|
211
211
|
truncateTickLabels: boolean;
|
|
212
212
|
keepSubheaderVisible: boolean;
|
|
@@ -172,13 +172,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
172
172
|
yAxisFormat: ValueFormat;
|
|
173
173
|
valueSuffix: string;
|
|
174
174
|
valuePrefix: string;
|
|
175
|
-
dataSets: ChartDataSet[];
|
|
176
175
|
trendTooltip: any;
|
|
177
176
|
subheader: string;
|
|
178
177
|
subheaderTooltip: any;
|
|
179
178
|
typeSwitcher: boolean;
|
|
180
179
|
trendValue: string | number;
|
|
181
180
|
trendDirection: TrendDirection;
|
|
181
|
+
dataSets: ChartDataSet[];
|
|
182
182
|
tickCount: number;
|
|
183
183
|
truncateTickLabels: boolean;
|
|
184
184
|
keepSubheaderVisible: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../ChartPlane.
|
|
4
|
-
const
|
|
1
|
+
import o from "./ChartPlane.vue2.js";
|
|
2
|
+
/* empty css */import d from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_d6b5dadd_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ d(o, [["__scopeId", "data-v-d6b5dadd"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
a as default
|
|
7
7
|
};
|
|
@@ -1,28 +1,27 @@
|
|
|
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 u, DateInterval as
|
|
7
|
-
import { useTooltipPosition as
|
|
8
|
-
import
|
|
1
|
+
import "../../ChartPlane.vue_vue_type_style_index_0_scoped_d6b5dadd_lang.css"; import { defineComponent as ae, useCssVars as oe, unref as s, computed as l, ref as k, onMounted as le, watch as v, nextTick as re, openBlock as p, createElementBlock as A, createVNode as ie, isRef as ne, createSlots as se, withCtx as ue, renderSlot as de, createCommentVNode as S, createElementVNode as L, normalizeStyle as ce, createBlock as E } from "vue";
|
|
2
|
+
import { Chart as P, ArcElement as fe, LineElement as pe, BarElement as he, PointElement as me, LineController as ve, BarController as ye, PieController as Te, ScatterController as Ce, CategoryScale as be, LinearScale as ge, Filler as xe, Tooltip as ke } from "chart.js";
|
|
3
|
+
import { HoverVerticalLine as Ae } from "./plugins/HoverVerticalLine.js";
|
|
4
|
+
import { prepareTickLabel as Se, formatValue as Le } from "./utils/utils.js";
|
|
5
|
+
import { DEFAULT_TICK_COUNT as Ee, TOTALS_HELPER_KEY as w, BASE_COLOR_KEY as V, CHART_PADDING as Re, POINT_BORDER_COLOR as Be, TICK_LABEL_COLOR as N, TICK_LABEL_FONT as F, TICKS_EXTRA_PADDING as De, GRID_LINE_COLOR as K, HEADER_HEIGHT as Oe, COMPACT_HEADER_HEIGHT as Ie, HOVER_AREA_TRANSPARENCY as He, HOVER_TRANSPARENCY as y } from "./consts.js";
|
|
6
|
+
import { ChartType as u, DateInterval as Pe, TooltipOrder as M, TrendDirection as we } from "./types.js";
|
|
7
|
+
import { useTooltipPosition as Ve } from "./composables/useTooltipPosition.js";
|
|
8
|
+
import Ne from "./ChartTooltip.vue.js";
|
|
9
9
|
import { hexColorToRgba as h } from "../../utils/color.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
const Qe = { class: "chart-plane-container" }, et = {
|
|
10
|
+
import Fe from "./ChartHeader.vue.js";
|
|
11
|
+
import { useMemoize as Ke, useVModel as Me } from "@vueuse/core";
|
|
12
|
+
import Ue from "../emptyState/v4/EmptyStateV4.vue.js";
|
|
13
|
+
import Ye from "./ChartLoader.vue.js";
|
|
14
|
+
import { DEFAULT_CHART_COLOR as _e } from "./colorPalette.js";
|
|
15
|
+
import { TotalType as U, calculateTotal as Ge } from "../../utils/totals.js";
|
|
16
|
+
import { isNullOrUndefined as $e } from "../../utils/utils.js";
|
|
17
|
+
import { storeOriginalDatasetColors as ze, restoreOriginalDatasetColors as We } from "./utils/highlightUtils.js";
|
|
18
|
+
const Ze = { class: "chart-plane-container" }, Xe = {
|
|
20
19
|
key: 0,
|
|
21
20
|
class: "header-wrapper"
|
|
22
|
-
},
|
|
21
|
+
}, je = {
|
|
23
22
|
key: 1,
|
|
24
23
|
class: "chart-plane"
|
|
25
|
-
},
|
|
24
|
+
}, qe = { class: "chart" }, mt = /* @__PURE__ */ ae({
|
|
26
25
|
__name: "ChartPlane",
|
|
27
26
|
props: {
|
|
28
27
|
dataSets: { default: () => [] },
|
|
@@ -32,8 +31,8 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
32
31
|
parsing: { default: void 0 },
|
|
33
32
|
xAxisFormat: { default: "string" },
|
|
34
33
|
yAxisFormat: { default: "number" },
|
|
35
|
-
xAxisDateInterval: { default:
|
|
36
|
-
tickCount: { default:
|
|
34
|
+
xAxisDateInterval: { default: Pe.DAILY },
|
|
35
|
+
tickCount: { default: Ee },
|
|
37
36
|
truncateTickLabels: { type: Boolean, default: !1 },
|
|
38
37
|
header: { default: "" },
|
|
39
38
|
subheader: { default: "" },
|
|
@@ -49,11 +48,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
49
48
|
height: { default: "100%" },
|
|
50
49
|
compactHeader: { type: Boolean, default: !1 },
|
|
51
50
|
tooltipRespectsTopEdge: { type: Boolean, default: !0 },
|
|
52
|
-
tooltipTotalType: { default:
|
|
53
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
54
|
-
tooltipOrder: { default:
|
|
51
|
+
tooltipTotalType: { default: U.Total },
|
|
52
|
+
tooltipTotalCalcFn: { type: Function, default: Ge },
|
|
53
|
+
tooltipOrder: { default: M.Legend },
|
|
55
54
|
trendValue: { default: null },
|
|
56
|
-
trendDirection: { default:
|
|
55
|
+
trendDirection: { default: we.UP },
|
|
57
56
|
trendTooltip: { default: null },
|
|
58
57
|
totalsChart: { type: Boolean, default: !1 },
|
|
59
58
|
colorsMap: { default: () => ({}) },
|
|
@@ -61,66 +60,66 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
61
60
|
valuePrefix: { default: "" }
|
|
62
61
|
},
|
|
63
62
|
emits: ["update:chartType"],
|
|
64
|
-
setup(o, { emit:
|
|
63
|
+
setup(o, { emit: Y }) {
|
|
65
64
|
const e = o;
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
"
|
|
65
|
+
oe((t) => ({
|
|
66
|
+
"3fe18254": s(q),
|
|
67
|
+
"87e95782": o.height
|
|
69
68
|
}));
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
const _ = Ke(Se);
|
|
70
|
+
P.register(
|
|
71
|
+
fe,
|
|
72
|
+
pe,
|
|
73
|
+
he,
|
|
73
74
|
me,
|
|
75
|
+
ve,
|
|
74
76
|
ye,
|
|
75
77
|
Te,
|
|
76
78
|
Ce,
|
|
77
|
-
ge,
|
|
78
79
|
be,
|
|
80
|
+
ge,
|
|
79
81
|
xe,
|
|
80
82
|
ke,
|
|
81
|
-
|
|
82
|
-
Ae,
|
|
83
|
-
Le,
|
|
84
|
-
Ee
|
|
83
|
+
Ae
|
|
85
84
|
);
|
|
86
|
-
const
|
|
85
|
+
const T = Me(e, "chartType", Y), G = l(
|
|
87
86
|
() => e.withAnimation ? "" : "none"
|
|
88
|
-
),
|
|
87
|
+
), m = k(null);
|
|
89
88
|
let n = null;
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
},
|
|
93
|
-
n && (n.data.datasets =
|
|
89
|
+
const R = l(() => e.empty || e.dataSets.length === 0), c = l(() => !e.loading && !R.value), C = () => {
|
|
90
|
+
m.value && (n && n.destroy(), n = new P(m.value, O.value));
|
|
91
|
+
}, $ = () => {
|
|
92
|
+
n && (n.data.datasets = D.value, n.options = O.value.options, n.update(G.value));
|
|
94
93
|
};
|
|
95
|
-
|
|
96
|
-
t && (await
|
|
97
|
-
}),
|
|
94
|
+
le(C), v(() => e.chartType, C), v(c, async (t) => {
|
|
95
|
+
t && (await re(), C());
|
|
96
|
+
}), v(
|
|
98
97
|
[
|
|
99
98
|
() => e.visibleIds,
|
|
100
99
|
() => e.dataSets,
|
|
101
100
|
() => e.valuePrefix,
|
|
102
101
|
() => e.valueSuffix
|
|
103
102
|
],
|
|
104
|
-
|
|
103
|
+
$
|
|
105
104
|
);
|
|
106
|
-
const
|
|
107
|
-
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar ||
|
|
108
|
-
),
|
|
105
|
+
const f = l(() => e.totalsChart), b = l(
|
|
106
|
+
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar || f.value
|
|
107
|
+
), g = l(
|
|
109
108
|
() => e.chartType === u.Line || e.chartType === u.StackedLine
|
|
110
|
-
),
|
|
109
|
+
), z = l(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: w } : e.parsing), W = l(() => f.value ? e.dataSets.map((t) => ({
|
|
111
110
|
...t,
|
|
112
111
|
data: t.data.map((i) => ({
|
|
113
112
|
...i,
|
|
114
|
-
[
|
|
113
|
+
[w]: t.label
|
|
115
114
|
}))
|
|
116
|
-
})) : e.dataSets),
|
|
117
|
-
() =>
|
|
118
|
-
),
|
|
119
|
-
() =>
|
|
115
|
+
})) : e.dataSets), x = l(
|
|
116
|
+
() => W.value.filter((t) => e.visibleIds.includes(t.id))
|
|
117
|
+
), Z = (t) => e.colorsMap[t] || _e, B = l(
|
|
118
|
+
() => x.value.length && x.value.every(
|
|
120
119
|
(t) => t.data.length === 1
|
|
121
120
|
)
|
|
122
|
-
),
|
|
123
|
-
const a =
|
|
121
|
+
), D = l(() => x.value.map((t, i) => {
|
|
122
|
+
const a = Z(t.id), r = b.value ? i !== 0 ? "-1" : "start" : void 0;
|
|
124
123
|
return {
|
|
125
124
|
...t,
|
|
126
125
|
fill: r,
|
|
@@ -136,36 +135,36 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
136
135
|
// draw a bit outside the chart area
|
|
137
136
|
icon: t.icon || null,
|
|
138
137
|
iconType: t.iconType || "branded",
|
|
139
|
-
[
|
|
138
|
+
[V]: a
|
|
140
139
|
// store base color for later use
|
|
141
140
|
};
|
|
142
|
-
})),
|
|
143
|
-
() => e.tooltipTotalType ===
|
|
144
|
-
),
|
|
141
|
+
})), X = l(
|
|
142
|
+
() => e.tooltipTotalType === U.Total ? "Total" : "Mean"
|
|
143
|
+
), O = l(() => ({
|
|
145
144
|
type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
|
|
146
145
|
// Chart Data
|
|
147
146
|
data: {
|
|
148
|
-
datasets:
|
|
147
|
+
datasets: D.value
|
|
149
148
|
},
|
|
150
149
|
// Chart Options
|
|
151
150
|
options: {
|
|
152
|
-
parsing:
|
|
151
|
+
parsing: z.value,
|
|
153
152
|
interaction: {
|
|
154
153
|
intersect: !1,
|
|
155
|
-
mode:
|
|
154
|
+
mode: f.value ? "point" : "index",
|
|
156
155
|
axis: "x"
|
|
157
156
|
},
|
|
158
157
|
// plugins
|
|
159
158
|
plugins: {
|
|
160
159
|
legend: { display: !1 },
|
|
161
160
|
title: { display: !1 },
|
|
162
|
-
hoverVerticalLine:
|
|
161
|
+
hoverVerticalLine: g.value,
|
|
163
162
|
// tooltip
|
|
164
163
|
tooltip: {
|
|
165
164
|
enabled: !1,
|
|
166
165
|
position: "average",
|
|
167
166
|
external: ({ tooltip: t }) => {
|
|
168
|
-
|
|
167
|
+
d.value = { ...t };
|
|
169
168
|
},
|
|
170
169
|
callbacks: {
|
|
171
170
|
footer: (t) => {
|
|
@@ -173,11 +172,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
173
172
|
i,
|
|
174
173
|
e.tooltipTotalType
|
|
175
174
|
);
|
|
176
|
-
return [
|
|
175
|
+
return [X.value, String(a)];
|
|
177
176
|
}
|
|
178
177
|
},
|
|
179
178
|
itemSort: (t, i) => {
|
|
180
|
-
if (e.tooltipOrder ===
|
|
179
|
+
if (e.tooltipOrder === M.YAxis) {
|
|
181
180
|
const a = t.parsed.y || 0, r = i.parsed.y || 0;
|
|
182
181
|
return a === r ? 0 : a > r ? -1 : 1;
|
|
183
182
|
}
|
|
@@ -189,7 +188,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
189
188
|
responsive: !0,
|
|
190
189
|
maintainAspectRatio: !1,
|
|
191
190
|
layout: {
|
|
192
|
-
padding:
|
|
191
|
+
padding: Re
|
|
193
192
|
},
|
|
194
193
|
// basic styles
|
|
195
194
|
elements: {
|
|
@@ -198,12 +197,12 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
198
197
|
tension: 0.3
|
|
199
198
|
},
|
|
200
199
|
point: {
|
|
201
|
-
radius:
|
|
200
|
+
radius: B.value ? 3 : 1,
|
|
202
201
|
hitRadius: 8,
|
|
203
202
|
borderWidth: 0,
|
|
204
203
|
hoverRadius: 4,
|
|
205
204
|
hoverBorderWidth: 2,
|
|
206
|
-
pointHoverBackgroundColor:
|
|
205
|
+
pointHoverBackgroundColor: Be
|
|
207
206
|
},
|
|
208
207
|
bar: {
|
|
209
208
|
borderRadius: 4
|
|
@@ -213,31 +212,31 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
213
212
|
// Horizontal Axis (X)
|
|
214
213
|
x: {
|
|
215
214
|
beginAtZero: !0,
|
|
216
|
-
offset: !
|
|
215
|
+
offset: !g.value || B.value,
|
|
217
216
|
border: { display: !1 },
|
|
218
|
-
stacked:
|
|
217
|
+
stacked: b.value,
|
|
219
218
|
// stack on top of each other
|
|
220
219
|
// ticks
|
|
221
220
|
ticks: {
|
|
222
|
-
color:
|
|
223
|
-
font:
|
|
221
|
+
color: N,
|
|
222
|
+
font: F,
|
|
224
223
|
padding: 4,
|
|
225
224
|
maxRotation: 0,
|
|
226
225
|
autoSkip: !e.truncateTickLabels,
|
|
227
226
|
autoSkipPadding: 8,
|
|
228
227
|
callback: function(t, i, a) {
|
|
229
|
-
const r = this.getLabelForValue(t),
|
|
230
|
-
return
|
|
228
|
+
const r = this.getLabelForValue(t), ee = g.value && !f.value ? a.length - 1 : a.length, te = this.chart.scales?.x?.width / ee - De;
|
|
229
|
+
return _({
|
|
231
230
|
label: r,
|
|
232
231
|
format: e.xAxisFormat,
|
|
233
|
-
availableSpace:
|
|
232
|
+
availableSpace: te,
|
|
234
233
|
truncate: e.truncateTickLabels
|
|
235
234
|
});
|
|
236
235
|
}
|
|
237
236
|
},
|
|
238
237
|
// grid lines
|
|
239
238
|
grid: {
|
|
240
|
-
color:
|
|
239
|
+
color: K,
|
|
241
240
|
drawOnChartArea: !1,
|
|
242
241
|
drawTicks: !0,
|
|
243
242
|
drawBorder: !1,
|
|
@@ -249,133 +248,121 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
249
248
|
beginAtZero: !0,
|
|
250
249
|
border: { display: !1 },
|
|
251
250
|
// hide left borderline
|
|
252
|
-
stacked:
|
|
251
|
+
stacked: b.value,
|
|
253
252
|
// stack on top of each other
|
|
254
253
|
// ticks
|
|
255
254
|
ticks: {
|
|
256
|
-
color:
|
|
257
|
-
font:
|
|
255
|
+
color: N,
|
|
256
|
+
font: F,
|
|
257
|
+
count: e.tickCount + 1,
|
|
258
258
|
padding: 8,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
max: S.value * e.tickCount,
|
|
262
|
-
callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat, S.value < 1) + e.valueSuffix
|
|
259
|
+
min: 0,
|
|
260
|
+
callback: (t) => e.valuePrefix + Le(t, e.yAxisFormat) + e.valueSuffix
|
|
263
261
|
},
|
|
264
262
|
// grid lines
|
|
265
263
|
grid: {
|
|
266
|
-
color:
|
|
264
|
+
color: K,
|
|
267
265
|
drawOnChartArea: !0,
|
|
268
266
|
drawTicks: !1
|
|
269
267
|
}
|
|
270
268
|
}
|
|
271
269
|
}
|
|
272
270
|
}
|
|
273
|
-
})),
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
271
|
+
})), I = k(null), d = k(null), { position: H } = Ve(
|
|
272
|
+
m,
|
|
273
|
+
I,
|
|
274
|
+
d,
|
|
277
275
|
e.tooltipRespectsTopEdge
|
|
278
|
-
),
|
|
279
|
-
left: `${
|
|
280
|
-
top: `${
|
|
281
|
-
opacity:
|
|
282
|
-
})),
|
|
283
|
-
|
|
284
|
-
dataSets: y,
|
|
285
|
-
isStacked: m
|
|
286
|
-
}), S = l(() => {
|
|
287
|
-
const t = De(
|
|
288
|
-
isNaN(k.value) ? 0 : k.value,
|
|
289
|
-
isNaN(w.value) ? 0 : w.value,
|
|
290
|
-
e.tickCount
|
|
291
|
-
);
|
|
292
|
-
return console.log("stepSize", t), t;
|
|
293
|
-
}), ee = l(
|
|
294
|
-
() => (e.compactHeader ? Ne : Ve) + "px"
|
|
276
|
+
), j = l(() => ({
|
|
277
|
+
left: `${H.value.left}px`,
|
|
278
|
+
top: `${H.value.top}px`,
|
|
279
|
+
opacity: d.value?.opacity || 0
|
|
280
|
+
})), q = l(
|
|
281
|
+
() => (e.compactHeader ? Ie : Oe) + "px"
|
|
295
282
|
);
|
|
296
|
-
|
|
283
|
+
v(
|
|
297
284
|
() => e.highlightedId,
|
|
298
285
|
(t) => {
|
|
299
|
-
n && (
|
|
286
|
+
n && ($e(t) ? Q() : J(t), n.update());
|
|
300
287
|
}
|
|
301
288
|
);
|
|
302
|
-
const
|
|
289
|
+
const J = (t) => {
|
|
303
290
|
(n?.data.datasets || []).forEach((a) => {
|
|
304
|
-
|
|
305
|
-
const r = a[
|
|
291
|
+
ze(a);
|
|
292
|
+
const r = a[V];
|
|
306
293
|
a.id === t ? e.chartType === u.StackedLine && (a.backgroundColor = h(
|
|
307
294
|
r,
|
|
308
|
-
|
|
309
|
-
)) : (a.backgroundColor = h(r,
|
|
295
|
+
He
|
|
296
|
+
)) : (a.backgroundColor = h(r, y), a.borderColor = h(r, y), a.pointBackgroundColor = h(r, y), a.pointHoverBorderColor = h(r, y));
|
|
310
297
|
});
|
|
311
|
-
},
|
|
312
|
-
(n?.data.datasets || []).forEach(
|
|
298
|
+
}, Q = () => {
|
|
299
|
+
(n?.data.datasets || []).forEach(We);
|
|
313
300
|
};
|
|
314
|
-
return (t, i) => (
|
|
315
|
-
s(
|
|
316
|
-
|
|
317
|
-
"chart-type": s(
|
|
318
|
-
"onUpdate:chart-type": i[0] || (i[0] = (a) =>
|
|
319
|
-
"type-switcher": s(
|
|
320
|
-
header: s(
|
|
301
|
+
return (t, i) => (p(), A("div", Ze, [
|
|
302
|
+
s(c) || o.keepSubheaderVisible ? (p(), A("div", Xe, [
|
|
303
|
+
ie(Fe, {
|
|
304
|
+
"chart-type": s(T),
|
|
305
|
+
"onUpdate:chart-type": i[0] || (i[0] = (a) => ne(T) ? T.value = a : null),
|
|
306
|
+
"type-switcher": s(c) ? o.typeSwitcher : !1,
|
|
307
|
+
header: s(c) ? o.header : null,
|
|
321
308
|
subheader: o.subheader,
|
|
322
309
|
"subheader-tooltip": o.subheaderTooltip,
|
|
323
310
|
"trend-tooltip": o.trendTooltip,
|
|
324
311
|
compact: o.compactHeader,
|
|
325
|
-
"trend-value": s(
|
|
312
|
+
"trend-value": s(c) ? o.trendValue : null,
|
|
326
313
|
"trend-direction": o.trendDirection
|
|
327
|
-
},
|
|
314
|
+
}, se({ _: 2 }, [
|
|
328
315
|
t.$slots["subheader-tooltip"] ? {
|
|
329
316
|
name: "subheader-tooltip",
|
|
330
|
-
fn:
|
|
331
|
-
|
|
317
|
+
fn: ue(() => [
|
|
318
|
+
de(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
332
319
|
]),
|
|
333
320
|
key: "0"
|
|
334
321
|
} : void 0
|
|
335
322
|
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
|
|
336
|
-
])) :
|
|
337
|
-
s(
|
|
338
|
-
|
|
339
|
-
|
|
323
|
+
])) : S("", !0),
|
|
324
|
+
s(c) ? (p(), A("section", je, [
|
|
325
|
+
L("div", qe, [
|
|
326
|
+
L("canvas", {
|
|
340
327
|
ref_key: "chartRef",
|
|
341
|
-
ref:
|
|
328
|
+
ref: m,
|
|
342
329
|
class: "chart__canvas"
|
|
343
330
|
}, null, 512),
|
|
344
|
-
|
|
331
|
+
L("div", {
|
|
345
332
|
ref_key: "tooltipRef",
|
|
346
|
-
ref:
|
|
333
|
+
ref: I,
|
|
347
334
|
class: "chart__tooltip",
|
|
348
|
-
style:
|
|
335
|
+
style: ce(s(j))
|
|
349
336
|
}, [
|
|
350
|
-
|
|
337
|
+
d.value ? (p(), E(Ne, {
|
|
351
338
|
key: 0,
|
|
352
|
-
"totals-chart": s(
|
|
353
|
-
title: String(
|
|
354
|
-
"data-points":
|
|
339
|
+
"totals-chart": s(f),
|
|
340
|
+
title: String(d.value.title),
|
|
341
|
+
"data-points": d.value.dataPoints,
|
|
355
342
|
"x-axis-format": o.xAxisFormat,
|
|
356
343
|
"y-axis-format": o.yAxisFormat,
|
|
357
344
|
"x-axis-date-interval": o.xAxisDateInterval,
|
|
358
|
-
"total-label":
|
|
359
|
-
"total-value": Number(
|
|
345
|
+
"total-label": d.value.footer?.[0],
|
|
346
|
+
"total-value": Number(d.value.footer?.[1]),
|
|
360
347
|
"value-suffix": o.valueSuffix,
|
|
361
348
|
"value-prefix": o.valuePrefix
|
|
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"])) :
|
|
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"])) : S("", !0)
|
|
363
350
|
], 4)
|
|
364
351
|
])
|
|
365
|
-
])) : o.loading ? (
|
|
352
|
+
])) : o.loading ? (p(), E(Ye, {
|
|
366
353
|
key: 2,
|
|
367
354
|
class: "chart-loading"
|
|
368
|
-
})) : s(
|
|
355
|
+
})) : s(R) ? (p(), E(s(Ue), {
|
|
369
356
|
key: 3,
|
|
370
357
|
class: "chart-empty",
|
|
371
358
|
variant: null,
|
|
372
359
|
title: o.noDataTitle,
|
|
373
360
|
subtitle: o.noDataSubtitle,
|
|
374
361
|
"icon-name": o.noDataIcon
|
|
375
|
-
}, null, 8, ["title", "subtitle", "icon-name"])) :
|
|
362
|
+
}, null, 8, ["title", "subtitle", "icon-name"])) : S("", !0)
|
|
376
363
|
]));
|
|
377
364
|
}
|
|
378
365
|
});
|
|
379
366
|
export {
|
|
380
|
-
|
|
367
|
+
mt as default
|
|
381
368
|
};
|
|
@@ -23,12 +23,12 @@ declare const ChartTypes: () => ({
|
|
|
23
23
|
yAxisFormat: import("./types").ValueFormat;
|
|
24
24
|
valueSuffix: string;
|
|
25
25
|
valuePrefix: string;
|
|
26
|
-
dataSets: import("./types").ChartDataSet[];
|
|
27
26
|
trendTooltip: any;
|
|
28
27
|
subheader: string;
|
|
29
28
|
subheaderTooltip: any;
|
|
30
29
|
trendValue: string | number;
|
|
31
30
|
trendDirection: TrendDirection;
|
|
31
|
+
dataSets: import("./types").ChartDataSet[];
|
|
32
32
|
tickCount: number;
|
|
33
33
|
truncateTickLabels: boolean;
|
|
34
34
|
keepSubheaderVisible: boolean;
|
|
@@ -118,11 +118,6 @@ declare const ChartTypes: () => ({
|
|
|
118
118
|
type: import("vue").PropType<string>;
|
|
119
119
|
default: string;
|
|
120
120
|
};
|
|
121
|
-
dataSets: {
|
|
122
|
-
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
123
|
-
required: true;
|
|
124
|
-
default: () => any[];
|
|
125
|
-
};
|
|
126
121
|
trendTooltip: {
|
|
127
122
|
type: import("vue").PropType<{
|
|
128
123
|
header?: string;
|
|
@@ -150,6 +145,11 @@ declare const ChartTypes: () => ({
|
|
|
150
145
|
type: import("vue").PropType<TrendDirection>;
|
|
151
146
|
default: TrendDirection;
|
|
152
147
|
};
|
|
148
|
+
dataSets: {
|
|
149
|
+
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
150
|
+
required: true;
|
|
151
|
+
default: () => any[];
|
|
152
|
+
};
|
|
153
153
|
tickCount: {
|
|
154
154
|
type: import("vue").PropType<number>;
|
|
155
155
|
default: number;
|
|
@@ -214,7 +214,7 @@ declare const ChartTypes: () => ({
|
|
|
214
214
|
"onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
|
|
215
215
|
"onUpdate:sortSelected"?: (sortOption: unknown) => any;
|
|
216
216
|
"onUpdate:chartType"?: (chartType: ChartType) => any;
|
|
217
|
-
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "
|
|
217
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
|
|
218
218
|
$attrs: {
|
|
219
219
|
[x: string]: unknown;
|
|
220
220
|
};
|
|
@@ -302,11 +302,6 @@ declare const ChartTypes: () => ({
|
|
|
302
302
|
type: import("vue").PropType<string>;
|
|
303
303
|
default: string;
|
|
304
304
|
};
|
|
305
|
-
dataSets: {
|
|
306
|
-
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
307
|
-
required: true;
|
|
308
|
-
default: () => any[];
|
|
309
|
-
};
|
|
310
305
|
trendTooltip: {
|
|
311
306
|
type: import("vue").PropType<{
|
|
312
307
|
header?: string;
|
|
@@ -334,6 +329,11 @@ declare const ChartTypes: () => ({
|
|
|
334
329
|
type: import("vue").PropType<TrendDirection>;
|
|
335
330
|
default: TrendDirection;
|
|
336
331
|
};
|
|
332
|
+
dataSets: {
|
|
333
|
+
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
334
|
+
required: true;
|
|
335
|
+
default: () => any[];
|
|
336
|
+
};
|
|
337
337
|
tickCount: {
|
|
338
338
|
type: import("vue").PropType<number>;
|
|
339
339
|
default: number;
|
|
@@ -421,12 +421,12 @@ declare const ChartTypes: () => ({
|
|
|
421
421
|
yAxisFormat: import("./types").ValueFormat;
|
|
422
422
|
valueSuffix: string;
|
|
423
423
|
valuePrefix: string;
|
|
424
|
-
dataSets: import("./types").ChartDataSet[];
|
|
425
424
|
trendTooltip: any;
|
|
426
425
|
subheader: string;
|
|
427
426
|
subheaderTooltip: any;
|
|
428
427
|
trendValue: string | number;
|
|
429
428
|
trendDirection: TrendDirection;
|
|
429
|
+
dataSets: import("./types").ChartDataSet[];
|
|
430
430
|
tickCount: number;
|
|
431
431
|
truncateTickLabels: boolean;
|
|
432
432
|
keepSubheaderVisible: boolean;
|
|
@@ -536,11 +536,6 @@ declare const ChartTypes: () => ({
|
|
|
536
536
|
type: import("vue").PropType<string>;
|
|
537
537
|
default: string;
|
|
538
538
|
};
|
|
539
|
-
dataSets: {
|
|
540
|
-
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
541
|
-
required: true;
|
|
542
|
-
default: () => any[];
|
|
543
|
-
};
|
|
544
539
|
trendTooltip: {
|
|
545
540
|
type: import("vue").PropType<{
|
|
546
541
|
header?: string;
|
|
@@ -568,6 +563,11 @@ declare const ChartTypes: () => ({
|
|
|
568
563
|
type: import("vue").PropType<TrendDirection>;
|
|
569
564
|
default: TrendDirection;
|
|
570
565
|
};
|
|
566
|
+
dataSets: {
|
|
567
|
+
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
568
|
+
required: true;
|
|
569
|
+
default: () => any[];
|
|
570
|
+
};
|
|
571
571
|
tickCount: {
|
|
572
572
|
type: import("vue").PropType<number>;
|
|
573
573
|
default: number;
|
|
@@ -710,11 +710,6 @@ declare const ChartTypes: () => ({
|
|
|
710
710
|
type: import("vue").PropType<string>;
|
|
711
711
|
default: string;
|
|
712
712
|
};
|
|
713
|
-
dataSets: {
|
|
714
|
-
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
715
|
-
required: true;
|
|
716
|
-
default: () => any[];
|
|
717
|
-
};
|
|
718
713
|
trendTooltip: {
|
|
719
714
|
type: import("vue").PropType<{
|
|
720
715
|
header?: string;
|
|
@@ -742,6 +737,11 @@ declare const ChartTypes: () => ({
|
|
|
742
737
|
type: import("vue").PropType<TrendDirection>;
|
|
743
738
|
default: TrendDirection;
|
|
744
739
|
};
|
|
740
|
+
dataSets: {
|
|
741
|
+
type: import("vue").PropType<import("./types").ChartDataSet[]>;
|
|
742
|
+
required: true;
|
|
743
|
+
default: () => any[];
|
|
744
|
+
};
|
|
745
745
|
tickCount: {
|
|
746
746
|
type: import("vue").PropType<number>;
|
|
747
747
|
default: number;
|
|
@@ -829,12 +829,12 @@ declare const ChartTypes: () => ({
|
|
|
829
829
|
yAxisFormat: import("./types").ValueFormat;
|
|
830
830
|
valueSuffix: string;
|
|
831
831
|
valuePrefix: string;
|
|
832
|
-
dataSets: import("./types").ChartDataSet[];
|
|
833
832
|
trendTooltip: any;
|
|
834
833
|
subheader: string;
|
|
835
834
|
subheaderTooltip: any;
|
|
836
835
|
trendValue: string | number;
|
|
837
836
|
trendDirection: TrendDirection;
|
|
837
|
+
dataSets: import("./types").ChartDataSet[];
|
|
838
838
|
tickCount: number;
|
|
839
839
|
truncateTickLabels: boolean;
|
|
840
840
|
keepSubheaderVisible: boolean;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
|
|
2
|
-
export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
|
|
3
2
|
export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean) => string;
|
|
4
3
|
export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];
|
|
@@ -1,27 +1,21 @@
|
|
|
1
|
-
import { format as
|
|
2
|
-
import { TICK_LABEL_FONT as
|
|
3
|
-
import { nFormatter as
|
|
4
|
-
import { truncateTextToFit as
|
|
5
|
-
import { REGEX_LINEBREAK as
|
|
6
|
-
const
|
|
7
|
-
if (e === 0)
|
|
8
|
-
return 0;
|
|
9
|
-
const n = Math.max(t - r, 1), f = n / e, o = n > 1 ? f * 0.4 : 0;
|
|
10
|
-
return (n + o) / e;
|
|
11
|
-
}, E = (r, t, e = !1) => t === "day" ? m(new Date(r), "EEEE") : t === "number" ? p(r, e) : t === "date" ? m(new Date(r), "MMM dd") : t === "dateLong" ? m(new Date(r), "MMM dd, yyyy") : String(r), w = ({
|
|
1
|
+
import { format as e } from "date-fns";
|
|
2
|
+
import { TICK_LABEL_FONT as p } from "../consts.js";
|
|
3
|
+
import { nFormatter as E } from "../../../utils/formatNumbers.js";
|
|
4
|
+
import { truncateTextToFit as a } from "../../../utils/text.js";
|
|
5
|
+
import { REGEX_LINEBREAK as m } from "../../../consts/regex.js";
|
|
6
|
+
const c = (r, t, n = !1) => t === "day" ? e(new Date(r), "EEEE") : t === "number" ? E(r, n) : t === "date" ? e(new Date(r), "MMM dd") : t === "dateLong" ? e(new Date(r), "MMM dd, yyyy") : String(r), w = ({
|
|
12
7
|
label: r,
|
|
13
8
|
format: t,
|
|
14
|
-
availableSpace:
|
|
15
|
-
truncate:
|
|
9
|
+
availableSpace: n,
|
|
10
|
+
truncate: i = !1
|
|
16
11
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
return
|
|
12
|
+
const s = m.test(r), o = (d) => {
|
|
13
|
+
const f = c(d, t);
|
|
14
|
+
return i && n > 0 ? a(f, p, n) : f;
|
|
20
15
|
};
|
|
21
|
-
return
|
|
16
|
+
return s ? r.split(m).map(o) : o(r);
|
|
22
17
|
};
|
|
23
18
|
export {
|
|
24
|
-
|
|
25
|
-
E as formatValue,
|
|
19
|
+
c as formatValue,
|
|
26
20
|
w as prepareTickLabel
|
|
27
21
|
};
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.chart-plane-container[data-v-e2c0c2af]{--headerHeight: var(--1ade29c0);width:100%;height:var(--0866490b);position:relative}.header-wrapper[data-v-e2c0c2af]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-e2c0c2af]{padding-top:var(--headerHeight);height:100%}.chart[data-v-e2c0c2af]{width:100%;height:100%;position:relative}.chart__canvas[data-v-e2c0c2af]{width:100%;height:100%}.chart__tooltip[data-v-e2c0c2af]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Ref } from 'vue';
|
|
2
|
-
import { ChartDataRecord, ChartDataSet, ChartParsingConfig } from '@/components/chart/types';
|
|
3
|
-
export declare const useChartValues: ({ parsingConfig, dataSets, isStacked, }: {
|
|
4
|
-
parsingConfig: ChartParsingConfig;
|
|
5
|
-
dataSets: Ref<ChartDataSet[]>;
|
|
6
|
-
isStacked: Ref<boolean>;
|
|
7
|
-
}) => {
|
|
8
|
-
getXValue: (record: ChartDataRecord) => unknown;
|
|
9
|
-
getYValue: (record: ChartDataRecord) => unknown;
|
|
10
|
-
minValue: import("vue").ComputedRef<number>;
|
|
11
|
-
maxValue: import("vue").ComputedRef<number>;
|
|
12
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { computed as t } from "vue";
|
|
2
|
-
const V = ({
|
|
3
|
-
parsingConfig: s,
|
|
4
|
-
dataSets: m,
|
|
5
|
-
isStacked: v
|
|
6
|
-
}) => {
|
|
7
|
-
const l = (e) => e ? e[s?.yAxisKey] : null, r = (e) => e ? e[s?.xAxisKey] : null, o = t(
|
|
8
|
-
() => m.value.flatMap(
|
|
9
|
-
(e) => e.data.map(l)
|
|
10
|
-
)
|
|
11
|
-
), p = t(() => m.value.reduce((e, n) => (n.data.forEach((a) => {
|
|
12
|
-
const u = String(r(a));
|
|
13
|
-
e[u] || (e[u] = []), e[u].push(l(a));
|
|
14
|
-
}), e), {})), x = t(() => Math.min(0, ...o.value.map(Number))), h = t(() => {
|
|
15
|
-
if (v.value) {
|
|
16
|
-
const e = Object.values(p.value).map(
|
|
17
|
-
(n) => n.reduce((a, u) => a + u, 0)
|
|
18
|
-
);
|
|
19
|
-
return Math.max(...e);
|
|
20
|
-
}
|
|
21
|
-
return Math.max(...o.value.map(Number));
|
|
22
|
-
});
|
|
23
|
-
return {
|
|
24
|
-
getXValue: r,
|
|
25
|
-
getYValue: l,
|
|
26
|
-
minValue: x,
|
|
27
|
-
maxValue: h
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export {
|
|
31
|
-
V as useChartValues
|
|
32
|
-
};
|