vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
971 lines (970 loc) • 124 kB
JavaScript
import { c as J, a as K, t as Q, z as j, p as $, V as q, O as R, f as U, L as ee, G as te, i as ie, a2 as re, a0 as ae, a3 as le, v as se, a4 as ne, d as he, B as oe, b as ce, q as de, R as ue, a5 as ge, r as fe, e as Ie, y as Ne, C as me, x as xe, a6 as be, Y as Fe, o as _e, s as Ae, w as ye, F as Le, A as Ce, u as Se } from "./index-WrV3SAID.js";
import { D as ke } from "./DataTable-DNPvKWC0.js";
import { _ as we } from "./Title-BR-xoRp4.js";
import { _ as Oe, u as Ge } from "./Tooltip-ho4JxRm-.js";
import { U as ve } from "./usePrinter-kVpf1iV8.js";
import { _ as pe } from "./Shape-DNIrFW-J.js";
import ze from "./BaseIcon-MqKW8Nkx.js";
import Me from "./vue-ui-table-sparkline-jstiTad-.js";
import Te from "./vue-ui-skeleton-Qec_XSRf.js";
import { S as Pe } from "./Slicer-B6THn4h_.js";
import Ve from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Z } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Re } from "./PackageVersion-1NslmM8M.js";
import { P as De } from "./PenAndPaper-BF1ZRVm3.js";
import { resolveComponent as P, openBlock as a, createElementBlock as s, normalizeClass as V, normalizeStyle as L, createBlock as D, createCommentVNode as c, createSlots as Be, withCtx as M, renderSlot as w, normalizeProps as H, guardReactiveProps as E, createVNode as X, createElementVNode as f, Fragment as I, renderList as m, toDisplayString as S, mergeProps as He, withDirectives as Ee, vModelCheckbox as We, createTextVNode as Ye } from "vue";
import { _ as Xe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const qe = J(), Ue = {
name: "vue-ui-xy",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
components: {
DataTable: ke,
Shape: pe,
Title: we,
Tooltip: Oe,
UserOptions: ve,
BaseIcon: ze,
TableSparkline: Me,
Skeleton: Te,
Slicer: Pe,
Accordion: Ve,
PackageVersion: Re,
PenAndPaper: De
},
data() {
this.dataset.forEach((u, t) => {
[null, void 0].includes(u.series) && this.error({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "series (number[])",
index: t
});
});
const i = this.config.downsample && this.config.downsample.threshold ? this.config.downsample.threshold : 500, l = Math.max(...this.dataset.map((u) => this.largestTriangleThreeBucketsArray({ data: u.series, threshold: i }).length)), o = {
start: 0,
end: l
};
return {
themePalettes: K,
themes: Q,
slicerStep: 0,
selectedScale: null,
CTX: null,
CANVAS: null,
opacity: j,
useSafeValues: !0,
palette: $,
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: J(),
step: 0,
tableStep: 0,
titleStep: 0,
slicer: o,
__to__: null,
maxX: l,
showSparklineTable: !0,
segregateStep: 0,
sliderId: qe,
fontSizes: {
xAxis: 18,
yAxis: 12,
dataLabels: 20,
plotLabels: 10
},
plotRadii: {
plot: 3,
line: 3
},
selectedMinimapIndex: null,
showUserOptionsOnChartHover: !1,
keepUserOptionState: !0,
userOptionsVisible: !0
};
},
watch: {
dataset: {
handler(i, l) {
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(i, l) {
this.FINAL_CONFIG = this.prepareConfig(), this.prepareChart(), this.titleStep += 1, this.tableStep += 1;
},
deep: !0
}
},
computed: {
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 i = this.datasetWithIds.filter((t) => !this.segregatedSeries.includes(t.id)), l = Math.max(...i.map((t) => t.series.length)), o = [];
for (let t = 0; t < l; t += 1)
o.push(i.map((e) => e.series[t] || 0).reduce((e, x) => (e || 0) + (x || 0), 0));
const u = Math.min(...o);
return o.map((t) => t + (u < 0 ? Math.abs(u) : 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 i = this.lineSet.map((t) => ({
name: t.name,
color: t.color,
scale: t.individualScale,
scaleYLabels: t.scaleYLabels,
zero: t.zeroPosition,
max: t.individualMax,
scaleLabel: t.scaleLabel || "",
id: t.id,
yOffset: t.yOffset || 0,
individualHeight: t.individualHeight || this.drawingArea.height,
autoScaleYLabels: t.autoScaleYLabels
})), l = this.barSet.map((t) => ({
name: t.name,
color: t.color,
scale: t.individualScale,
scaleYLabels: t.scaleYLabels,
zero: t.zeroPosition,
max: t.individualMax,
scaleLabel: t.scaleLabel || "",
id: t.id,
yOffset: t.yOffset || 0,
individualHeight: t.individualHeight || this.drawingArea.height
})), o = this.plotSet.map((t) => ({
name: t.name,
color: t.color,
scale: t.individualScale,
scaleYLabels: t.scaleYLabels,
// FIX
zero: t.zeroPosition,
max: t.individualMax,
scaleLabel: t.scaleLabel || "",
id: t.id,
yOffset: t.yOffset || 0,
individualHeight: t.individualHeight || this.drawingArea.height
})), u = [...i, ...l, ...o].flatMap((t) => t).length;
return [...i, ...l, ...o].flatMap((t, e) => ({
id: t.id,
scaleLabel: t.scaleLabel,
name: t.name,
color: t.color,
scale: t.scale,
yOffset: t.yOffset,
individualHeight: t.individualHeight,
x: this.mutableConfig.isStacked ? this.drawingArea.left : this.drawingArea.left / u * (e + 1),
yLabels: t.scaleYLabels || t.scale.ticks.map((x) => ({
y: x >= 0 ? t.zero - t.individualHeight * (x / t.max) : t.zero + t.individualHeight * Math.abs(x) / t.max,
value: x
}))
}));
},
isDataset() {
return !!this.dataset && this.dataset.length;
},
chartFont() {
const i = document.getElementById(`vue-ui-xy_${this.uniqueId}`);
return window.getComputedStyle(i, null).getPropertyValue("font-family");
},
FINAL_CONFIG: {
get: function() {
return this.prepareConfig();
},
set: function(i) {
return i;
}
},
hasHighlightArea() {
return Array.isArray(this.FINAL_CONFIG.chart.highlightArea) ? this.FINAL_CONFIG.chart.highlightArea.some((i) => i.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((l) => ({
...l,
span: l.from === l.to ? 1 : l.to < l.from ? 0 : l.to - l.from + 1
}));
const i = this.FINAL_CONFIG.chart.highlightArea;
return [{ ...i, span: i.from === i.to ? 1 : i.to < i.from ? 0 : i.to - i.from + 1 }];
},
xPadding() {
return this.FINAL_CONFIG.chart.grid.position === "middle" ? 0 : this.drawingArea.width / this.maxSeries / 2;
},
relativeZero() {
return this.niceScale.min >= 0 ? 0 : Math.abs(this.niceScale.min);
},
absoluteMax() {
return this.niceScale.max + this.relativeZero;
},
datasetWithIds() {
return this.useSafeValues ? this.dataset.map((i, l) => ({
...i,
series: this.largestTriangleThreeBucketsArray({
data: i.series,
threshold: this.FINAL_CONFIG.downsample.threshold
}),
id: `uniqueId_${l}`
})) : this.dataset;
},
safeDataset() {
return this.useSafeValues ? this.dataset.map((i, l) => {
const o = this.largestTriangleThreeBucketsArray({
data: i.series,
threshold: this.FINAL_CONFIG.downsample.threshold
});
return {
...i,
series: o.map((u) => this.isSafeValue(u) ? u : null).slice(this.slicer.start, this.slicer.end),
color: this.convertColorToHex(i.color ? i.color : this.customPalette[l] ? this.customPalette[l] : this.palette[l]),
id: `uniqueId_${l}`
};
}) : this.dataset;
},
relativeDataset() {
return this.safeDataset.map((i, l) => ({
...i,
series: i.series.map((o) => o + this.relativeZero),
absoluteValues: i.series
})).filter((i) => !this.segregatedSeries.includes(i.id));
},
tableSparklineDataset() {
return this.relativeDataset.map((i) => {
const l = i.absoluteValues.map((o) => [void 0, null].includes(o) ? 0 : o);
return {
id: i.id,
name: i.name,
color: i.color,
values: this.fillArray(this.maxSeries, l)
};
});
},
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((i, l) => ({
absoluteIndex: l,
...i,
series: i.series.map((o) => o + this.relativeZero),
absoluteValues: i.series,
segregate: () => this.segregate(i),
isSegregated: this.segregatedSeries.includes(i.id)
}));
},
barSet() {
return this.activeSeriesWithStackRatios.filter((i) => i.type === "bar").map((i, l) => {
this.checkAutoScaleError(i);
const o = Math.min(...i.absoluteValues.filter((g) => ![null, void 0].includes(g))), u = Math.max(...i.absoluteValues.filter((g) => ![null, void 0].includes(g))), e = {
ratios: i.absoluteValues.filter((g) => ![null, void 0].includes(g)).map((g) => (g - o) / (u - o)),
valueMin: o,
valueMax: u < 0 ? 0 : u
}, x = {
max: i.scaleMax || Math.max(...i.absoluteValues) || 1,
min: i.scaleMin || Math.min(...i.absoluteValues.filter((g) => ![void 0, null].includes(g))) > 0 ? 0 : Math.min(...i.absoluteValues.filter((g) => ![null, void 0].includes(g)))
}, A = i.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, k = 1.0000001, N = this.calculateNiceScaleWithExactExtremes(x.min, x.max === x.min ? x.max * k : x.max, A), b = this.calculateNiceScaleWithExactExtremes(e.valueMin, e.valueMax === e.valueMin ? e.valueMax * k : e.valueMax, A), T = N.min >= 0 ? 0 : Math.abs(N.min), v = 0, p = N.max + T, O = b.max + Math.abs(v), _ = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - i.cumulatedStackRatio) : 0, C = this.mutableConfig.isStacked ? this.drawingArea.height * i.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, z = this.drawingArea.bottom - _ - C * T / p, r = this.drawingArea.bottom - _ - C * v / O, h = this.absoluteDataset.filter((g) => g.type === "bar").filter((g) => !this.segregatedSeries.includes(g.id)).length, n = i.series.map((g, F) => {
const W = this.mutableConfig.useIndividualScale ? (i.absoluteValues[F] + T) / p : this.ratioToMax(g), Y = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * F : this.drawingArea.left + this.slot.bar * l + this.slot.bar * F * h - this.barSlot / 2 - l * this.barPeriodGap;
return {
yOffset: this.checkNaN(_),
individualHeight: this.checkNaN(C),
x: this.checkNaN(Y),
y: this.drawingArea.bottom - _ - C * W,
value: i.absoluteValues[F],
zeroPosition: this.checkNaN(z),
individualMax: this.checkNaN(p),
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
};
}), d = i.absoluteValues.map((g) => b.min >= 0 ? (g - Math.abs(b.min)) / (b.max - Math.abs(b.min)) : (g + Math.abs(b.min)) / (b.max + Math.abs(b.min))), B = i.series.map((g, F) => {
const W = this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.drawingArea.left + this.drawingArea.width / this.maxSeries * F : this.drawingArea.left - this.slot.bar / 2 + this.slot.bar * l + this.slot.bar * F * this.absoluteDataset.filter((Y) => Y.type === "bar").filter((Y) => !this.segregatedSeries.includes(Y.id)).length;
return {
yOffset: this.checkNaN(_),
individualHeight: this.checkNaN(C),
x: this.checkNaN(W),
y: this.checkNaN(this.drawingArea.bottom - this.checkNaN(_) - (this.checkNaN(C) * d[F] || 0)),
value: i.absoluteValues[F],
zeroPosition: this.checkNaN(z),
individualMax: this.checkNaN(p),
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
};
}), y = N.ticks.map((g) => ({
y: g >= 0 ? z - C * (g / p) : z + C * Math.abs(g) / p,
value: g,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
})), G = b.ticks.map((g) => {
const F = (g - b.min) / (b.max - b.min);
return {
y: g >= 0 ? r - C * F : r + C * F,
value: g,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
};
});
return {
...i,
yOffset: _,
autoScaleYLabels: G,
individualHeight: C,
scaleYLabels: i.autoScaling ? G : y,
individualScale: i.autoScaling ? b : N,
individualMax: i.autoScaling ? O : p,
zeroPosition: i.autoScaling ? r : z,
plots: i.autoScaling ? B : n
};
});
},
activeSeriesLength() {
return this.absoluteDataset.length;
},
activeSeriesWithStackRatios() {
return this.assignStackRatios(this.absoluteDataset.filter((i) => !this.segregatedSeries.includes(i.id)));
},
lineSet() {
return this.activeSeriesWithStackRatios.filter((i) => i.type === "line").map((i) => {
this.checkAutoScaleError(i);
const l = Math.min(...i.absoluteValues.filter((g) => ![void 0, null].includes(g))), o = Math.max(...i.absoluteValues.filter((g) => ![void 0, null].includes(g))) || 1, t = {
ratios: i.absoluteValues.filter((g) => ![null, void 0].includes(g)).map((g) => (g - l) / (o - l)),
valueMin: l,
valueMax: o
}, e = {
max: i.scaleMax || Math.max(...i.absoluteValues) || 1,
min: i.scaleMin || (Math.min(...i.absoluteValues) > 0 ? 0 : Math.min(...i.absoluteValues))
}, x = i.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, A = 1.0000001, k = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * A : e.max, x), N = this.calculateNiceScaleWithExactExtremes(t.valueMin, t.valueMax === t.valueMin ? t.valueMax * A : t.valueMax, x), b = k.min >= 0 ? 0 : Math.abs(k.min), T = 0, v = k.max + Math.abs(b), p = N.max + Math.abs(T), O = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - i.cumulatedStackRatio) : 0, _ = this.mutableConfig.isStacked ? this.drawingArea.height * i.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, C = this.drawingArea.bottom - O - _ * b / v, z = this.drawingArea.bottom - O - _ * T / p, r = i.series.map((g, F) => {
const W = this.mutableConfig.useIndividualScale ? (i.absoluteValues[F] + Math.abs(b)) / v : this.ratioToMax(g);
return {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * F),
y: this.checkNaN(this.drawingArea.bottom - O - _ * W),
value: i.absoluteValues[F],
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
};
}), h = i.absoluteValues.map((g) => N.min >= 0 ? (g - Math.abs(N.min)) / (N.max - Math.abs(N.min)) : (g + Math.abs(N.min)) / (N.max + Math.abs(N.min))), n = i.series.map((g, F) => [void 0, null].includes(i.absoluteValues[F]) ? {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * F),
y: C,
value: i.absoluteValues[F],
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
} : {
x: this.checkNaN(this.drawingArea.left + this.slot.line / 2 + this.slot.line * F),
y: this.checkNaN(this.drawingArea.bottom - O - (_ * h[F] || 0)),
value: i.absoluteValues[F],
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[F] || ""
}), d = this.createSmoothPath(r), B = this.createSmoothPath(n), y = k.ticks.map((g) => ({
y: g >= 0 ? C - _ * (g / v) : C + _ * Math.abs(g) / v,
value: g,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
})), G = N.ticks.map((g) => {
const F = (g - N.min) / (N.max - N.min);
return {
y: g >= 0 ? z - _ * F : z + _ * F,
value: g,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
};
});
return {
...i,
yOffset: O,
autoScaleYLabels: G,
individualHeight: _,
scaleYLabels: i.autoScaling ? G : y,
individualScale: i.autoScaling ? N : k,
individualMax: i.autoScaling ? p : v,
zeroPosition: i.autoScaling ? z : C,
curve: i.autoScaling ? B : d,
plots: i.autoScaling ? n : r,
area: i.useArea ? this.mutableConfig.useIndividualScale ? this.createIndividualArea(i.autoScaling ? n : r, i.autoScaling ? z : C) : this.createArea(r) : ""
};
});
},
plotSet() {
return this.activeSeriesWithStackRatios.filter((i) => i.type === "plot").map((i) => {
this.checkAutoScaleError(i);
const l = Math.min(...i.absoluteValues.filter((y) => ![null, void 0].includes(y))), o = Math.max(...i.absoluteValues.filter((y) => ![null, void 0].includes(y))) || 1, t = {
ratios: i.absoluteValues.filter((y) => ![null, void 0].includes(y)).map((y) => (y - l) / (o - l)),
valueMin: l,
valueMax: o
}, e = {
max: i.scaleMax || Math.max(...i.absoluteValues) || 1,
min: i.scaleMin || Math.min(...i.absoluteValues) > 0 ? 0 : Math.min(...i.absoluteValues)
}, x = i.scaleSteps || this.FINAL_CONFIG.chart.grid.labels.yAxis.commonScaleSteps, A = 1.0000001, k = this.calculateNiceScaleWithExactExtremes(e.min, e.max === e.min ? e.max * A : e.max, x), N = this.calculateNiceScaleWithExactExtremes(t.valueMin, t.valueMax === t.valueMin ? t.valueMax * A : t.valueMax, x), b = k.min >= 0 ? 0 : Math.abs(k.min), T = 0, v = k.max + b, p = N.max + Math.abs(T), O = this.mutableConfig.isStacked ? this.drawingArea.height * (1 - i.cumulatedStackRatio) : 0, _ = this.mutableConfig.isStacked ? this.drawingArea.height * i.stackRatio - this.FINAL_CONFIG.chart.grid.labels.yAxis.gap : this.drawingArea.height, C = this.drawingArea.bottom - O - _ * b / v, z = this.drawingArea.bottom - O - _ * T / p, r = i.series.map((y, G) => {
const g = this.mutableConfig.useIndividualScale ? (i.absoluteValues[G] + Math.abs(b)) / v : this.ratioToMax(y);
return {
x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * G),
y: this.checkNaN(this.drawingArea.bottom - O - _ * g),
value: i.absoluteValues[G],
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[G] || ""
};
}), h = i.absoluteValues.map((y) => N.min >= 0 ? (y - Math.abs(N.min)) / (N.max - Math.abs(N.min)) : (y + Math.abs(N.min)) / (N.max + Math.abs(N.min))), n = i.series.map((y, G) => ({
x: this.checkNaN(this.drawingArea.left + this.slot.plot / 2 + this.slot.plot * G),
y: this.checkNaN(this.drawingArea.bottom - O - (_ * h[G] || 0)),
value: i.absoluteValues[G],
comment: i.comments && i.comments.slice(this.slicer.start, this.slicer.end)[G] || ""
})), d = k.ticks.map((y) => ({
y: y >= 0 ? C - _ * (y / v) : C + _ * Math.abs(y) / v,
value: y,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
})), B = N.ticks.map((y) => {
const G = (y - N.min) / (N.max - N.min);
return {
y: y >= 0 ? z - _ * G : z + _ * G,
value: y,
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix,
datapoint: i
};
});
return {
...i,
yOffset: O,
autoScaleYLabels: B,
individualHeight: _,
scaleYLabels: i.autoScaling ? B : d,
individualScale: i.autoScaling ? N : k,
individualMax: i.autoScaling ? p : v,
zeroPosition: i.autoScaling ? z : C,
plots: i.autoScaling ? n : r
};
});
},
drawingArea() {
const i = this.mutableConfig.useIndividualScale && this.FINAL_CONFIG.chart.grid.labels.show ? this.absoluteDataset.filter((l) => !this.segregatedSeries.includes(l.id)).length * (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 + i,
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 + i)
};
},
max() {
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax ? this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMax : Math.max(...this.safeDataset.filter((i) => !this.segregatedSeries.includes(i.id)).map((i) => Math.max(...i.series)));
},
min() {
if (this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin !== null)
return this.FINAL_CONFIG.chart.grid.labels.yAxis.scaleMin;
const i = Math.min(...this.safeDataset.filter((l) => !this.segregatedSeries.includes(l.id)).map((l) => Math.min(...l.series)));
return i > 0 ? 0 : i;
},
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 i = Math.max(...this.dataset.map((o) => this.largestTriangleThreeBucketsArray({ data: o.series, threshold: this.FINAL_CONFIG.downsample.threshold }).length)), l = [];
for (let o = 0; o < i; o += 1)
l.push({
text: this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.values[o] || String(o),
absoluteIndex: o
});
return l.slice(this.slicer.start, this.slicer.end);
},
slot() {
return {
bar: this.drawingArea.width / this.maxSeries / this.safeDataset.filter((i) => i.type === "bar").filter((i) => !this.segregatedSeries.includes(i.id)).length,
plot: this.drawingArea.width / this.maxSeries,
line: this.drawingArea.width / this.maxSeries
};
},
barSlot() {
const i = this.safeDataset.filter((l) => l.type === "bar").filter((l) => !this.segregatedSeries.includes(l.id)).length;
return this.drawingArea.width / this.maxSeries / i - this.barPeriodGap * i;
},
barPeriodGap() {
return this.slot.line * this.FINAL_CONFIG.bar.periodGap;
},
maxSlot() {
return Math.max(...Object.values(this.slot).filter((i) => i !== 1 / 0));
},
table() {
if (this.safeDataset.length === 0) return { head: [], body: [], config: {}, columnNames: [] };
const i = this.relativeDataset.map((o) => ({
label: o.name,
color: o.color,
type: o.type
})), l = [];
return this.timeLabels.forEach((o, u) => {
const t = [o.text];
this.relativeDataset.forEach((e) => {
t.push(this.canShowValue(e.absoluteValues[u]) ? Number(e.absoluteValues[u].toFixed(this.FINAL_CONFIG.table.rounding)) : "");
}), l.push(t);
}), { head: i, body: l };
},
dataTable() {
const i = this.FINAL_CONFIG.table.showSum;
let l = [""].concat(this.relativeDataset.map((e) => e.name));
i && (l = l.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 x = this.relativeDataset.map((A) => A.absoluteValues[e] ?? 0).reduce((A, k) => A + k, 0);
o.push(
[
this.timeLabels[e].text ?? "-"
].concat(this.relativeDataset.map(
(A) => this.applyDataLabel(
A.type === "line" ? this.FINAL_CONFIG.line.labels.formatter : A.type === "bar" ? this.FINAL_CONFIG.bar.labels.formatter : this.FINAL_CONFIG.plot.labels.formatter,
A.absoluteValues[e] ?? 0,
this.dataLabel({
p: A.prefix || this.FINAL_CONFIG.chart.labels.prefix,
v: A.absoluteValues[e] ?? 0,
s: A.suffix || this.FINAL_CONFIG.chart.labels.suffix,
r: this.FINAL_CONFIG.table.rounding
})
)
)).concat(i ? (x ?? 0).toFixed(this.FINAL_CONFIG.table.rounding) : [])
);
}
const u = {
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
}, t = [this.FINAL_CONFIG.table.columnNames.period].concat(this.relativeDataset.map((e) => e.name)).concat(this.FINAL_CONFIG.table.columnNames.total);
return { head: l, body: o, config: u, colNames: t };
},
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((i) => ({
shape: i.shape || null,
name: i.name,
color: i.color,
type: i.type,
value: i.absoluteValues.find((l, o) => o === this.selectedSerieIndex),
comments: i.comments || [],
prefix: i.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: i.suffix || this.FINAL_CONFIG.chart.labels.suffix
}));
},
tooltipContent() {
let i = "", l = this.selectedSeries.map((t) => t.value).filter((t) => this.isSafeValue(t) && t !== null).reduce((t, e) => Math.abs(t) + Math.abs(e), 0);
const o = this.timeLabels[this.selectedSerieIndex], u = this.FINAL_CONFIG.chart.tooltip.customFormat;
return this.isFunction(u) && this.functionReturnsString(() => u({
seriesIndex: this.selectedSerieIndex,
datapoint: this.selectedSeries,
series: this.absoluteDataset,
bars: this.barSet,
lines: this.lineSet,
plots: this.plotSet,
config: this.FINAL_CONFIG
})) ? u({
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 && (i += `<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((t) => {
if (this.isSafeValue(t.value)) {
let e = "", x = "";
switch (this.icons[t.type]) {
case "bar":
e = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" rx="1" stroke="none" height="12" width="12" fill="${t.color}" /></svg>`;
break;
case "line":
!t.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(t.shape) ? x = `<circle cx="10" cy="8" r="4" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${t.color}" />` : t.shape === "triangle" ? x = `<path d="${R({ plot: { x: 10, y: 8 }, radius: 4, sides: 3, rotation: 0.52 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "square" ? x = `<path d="${R({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0.8 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "diamond" ? x = `<path d="${R({ plot: { x: 10, y: 8 }, radius: 4, sides: 4, rotation: 0 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "pentagon" ? x = `<path d="${R({ plot: { x: 10, y: 8 }, radius: 4, sides: 5, rotation: 0.95 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "hexagon" ? x = `<path d="${R({ plot: { x: 10, y: 8 }, radius: 4, sides: 6, rotation: 0 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" />` : t.shape === "star" && (x = `<polygon stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="0.5" fill="${t.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="${t.color}" />${x}</svg>`;
break;
case "plot":
if (!t.shape || !["star", "triangle", "square", "diamond", "pentagon", "hexagon"].includes(t.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="${t.color}" /></svg>`;
break;
}
if (t.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="${t.color}" points="${q({ plot: { x: 6, y: 6 }, radius: 5 })}" /></svg>`;
break;
}
if (t.shape === "triangle") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${R({ plot: { x: 6, y: 6 }, radius: 6, sides: 3, rotation: 0.52 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "square") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${R({ plot: { x: 6, y: 6 }, radius: 6, sides: 4, rotation: 0.8 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "diamond") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${R({ plot: { x: 6, y: 6 }, radius: 5, sides: 4, rotation: 0 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "pentagon") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${R({ plot: { x: 6, y: 6 }, radius: 5, sides: 5, rotation: 0.95 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
if (t.shape === "hexagon") {
e = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${R({ plot: { x: 6, y: 6 }, radius: 5, sides: 6, rotation: 0 }).path}" fill="${t.color}" stroke="${this.FINAL_CONFIG.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
break;
}
}
i += `<div style="display:flex;flex-direction:row; align-items:center;gap:3px;"><div style="width:20px">${e}</div> ${t.name}: <b>${this.FINAL_CONFIG.chart.tooltip.showValue ? this.applyDataLabel(
t.type === "line" ? this.FINAL_CONFIG.line.labels.formatter : t.type === "bar" ? this.FINAL_CONFIG.bar.labels.formatter : this.FINAL_CONFIG.plot.labels.formatter,
t.value,
this.dataLabel({
p: t.prefix,
v: t.value,
s: t.suffix,
r: this.FINAL_CONFIG.chart.tooltip.roundingValue
}),
{ datapoint: t }
) : ""}</b> ${this.FINAL_CONFIG.chart.tooltip.showPercentage ? `(${U({
v: this.checkNaN(Math.abs(t.value) / l * 100),
s: "%",
r: this.FINAL_CONFIG.chart.tooltip.roundingPercentage
})})` : ""}</div>`, this.FINAL_CONFIG.chart.comments.showInTooltip && t.comments.length && t.comments.slice(this.slicer.start, this.slicer.end)[this.selectedSerieIndex] && (i += `<div class="vue-data-ui-tooltip-comment" style="background:${t.color}20; padding: 6px; margin-bottom: 6px; border-left: 1px solid ${t.color}">${t.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}">${i}</div>`);
},
svg() {
return {
height: this.height,
width: this.width
};
},
yLabels() {
return this.niceScale.ticks.map((i) => ({
y: i >= 0 ? this.zero - this.drawingArea.height * this.ratioToMax(i) : this.zero + this.drawingArea.height * this.ratioToMax(Math.abs(i)),
value: i,
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.prepareChart(), this.setupSlicer(), document.addEventListener("mousemove", (i) => {
this.clientPosition = {
x: i.clientX,
y: i.clientY
};
});
},
methods: {
abbreviate: ee,
adaptColorToBackground: te,
applyDataLabel: ie,
assignStackRatios: re,
calcLinearProgression: ae,
calculateNiceScaleWithExactExtremes: le,
checkNaN: se,
closestDecimal: ne,
convertColorToHex: he,
convertConfigColors: oe,
convertCustomPalette: ce,
createCsvContent: de,
createSmoothPath: ue,
createTSpans: ge,
dataLabel: U,
downloadCsv: fe,
error: Ie,
functionReturnsString: Ne,
hasDeepProperty: me,
isFunction: xe,
isSafeValue: be,
largestTriangleThreeBucketsArray: Fe,
objectIsEmpty: _e,
setOpacity: Ae,
shiftHue: ye,
translateSize: Le,
treeShake: Ce,
useMouse: Ge,
useNestedProp: Z,
setUserOptionsVisibility(i = !1) {
this.showUserOptionsOnChartHover && (this.userOptionsVisible = i);
},
toggleAnnotator() {
this.isAnnotator = !this.isAnnotator;
},
selectTimeLabel(i, l) {
const o = this.relativeDataset.map((u) => ({
shape: u.shape || null,
name: u.name,
color: u.color,
type: u.type,
value: u.absoluteValues.find((t, e) => e === l),
comments: u.comments || [],
prefix: u.prefix || this.FINAL_CONFIG.chart.labels.prefix,
suffix: u.suffix || this.FINAL_CONFIG.chart.labels.suffix
}));
this.$emit("selectTimeLabel", {
datapoint: o,
absoluteIndex: i.absoluteIndex,
label: i.text
});
},
getHighlightAreaPosition(i) {
const l = this.drawingArea.left + this.drawingArea.width / this.maxSeries * (i.from - this.slicer.start), o = this.drawingArea.width / (this.slicer.end - this.slicer.start) * i.span < 0 ? 1e-5 : this.drawingArea.width / (this.slicer.end - this.slicer.start) * i.span;
return {
x: l < this.drawingArea.left ? this.drawingArea.left : l,
width: o
};
},
prepareConfig() {
const i = Se().vue_ui_xy;
if (!Object.keys(this.config || {}).length)
return i;
const l = this.useNestedProp({
userConfig: this.config,
defaultConfig: i
});
return this.config && this.hasDeepProperty(this.config, "chart.highlightArea") && (Array.isArray(this.config.chart.highlightArea) ? l.chart.highlightArea = this.config.chart.highlightArea : l.chart.highlightArea = [this.config.chart.highlightArea]), this.config && this.hasDeepProperty(this.config, "chart.grid.labels.yAxis.scaleMin") ? l.chart.grid.labels.yAxis.scaleMin = this.config.chart.grid.labels.yAxis.scaleMin : l.chart.grid.labels.yAxis.scaleMin = null, this.config && this.hasDeepProperty(this.config, "chart.grid.labels.yAxis.scaleMax") ? l.chart.grid.labels.yAxis.scaleMax = this.config.chart.grid.labels.yAxis.scaleMax : l.chart.grid.labels.yAxis.scaleMax = null, this.config && this.hasDeepProperty(this.config, "chart.zoom.startIndex") ? l.chart.zoom.startIndex = this.config.chart.zoom.startIndex : l.chart.zoom.startIndex = null, this.config && this.hasDeepProperty(this.config, "chart.zoom.endIndex") ? l.chart.zoom.endIndex = this.config.chart.zoom.endIndex : l.chart.zoom.endIndex = null, l.theme ? {
...Z({
userConfig: this.themes.vue_ui_xy[l.theme] || this.config,
defaultConfig: l
}),
customPalette: this.themePalettes[l.theme] || this.palette
} : l;
},
prepareChart() {
if (this.objectIsEmpty(this.dataset) ? this.error({
componentName: "VueUiXy",
type: "dataset"
}) : this.dataset.forEach((i, l) => {
[null, void 0].includes(i.name) && this.error({
componentName: "VueUiXy",
type: "datasetSerieAttribute",
property: "name (string)",
index: l
});
}), this.FINAL_CONFIG.showWarnings && this.dataset.forEach((i) => {
i.series.forEach((l, o) => {
this.isSafeValue(l) || console.warn(`VueUiXy has detected an unsafe value in your dataset:
-----> The serie '${i.name}' contains the value '${l}' at index ${o}.
'${l}' 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 l = this.$refs.chart.parentNode, { height: o, width: u } = l.getBoundingClientRect();
let t = null, e = 0;
this.FINAL_CONFIG.chart.title.show && (t = this.$refs.chartTitle, e = t.getBoundingClientRect().height);
let x = null, A = 0;
this.FINAL_CONFIG.chart.zoom.show && this.maxX > 6 && this.isDataset && (x = this.$refs.chartSlicer.$el, A = x.getBoundingClientRect().height);
let k = null, N = 0;
this.FINAL_CONFIG.chart.legend.show && (k = this.$refs.chartLegend, N = k.getBoundingClientRect().height);
let b = 0;
this.$refs.source && (b = this.$refs.source.getBoundingClientRect().height);
let T = 0;
this.$refs.noTitle && (T = this.$refs.noTitle.getBoundingClientRect().height), this.height = o - e - N - A - b - T, this.width = u, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes(), new ResizeObserver((p) => {
for (const O of p)
this.$refs.chartTitle && (e = this.$refs.chartTitle.getBoundingClientRect().height), this.$refs.chartSlicer && this.$refs.chartSlicer.$el && (A = this.$refs.chartSlicer.$el.getBoundingClientRect().height), this.$refs.chartLegend && (N = this.$refs.chartLegend.getBoundingClientRect().height), this.$refs.source && (b = this.$refs.source.getBoundingClientRect().height), this.height = O.contentBoxSize[0].blockSize - e - N - A - b - 24, this.width = O.contentBoxSize[0].inlineSize, this.viewBox = `0 0 ${this.width < 0 ? 10 : this.width} ${this.height < 0 ? 10 : this.height}`, this.convertSizes();
}).observe(l);
} 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(i) {
this.selectedMinimapIndex = i;
},
convertSizes() {
this.fontSizes.dataLabels = this.translateSize({
relator: this.height,
adjuster: 400,
source: this.FINAL_CONFIG.chart.grid.labels.fontSize,
threshold: 10,
fallback: 10
}), this.fontSizes.yAxis = this.translateSize({
relator: this.width,
adjuster: 1e3,
source: this.FINAL_CONFIG.chart.grid.labels.axis.fontSize,
threshold: 10,
fallback: 10
}), this.fontSizes.xAxis = this.translateSize({
relator: this.width,
adjuster: 1e3,
source: this.FINAL_CONFIG.chart.grid.labels.xAxisLabels.fontSize,
threshold: 10,
fallback: 10
}), this.fontSizes.plotLabels = this.translateSize({
relator: this.width,
adjuster: 800,
source: this.FINAL_CONFIG.chart.labels.fontSize,
threshold: 10,
fallback: 10
}), this.plotRadii.plot = this.translateSize({
relator: this.width,
adjuster: 800,
source: this.FINAL_CONFIG.plot.radius,
threshold: 1,
fallback: 1
}), this.plotRadii.line = this.translateSize({
relator: this.width,
adjuster: 800,
source: this.FINAL_CONFIG.line.radius,
threshold: 1,
fallback: 1
});
},
toggleStack() {
this.mutableConfig.isStacked = !this.mutableConfig.isStacked, this.mutableConfig.isStacked ? this.mutableConfig.useIndividualScale = !0 : this.mutableConfig.useIndividualScale = this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale;
},
toggleTable() {
this.mutableConfig.showTable = !this.mutableConfig.showTable;
},
toggleLabels() {
this.mutableConfig.dataLabels.show = !this.mutableConfig.dataLabels.show;
},
toggleTooltip() {
this.mutableConfig.showTooltip = !this.mutableConfig.showTooltip;
},
checkAutoScaleError(i) {
i.autoScaling && (this.FINAL_CONFIG.chart.grid.labels.yAxis.useIndividualScale || console.warn(`VueUiXy (datapoint: ${i.name}) : autoScaling only works when config.chart.grid.labels.yAxis.useIndividualScale is set to true`), this.FINAL_CONFIG.chart.grid.labels.yAxis.stacked || console.warn(`VueUiXy (datapoint: ${i.name}) : autoScaling only works when config.chart.grid.labels.yAxis.stacked is set to true`));
},
createArea(i) {
if (!i[0]) return [-10, -10, "", -10, -10];
const l = { x: i[0].x, y: this.zero }, o = { x: i.at(-1).x, y: this.zero }, u = [];
return i.forEach((t) => {
u.push(`${t.x},${t.y} `);
}), [l.x, l.y, ...u, o.x, o.y].toString();
},
createIndividualArea(i, l) {
if (!i[0]) return [-10, -10, "", -10, -10];
const o = { x: i[0] ? i[0].x : Math.min(...i.filter((e) => !!e).map((e) => e.x)), y: l }, u = { x: i.at(-1) ? i.at(-1).x : Math.min(...i.filter((e) => !!e).map((e) => e.x)), y: l }, t = [];
return i.filter((e) => !!e).forEach((e) => {
t.push(`${e.x},${e.y} `);
}), [o.x, o.y, ...t, u.x, u.y].toString();
},
createStar: q,
createPolygonPath: R,
fillArray(i, l) {
let o = Array(i).fill(0);
for (let u = 0; u < l.length && u < i; u += 1)
o[u] = l[u];
return o;
},
async setupSlicer() {
(this.FINAL_CONFIG.chart.zoom.startIndex !== null || this.FINAL_CONFIG.chart.zoom.endIndex !== null) && this.$refs.chartSlicer ? (this.FINAL_CONFIG.chart.zoom.startIndex !== null && (await this.$nextTick(), await this.$nextTick(), this.$refs.chartSlicer.setStartValue(this.FINAL_CONFIG.chart.zoom.startIndex)), this.FINAL_CONFIG.chart.zoom.endIndex !== null && (await this.$nextTick(), await this.$nextTick(), this.$refs.chartSlicer.setEndValue(this.validSlicerEnd(this.FINAL_CONFIG.chart.zoom.endIndex + 1)))) : (this.slicer = {
start: 0,
end: Math.max(...this.dataset.map((i) => this.largestTriangleThreeBucketsArray({ data: i.series, threshold: this.FINAL_CONFIG.downsample.threshold }).length))
}, this.slicerStep += 1);
},
refreshSlicer() {
this.setupSlicer();
},
validSlicerEnd(i) {
const l = Math.max(...this.dataset.map((o) => this.largestTriangleThreeBucketsArray({ data: o.series, threshold: this.FINAL_CONFIG.downsample.threshold }).length));
return i > l ? l : i < 0 || this.FINAL_CONFIG.chart.zoom.startIndex !== null && i < this.FINAL_CONFIG.chart.zoom.startIndex ? this.FINAL_CONFIG.chart.zoom.startIndex !== null ? this.FINAL_CONFIG.chart.zoom.startIndex + 1 : 1 : i;
},
calcRectHeight(i) {
return i.value >= 0 ? this.checkNaN(this.zero - i.y <= 0 ? 1e-5 : this.zero - i.y) : this.checkNaN(i.y - this.zero <= 0 ? 1e-5 : i.y - this.zero);
},
calcIndividualHeight(i) {
return i.value >= 0 ? this.checkNaN(i.zeroPosition - i.y <= 0 ? 1e-5 : i.zeroPosition - i.y) : this.checkNaN(i.y - i.zeroPosition <= 0 ? 1e-5 : i.zeroPosition - i.y);
},
calcRectWidth() {
return this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? this.slot.line - this.drawingArea.width / this.maxSeries * 0.1 : this.slot.bar;
},
calcRectX(i) {
return this.mutableConfig.useIndividualScale && this.mutableConfig.isStacked ? i.x + this.drawingArea.width / this.maxSeries * 0.05 : i.x + this.slot.bar / 2;
},
calcRectY(i) {