@ironsource/shared-ui 2.1.12-test.79 → 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/index.js +1 -1
- package/package.json +1 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_c6aaec38_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,16 +60,19 @@ 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,
|
|
@@ -78,50 +80,46 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
78
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
|
-
() => e.valueSuffix
|
|
103
|
-
() => T.value
|
|
101
|
+
() => e.valueSuffix
|
|
104
102
|
],
|
|
105
|
-
|
|
103
|
+
$
|
|
106
104
|
);
|
|
107
|
-
const
|
|
108
|
-
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar ||
|
|
109
|
-
),
|
|
105
|
+
const f = l(() => e.totalsChart), b = l(
|
|
106
|
+
() => e.chartType === u.StackedLine || e.chartType === u.StackedBar || f.value
|
|
107
|
+
), g = l(
|
|
110
108
|
() => e.chartType === u.Line || e.chartType === u.StackedLine
|
|
111
|
-
),
|
|
109
|
+
), z = l(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: w } : e.parsing), W = l(() => f.value ? e.dataSets.map((t) => ({
|
|
112
110
|
...t,
|
|
113
111
|
data: t.data.map((i) => ({
|
|
114
112
|
...i,
|
|
115
|
-
[
|
|
113
|
+
[w]: t.label
|
|
116
114
|
}))
|
|
117
|
-
})) : e.dataSets),
|
|
118
|
-
() =>
|
|
119
|
-
),
|
|
120
|
-
() =>
|
|
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(
|
|
121
119
|
(t) => t.data.length === 1
|
|
122
120
|
)
|
|
123
|
-
),
|
|
124
|
-
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;
|
|
125
123
|
return {
|
|
126
124
|
...t,
|
|
127
125
|
fill: r,
|
|
@@ -137,36 +135,36 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
137
135
|
// draw a bit outside the chart area
|
|
138
136
|
icon: t.icon || null,
|
|
139
137
|
iconType: t.iconType || "branded",
|
|
140
|
-
[
|
|
138
|
+
[V]: a
|
|
141
139
|
// store base color for later use
|
|
142
140
|
};
|
|
143
|
-
})),
|
|
144
|
-
() => e.tooltipTotalType ===
|
|
145
|
-
),
|
|
141
|
+
})), X = l(
|
|
142
|
+
() => e.tooltipTotalType === U.Total ? "Total" : "Mean"
|
|
143
|
+
), O = l(() => ({
|
|
146
144
|
type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
|
|
147
145
|
// Chart Data
|
|
148
146
|
data: {
|
|
149
|
-
datasets:
|
|
147
|
+
datasets: D.value
|
|
150
148
|
},
|
|
151
149
|
// Chart Options
|
|
152
150
|
options: {
|
|
153
|
-
parsing:
|
|
151
|
+
parsing: z.value,
|
|
154
152
|
interaction: {
|
|
155
153
|
intersect: !1,
|
|
156
|
-
mode:
|
|
154
|
+
mode: f.value ? "point" : "index",
|
|
157
155
|
axis: "x"
|
|
158
156
|
},
|
|
159
157
|
// plugins
|
|
160
158
|
plugins: {
|
|
161
159
|
legend: { display: !1 },
|
|
162
160
|
title: { display: !1 },
|
|
163
|
-
hoverVerticalLine:
|
|
161
|
+
hoverVerticalLine: g.value,
|
|
164
162
|
// tooltip
|
|
165
163
|
tooltip: {
|
|
166
164
|
enabled: !1,
|
|
167
165
|
position: "average",
|
|
168
166
|
external: ({ tooltip: t }) => {
|
|
169
|
-
|
|
167
|
+
d.value = { ...t };
|
|
170
168
|
},
|
|
171
169
|
callbacks: {
|
|
172
170
|
footer: (t) => {
|
|
@@ -174,11 +172,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
174
172
|
i,
|
|
175
173
|
e.tooltipTotalType
|
|
176
174
|
);
|
|
177
|
-
return [
|
|
175
|
+
return [X.value, String(a)];
|
|
178
176
|
}
|
|
179
177
|
},
|
|
180
178
|
itemSort: (t, i) => {
|
|
181
|
-
if (e.tooltipOrder ===
|
|
179
|
+
if (e.tooltipOrder === M.YAxis) {
|
|
182
180
|
const a = t.parsed.y || 0, r = i.parsed.y || 0;
|
|
183
181
|
return a === r ? 0 : a > r ? -1 : 1;
|
|
184
182
|
}
|
|
@@ -190,7 +188,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
190
188
|
responsive: !0,
|
|
191
189
|
maintainAspectRatio: !1,
|
|
192
190
|
layout: {
|
|
193
|
-
padding:
|
|
191
|
+
padding: Re
|
|
194
192
|
},
|
|
195
193
|
// basic styles
|
|
196
194
|
elements: {
|
|
@@ -199,12 +197,12 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
199
197
|
tension: 0.3
|
|
200
198
|
},
|
|
201
199
|
point: {
|
|
202
|
-
radius:
|
|
200
|
+
radius: B.value ? 3 : 1,
|
|
203
201
|
hitRadius: 8,
|
|
204
202
|
borderWidth: 0,
|
|
205
203
|
hoverRadius: 4,
|
|
206
204
|
hoverBorderWidth: 2,
|
|
207
|
-
pointHoverBackgroundColor:
|
|
205
|
+
pointHoverBackgroundColor: Be
|
|
208
206
|
},
|
|
209
207
|
bar: {
|
|
210
208
|
borderRadius: 4
|
|
@@ -214,31 +212,31 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
214
212
|
// Horizontal Axis (X)
|
|
215
213
|
x: {
|
|
216
214
|
beginAtZero: !0,
|
|
217
|
-
offset: !
|
|
215
|
+
offset: !g.value || B.value,
|
|
218
216
|
border: { display: !1 },
|
|
219
|
-
stacked:
|
|
217
|
+
stacked: b.value,
|
|
220
218
|
// stack on top of each other
|
|
221
219
|
// ticks
|
|
222
220
|
ticks: {
|
|
223
|
-
color:
|
|
224
|
-
font:
|
|
221
|
+
color: N,
|
|
222
|
+
font: F,
|
|
225
223
|
padding: 4,
|
|
226
224
|
maxRotation: 0,
|
|
227
225
|
autoSkip: !e.truncateTickLabels,
|
|
228
226
|
autoSkipPadding: 8,
|
|
229
227
|
callback: function(t, i, a) {
|
|
230
|
-
const r = this.getLabelForValue(t),
|
|
231
|
-
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 _({
|
|
232
230
|
label: r,
|
|
233
231
|
format: e.xAxisFormat,
|
|
234
|
-
availableSpace:
|
|
232
|
+
availableSpace: te,
|
|
235
233
|
truncate: e.truncateTickLabels
|
|
236
234
|
});
|
|
237
235
|
}
|
|
238
236
|
},
|
|
239
237
|
// grid lines
|
|
240
238
|
grid: {
|
|
241
|
-
color:
|
|
239
|
+
color: K,
|
|
242
240
|
drawOnChartArea: !1,
|
|
243
241
|
drawTicks: !0,
|
|
244
242
|
drawBorder: !1,
|
|
@@ -250,132 +248,121 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
250
248
|
beginAtZero: !0,
|
|
251
249
|
border: { display: !1 },
|
|
252
250
|
// hide left borderline
|
|
253
|
-
stacked:
|
|
251
|
+
stacked: b.value,
|
|
254
252
|
// stack on top of each other
|
|
255
253
|
// ticks
|
|
256
254
|
ticks: {
|
|
257
|
-
color:
|
|
258
|
-
font:
|
|
255
|
+
color: N,
|
|
256
|
+
font: F,
|
|
257
|
+
count: e.tickCount + 1,
|
|
259
258
|
padding: 8,
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
max: T.value * e.tickCount,
|
|
263
|
-
callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat, T.value < 1) + e.valueSuffix
|
|
259
|
+
min: 0,
|
|
260
|
+
callback: (t) => e.valuePrefix + Le(t, e.yAxisFormat) + e.valueSuffix
|
|
264
261
|
},
|
|
265
262
|
// grid lines
|
|
266
263
|
grid: {
|
|
267
|
-
color:
|
|
264
|
+
color: K,
|
|
268
265
|
drawOnChartArea: !0,
|
|
269
266
|
drawTicks: !1
|
|
270
267
|
}
|
|
271
268
|
}
|
|
272
269
|
}
|
|
273
270
|
}
|
|
274
|
-
})),
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
271
|
+
})), I = k(null), d = k(null), { position: H } = Ve(
|
|
272
|
+
m,
|
|
273
|
+
I,
|
|
274
|
+
d,
|
|
278
275
|
e.tooltipRespectsTopEdge
|
|
279
|
-
),
|
|
280
|
-
left: `${
|
|
281
|
-
top: `${
|
|
282
|
-
opacity:
|
|
283
|
-
})),
|
|
284
|
-
|
|
285
|
-
dataSets: y,
|
|
286
|
-
isStacked: m
|
|
287
|
-
}), T = l(
|
|
288
|
-
() => De(
|
|
289
|
-
isNaN(S.value) ? 0 : S.value,
|
|
290
|
-
isNaN(w.value) ? 0 : w.value,
|
|
291
|
-
e.tickCount
|
|
292
|
-
)
|
|
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/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-plane-container[data-v-c6aaec38]{--headerHeight: var(--1b72bc70);width:100%;height:var(--e61db09a);position:relative}.header-wrapper[data-v-c6aaec38]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-c6aaec38]{padding-top:var(--headerHeight);height:100%}.chart[data-v-c6aaec38]{width:100%;height:100%;position:relative}.chart__canvas[data-v-c6aaec38]{width:100%;height:100%}.chart__tooltip[data-v-c6aaec38]{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
|
-
};
|