vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
614 lines (613 loc) • 26.5 kB
JavaScript
import { useCssVars as Ge, computed as h, defineAsyncComponent as G, ref as v, onMounted as Xe, toRefs as Je, watch as Ke, createElementBlock as n, openBlock as r, unref as u, normalizeStyle as fe, normalizeClass as W, createBlock as D, createCommentVNode as i, withCtx as f, renderSlot as d, normalizeProps as p, guardReactiveProps as k, createSlots as Qe, createVNode as Ze, createElementVNode as g, Fragment as U, renderList as ge, toDisplayString as et } from "vue";
import { c as tt, t as ot, o as st, g as me, l as lt, i as at, j as S, k as rt, U as b, m as N, X as nt, s as ut, a as it, d as ct } from "./lib-BwysEpWI.js";
import { t as ht, u as dt } from "./useResponsive-DfdjqQps.js";
import { u as vt, a as X } from "./useNestedProp-OFRiX4kU.js";
import { u as ft, B as gt } from "./BaseScanner-BMpwQAfz.js";
import { u as mt } from "./usePrinter-BJzHDpYF.js";
import { u as yt } from "./useSvgExport-ByUukOZt.js";
import { u as pt } from "./useThemeCheck-DGJ31Vi5.js";
import { u as kt } from "./useUserOptionState-BIvW1Kz7.js";
import { u as bt } from "./useChartAccessibility-9icAAmYg.js";
import { u as wt } from "./useAutoSizeLabelsInsideViewbox-DO2dxQ78.js";
import Ct from "./Title-DGnfNZuO.js";
import xt from "./img-DKigoPDs.js";
import { _ as _t } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ye = { style: { chart: { backgroundColor: "#1A1A1A", color: "#CCCCCC", graduations: { stroke: "#2A2A2A" }, label: { color: "#CCCCCC" } }, title: { color: "#CCCCCC", subtitle: { color: "#757575" } } } }, pe = { style: { chart: { backgroundColor: "#FFF8E1", color: "#424242", graduations: { stroke: "#FFF8E1", strokeWidth: 1, gradient: { show: !0 } }, label: { color: "#424242" } }, title: { color: "#424242", subtitle: { color: "#757575" } } } }, ke = { style: { chart: { backgroundColor: "#1E1E1E", color: "#BDBDBD", graduations: { stroke: "#5D4037", strokeWidth: 1, gradient: { show: !0 } }, label: { color: "#BDBDBD" } }, title: { color: "#FFF8E1", subtitle: { color: "#BDBDBD" } } } }, be = { style: { chart: { backgroundColor: "#1A1A1A", color: "#99AA99", graduations: { stroke: "#1A1A1A", strokeWidth: 1, gradient: { show: !0 } }, label: { color: "#66CC66" } }, title: { color: "#66CC66", subtitle: { color: "#99AA99" } } } }, we = { style: { chart: { backgroundColor: "#fbfafa", color: "#8A9892", graduations: { show: !1, gradient: { show: !0 } }, label: { color: "#B9B99D" } }, title: { color: "#8A9892", subtitle: { color: "#99AA99" } } } }, Ce = { style: { chart: { backgroundColor: "#f6f6fb", color: "#50606C", graduations: { stroke: "#1A1A1A", gradient: { show: !0 } }, label: { color: "#61747E" } }, title: { color: "#50606C", subtitle: { color: "#718890" } } } }, xe = {
default: {},
dark: ye,
celebration: pe,
celebrationNight: ke,
hack: be,
zen: we,
concrete: Ce
}, fo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
celebration: pe,
celebrationNight: ke,
concrete: Ce,
dark: ye,
default: xe,
hack: be,
zen: we
}, Symbol.toStringTag, { value: "Module" })), At = ["id"], $t = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, Ft = ["xmlns", "viewBox"], Ot = ["width", "height"], St = ["id"], It = ["x", "y", "width", "height", "rx", "ry"], Pt = ["id"], Tt = ["stop-color"], Et = ["stop-color"], Mt = ["stop-color"], zt = ["clip-path"], Bt = ["x", "y", "height", "width"], Wt = ["x", "y", "height", "width", "fill"], Dt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Ut = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Nt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Lt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Yt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Ht = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Vt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], Rt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], qt = ["x", "y", "height", "width"], jt = { key: 1 }, Gt = ["x", "y", "height"], Xt = ["y", "x", "fill", "font-size", "font-weight"], Jt = {
key: 4,
class: "vue-data-ui-watermark"
}, Kt = {
__name: "vue-ui-thermometer",
props: {
dataset: {
type: Object,
default() {
return {};
}
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(I, { expose: _e }) {
Ge((o) => ({
v4f1287f4: We.value,
v7fdfff1a: Be.value,
b092daf2: ze.value
}));
const Ae = G(() => import("./PackageVersion-BLzm8l_I.js")), $e = G(() => import("./PenAndPaper-DxIUvoQ8.js")), Fe = G(() => import("./UserOptions-CzJWRC4s.js")), { vue_ui_thermometer: Oe } = vt(), { isThemeValid: Se, warnInvalidTheme: Ie } = pt(), m = I, w = v(tt()), C = v(null), J = v(0), K = v(0), Q = v(null), Z = v(null), _ = v(null), P = v(null), Pe = h(() => !!m.dataset && Object.keys(m.dataset).length);
Xe(() => {
oe();
});
const e = v(V()), Te = v(e.value.style.chart.thermometer.width), L = v(e.value.style.chart.height), Y = v(e.value.style.chart.width), { loading: ee, FINAL_DATASET: c } = ft({
...Je(m),
FINAL_CONFIG: e,
prepareConfig: V,
skeletonDataset: { value: 0, from: -100, to: 100, steps: 20, colors: { from: "#A1A1A1", to: "#CACACA" } },
skeletonConfig: ot({
defaultConfig: e.value,
userConfig: {
userOptions: { show: !1 },
style: {
chart: {
animation: { use: !1 },
backgroundColor: "#99999930",
graduations: {
stroke: "#6A6A6A"
}
}
}
}
})
}), te = h(() => !!e.value.debug);
function oe() {
if (st(m.dataset) ? me({
componentName: "VueUiThermometer",
type: "dataset",
debug: te.value
}) : lt({
datasetObject: m.dataset,
requiredAttributes: ["value", "from", "to"]
}).forEach((o) => {
me({
componentName: "VueUiThermometer",
type: "datasetAttribute",
property: o,
debug: te.value
});
}), e.value.responsive) {
const o = ht(() => {
const { width: l, height: t } = dt({
chart: C.value,
title: e.value.style.title.text ? Q.value : null,
source: Z.value
});
requestAnimationFrame(() => {
L.value = Math.max(0.1, t - 12), Y.value = l, de();
});
});
_.value && (P.value && _.value.unobserve(P.value), _.value.disconnect()), _.value = new ResizeObserver(o), P.value = C.value, _.value.observe(P.value);
}
de();
}
const { userOptionsVisible: H, setUserOptionsVisibility: se, keepUserOptionState: le } = kt({ config: e.value }), { svgRef: T } = bt({ config: e.value.style.title });
function V() {
const o = X({
userConfig: m.config,
defaultConfig: Oe
}), l = o.theme;
if (!l) return o;
if (!Se.value(o))
return Ie(o), o;
const t = X({
userConfig: xe[l] || m.config,
defaultConfig: o
}), a = X({
userConfig: m.config,
defaultConfig: t
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : at[l] || S
};
}
Ke(() => m.config, (o) => {
e.value = V(), H.value = !e.value.userOptions.showOnChartHover, Te.value = e.value.style.chart.thermometer.width, L.value = e.value.style.chart.height, Y.value = e.value.style.chart.width, oe(), K.value += 1;
}, { deep: !0 });
const { isPrinting: ae, isImaging: re, generatePdf: ne, generateImage: ue } = mt({
elementId: `thermometer__${w.value}`,
fileName: e.value.style.title.text || "vue-ui-thermometer",
options: e.value.userOptions.print
}), Ee = h(() => e.value.userOptions.show && !e.value.style.title.text), E = h(() => rt(e.value.customPalette)), y = h(() => c.value.steps || 10);
function M(o, l, t) {
const a = [], x = ie(o), F = ie(l);
for (let O = 0; O < t; O++) {
const Ve = R(x.red, F.red, O, t), Re = R(x.green, F.green, O, t), qe = R(x.blue, F.blue, O, t), je = `#${q(Ve)}${q(Re)}${q(qe)}`;
a.push(je);
}
return a;
}
function ie(o) {
const l = o.slice(1);
return {
red: parseInt(l.slice(0, 2), 16),
green: parseInt(l.slice(2, 4), 16),
blue: parseInt(l.slice(4, 6), 16)
};
}
function R(o, l, t, a) {
return Math.round(o + (l - o) * t / a);
}
function q(o) {
return o.toString(16).padStart(2, "0");
}
const s = h(() => {
const o = Math.max(0.1, Y.value), l = Math.max(0.1, L.value), t = e.value.style.chart.padding;
return {
width: o,
left: o / 2 - e.value.style.chart.thermometer.width / 2,
right: o / 2 + e.value.style.chart.thermometer.width / 2,
top: t.top,
bottom: l - t.bottom - t.top,
height: l,
thermoHeight: l - t.top - t.bottom,
thermoWidth: e.value.style.chart.thermometer.width
};
}), Me = h(() => s.value), z = h(() => {
const o = b(c.value.from) < 0 ? Math.abs(b(c.value.from)) : b(c.value.from), l = b(c.value.to) < 0 ? Math.abs(b(c.value.to)) : b(c.value.to);
let t = 0;
return b(c.value.to) > 0 ? t = o + l : o > l ? t = o - l : t = l - o, (1 - (Math.abs(b(c.value.from)) + b(c.value.value)) / t) * s.value.thermoHeight;
}), ze = h(() => `${z.value}px`), Be = h(() => `${s.value.thermoHeight}px`), We = h(() => `${e.value.style.chart.animation.speedMs}ms`), De = h(() => {
if (c.value.colors) {
if (!c.value.colors.from)
return M(E.value[0] || S[0], N(c.value.colors.to), y.value || 10);
if (!c.value.colors.to)
return M(N(c.value.colors.from), E.value[1] || S[1], y.value || 10);
} else
return M(E.value[1] || S[1], E.value[0] || S[0], y.value || 10);
return M(N(c.value.colors.from), N(c.value.colors.to), y.value || 10);
}), ce = h(() => {
const o = [];
let l = 0;
const t = s.value.thermoHeight;
for (let a = 0; a < t - 1; a += t / y.value)
o.push({
x: s.value.left,
y: s.value.top + a,
qYLess: s.value.top + a + t / y.value / 4,
halfY: s.value.top + a + t / y.value / 2,
qYMore: s.value.top + a + t / y.value / 4 * 3,
color: De.value[l],
height: Math.max(0.1, t / y.value)
}), l += 1;
return o;
}), A = v(!1);
function he(o) {
A.value = o, J.value += 1;
}
const B = v(!1);
function j() {
B.value = !B.value;
}
async function Ue({ scale: o = 2 } = {}) {
if (!C.value) return;
const { width: l, height: t } = C.value.getBoundingClientRect(), a = l / t, { imageUri: x, base64: F } = await xt({ domElement: C.value, base64: !0, img: !0, scale: o });
return {
imageUri: x,
base64: F,
title: e.value.style.title.text,
width: l,
height: t,
aspectRatio: a
};
}
const $ = h({
get: () => e.value.style.chart.label.fontSize,
set: (o) => o
}), { autoSizeLabels: de } = wt({
svgRef: T,
fontSize: e.value.style.chart.label.fontSize,
minFontSize: e.value.style.chart.label.minFontSize,
sizeRef: $,
labelClass: ".vue-ui-thermometer-label"
}), Ne = h(() => e.value.style.chart.backgroundColor), Le = h(() => e.value.style.title), { exportSvg: Ye, getSvg: He } = yt({
svg: T,
title: Le,
backgroundColor: Ne
});
async function ve({ isCb: o }) {
if (o) {
const { blob: l, url: t, text: a, dataUrl: x } = await He();
e.value.userOptions.callbacks.svg({ blob: l, url: t, text: a, dataUrl: x });
} else
Ye();
}
return _e({
getImage: Ue,
generatePdf: ne,
generateImage: ue,
generateSvg: ve,
toggleAnnotator: j,
toggleFullscreen: he
}), (o, l) => (r(), n("div", {
ref_key: "thermoChart",
ref: C,
class: W(`vue-data-ui-component vue-ui-thermometer ${A.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: fe(`width:100%;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}`),
id: `thermometer__${w.value}`,
onMouseenter: l[0] || (l[0] = () => u(se)(!0)),
onMouseleave: l[1] || (l[1] = () => u(se)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), D(u($e), {
key: 0,
svgRef: u(T),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: B.value,
onClose: j
}, {
"annotator-action-close": f(() => [
d(o.$slots, "annotator-action-close", {}, void 0, !0)
]),
"annotator-action-color": f(({ color: t }) => [
d(o.$slots, "annotator-action-color", p(k({ color: t })), void 0, !0)
]),
"annotator-action-draw": f(({ mode: t }) => [
d(o.$slots, "annotator-action-draw", p(k({ mode: t })), void 0, !0)
]),
"annotator-action-undo": f(({ disabled: t }) => [
d(o.$slots, "annotator-action-undo", p(k({ disabled: t })), void 0, !0)
]),
"annotator-action-redo": f(({ disabled: t }) => [
d(o.$slots, "annotator-action-redo", p(k({ disabled: t })), void 0, !0)
]),
"annotator-action-delete": f(({ disabled: t }) => [
d(o.$slots, "annotator-action-delete", p(k({ disabled: t })), void 0, !0)
]),
_: 3
}, 8, ["svgRef", "backgroundColor", "color", "active"])) : i("", !0),
Ee.value ? (r(), n("div", $t, null, 512)) : i("", !0),
e.value.style.title.text ? (r(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: Q,
style: "width:100%"
}, [
(r(), D(Ct, {
key: `title_${K.value}`,
config: {
title: {
cy: "thermometer-div-title",
...e.value.style.title
},
subtitle: {
cy: "thermometer-div-subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : i("", !0),
e.value.userOptions.show && Pe.value && (u(le) || u(H)) ? (r(), D(u(Fe), {
ref: "details",
key: `user_options_${J.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: u(re),
isPrinting: u(ae),
uid: w.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasSvg: e.value.userOptions.buttons.svg,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
hasXls: !1,
isFullscreen: A.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: C.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: B.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: he,
onGeneratePdf: u(ne),
onGenerateImage: u(ue),
onGenerateSvg: ve,
onToggleAnnotator: j,
style: fe({
visibility: u(le) ? u(H) ? "visible" : "hidden" : "visible"
})
}, Qe({ _: 2 }, [
o.$slots.menuIcon ? {
name: "menuIcon",
fn: f(({ isOpen: t, color: a }) => [
d(o.$slots, "menuIcon", p(k({ isOpen: t, color: a })), void 0, !0)
]),
key: "0"
} : void 0,
o.$slots.optionPdf ? {
name: "optionPdf",
fn: f(() => [
d(o.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
o.$slots.optionImg ? {
name: "optionImg",
fn: f(() => [
d(o.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
o.$slots.optionSvg ? {
name: "optionSvg",
fn: f(() => [
d(o.$slots, "optionSvg", {}, void 0, !0)
]),
key: "3"
} : void 0,
o.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: f(({ toggleFullscreen: t, isFullscreen: a }) => [
d(o.$slots, "optionFullscreen", p(k({ toggleFullscreen: t, isFullscreen: a })), void 0, !0)
]),
key: "4"
} : void 0,
o.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: f(({ toggleAnnotator: t, isAnnotator: a }) => [
d(o.$slots, "optionAnnotator", p(k({ toggleAnnotator: t, isAnnotator: a })), void 0, !0)
]),
key: "5"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasSvg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
(r(), n("svg", {
ref_key: "svgRef",
ref: T,
xmlns: u(nt),
class: W({ "vue-data-ui-fullscreen--on": A.value, "vue-data-ui-fulscreen--off": !A.value }),
width: "100%",
viewBox: `0 0 ${s.value.width} ${s.value.height}`,
style: "background:transparent"
}, [
Ze(u(Ae)),
o.$slots["chart-background"] ? (r(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: s.value.width,
height: s.value.height,
style: {
pointerEvents: "none"
}
}, [
d(o.$slots, "chart-background", {}, void 0, !0)
], 8, Ot)) : i("", !0),
g("defs", null, [
g("clipPath", {
id: `vueUiPill-${w.value}`,
clipPathUnits: "userSpaceOnUse"
}, [
g("rect", {
x: s.value.left,
y: s.value.top,
width: s.value.thermoWidth,
height: s.value.thermoHeight,
rx: s.value.thermoWidth / 2,
ry: s.value.thermoWidth / 2
}, null, 8, It)
], 8, St),
(r(!0), n(U, null, ge(ce.value, (t, a) => (r(), n("linearGradient", {
id: `vueUiThermometerGradient_${a}_${w.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
g("stop", {
offset: "0%",
"stop-color": t.color
}, null, 8, Tt),
g("stop", {
offset: "50%",
"stop-color": u(ut)(t.color, 100 - e.value.style.chart.graduations.gradient.intensity)
}, null, 8, Et),
g("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, Mt)
], 8, Pt))), 256))
]),
g("g", {
"clip-path": `url(#vueUiPill-${w.value})`
}, [
g("rect", {
x: s.value.left,
y: s.value.top,
height: s.value.thermoHeight,
width: s.value.thermoWidth,
fill: "#FFFFFF"
}, null, 8, Bt),
(r(!0), n(U, null, ge(ce.value, (t, a) => (r(), n("g", {
key: `graduation_${a}`
}, [
g("rect", {
x: t.x,
y: t.y,
height: t.height,
width: s.value.thermoWidth,
fill: e.value.style.chart.graduations.gradient.show ? `url(#vueUiThermometerGradient_${a}_${w.value})` : t.color,
"shape-rendering": "crispEdges"
}, null, 8, Wt),
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 0,
x1: t.x,
x2: t.x + 10,
y1: t.y,
y2: t.y,
"stroke-width": e.value.style.chart.graduations.strokeWidth,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Dt)) : i("", !0),
e.value.style.chart.graduations.showIntermediate ? (r(), n(U, { key: 1 }, [
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 0,
x1: t.x,
x2: t.x + 5,
y1: t.halfY,
y2: t.halfY,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Ut)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 1,
x1: t.x,
x2: t.x + 2.5,
y1: t.qYLess,
y2: t.qYLess,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Nt)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 2,
x1: t.x,
x2: t.x + 2.5,
y1: t.qYMore,
y2: t.qYMore,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Lt)) : i("", !0)
], 64)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 2,
x1: s.value.right,
x2: s.value.right - 10,
y1: t.y,
y2: t.y,
"stroke-width": e.value.style.chart.graduations.strokeWidth,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Yt)) : i("", !0),
e.value.style.chart.graduations.showIntermediate ? (r(), n(U, { key: 3 }, [
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 0,
x1: s.value.right,
x2: s.value.right - 5,
y1: t.halfY,
y2: t.halfY,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Ht)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 1,
x1: s.value.right,
x2: s.value.right - 2.5,
y1: t.qYLess,
y2: t.qYLess,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Vt)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (r(), n("line", {
key: 2,
x1: s.value.right,
x2: s.value.right - 2.5,
y1: t.qYMore,
y2: t.qYMore,
"stroke-width": e.value.style.chart.graduations.strokeWidth / 2,
stroke: e.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Rt)) : i("", !0)
], 64)) : i("", !0)
]))), 128)),
g("rect", {
class: W({ "vue-ui-thermometer-temperature": e.value.style.chart.animation.use }),
x: s.value.left,
y: s.value.top,
height: z.value,
width: s.value.thermoWidth,
fill: "#FFFFFF66"
}, null, 10, qt)
], 8, zt),
e.value.style.chart.label.show ? (r(), n("g", jt, [
u(ee) ? (r(), n("rect", {
key: 0,
x: s.value.left - 60,
y: z.value + s.value.top - $.value / 2,
width: 50,
height: $.value,
fill: "#6A6A6A40",
rx: "3"
}, null, 8, Gt)) : (r(), n("text", {
key: 1,
class: W({ "vue-ui-thermometer-temperature-value": e.value.style.chart.animation.use, "vue-ui-thermometer-label": !0 }),
y: z.value + s.value.top + $.value / 3,
x: s.value.left - 10,
"text-anchor": "end",
fill: e.value.style.chart.label.color,
"font-size": $.value,
"font-weight": e.value.style.chart.label.bold ? "bold" : "normal"
}, et(u(it)(
e.value.style.chart.label.formatter,
I.dataset.value,
u(ct)({
p: e.value.style.chart.label.prefix,
v: I.dataset.value,
s: e.value.style.chart.label.suffix,
r: e.value.style.chart.label.rounding
}),
{ datapoint: I.dataset }
)), 11, Xt))
])) : i("", !0),
d(o.$slots, "svg", { svg: Me.value }, void 0, !0)
], 10, Ft)),
o.$slots.watermark ? (r(), n("div", Jt, [
d(o.$slots, "watermark", p(k({ isPrinting: u(ae) || u(re) })), void 0, !0)
])) : i("", !0),
o.$slots.source ? (r(), n("div", {
key: 5,
ref_key: "source",
ref: Z,
dir: "auto"
}, [
d(o.$slots, "source", {}, void 0, !0)
], 512)) : i("", !0),
u(ee) ? (r(), D(gt, { key: 6 })) : i("", !0)
], 46, At));
}
}, Qt = /* @__PURE__ */ _t(Kt, [["__scopeId", "data-v-d9637609"]]), go = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Qt
}, Symbol.toStringTag, { value: "Module" }));
export {
fo as a,
go as b,
Qt as v
};