vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
924 lines • 135 kB
JavaScript
import { P as D, W as q, c as X, A as j, F as $, w as ee, s as te, o as le, _ as re, a6 as ie, x as ae, C as se, y as ne, a4 as ce, e as oe, r as he, f as U, a7 as ue, R as de, S as ge, q as fe, b as Ie, z as me, d as be, a8 as Ne, v as xe, a9 as Fe, a2 as _e, aa as Ae, i as ye, G as Le, L as Ce, u as Se, p as ke, B as we, a as Oe, t as Ge } from "./index-CHWA6Lnw.js";
import { D as ve } from "./DataTable-B4YF6guk.js";
import { _ as pe } from "./Title-BwZtefYd.js";
import { u as ze, _ as Me } from "./Tooltip-eCCz9HFo.js";
import { U as Te } from "./usePrinter-DibtVl2x.js";
import { _ as Pe } from "./Shape-Bs9E3f4-.js";
import Ve from "./BaseIcon-AmoKryXo.js";
import Re from "./vue-ui-table-sparkline-RFOlGtum.js";
import De from "./vue-ui-skeleton-BSUFPx4a.js";
import { S as He } from "./Slicer-qokIr-TL.js";
import We from "./vue-ui-accordion-gHGrRoVr.js";
import { u as Z } from "./useNestedProp-ByBiJC9_.js";
import { _ as Be } from "./PackageVersion-DcMafJMi.js";
import { P as Ee } from "./PenAndPaper-ljJaW1FE.js";
import { resolveComponent as R, createElementBlock as s, openBlock as i, normalizeStyle as F, normalizeClass as W, createBlock as H, createCommentVNode as u, createVNode as Y, createSlots as Ye, withCtx as P, renderSlot as S, normalizeProps as B, guardReactiveProps as E, createElementVNode as d, createTextVNode as J, Fragment as g, renderList as m, toDisplayString as w, mergeProps as K, withDirectives as qe, vModelCheckbox as Xe } from "vue";
import { _ as Ue } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Ze = X(), Je = {
name: "vue-ui-xy",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
components: {
DataTable: ve,
Shape: Pe,
Title: pe,
Tooltip: Me,
UserOptions: Te,
BaseIcon: Ve,
TableSparkline: Re,
Skeleton: De,
Slicer: He,
Accordion: We,
PackageVersion: Be,
PenAndPaper: Ee
},
data() {
this.dataset.forEach((h, l) => {
[null, void 0].includes(h.series) && this.error({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "series (number[])",
index: l
});
});
const t = this.config.downsample && this.config.downsample.threshold ? this.config.downsample.threshold : 500, a = Math.max(...this.dataset.map((h) => this.largestTriangleThreeBucketsArray({ data: h.series, threshold: t }).length)), o = {
start: 0,
end: a
};
return {
themePalettes: Ge,
themes: Oe,
slicerStep: 0,
selectedScale: null,
CTX: null,
CANVAS: null,
opacity: we,
useSafeValues: !0,
palette: ke,
height: 600,
width: 1e3,
viewBox: "0 0 1000 600",
clientPosition: {
x: 0,
y: 0
},
canvasClientPosition: {
x: 0,
y: 0
},
icons: {
line: "line",
bar: "bar",
plot: "plot"
},
isAnnotator: !1,
isFullscreen: !1,
isPrinting: !1,
isImaging: !1,
isTooltip: !1,
mutableConfig: {
dataLabels: {
show: !0
},
showTooltip: !0,
showTable: !1,
isStacked: !1,
useIndividualScale: !1
},
selectedSerieIndex: null,
selectedRowIndex: null,
segregatedSeries: [],
uniqueId: X(),
step: 0,
tableStep: 0,
titleStep: 0,
slicer: o,
__to__: null,
maxX: a,
showSparklineTable: !0,
segregateStep: 0,
sliderId: Ze,
fontSizes: {
xAxis: 18,
yAxis: 12,
dataLabels: 20,
plotLabels: 10
},
plotRadii: {
plot: 3,
line: 3
},
selectedMinimapIndex: null,
showUserOptionsOnChartHover: !1,
keepUserOptionState: !0,
userOptionsVisible: !0,
svgRef: null
};
},
watch: {
dataset: {
handler(t, a) {
this.maxX = Math.max(...this.dataset.map((o) => this.largestTriangleThreeBucketsArray({
data: o.series,
threshold: this.FINAL_CONFIG.downsample.threshold
}).length)), this.slicer = {
start: 0,
end: this.maxX
}, this.slicerStep += 1, this.segregateStep += 1;
},
deep: !0
},
config: {
handler(t, a) {
this.FINAL_CONFIG = this.prepareConfig(), this.prepareChart(), this.titleStep += 1, this.tableStep += 1, this.mutableConfig = {
dataLabels: {
show: !0
},
showTooltip: this.FINAL_CONFIG.chart.tooltip.show === !0,
showTable: this.FINAL_CONFIG.showTable === !0,
isStacked: this.FINAL_CONFIG.chart.grid.labels.yAxis.stacked,
useIndividualScale: this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale
};
},
deep: !0
}
},
computed: {
chartAriaLabel() {
const t = this.FINAL_CONFIG.chart.title.text || "Chart visualization", a = this.FINAL_CONFIG.chart.title.subtitle.text || "";
return `${t}. ${a}`;
},
optimize() {
return {
linePlot: this.maxSeries > this.FINAL_CONFIG.line.dot.hideAboveMaxSerieLength
};
},
hasOptionsNoTitle() {
return this.FINAL_CONFIG.chart.userOptions.show && (!this.FINAL_CONFIG.chart.title.show || !this.FINAL_CONFIG.chart.title.text);
},
minimap() {
if (!this.FINAL_CONFIG.chart.zoom.minimap.show) return [];
const t = this.datasetWithIds.filter((l) => !this.segregatedSeries.includes(l.id)), a = Math.max(...t.map((l) => l.series.length)), o = [];
for (let l = 0; l < a; l += 1)
o.push(t.map((e) => e.series[l] || 0).reduce((e, A) => (e || 0) + (A || 0), 0));
const h = Math.min(...o);
return o.map((l) => l + (h < 0 ? Math.abs(h) : 0));
},
customPalette() {
return this.convertCustomPalette(this.FINAL_CONFIG.customPalette);
},
backgroundColor() {
return this.FINAL_CONFIG.chart.backgroundColor;
},
slicerColor() {
return this.FINAL_CONFIG.chart.zoom.color;
},
allScales() {
const t = this.lineSet.map((e) => ({
name: e.name,
color: e.color,
scale: e.individualScale,
scaleYLabels: e.scaleYLabels,
zero: e.zeroPosition,
max: e.individualMax,
scaleLabel: e.scaleLabel || "",
id: e.id,
yOffset: e.yOffset || 0,
individualHeight: e.individualHeight || this.drawingArea.height,
autoScaleYLabels: e.autoScaleYLabels
})), a = this.barSet.map((e) => ({
name: e.name,
color: e.color,
scale: e.individualScale,
scaleYLabels: e.scaleYLabels,
zero: e.zeroPosition,
max: e.individualMax,
scaleLabel: e.scaleLabel || "",
id: e.id,
yOffset: e.yOffset || 0,
individualHeight: e.individualHeight || this.drawingArea.height
})), o = this.plotSet.map((e) => ({
name: e.name,
color: e.color,
scale: e.individualScale,
scaleYLabels: e.scaleYLabels,
// FIX
zero: e.zeroPosition,
max: e.individualMax,
scaleLabel: e.scaleLabel || "",
id: e.id,
yOffset: e.yOffset || 0,
individualHeight: e.individualHeight || this.drawingArea.height
})), h = this.mutableConfig.useIndividualScale && !this.mutableConfig.isStacked ? Object.values(this.scaleGroups) : [...t, ...a, ...o], l = h.flatMap((e) => e).length;
return h.flatMap((e, A) => ({
unique: e.unique,
id: e.id,
groupId: e.groupId,
scaleLabel: e.scaleLabel,
name: this.mutableConfig.useIndividualScale && !this.mutableConfig.isStacked ? e.unique ? e.name : e.groupName : e.name,
color: this.mutableConfig.useIndividualScale && !this.mutableConfig.isStacked ? e.unique ? e.color : e.groupColor : e.color,
scale: e.scale,
yOffset: e.yOffset,
individualHeight: e.individualHeight,
x: this.mutableConfig.isStacked ? this.drawingArea.left : this.drawingArea.left / l * (A + 1),
yLabels: e.scaleYLabels || e.scale.ticks.map((b) => ({
y: b >= 0 ? e.zero - e.individualHeight * (b / e.max) : e.zero + e.individualHeight * Math.abs(b) / e.max,
value: b
}))
}));
},
isDataset() {
return !!this.dataset && this.dataset.length;
},
chartFont() {
const t = document.getElementById(`vue-ui-xy_${this.uniqueId}`);
return window.getComputedStyle(t, null).getPropertyValue("font-family");
},
FINAL_CONFIG: {
get: function() {
return this.prepareConfig();
},
set: function(t) {
return t;
}
},
hasHighlightArea() {
return Array.isArray(this.FINAL_CONFIG.chart.highlightArea) ? this.FINAL_CONFIG.chart.highlightArea.some((t) => t.show) : this.FINAL_CONFIG.chart.highlightArea && this.FINAL_CONFIG.chart.highlightArea.show;
},
highlightAreas() {
if (Array.isArray(this.FINAL_CONFIG.chart.highlightArea))
return this.FINAL_CONFIG.chart.highlightArea.map((a) => ({
...a,
span: a.from === a.to ? 1 : a.to < a.from ? 0 : a.to - a.from + 1
}));
const t = this.FINAL_CONFIG.chart.highlightArea;
return [{ ...t, span: t.from === t.to ? 1 : t.to < t.from ? 0 : t.to - t.from + 1 }];
},
xPadding() {
return this.FINAL_CONFIG.chart.grid.position === "middle" ? 0 : this.drawingArea.width / this.maxSeries / 2;
},
relativeZero() {
return [null, void 0].includes(this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin) ? this.niceScale.min >= 0 ? 0 : Math.abs(this.niceScale.min) : -this.niceScale.min;
},
absoluteMax() {
return this.niceScale.max + this.relativeZero;
},
datasetWithIds() {
return this.useSafeValues ? this.dataset.map((t, a) => ({
...t,
series: this.largestTriangleThreeBucketsArray({
data: t.series,
threshold: this.FINAL_CONFIG.downsample.threshold
}),
id: `uniqueId_${a}`
})) : this.dataset;
},
safeDataset() {
return this.useSafeValues ? this.dataset.map((t, a) => {
const o = this.largestTriangleThreeBucketsArray({
data: t.series,
threshold: this.FINAL_CONFIG.downsample.threshold
}), h = `uniqueId_${a}`;
return {
...t,
slotAbsoluteIndex: a,
series: o.map((l) => this.isSafeValue(l) ? l : null).slice(this.slicer.start, this.slicer.end),
color: this.convertColorToHex(t.color ? t.color : this.customPalette[a] ? this.customPalette[a] : this.palette[a]),
id: h,
scaleLabel: t.scaleLabel || h
};
}) : this.dataset;
},
relativeDataset() {
return this.safeDataset.map((t, a) => ({
...t,
series: t.series.map((o) => o + this.relativeZero),
absoluteValues: t.series
})).filter((t) => !this.segregatedSeries.includes(t.id));
},
tableSparklineDataset() {
return this.relativeDataset.map((t) => {
const a = t.absoluteValues.map((o) => [void 0, null].includes(o) ? 0 : o);
return {
id: t.id,
name: t.name,
color: t.color,
values: this.fillArray(this.maxSeries, a)
};
});
},
tableSparklineConfig() {
return {
responsiveBreakpoint: this.FINAL_CONFIG.table.responsiveBreakpoint,
roundingValues: this.FINAL_CONFIG.table.rounding,
showAverage: !1,
showMedian: !1,
showTotal: !1,
fontFamily: this.FINAL_CONFIG.chart.fontFamily,
prefix: this.FINAL_CONFIG.chart.labels.prefix,
suffix: this.FINAL_CONFIG.chart.labels.suffix,
colNames: JSON.parse(JSON.stringify(this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.values)),
thead: {
backgroundColor: this.FINAL_CONFIG.table.th.backgroundColor,
color: this.FINAL_CONFIG.table.th.color,
outline: this.FINAL_CONFIG.table.th.outline
},
tbody: {
backgroundColor: this.FINAL_CONFIG.table.td.backgroundColor,
color: this.FINAL_CONFIG.table.td.color,
outline: this.FINAL_CONFIG.table.td.outline
},
userOptions: {
show: !1
}
};
},
absoluteDataset() {
return this.safeDataset.map((t, a) => ({
absoluteIndex: a,
...t,
series: t.series.map((o) => o + this.relativeZero),
absoluteValues: t.series,
segregate: () => this.segregate(t),
isSegregated: this.segregatedSeries.includes(t.id)
}));
},
activeSeriesLength() {
return this.absoluteDataset.length;
},
activeSeriesWithStackRatios() {
return this.assignStackRatios(this.absoluteDataset.filter((t) => !this.segregatedSeries.includes(t.id)));
},
scaleGroups() {
const t = Object.groupBy(this.activeSeriesWithStackRatios, (o) => o.scaleLabel), a = {};
for (const [o, h] of Object.entries(t)) {
const l = h.flatMap((e) => e.absoluteValues);
a[o] = {
min: Math.min(...l) || 0,
max: Math.max(...l) || 1,
groupId: `scale_group_${this.createUid()}`
};
}
return a;
},
barSet() {
return this.activeSeriesWithStackRatios.filter((t) => t.type === "bar").map((t, a) => {
this.checkAutoScaleError(t);
const o = this.scaleGroups[t.scaleLabel].min, h = this.scaleGroups[t.scaleLabel].max;
t.absoluteValues.filter((x) => ![null, void 0].includes(x)).map((x) => (x - o) / (h - o));
const l = {
valueMin: o,
valueMax: h < 0 ? 0 : h
}, e = {
max: t.scaleMax || Math.max(...t.absoluteValues) || 1,
min: t.scaleMin || Math.min(...t.absoluteValues.filter((x) => ![void 0, null].includes(x))) > 0 ? 0 : Math.min(...t.absoluteValues.filter((x) => ![null, void 0].includes(x)))
}, A = t.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, b = 1.0000001, I = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * b : e.max, A), y = this.calculateNiceScaleWithExactExtremes(l.valueMin, l.valueMax === l.valueMin ? l.valueMax * b : l.valueMax, A), v = I.min >= 0 ? 0 : Math.abs(I.min), O = 0, p = I.max + v, G = y.max + Math.abs(O), N = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - t.cumulatedStackRatio) : 0, L = this.mutableConfig.isStacked ? this.drawingArea.height * t.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, z = this.drawingArea.bottom - N - L * v / p, V = this.drawingArea.bottom - N - L * O / G, r = this.absoluteDataset.filter((x) => x.type === "bar").filter((x) => !this.segregatedSeries.includes(x.id)).length, c = t.series.map((x, T) => {
const _ = this.mutableConfig.useIndividualScale ? (t.absoluteValues[T] + v) / p : this.ratioToMax(x), k = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * T : this.drawingArea.left + this.slot.bar * a + this.slot.bar * T * r - this.barSlot / 2 - a * this.barPeriodGap;
return {
yOffset: this.checkNaN(N),
individualHeight: this.checkNaN(L),
x: this.checkNaN(k),
y: this.drawingArea.bottom - N - L * _,
value: t.absoluteValues[T],
zeroPosition: this.checkNaN(z),
individualMax: this.checkNaN(p),
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[T] || ""
};
}), n = t.absoluteValues.map((x) => y.min >= 0 ? (x - Math.abs(y.min)) / (y.max - Math.abs(y.min)) : (x + Math.abs(y.min)) / (y.max + Math.abs(y.min))), f = t.series.map((x, T) => {
const _ = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * T : this.drawingArea.left - this.slot.bar / 2 + this.slot.bar * a + this.slot.bar * T * this.absoluteDataset.filter((k) => k.type === "bar").filter((k) => !this.segregatedSeries.includes(k.id)).length;
return {
yOffset: this.checkNaN(N),
individualHeight: this.checkNaN(L),
x: this.checkNaN(_),
y: this.checkNaN(this.drawingArea.bottom - this.checkNaN(N) - (this.checkNaN(L) * n[T] || 0)),
value: t.absoluteValues[T],
zeroPosition: this.checkNaN(z),
individualMax: this.checkNaN(p),
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[T] || ""
};
}), C = I.ticks.map((x) => ({
y: x >= 0 ? z - L * (x / p) : z + L * Math.abs(x) / p,
value: x,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
})), M = y.ticks.map((x) => {
const T = (x - y.min) / (y.max - y.min);
return {
y: x >= 0 ? V - L * T : V + L * T,
value: x,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
};
});
return this.scaleGroups[t.scaleLabel].name = t.name, this.scaleGroups[t.scaleLabel].groupName = t.scaleLabel, this.scaleGroups[t.scaleLabel].groupColor = this.FINAL_CONFIG.chart.grid.labels.yAxis.groupColor || t.color, this.scaleGroups[t.scaleLabel].color = t.color, this.scaleGroups[t.scaleLabel].scaleYLabels = t.autoScaling ? M : C, this.scaleGroups[t.scaleLabel].zeroPosition = t.autoScaling ? V : z, this.scaleGroups[t.scaleLabel].individualMax = t.autoScaling ? G : p, this.scaleGroups[t.scaleLabel].scaleLabel = t.scaleLabel, this.scaleGroups[t.scaleLabel].id = t.id, this.scaleGroups[t.scaleLabel].yOffset = N, this.scaleGroups[t.scaleLabel].individualHeight = L, this.scaleGroups[t.scaleLabel].autoScaleYLabels = M, this.scaleGroups[t.scaleLabel].unique = this.activeSeriesWithStackRatios.filter((x) => x.scaleLabel === t.scaleLabel).length === 1, {
...t,
yOffset: N,
autoScaleYLabels: M,
individualHeight: L,
scaleYLabels: t.autoScaling ? M : C,
individualScale: t.autoScaling ? y : I,
individualMax: t.autoScaling ? G : p,
zeroPosition: t.autoScaling ? V : z,
plots: t.autoScaling ? f : c,
groupId: this.scaleGroups[t.scaleLabel].groupId
};
});
},
lineSet() {
return this.activeSeriesWithStackRatios.filter((t) => t.type === "line").map((t) => {
this.checkAutoScaleError(t);
const a = this.scaleGroups[t.scaleLabel].min, o = this.scaleGroups[t.scaleLabel].max;
t.absoluteValues.filter((_) => ![null, void 0].includes(_)).map((_) => (_ - a) / (o - a));
const h = {
valueMin: a,
valueMax: o
}, l = {
max: t.scaleMax || Math.max(...t.absoluteValues) || 1,
min: t.scaleMin || (Math.min(...t.absoluteValues) > 0 ? 0 : Math.min(...t.absoluteValues))
}, e = t.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, A = 1.0000001, b = this.calculateNiceScaleWithExactExtremes(l.min, l.max === l.min ? l.max * A : l.max, e), I = this.calculateNiceScaleWithExactExtremes(h.valueMin, h.valueMax === h.valueMin ? h.valueMax * A : h.valueMax, e), y = b.min >= 0 ? 0 : Math.abs(b.min), v = 0, O = b.max + Math.abs(y), p = I.max + Math.abs(v), G = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - t.cumulatedStackRatio) : 0, N = this.mutableConfig.isStacked ? this.drawingArea.height * t.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, L = this.drawingArea.bottom - G - N * y / O, z = this.drawingArea.bottom - G - N * v / p, V = t.series.map((_, k) => {
const Q = this.mutableConfig.useIndividualScale ? (t.absoluteValues[k] + Math.abs(y)) / O : this.ratioToMax(_);
return {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * k),
y: this.checkNaN(this.drawingArea.bottom - G - N * Q),
value: t.absoluteValues[k],
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[k] || ""
};
}), r = t.absoluteValues.map((_) => I.min >= 0 ? (_ - Math.abs(I.min)) / (I.max - Math.abs(I.min)) : (_ + Math.abs(I.min)) / (I.max + Math.abs(I.min))), c = t.series.map((_, k) => [void 0, null].includes(t.absoluteValues[k]) ? {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * k),
y: L,
value: t.absoluteValues[k],
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[k] || ""
} : {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * k),
y: this.checkNaN(this.drawingArea.bottom - G - (N * r[k] || 0)),
value: t.absoluteValues[k],
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[k] || ""
}), n = this.createSmoothPath(V.filter((_) => _.value !== null)), f = this.createSmoothPath(c.filter((_) => _.value !== null)), C = this.createStraightPath(V.filter((_) => _.value !== null)), M = this.createStraightPath(c.filter((_) => _.value !== null)), x = b.ticks.map((_) => ({
y: _ >= 0 ? L - N * (_ / O) : L + N * Math.abs(_) / O,
value: _,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
})), T = I.ticks.map((_) => {
const k = (_ - I.min) / (I.max - I.min);
return {
y: _ >= 0 ? z - N * k : z + N * k,
value: _,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
};
});
return this.scaleGroups[t.scaleLabel].name = t.name, this.scaleGroups[t.scaleLabel].groupName = t.scaleLabel, this.scaleGroups[t.scaleLabel].groupColor = this.FINAL_CONFIG.chart.grid.labels.yAxis.groupColor || t.color, this.scaleGroups[t.scaleLabel].color = t.color, this.scaleGroups[t.scaleLabel].scaleYLabels = t.autoScaling ? T : x, this.scaleGroups[t.scaleLabel].zeroPosition = t.autoScaling ? z : L, this.scaleGroups[t.scaleLabel].individualMax = t.autoScaling ? p : O, this.scaleGroups[t.scaleLabel].scaleLabel = t.scaleLabel, this.scaleGroups[t.scaleLabel].id = t.id, this.scaleGroups[t.scaleLabel].yOffset = G, this.scaleGroups[t.scaleLabel].individualHeight = N, this.scaleGroups[t.scaleLabel].autoScaleYLabels = T, this.scaleGroups[t.scaleLabel].unique = this.activeSeriesWithStackRatios.filter((_) => _.scaleLabel === t.scaleLabel).length === 1, {
...t,
yOffset: G,
autoScaleYLabels: T,
individualHeight: N,
scaleYLabels: t.autoScaling ? T : x,
individualScale: t.autoScaling ? I : b,
individualMax: t.autoScaling ? p : O,
zeroPosition: t.autoScaling ? z : L,
curve: t.autoScaling ? f : n,
plots: t.autoScaling ? c : V,
area: t.useArea ? this.mutableConfig.useIndividualScale ? this.createIndividualArea(t.autoScaling ? c : V, t.autoScaling ? z : L) : this.createArea(V) : "",
straight: t.autoScaling ? M : C,
groupId: this.scaleGroups[t.scaleLabel].groupId
};
});
},
plotSet() {
return this.activeSeriesWithStackRatios.filter((t) => t.type === "plot").map((t) => {
this.checkAutoScaleError(t);
const a = this.scaleGroups[t.scaleLabel].min, o = this.scaleGroups[t.scaleLabel].max;
t.absoluteValues.filter((C) => ![null, void 0].includes(C)).map((C) => (C - a) / (o - a));
const h = {
valueMin: a,
valueMax: o
}, l = {
max: t.scaleMax || Math.max(...t.absoluteValues) || 1,
min: t.scaleMin || Math.min(...t.absoluteValues) > 0 ? 0 : Math.min(...t.absoluteValues)
}, e = t.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, A = 1.0000001, b = this.calculateNiceScaleWithExactExtremes(l.min, l.max === l.min ? l.max * A : l.max, e), I = this.calculateNiceScaleWithExactExtremes(h.valueMin, h.valueMax === h.valueMin ? h.valueMax * A : h.valueMax, e), y = b.min >= 0 ? 0 : Math.abs(b.min), v = 0, O = b.max + y, p = I.max + Math.abs(v), G = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - t.cumulatedStackRatio) : 0, N = this.mutableConfig.isStacked ? this.drawingArea.height * t.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, L = this.drawingArea.bottom - G - N * y / O, z = this.drawingArea.bottom - G - N * v / p, V = t.series.map((C, M) => {
const x = this.mutableConfig.useIndividualScale ? (t.absoluteValues[M] + Math.abs(y)) / O : this.ratioToMax(C);
return {
x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * M),
y: this.checkNaN(this.drawingArea.bottom - G - N * x),
value: t.absoluteValues[M],
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[M] || ""
};
}), r = t.absoluteValues.map((C) => I.min >= 0 ? (C - Math.abs(I.min)) / (I.max - Math.abs(I.min)) : (C + Math.abs(I.min)) / (I.max + Math.abs(I.min))), c = t.series.map((C, M) => ({
x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * M),
y: this.checkNaN(this.drawingArea.bottom - G - (N * r[M] || 0)),
value: t.absoluteValues[M],
comment: t.comments && t.comments.slice(this.slicer.start, this.slicer.end)[M] || ""
})), n = b.ticks.map((C) => ({
y: C >= 0 ? L - N * (C / O) : L + N * Math.abs(C) / O,
value: C,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
})), f = I.ticks.map((C) => {
const M = (C - I.min) / (I.max - I.min);
return {
y: C >= 0 ? z - N * M : z + N * M,
value: C,
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: t
};
});
return this.scaleGroups[t.scaleLabel].name = t.name, this.scaleGroups[t.scaleLabel].groupName = t.scaleLabel, this.scaleGroups[t.scaleLabel].groupColor = this.FINAL_CONFIG.chart.grid.labels.yAxis.groupColor || t.color, this.scaleGroups[t.scaleLabel].color = t.color, this.scaleGroups[t.scaleLabel].scaleYLabels = t.autoScaling ? f : n, this.scaleGroups[t.scaleLabel].zeroPosition = t.autoScaling ? z : L, this.scaleGroups[t.scaleLabel].individualMax = t.autoScaling ? p : O, this.scaleGroups[t.scaleLabel].scaleLabel = t.scaleLabel, this.scaleGroups[t.scaleLabel].id = t.id, this.scaleGroups[t.scaleLabel].yOffset = G, this.scaleGroups[t.scaleLabel].individualHeight = N, this.scaleGroups[t.scaleLabel].autoScaleYLabels = f, this.scaleGroups[t.scaleLabel].unique = this.activeSeriesWithStackRatios.filter((C) => C.scaleLabel === t.scaleLabel).length === 1, {
...t,
yOffset: G,
autoScaleYLabels: f,
individualHeight: N,
scaleYLabels: t.autoScaling ? f : n,
individualScale: t.autoScaling ? I : b,
individualMax: t.autoScaling ? p : O,
zeroPosition: t.autoScaling ? z : L,
plots: t.autoScaling ? c : V,
groupId: this.scaleGroups[t.scaleLabel].groupId
};
});
},
drawingArea() {
function t(h) {
const l = /* @__PURE__ */ new Set();
return h.forEach((e) => {
const A = e.scaleLabel || "__noScaleLabel__";
l.add(A);
}), l.size;
}
const a = t(this.absoluteDataset.filter((h) => !this.segregatedSeries.includes(h.id))), o = this.mutableConfig.useIndividualScale && this.FINAL_CONFIG.chart.grid.labels.show ? a * (this.mutableConfig.isStacked ? 0 : this.FINAL_CONFIG.chart.grid.labels.yAxis.labelWidth) : 0;
return {
top: this.FINAL_CONFIG.chart.padding.top,
right: this.width - this.FINAL_CONFIG.chart.padding.right,
bottom: this.height - this.FINAL_CONFIG.chart.padding.bottom,
left: this.FINAL_CONFIG.chart.padding.left + o,
height: this.height - (this.FINAL_CONFIG.chart.padding.top + this.FINAL_CONFIG.chart.padding.bottom),
width: this.width - (this.FINAL_CONFIG.chart.padding.right + this.FINAL_CONFIG.chart.padding.left + o)
};
},
max() {
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax ? this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax : Math.max(...this.safeDataset.filter((t) => !this.segregatedSeries.includes(t.id)).map((t) => Math.max(...t.series)));
},
min() {
if (this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin !== null)
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin;
const t = Math.min(...this.safeDataset.filter((a) => !this.segregatedSeries.includes(a.id)).map((a) => Math.min(...a.series)));
return t > 0 ? 0 : t;
},
niceScale() {
return this.calculateNiceScaleWithExactExtremes(this.min, this.max < 0 ? 0 : this.max, this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps);
},
maxSeries() {
return this.slicer.end - this.slicer.start;
},
timeLabels() {
const t = Math.max(...this.dataset.map((o) => this.largestTriangleThreeBucketsArray({ data: o.series, threshold: this.FINAL_CONFIG.downsample.threshold }).length)), a = [];
for (let o = 0; o < t; o += 1)
a.push({
text: this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.values[o] || String(o),
absoluteIndex: o
});
return a.slice(this.slicer.start, this.slicer.end);
},
slot() {
return {
bar: this.drawingArea.width / this.maxSeries / this.safeDataset.filter((t) => t.type === "bar").filter((t) => !this.segregatedSeries.includes(t.id)).length,
plot: this.drawingArea.width / this.maxSeries,
line: this.drawingArea.width / this.maxSeries
};
},
barSlot() {
const t = this.safeDataset.filter((a) => a.type === "bar").filter((a) => !this.segregatedSeries.includes(a.id)).length;
return this.drawingArea.width / this.maxSeries / t - this.barPeriodGap * t;
},
barPeriodGap() {
return this.slot.line * this.FINAL_CONFIG.bar.periodGap;
},
maxSlot() {
return Math.max(...Object.values(this.slot).filter((t) => t !== 1 / 0));
},
table() {
if (this.safeDataset.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const t = this.relativeDataset.map((o) => ({
label: o.name,
color: o.color,
type: o.type
})), a = [];
return this.timeLabels.forEach((o, h) => {
const l = [o.text];
this.relativeDataset.forEach((e) => {
l.push(this.canShowValue(e.absoluteValues[h]) ? Number(e.absoluteValues[h].toFixed(this.FINAL_CONFIG.table.rounding)) : "");
}), a.push(l);
}), { head: t, body: a };
},
dataTable() {
const t = this.FINAL_CONFIG.table.showSum;
let a = [""].concat(this.relativeDataset.map((e) => e.name));
t && (a = a.concat(' <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>'));
let o = [];
for (let e = 0; e < this.maxSeries; e += 1) {
const A = this.relativeDataset.map((b) => b.absoluteValues[e] ?? 0).reduce((b, I) => b + I, 0);
o.push(
[
this.timeLabels[e].text ?? "-"
].concat(this.relativeDataset.map(
(b) => this.applyDataLabel(
b.type === "line" ? this.FINAL_CONFIG.line.labels.formatter : b.type === "bar" ? this.FINAL_CONFIG.bar.labels.formatter : this.FINAL_CONFIG.plot.labels.formatter,
b.absoluteValues[e] ?? 0,
this.dataLabel({
p: b.prefix || this.FINAL_CONFIG.chart.labels.prefix,
v: b.absoluteValues[e] ?? 0,
s: b.suffix || this.FINAL_CONFIG.chart.labels.suffix,
r: this.FINAL_CONFIG.table.rounding
})
)
)).concat(t ? (A ?? 0).toFixed(this.FINAL_CONFIG.table.rounding) : [])
);
}
const h = {
th: {
backgroundColor: this.FINAL_CONFIG.table.th.backgroundColor,
color: this.FINAL_CONFIG.table.th.color,
outline: this.FINAL_CONFIG.table.th.outline
},
td: {
backgroundColor: this.FINAL_CONFIG.table.td.backgroundColor,
color: this.FINAL_CONFIG.table.td.color,
outline: this.FINAL_CONFIG.table.td.outline
},
breakpoint: this.FINAL_CONFIG.table.responsiveBreakpoint
}, l = [this.FINAL_CONFIG.table.columnNames.period].concat(this.relativeDataset.map((e) => e.name)).concat(this.FINAL_CONFIG.table.columnNames.total);
return { head: a, body: o, config: h, colNames: l };
},
dataTooltipSlot() {
return {
datapoint: this.selectedSeries,
seriesIndex: this.selectedSerieIndex,
series: this.absoluteDataset,
bars: this.barSet,
lines: this.lineSet,
plots: this.plotSet,
config: this.FINAL_CONFIG
};
},
selectedSeries() {
return this.relativeDataset.map((t) => ({
slotAbsoluteIndex: t.slotAbsoluteIndex,
shape: t.shape || null,
name: t.name,
color: t.color,
type: t.type,
value: t.absoluteValues.find((a, o) => o === this.selectedSerieIndex),
comments: t.comments || [],
prefix: t.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: t.suffix || this.FINAL_CONFIG.chart.labels.suffix
}));
},
tooltipContent() {
let t = "", a = this.selectedSeries.map((l) => l.value).filter((l) => this.isSafeValue(l) && l !== null).reduce((l, e) => Math.abs(l) + Math.abs(e), 0);
const o = this.timeLabels[this.selectedSerieIndex], h = this.FINAL_CONFIG.chart.tooltip.customFormat;
return this.isFunction(h) && this.functionReturnsString(() => h({
seriesIndex: this.selectedSerieIndex,
datapoint: this.selectedSeries,
series: this.absoluteDataset,
bars: this.barSet,
lines: this.lineSet,
plots: this.plotSet,
config: this.FINAL_CONFIG
})) ? h({
seriesIndex: this.selectedSerieIndex,
datapoint: this.selectedSeries,
series: this.absoluteDataset,
bars: this.barSet,
lines: this.lineSet,
plots: this.plotSet,
config: this.FINAL_CONFIG
}) : (o && o.text && this.FINAL_CONFIG.chart.tooltip.showTimeLabel && (t += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid ${this.FINAL_CONFIG.chart.tooltip.borderColor}; width:100%">${o.text}</div>`), this.selectedSeries.forEach((l) => {
if (this.isSafeValue(l.value)) {
let e = "", A = "";
switch (this.icons[l.type]) {
case "bar":
e = `<svg viewBox="0 0 40 40" height="14" width="14">${this.$slots.pattern ? `<rect x="0" y="0" rx="1" stroke="none" height="40" width="40" fill="${l.color}" />` : ""}<rect x="0" y="0" rx="1" stroke="none" height="40" width="40" fill="${this.$slots.pattern ? `url(#pattern_${this.uniqueId}_${l.slotAbsoluteIndex}` : l.color}" /></svg>`;
break;
case "line":
!l.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(l.shape) ? A = `<circle cx="10" cy="8" r="4" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${l.color}" />` : l.shape === "triangle" ? A = `<path d="${D({ plot: { x: 10, y: 8 }, radius: 4, sides: 3, rotation: 0.52 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : l.shape === "square" ? A = `<path d="${D({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0.8 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : l.shape === "diamond" ? A = `<path d="${D({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : l.shape === "pentagon" ? A = `<path d="${D({ plot: { x: 10, y: 8 }, radius: 4, sides: 5, rotation: 0.95 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : l.shape === "hexagon" ? A = `<path d="${D({ plot: { x: 10, y: 8 }, radius: 4, sides: 6, rotation: 0 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : l.shape === "star" && (A = `<polygon stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${l.color}" points="${q({ plot: { x: 10, y: 8 }, radius: 4 })}" />`), e = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="1.5" x="0" y="6.5" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" height="3" width="20" fill="${l.color}" />${A}</svg>`;
break;
case "plot":
if (!l.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(l.shape)) {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${l.color}" /></svg>`;
break;
}
if (l.shape === "star") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" fill="${l.color}" points="${q({ plot: { x: 6, y: 6 }, radius: 5 })}" /></svg>`;
break;
}
if (l.shape === "triangle") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${D({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (l.shape === "square") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${D({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (l.shape === "diamond") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${D({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (l.shape === "pentagon") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${D({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (l.shape === "hexagon") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${D({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${l.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
}
t += `<div style="display:flex;flex-direction:row; align-items:center;gap:3px;"><div style="width:20px">${e}</div> ${l.name}: <b>${this.FINAL_CONFIG.chart.tooltip.showValue ? this.applyDataLabel(
l.type === "line" ? this.FINAL_CONFIG.line.labels.formatter : l.type === "bar" ? this.FINAL_CONFIG.bar.labels.formatter : this.FINAL_CONFIG.plot.labels.formatter,
l.value,
this.dataLabel({
p: l.prefix,
v: l.value,
s: l.suffix,
r: this.FINAL_CONFIG.chart.tooltip.roundingValue
}),
{ datapoint: l }
) : ""}</b> ${this.FINAL_CONFIG.chart.tooltip.showPercentage ? `(${U({
v: this.checkNaN(Math.abs(l.value) / a * 100),
s: "%",
r: this.FINAL_CONFIG.chart.tooltip.roundingPercentage
})})` : ""}</div>`, this.FINAL_CONFIG.chart.comments.showInTooltip && l.comments.length && l.comments.slice(this.slicer.start, this.slicer.end)[this.selectedSerieIndex] && (t += `<div class="vue-data-ui-tooltip-comment" style="background:${l.color}20; padding: 6px; margin-bottom: 6px; border-left: 1px solid ${l.color}">${l.comments.slice(this.slicer.start, this.slicer.end)[this.selectedSerieIndex]}</div>`);
}
}), `<div style="border-radius:4px;padding:12px;font-variant-numeric: tabular-nums;color:${this.FINAL_CONFIG.chart.tooltip.color}">${t}</div>`);
},
svg() {
return {
height: this.height,
width: this.width
};
},
yLabels() {
return this.niceScale.ticks.map((t) => ({
y: t >= 0 ? this.zero - this.drawingArea.height * this.ratioToMax(t) : this.zero + this.drawingArea.height * this.ratioToMax(Math.abs(t)),
value: t,
prefix: this.FINAL_CONFIG.chart.labels.prefix,
suffix: this.FINAL_CONFIG.chart.labels.suffix
}));
},
zero() {
return this.drawingArea.bottom - this.drawingArea.height * this.ratioToMax(this.relativeZero);
}
},
mounted() {
this.svgRef = this.$refs.svgRef, this.prepareChart(), this.setupSlicer(), document.addEventListener("mousemove", (t) => {
this.clientPosition = {
x: t.clientX,
y: t.clientY
};
});
},
methods: {
abbreviate: Ce,
adaptColorToBackground: Le,
applyDataLabel: ye,
assignStackRatios: Ae,
calcLinearProgression: _e,
calculateNiceScaleWithExactExtremes: Fe,
checkNaN: xe,
closestDecimal: Ne,
convertColorToHex: be,
convertConfigColors: me,
convertCustomPalette: Ie,
createCsvContent: fe,
createSmoothPath: ge,
createStraightPath: de,
createTSpans: ue,
dataLabel: U,
downloadCsv: he,
error: oe,
forceValidValue: ce,
functionReturnsString: ne,
hasDeepProperty: se,
isFunction: ae,
isSafeValue: ie,
largestTriangleThreeBucketsArray: re,
objectIsEmpty: le,
setOpacity: te,
shiftHue: ee,
translateSize: $,
treeShake: j,
useMouse: ze,
useNestedProp: Z,
createUid: X,
setUserOptionsVisibility(t = !1) {
this.showUserOptionsOnChartHover && (this.userOptionsVisible = t);
},
toggleAnnotator() {
this.isAnnotator = !this.isAnnotator;
},
selectTimeLabel(t, a) {
const o = this.relativeDataset.map((h) => ({
shape: h.shape || null,
name: h.name,
color: h.color,
type: h.type,
value: h.absoluteValues.find((l, e) => e === a),
comments: h.comments || [],
prefix: h.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: h.suffix || this.FINAL_CONFIG.chart.labels.suffix
}));
this.$emit("selectTimeLabel", {
datapoint: o,
absoluteIndex: t.absoluteIndex,
label: t.text
});
},
getHighlightAreaPosition(t) {
const a = this.drawingArea.left + this.drawingArea.width / this.maxSeries * (t.from - this.slicer.start), o = this.drawingArea.width / (this.slicer.end - this.slicer.start) * t.span < 0 ? 1e-5 : this.drawingArea.width / (this.slicer.end - this.slicer.start) * t.span;
return {
x: a < this.drawingArea.left ? this.drawingArea.left : a,
width: o
};
},
prepareConfig() {
const t = Se().vue_ui_xy;
if (!Object.keys(this.config || {}).length)
return t;
const a = this.useNestedProp({
userConfig: this.config,
defaultConfig: t
});
return this.config && this.hasDeepProperty(this.config, "chart.highlightArea") && (Array.isArray(this.config.chart.highlightArea) ? a.chart.highlightArea = this.config.chart.highlightArea : a.chart.highlightArea = [this.config.chart.highlightArea]), this.config && this.hasDeepProperty(this.config, "chart.grid.labels.yAxis.scaleMin") ? a.chart.grid.labels.yAxis.scaleMin = this.config.chart.grid.labels.yAxis.scaleMin : a.chart.grid.labels.yAxis.scaleMin = null, this.config && this.hasDeepProperty(this.config, "chart.grid.labels.yAxis.scaleMax") ? a.chart.grid.labels.yAxis.scaleMax = this.config.chart.grid.labels.yAxis.scaleMax : a.chart.grid.labels.yAxis.scaleMax = null, this.config && this.hasDeepProperty(this.config, "chart.zoom.startIndex") ? a.chart.zoom.startIndex = this.config.chart.zoom.startIndex : a.chart.zoom.startIndex = null, this.config && this.hasDeepProperty(this.config, "chart.zoom.endIndex") ? a.chart.zoom.endIndex = this.config.chart.zoom.endIndex : a.chart.zoom.endIndex = null, this.config && this.hasDeepProperty(this.config, "chart.grid.labels.yAxis.groupColor") ? a.chart.grid.labels.yAxis.groupColor = this.config.chart.grid.labels.yAxis.groupColor : a.chart.grid.labels.yAxis.groupColor = null, a.theme ? {
...Z({
userConfig: this.themes.vue_ui_xy[a.theme] || this.config,
defaultConfig: a
}),
customPalette: this.themePalettes[a.theme] || this.palette
} : a;
},
prepareChart() {
if (this.objectIsEmpty(this.dataset) ? this.error({
componentName: "VueUiXy",
type: "dataset"
}) : this.dataset.forEach((t, a) => {
[null, void 0].includes(t.name) && this.error({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "name (string)",
index: a
});
}), this.FINAL_CONFIG.showWarnings && this.dataset.forEach((t) => {
t.series.forEach((a, o) => {
this.isSafeValue(a) || console.warn(`VueUiXy has detected an unsafe value in your dataset:
-----> The serie '${t.name}' contains the value '${a}' at index ${o}.
'${a}' was converted to null to allow the chart to display.`);
});
}), this.showUserOptionsOnChartHover = this.FINAL_CONFIG.chart.userOptions.showOnChartHover, this.keepUserOptionState = this.FINAL_CONFIG.chart.userOptions.keepStateOnChartLeave, this.userOptionsVisible = !this.FINAL_CONFIG.chart.userOptions.showOnChartHover, this.mutableConfig = {
dataLabels: {
show: !0
},
showTooltip: this.FINAL_CONFIG.chart.tooltip.show === !0,
showTable: this.FINAL_CONFIG.showTable === !0,
isStacked: this.FINAL_CONFIG.chart.grid.labels.yAxis.stacked,
useIndividualScale: this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale
}, this.FINAL_CONFIG.responsive) {
const a = this.$refs.chart.parentNode, { height: o, width: h } = a.getBoundingClientRect();
let l = null, e = 0;
this.FINAL_CONFIG.chart.title.show && (l = this.$refs.chartTitle, e = l.getBoundingClientRect().height);
let A = null, b = 0;
this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset && (A = this.$refs.chartSlicer.$el, b = A.getBoundingClientRect().height);
let I = null, y = 0;
this.FINAL_CONFIG.chart.legend.show && (I = this.$refs.chartLegend, y = I.getBoundingClientRect().height);
let v = 0;
this.$refs.source && (v = this.$refs.source.getBoundingClientRect().height);
let O = 0;
this.$refs.noTitle && (O = this.$refs.noTitle.getBoundingClientRect().height), this.height = o - e - y - b - v - O, this.width = h, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes(), new ResizeObserver((G) => {
for (const N of G)
this.$refs.chartTitle && (e = this.$refs.chartTitle.getBoundingClientRect().height), this.$refs.chartSlicer && this.$refs.chartSlicer.$el && (b = this.$refs.chartSlicer.$el.getBoundingClientRect().height), this.$refs.chartLegend && (y = this.$refs.chartLegend.getBoundingClientRect().height), this.$refs.source && (v = this.$refs.source.getBoundingClientRect().height), requestAnimationFrame(() => {
this.height = N.contentBoxSize[0].blockSize - e - y - b - v - 24, this.width = N.contentBoxSize[0].inlineSize, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes();
});
}).observe(a);
} else
this.height = this.FINAL_CONFIG.chart.height, this.width = this.FINAL_CONFIG.chart.width, this.viewBox = `0 0 ${this.width} ${this.height}`, this.fontSizes.dataLabels = this.FINAL_CONFIG.chart.grid.labels.fontSize, this.fontSizes.yAxis = this.FINAL_CONFIG.chart.grid.labels.axis.fontSize, this.fontSizes.xAxis = this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.fontSize, this.fontSizes.plotLabels = this.FINAL_CONFIG.chart.labels.fontSize, this.plotRadii.plot = this.FINAL_CONFIG.plot.radius, this.plotRadii.line = this.FINAL_CONFIG.line.radius;
},
selectMinimapIndex(t) {
this.selectedMinimapIndex = t;
},
convertSizes() {
this.fontSizes