vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
696 lines (695 loc) • 30 kB
JavaScript
import { useCssVars as Le, defineAsyncComponent as q, ref as f, useSlots as Re, onMounted as ge, computed as _, watch as me, shallowRef as je, onBeforeUnmount as He, createElementBlock as c, openBlock as v, unref as u, normalizeClass as J, createCommentVNode as m, createElementVNode as p, normalizeStyle as s, toDisplayString as A, withDirectives as Xe, createVNode as F, Fragment as K, renderList as Q, createBlock as qe, createSlots as Je, withCtx as z, renderSlot as O, mergeProps as ye, nextTick as Ke } from "vue";
import { u as Qe, a as Y } from "./useNestedProp-OFRiX4kU.js";
import { c as Ye, i as Ze, j as T, k as et, o as tt, g as ke, l as lt, ao as at, m as ot, a as B, d as V, v as nt, r as ut } from "./lib-BwysEpWI.js";
import { u as rt } from "./usePrinter-BJzHDpYF.js";
import { u as st } from "./useThemeCheck-DGJ31Vi5.js";
import { u as it } from "./useUserOptionState-BIvW1Kz7.js";
import { v as dt } from "./vClickOutside-C6WiFswA.js";
import { _ as vt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const he = { title: { backgroundColor: "#1A1A1A", color: "#CCCCCC", subtitle: { color: "#757575" } }, thead: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, tbody: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } }, Ce = { title: { backgroundColor: "#FFF8E1", color: "#424242", subtitle: { color: "#757575" } }, thead: { backgroundColor: "#FFF8E1", color: "#424242" }, tbody: { backgroundColor: "#FFF8E1", color: "#424242" } }, _e = { title: { backgroundColor: "#1E1E1E", color: "#FFF8E1", subtitle: { color: "#BDBDBD" } }, thead: { backgroundColor: "#1E1E1E", color: "#BDBDBD" }, tbody: { backgroundColor: "#1E1E1E", color: "#BDBDBD" } }, Ae = { title: { backgroundColor: "#1A1A1A", color: "#66CC66", subtitle: { color: "#99AA99" } }, thead: { backgroundColor: "#1A1A1A", color: "#99AA99" }, tbody: { backgroundColor: "#1A1A1A", color: "#99AA99" } }, xe = { title: { backgroundColor: "#fbfafa", color: "#8A9892", subtitle: { color: "#99AA99" } }, thead: { backgroundColor: "#fbfafa", color: "#8A9892" }, tbody: { backgroundColor: "#fbfafa", color: "#A0AC94" } }, Se = { title: { backgroundColor: "#f6f6fb", color: "#50606C", subtitle: { color: "#718890" } }, thead: { backgroundColor: "#f6f6fb", color: "#50606C" }, tbody: { backgroundColor: "#f6f6fb", color: "#50606C" } }, we = {
default: {},
dark: he,
celebration: Ce,
celebrationNight: _e,
hack: Ae,
zen: xe,
concrete: Se
}, Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: Ce,
celebrationNight: _e,
concrete: Se,
dark: he,
default: we,
hack: Ae,
zen: xe
}, Symbol.toStringTag, { value: "Module" })), ct = ["id"], ft = { style: { "z-index": "1", "padding-right": "24px" } }, pt = {
key: 0,
style: {
display: "flex",
flexDirection: "row",
alignItems: "center"
}
}, bt = {
key: 0,
style: {
display: "flex",
flexDirection: "row",
alignItems: "center"
}
}, gt = ["onClick"], mt = ["onClick"], yt = ["data-cell"], kt = ["data-cell", "onPointerenter"], ht = ["data-cell"], Ct = ["data-cell"], _t = ["data-cell"], At = ["data-cell"], xt = {
key: 1,
ref: "source",
dir: "auto"
}, St = {
__name: "vue-ui-table-sparkline",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Array,
default() {
return [];
}
}
},
setup(Ie, { expose: Oe }) {
Le((t) => ({
v3ac96fca: t.tdo
}));
const $e = q(() => import("./vue-ui-sparkline-BfFlV5kx.js").then((t) => t.b)), P = q(() => import("./BaseIcon-4i3dd7Ty.js")), De = q(() => import("./UserOptions-CzJWRC4s.js")), { vue_ui_table_sparkline: Fe } = Qe(), { isThemeValid: ze, warnInvalidTheme: Pe } = st(), h = Ie, M = f(Ye()), Z = f(0), W = f(0), U = f(null), Ee = Re();
ge(() => {
Ee["chart-background"] && console.warn("VueUiTableSparkline does not support the #chart-background slot.");
});
const e = _({
get: () => le(),
set: (t) => t
}), { userOptionsVisible: G, setUserOptionsVisibility: ee, keepUserOptionState: te } = it({ config: e.value });
function le() {
const t = Y({
userConfig: h.config,
defaultConfig: Fe
}), a = t.theme;
if (!a) return t;
if (!ze.value(t))
return Pe(t), t;
const l = Y({
userConfig: we[a] || h.config,
defaultConfig: t
}), n = Y({
userConfig: h.config,
defaultConfig: l
});
return {
...n,
customPalette: n.customPalette.length ? n.customPalette : Ze[a] || T
};
}
me(() => h.config, (t) => {
e.value = le(), G.value = !e.value.userOptions.showOnChartHover, re(), W.value += 1;
}, { deep: !0 }), me(() => h.dataset, (t) => {
b.value = $.value, W.value += 1;
}, { deep: !0 });
const { isPrinting: ae, isImaging: oe, generatePdf: ne, generateImage: ue } = rt({
elementId: `table_${M.value}`,
fileName: e.value.title.text || "vue-ui-table-sparkline",
options: e.value.userOptions.print
}), Ne = _(() => et(e.value.customPalette)), E = f(null), L = f(!1), Te = _(() => e.value.responsiveBreakpoint);
ge(() => {
re();
});
const R = f(e.value.colNames), w = je(null);
function re() {
tt(h.dataset) && ke({
componentName: "VueUiTableSparkline",
type: "dataset"
}), w.value && w.value.disconnect(), w.value = new ResizeObserver((t) => {
t.forEach((a) => {
L.value = a.contentRect.width < Te.value;
});
}), E.value && w.value.observe(E.value), R.value = [];
for (let t = 0; t < de.value; t += 1)
R.value.push(e.value.colNames[t] || `col ${t}`);
}
He(() => {
w.value && w.value.disconnect();
});
const se = _(() => (h.dataset.forEach((t, a) => {
lt({
datasetObject: t,
requiredAttributes: ["name", "values"]
}).forEach((l) => {
ke({
componentName: "VueUiTableSparkline",
type: "datasetSerieAttribute",
property: l,
index: a
});
});
}), h.dataset.map((t, a) => {
const l = (t.values || []).map((d) => isNaN(d) ? 0 : d ?? 0), n = l.reduce((d, i) => d + i, 0), r = n / l.length, o = at(l);
return {
...t,
values: t.values || [],
color: ot(t.color) || Ne.value[a] || T[a] || T[a % T.length],
sum: n,
average: r,
median: o,
sparklineDataset: l.map((d, i) => ({
period: e.value.colNames[i] || `col ${i}`,
value: d || 0
}))
};
})));
function Be(t) {
const l = (t[0].values || []).map(
(r, o) => t.map((d) => d.values[o] || [])
).map(
(r) => r.map((o, d) => [o, d]).sort((o, d) => d[0] - o[0]).map((o) => o[1])
);
return t.map((r, o) => ({
...r,
values: r.values || [],
orders: l[o]
}));
}
const $ = _(() => Be(se.value)), b = f($.value), Ve = _(() => Math.max(...b.value.map((t) => (t.values || []).length))), j = f(void 0), H = f(!1), g = f(void 0), ie = f(1);
function I() {
H.value = !1, g.value = void 0, y.value = void 0, ie.value = 1, D.value.forEach((t) => t.state = 1), x.value = {
name: 1,
sum: 1,
average: 1,
median: 1
}, b.value = $.value;
}
function N(t, a, l) {
if (["name", "sum", "average", "median"].includes(t.type)) {
Me(t.type, a, l);
return;
}
if (!fe(a)) return;
if (S.value = a, y.value = void 0, ![null, void 0].includes(g.value) && a !== g.value && (g.value = void 0, I()), D.value[a].state === l && g.value === a) {
g.value = void 0, I();
return;
}
H.value = !0, g.value = a;
const n = $.value.map((i) => i.values[a] || []), r = l;
D.value[a].state = r, ie.value = r, a === j.value ? j.value = void 0 : j.value = a;
const d = n.map((i, k) => [k, i]).sort((i, k) => r * (k[1] - i[1])).map((i) => i[0]).map((i) => $.value[i]);
b.value = d, W.value += 1;
}
const de = _(() => Math.max(...h.dataset.map((t) => (t.values || []).length))), C = _(() => {
let t = R.value.map((l) => ({
type: "reg",
value: l
}));
if (!t.length)
for (let l = 0; l < de.value; l += 1)
t.push({ type: "reg", value: `col ${l + 1}` });
e.value.showTotal && (t = [...t, { type: "sum", value: e.value.translations.total }]);
let a;
return e.value.showAverage && e.value.showMedian ? a = [
...t,
{ type: "average", value: e.value.translations.average },
{ type: "median", value: e.value.translations.median }
] : e.value.showAverage && !e.value.showMedian ? a = [...t, { type: "average", value: e.value.translations.average }] : !e.value.showAverage && e.value.showMedian ? a = [...t, { type: "median", value: e.value.translations.median }] : a = t, e.value.showSparklines ? [...a, { type: "chart", value: e.value.translations.chart }] : a;
}), x = f({
name: 1,
sum: 1,
average: 1,
median: 1
}), y = f(void 0);
function Me(t, a, l) {
if (!b.value || b.value.length === 0 || !pe(t)) return;
if (y.value !== t && (y.value = void 0), ![null, void 0].includes(g.value) && a !== g.value && I(), g.value = void 0, x.value[t] === l && y.value) {
y.value = void 0, I();
return;
}
y.value = t, H.value = !0, x.value[t] = l, [null, void 0].includes(a) || (D.value[a].state = x.value[t]);
const n = x.value[t], r = [...b.value].sort((o, d) => {
const i = o[t] ?? (typeof o[t] == "number" ? 0 : ""), k = d[t] ?? (typeof d[t] == "number" ? 0 : "");
return typeof i == "string" && typeof k == "string" ? n === -1 ? i.localeCompare(k) : k.localeCompare(i) : typeof i == "number" && typeof k == "number" ? n === -1 ? i - k : k - i : 0;
});
b.value = r;
}
const S = f(void 0), X = f(void 0);
function We({ dataIndex: t, serieIndex: a }) {
S.value = t, X.value = a, U.value[t] && !L.value && U.value[t].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
}
const ve = f(!1);
function Ue(t) {
ve.value = t, Z.value += 1;
}
function ce(t = null) {
Ke(() => {
const a = [e.value.translations.serie].concat(C.value), l = se.value.map((o, d) => [
[o.name],
o.values,
[o.sum],
[o.average],
[o.median]
]), n = [a].concat(l), r = nt(n);
t ? t(r) : ut({
csvContent: r,
title: e.value.title.text || "vue-ui-table-sparkline"
});
});
}
function fe(t) {
return e.value.sortedDataColumnIndices.includes(t);
}
function pe(t) {
return t.type === "name" || t === "name" ? e.value.sortedSeriesName : t.type === "sum" || t === "sum" ? e.value.sortedSum : t.type === "average" || t === "average" ? e.value.sortedAverage : t.type === "median" || t === "median" ? e.value.sortedMedian : !1;
}
function be(t, a, l) {
return ["sum", "average", "median"].includes(a.type) ? y.value === a.type && x.value[a.type] === l ? 1 : 0.3 : t === g.value && D.value[t].state === l ? 1 : 0.3;
}
function Ge() {
e.value.resetSortOnClickOutside && I();
}
const D = _({
get: () => C.value.map((t) => ({ state: 1 })),
set: (t) => t
});
return Oe({
generatePdf: ne,
generateImage: ue,
generateCsv: ce,
restoreOrder: I
}), (t, a) => (v(), c("div", {
ref_key: "tableContainer",
ref: E,
class: J({ "vue-data-ui-component": !0, "vue-ui-table-sparkline": !0, "vue-ui-responsive": L.value }),
style: { overflow: "hidden" },
id: `table_${M.value}`,
onMouseenter: a[3] || (a[3] = () => u(ee)(!0)),
onMouseleave: a[4] || (a[4] = () => u(ee)(!1))
}, [
e.value.title.text ? (v(), c("div", {
key: 0,
class: "vue-ui-table-sparkline-caption",
style: s({ backgroundColor: e.value.title.backgroundColor })
}, [
p("div", {
class: "atom-title",
style: s({
fontSize: `${e.value.title.fontSize}px`,
fontWeight: e.value.title.bold ? "bold" : "normal",
color: e.value.title.color,
textAlign: e.value.title.textAlign
})
}, A(e.value.title.text), 5),
e.value.title.subtitle.text ? (v(), c("div", {
key: 0,
class: "atom-subtitle",
style: s({
fontSize: `${e.value.title.subtitle.fontSize}px`,
fontWeight: e.value.title.subtitle.bold ? "bold" : "normal",
color: e.value.title.subtitle.color,
textAlign: e.value.title.textAlign
})
}, A(e.value.title.subtitle.text), 5)) : m("", !0)
], 4)) : m("", !0),
p("div", {
style: { overflow: "auto" },
onPointerleave: a[2] || (a[2] = (l) => {
X.value = void 0, S.value = void 0;
})
}, [
p("table", {
class: "vue-ui-data-table",
style: s({ fontFamily: e.value.fontFamily, position: "relative" })
}, [
p("thead", ft, [
Xe((v(), c("tr", {
role: "row",
class: "vue-ui-data-table__thead-row",
style: s({
backgroundColor: e.value.thead.backgroundColor,
color: e.value.thead.color
})
}, [
p("th", {
role: "cell",
style: s({
backgroundColor: e.value.thead.backgroundColor,
border: e.value.thead.outline,
textAlign: e.value.thead.textAlign,
fontWeight: e.value.thead.bold ? "bold" : "normal"
}),
class: "sticky-col-first"
}, [
p("div", {
style: s({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "3px",
justifyContent: e.value.thead.textAlign
})
}, [
p("span", null, A(e.value.translations.serie), 1),
b.value.length > 1 && e.value.sortedSeriesName ? (v(), c("div", pt, [
p("button", {
class: "vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down",
onClick: a[0] || (a[0] = (l) => N({ type: "name" }, null, -1))
}, [
F(u(P), {
size: 12,
name: "arrowBottom",
stroke: e.value.thead.color,
style: s({
opacity: y.value === "name" && x.value.name === -1 ? 1 : 0.3
})
}, null, 8, ["stroke", "style"])
]),
p("button", {
class: "vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up",
onClick: a[1] || (a[1] = (l) => N({ type: "name" }, null, 1))
}, [
F(u(P), {
size: 12,
name: "arrowTop",
stroke: e.value.thead.color,
style: s({
opacity: y.value === "name" && x.value.name === 1 ? 1 : 0.3
})
}, null, 8, ["stroke", "style"])
])
])) : m("", !0)
], 4)
], 4),
(v(!0), c(K, null, Q(C.value, (l, n) => (v(), c("th", {
role: "cell",
style: s({
background: e.value.thead.backgroundColor,
border: e.value.thead.outline,
textAlign: e.value.thead.textAlign,
fontWeight: e.value.thead.bold ? "bold" : "normal",
minWidth: n === C.value.length - 1 ? `${e.value.sparkline.dimensions.width}px` : "48px",
paddingRight: n === C.value.length - 1 && e.value.userOptions.show ? "36px" : ""
}),
class: J({ "sticky-col": n === C.value.length - 1 && e.value.showSparklines })
}, [
p("div", {
style: s({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "3px",
justifyContent: e.value.thead.textAlign
})
}, [
p("span", null, A(l.value), 1),
b.value.length > 1 && (fe(n) || pe(l)) ? (v(), c("div", bt, [
p("button", {
class: "vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-down",
onClick: () => N(l, n, -1)
}, [
F(u(P), {
size: 12,
name: "arrowBottom",
stroke: e.value.thead.color,
style: s({
opacity: be(n, l, -1)
})
}, null, 8, ["stroke", "style"])
], 8, gt),
p("button", {
class: "vue-ui-table-sparkline-sorting-button vue-ui-table-sparkline-sorting-button-up",
onClick: () => N(l, n, 1)
}, [
F(u(P), {
size: 12,
name: "arrowTop",
stroke: e.value.thead.color,
style: s({
opacity: be(n, l, 1)
})
}, null, 8, ["stroke", "style"])
], 8, mt)
])) : m("", !0)
], 4),
e.value.userOptions.show && n === C.value.length - 1 && (u(te) || u(G)) ? (v(), qe(u(De), {
ref_for: !0,
ref: "details",
key: `user_option_${Z.value}`,
backgroundColor: e.value.thead.backgroundColor,
color: e.value.thead.color,
isPrinting: u(ae),
isImaging: u(oe),
uid: M.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasXls: e.value.userOptions.buttons.csv,
hasImg: e.value.userOptions.buttons.img,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: ve.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: E.value,
position: e.value.userOptions.position,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Ue,
onGeneratePdf: u(ne),
onGenerateImage: u(ue),
onGenerateCsv: ce,
style: s({
visibility: u(te) ? u(G) ? "visible" : "hidden" : "visible"
})
}, Je({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: z(({ isOpen: r, color: o }) => [
O(t.$slots, "menuIcon", ye({ ref_for: !0 }, { isOpen: r, color: o }), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: z(() => [
O(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionCsv ? {
name: "optionCsv",
fn: z(() => [
O(t.$slots, "optionCsv", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: z(() => [
O(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: z(({ toggleFullscreen: r, isFullscreen: o }) => [
O(t.$slots, "optionFullscreen", ye({ ref_for: !0 }, { toggleFullscreen: r, isFullscreen: o }), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : m("", !0)
], 6))), 256))
], 4)), [
[u(dt), Ge]
])
]),
p("tbody", null, [
(v(!0), c(K, null, Q(b.value, (l, n) => (v(), c("tr", {
role: "row",
style: s({
backgroundColor: e.value.tbody.backgroundColor,
color: e.value.tbody.color
}),
class: J({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": n % 2 === 0, "vue-ui-data-table__tbody__row-odd": n % 2 !== 0 })
}, [
p("td", {
role: "cell",
style: s({
backgroundColor: e.value.tbody.backgroundColor,
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign
}),
"data-cell": e.value.translations.serie,
class: "vue-ui-data-table__tbody__td sticky-col-first"
}, [
p("div", {
dir: "auto",
style: s({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "6px",
justifyContent: e.value.tbody.textAlign
})
}, [
e.value.tbody.showColorMarker ? (v(), c("span", {
key: 0,
style: s({ color: l.color })
}, "⬤", 4)) : m("", !0),
p("span", null, A(l.name ?? "-"), 1)
], 4)
], 12, yt),
(v(!0), c(K, null, Q(Ve.value, (r, o) => (v(), c("td", {
dir: "auto",
role: "cell",
ref_for: !0,
ref_key: "TD",
ref: U,
style: s({
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign,
background: S.value !== void 0 && o === S.value ? e.value.tbody.selectedColor.useSerieColor ? `${l.color.length > 7 ? l.color.slice(0, -2) : l.color}33` : e.value.tbody.selectedColor.fallback : ""
}),
"data-cell": C.value[o] ? C.value[o].value : "",
class: "vue-ui-data-table__tbody__td",
onPointerenter: (d) => {
X.value = n, S.value = o;
}
}, A([null, void 0].includes(l.values[o]) ? "-" : u(B)(
e.value.formatter,
Number(l.values[o]),
u(V)({
p: e.value.prefix,
v: Number(l.values[o]),
s: e.value.suffix,
r: e.value.roundingValues
}),
{ datapoint: l, seriesIndex: n, datapointIndex: o }
)), 45, kt))), 256)),
e.value.showTotal ? (v(), c("td", {
key: 0,
dir: "auto",
role: "cell",
style: s({
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign
}),
"data-cell": e.value.translations.total,
class: "vue-ui-data-table__tbody__td"
}, A(u(B)(
e.value.formatter,
l.sum,
u(V)({
p: e.value.prefix,
v: l.sum,
s: e.value.suffix,
r: e.value.roundingTotal
}),
{ datapoint: l.sum, seriesIndex: n }
)), 13, ht)) : m("", !0),
e.value.showAverage ? (v(), c("td", {
key: 1,
dir: "auto",
role: "cell",
style: s({
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign
}),
"data-cell": e.value.translations.average,
class: "vue-ui-data-table__tbody__td"
}, A(u(B)(
e.value.formatter,
l.average,
u(V)({
p: e.value.prefix,
v: l.average,
s: e.value.suffix,
r: e.value.roundingAverage
}),
{ datapoint: l.average, seriesIndex: n }
)), 13, Ct)) : m("", !0),
e.value.showMedian ? (v(), c("td", {
key: 2,
dir: "auto",
role: "cell",
style: s({
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign
}),
"data-cell": e.value.translations.median,
class: "vue-ui-data-table__tbody__td"
}, A(u(B)(
e.value.formatter,
l.median,
u(V)({
p: e.value.prefix,
v: l.median,
s: e.value.suffix,
r: e.value.roundingMedian
}),
{ datapoint: l.median, seriesIndex: n }
)), 13, _t)) : m("", !0),
e.value.showSparklines ? (v(), c("td", {
key: 3,
role: "cell",
"data-cell": e.value.translations.chart,
style: s({
border: e.value.tbody.outline,
fontSize: `${e.value.tbody.fontSize}px`,
fontWeight: e.value.tbody.bold ? "bold" : "normal",
textAlign: e.value.tbody.textAlign,
backgroundColor: e.value.tbody.backgroundColor,
padding: "0"
}),
class: "vue-ui-data-table__tbody__td sticky-col"
}, [
F(u($e), {
onHoverIndex: ({ index: r }) => We({ dataIndex: r, serieIndex: n }),
"height-ratio": e.value.sparkline.dimensions.heightRatio,
"forced-padding": 30,
dataset: l.sparklineDataset,
showInfo: !1,
selectedIndex: S.value,
config: {
type: e.value.sparkline.type,
style: {
backgroundColor: "transparent",
animation: {
show: e.value.sparkline.animation.show && !u(ae) && !u(oe),
animationFrames: e.value.sparkline.animation.animationFrames
},
padding: {
right: 12
},
line: {
color: l.color,
smooth: e.value.sparkline.smooth,
strokeWidth: e.value.sparkline.strokeWidth
},
bar: {
color: l.color
},
area: {
color: l.color,
opacity: e.value.sparkline.showArea ? 16 : 0,
useGradient: e.value.sparkline.useGradient
},
verticalIndicator: {
color: l.color
},
plot: {
radius: 9,
stroke: e.value.tbody.backgroundColor,
strokeWidth: 3
}
}
}
}, null, 8, ["onHoverIndex", "height-ratio", "dataset", "selectedIndex", "config"])
], 12, At)) : m("", !0)
], 6))), 256))
])
], 4)
], 32),
t.$slots.source ? (v(), c("div", xt, [
O(t.$slots, "source", {}, void 0, !0)
], 512)) : m("", !0)
], 42, ct));
}
}, wt = /* @__PURE__ */ vt(St, [["__scopeId", "data-v-18b7aedc"]]), Tt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: wt
}, Symbol.toStringTag, { value: "Module" }));
export {
Nt as a,
Tt as b,
wt as v
};