vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
778 lines (777 loc) • 24.8 kB
JavaScript
import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
import { Bt as t, Jt as n, Kt as r, Pt as i, S as a, X as ee, b as o, i as te, jt as ne, pt as re, q as ie, t as ae, tt as oe, w as se } from "./lib-Bttd6u5E.js";
import { n as ce, t as le } from "./useHints-Dq_w2E8B.js";
import { t as ue } from "./useConfig-D3scuR88.js";
import { t as de } from "./usePrinter-DN5bYhTG.js";
import { n as fe, t as pe } from "./BaseScanner-DZvpgOjM.js";
import { t as me } from "./useSvgExport-DH-FfcqQ.js";
import { t as s } from "./useNestedProp-vPNvh7rV.js";
import { t as he } from "./useThemeCheck-C43Tcqmk.js";
import { t as ge } from "./img-Bnokohej.js";
import { n as _e } from "./Title-BE3qg9xl.js";
import { t as ve } from "./_plugin-vue_export-helper-B3ysoDQm.js";
import { l as ye, t as be } from "./useResponsive-ZtArZtUf.js";
import { t as xe } from "./DefGrad-DVBqDjhO.js";
import { t as Se } from "./useUserOptionState-DK-_1ddE.js";
import { t as Ce } from "./useChartAccessibility-DYqac8yF.js";
import { t as we } from "./usePrefersMotion-BC-CsqR1.js";
import { t as Te } from "./useAutoSizeLabelsInsideViewbox-DvDwcwi_.js";
import { t as Ee } from "./vue_ui_thermometer-DxgqWKlE.js";
import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as De, createVNode as Oe, defineAsyncComponent as m, guardReactiveProps as h, nextTick as ke, normalizeClass as g, normalizeProps as _, normalizeStyle as Ae, onMounted as je, openBlock as v, ref as y, renderList as Me, renderSlot as b, toDisplayString as x, toRefs as Ne, unref as S, useCssVars as Pe, watch as Fe, withCtx as C } from "vue";
//#region src/components/vue-ui-thermometer.vue
var Ie = /* @__PURE__ */ e({ default: () => w }), Le = ["id"], Re = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, ze = [
"xmlns",
"viewBox",
"aria-labelledby",
"aria-describedby"
], Be = ["id"], Ve = ["id"], He = ["width", "height"], Ue = ["id"], We = [
"x",
"y",
"width",
"height",
"rx",
"ry"
], Ge = ["clip-path"], Ke = [
"x",
"y",
"height",
"width"
], qe = [
"x",
"y",
"height",
"width",
"fill"
], Je = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], Ye = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], Xe = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], Ze = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], Qe = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], $e = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], et = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], tt = [
"x1",
"x2",
"y1",
"y2",
"stroke-width",
"stroke"
], nt = [
"x",
"y",
"height",
"width"
], rt = ["aria-label"], it = [
"x",
"y",
"height"
], at = [
"y",
"x",
"fill",
"font-size",
"font-weight"
], ot = {
key: 4,
class: "vue-data-ui-watermark"
}, w = /*#__PURE__*/ ve({
__name: "vue-ui-thermometer",
props: {
dataset: {
type: Object,
default() {
return {};
}
},
config: {
type: Object,
default() {
return {};
}
}
},
emits: ["copyAlt"],
setup(e, { expose: ve, emit: Ie }) {
Pe((e) => ({
dc63f536: Nt.value,
d6d7a06e: Mt.value,
v67cd22f6: jt.value
}));
let w = m(() => import("./PackageVersion-D6d8SCp9.js").then((e) => e.t)), st = m(() => import("./PenAndPaper-DAE-tnEQ.js").then((e) => e.t)), ct = m(() => import("./UserOptions-Dt98of5H.js").then((e) => e.n)), { vue_ui_thermometer: lt } = ue(), { isThemeValid: ut, warnInvalidTheme: dt } = he(), ft = we(), T = e, pt = Ie, E = y(ie()), D = y(null), mt = y(0), ht = y(0), gt = y(null), _t = y(null), O = y(null), k = y(null), A = y(!1), j = y(!1), vt = l(() => !!T.dataset && Object.keys(T.dataset).length);
je(() => {
Ct();
});
let M = y(z());
ce({
config: () => M.value,
dataset: () => T.dataset,
component: "VueUiThermometer",
rules: [le.noHint]
});
let yt = y(M.value.style.chart.thermometer.width), N = y(M.value.style.chart.height), P = y(M.value.style.chart.width), bt = l(() => M.value.userOptions.useCursorPointer), xt = l(() => n({
defaultConfig: {
userOptions: { show: !1 },
style: { chart: {
animation: { use: !1 },
backgroundColor: "#99999930",
graduations: { stroke: "#6A6A6A" }
} }
},
userConfig: M.value.skeletonConfig ?? {}
})), { loading: F, FINAL_DATASET: I } = fe({
...Ne(T),
FINAL_CONFIG: M,
prepareConfig: z,
skeletonDataset: T.config?.skeletonDataset ?? {
value: 0,
from: -100,
to: 100,
steps: 20,
colors: {
from: "#A1A1A1",
to: "#CACACA"
}
},
skeletonConfig: n({
defaultConfig: M.value,
userConfig: xt.value
})
}), St = l(() => !!M.value.debug);
function Ct() {
if (ne(T.dataset) ? oe({
componentName: "VueUiThermometer",
type: "dataset",
debug: St.value
}) : re({
datasetObject: T.dataset,
requiredAttributes: [
"value",
"from",
"to"
]
}).forEach((e) => {
oe({
componentName: "VueUiThermometer",
type: "datasetAttribute",
property: e,
debug: St.value
});
}), M.value.responsive) {
let e = ye(() => {
let { width: e, height: t } = be({
chart: D.value,
title: M.value.style.title.text ? gt.value : null,
source: _t.value
});
requestAnimationFrame(() => {
N.value = Math.max(.1, t - 12), P.value = e, Rt();
});
});
O.value && (k.value && O.value.unobserve(k.value), O.value.disconnect()), O.value = new ResizeObserver(e), k.value = D.value, O.value.observe(k.value);
}
Rt();
}
let { userOptionsVisible: L, setUserOptionsVisibility: wt, keepUserOptionState: Tt } = Se({ config: M.value }), { svgRef: R } = Ce({ config: M.value.style.title });
function z() {
let e = s({
userConfig: T.config,
defaultConfig: lt
}), t = e.theme;
if (!t) return e;
if (!ut.value(e)) return dt(e), e;
let n = s({
userConfig: Ee[t] || T.config,
defaultConfig: e
}), a = s({
userConfig: T.config,
defaultConfig: n
});
return {
...a,
customPalette: a.customPalette.length ? a.customPalette : r[t] || i
};
}
Fe(() => T.config, (e) => {
M.value = z(), L.value = !M.value.userOptions.showOnChartHover, yt.value = M.value.style.chart.thermometer.width, N.value = M.value.style.chart.height, P.value = M.value.style.chart.width, Ct(), ht.value += 1;
}, { deep: !0 });
let { isPrinting: B, isImaging: V, generatePdf: Et, generateImage: Dt } = de({
elementId: `thermometer__${E.value}`,
fileName: M.value.style.title.text || "vue-ui-thermometer",
options: M.value.userOptions.print
}), Ot = l(() => M.value.userOptions.show && !M.value.style.title.text), H = l(() => se(M.value.customPalette)), U = l(() => I.value.steps || 10);
function W(e, t, n) {
let r = [], i = kt(e), a = kt(t);
for (let e = 0; e < n; e += 1) {
let t = G(i.red, a.red, e, n), ee = G(i.green, a.green, e, n), o = G(i.blue, a.blue, e, n), te = `#${K(t)}${K(ee)}${K(o)}`;
r.push(te);
}
return r;
}
function kt(e) {
let t = e.slice(1);
return {
red: parseInt(t.slice(0, 2), 16),
green: parseInt(t.slice(2, 4), 16),
blue: parseInt(t.slice(4, 6), 16)
};
}
function G(e, t, n, r) {
return Math.round(e + (t - e) * n / r);
}
function K(e) {
return e.toString(16).padStart(2, "0");
}
let q = l(() => {
let e = Math.max(.1, P.value), t = Math.max(.1, N.value), n = M.value.style.chart.padding;
return {
width: e,
left: e / 2 - M.value.style.chart.thermometer.width / 2,
right: e / 2 + M.value.style.chart.thermometer.width / 2,
top: n.top,
bottom: t - n.bottom - n.top,
height: t,
thermoHeight: t - n.top - n.bottom,
thermoWidth: M.value.style.chart.thermometer.width
};
}), At = l(() => q.value), J = l(() => {
let e = o(I.value.from) < 0 ? Math.abs(o(I.value.from)) : o(I.value.from), t = o(I.value.to) < 0 ? Math.abs(o(I.value.to)) : o(I.value.to), n = 0;
return n = o(I.value.to) > 0 ? e + t : e > t ? e - t : t - e, (1 - (Math.abs(o(I.value.from)) + o(I.value.value)) / n) * q.value.thermoHeight;
}), jt = l(() => `${J.value}px`), Mt = l(() => `${q.value.thermoHeight}px`), Nt = l(() => ft.value ? "0ms" : `${M.value.style.chart.animation.speedMs}ms`), Pt = l(() => {
if (I.value.colors) {
if (!I.value.colors.from) return W(H.value[0] || i[0], a(I.value.colors.to), U.value || 10);
if (!I.value.colors.to) return W(a(I.value.colors.from), H.value[1] || i[1], U.value || 10);
} else return W(H.value[1] || i[1], H.value[0] || i[0], U.value || 10);
return W(a(I.value.colors.from), a(I.value.colors.to), U.value || 10);
}), Ft = l(() => {
let e = [], t = 0, n = q.value.thermoHeight;
for (let r = 0; r < n - 1; r += n / U.value) e.push({
x: q.value.left,
y: q.value.top + r,
qYLess: q.value.top + r + n / U.value / 4,
halfY: q.value.top + r + n / U.value / 2,
qYMore: q.value.top + r + n / U.value / 4 * 3,
color: Pt.value[t],
height: Math.max(.1, n / U.value)
}), t += 1;
return e;
}), Y = y(!1);
function It(e) {
Y.value = e, mt.value += 1;
}
let X = y(!1);
function Z() {
X.value = !X.value;
}
async function Lt({ scale: e = 2 } = {}) {
if (!D.value) return;
let { width: t, height: n } = D.value.getBoundingClientRect(), r = t / n, { imageUri: i, base64: a } = await ge({
domElement: D.value,
base64: !0,
img: !0,
scale: e
});
return {
imageUri: i,
base64: a,
title: M.value.style.title.text,
width: t,
height: n,
aspectRatio: r
};
}
let Q = l({
get: () => M.value.style.chart.label.fontSize,
set: (e) => e
}), { autoSizeLabels: Rt } = Te({
svgRef: R,
fontSize: M.value.style.chart.label.fontSize,
minFontSize: M.value.style.chart.label.minFontSize,
sizeRef: Q,
labelClass: ".vue-ui-thermometer-label"
}), zt = l(() => M.value.style.chart.backgroundColor), Bt = l(() => M.value.style.title), { exportSvg: Vt, getSvg: Ht } = me({
svg: R,
title: Bt,
backgroundColor: zt
});
async function Ut({ isCb: e }) {
j.value = !0, await ke();
try {
if (e) {
let { blob: e, url: t, text: n, dataUrl: r } = await Ht();
await Promise.resolve(M.value.userOptions.callbacks.svg({
blob: e,
url: t,
text: n,
dataUrl: r
}));
} else await Promise.resolve(Vt());
} finally {
j.value = !1;
}
}
function Wt(e) {
if (e?.stage === "start") {
A.value = !0;
return;
}
if (e?.stage === "end") {
A.value = !1;
return;
}
Dt();
}
async function Gt() {
if (pt("copyAlt", {
config: M.value,
dataset: I.value
}), !M.value.userOptions.callbacks.altCopy) {
console.warn("Vue Data UI - A callback must be set for `altCopy` in userOptions.");
return;
}
await Promise.resolve(M.value.userOptions.callbacks.altCopy({
config: M.value,
dataset: I.value
}));
}
let Kt = l(() => `${E.value}-title`), qt = l(() => `${E.value}-desc`), $ = l(() => te(M.value.style.chart.label.formatter, I.value.value, ee({
p: M.value.style.chart.label.prefix,
v: I.value.value,
s: M.value.style.chart.label.suffix,
r: M.value.style.chart.label.rounding
}), { datapoint: I.value })), Jt = l(() => M.value.style.title.text || ""), Yt = l(() => {
if (F.value) return "...";
let e = o(I.value.from), t = o(I.value.to);
return `Thermometer value: ${$.value}. Range: ${e} to ${t}.`;
});
return ve({
getImage: Lt,
generatePdf: Et,
generateImage: Dt,
generateSvg: Ut,
toggleAnnotator: Z,
toggleFullscreen: It,
copyAlt: Gt
}), (e, n) => (v(), f("div", {
ref_key: "thermoChart",
ref: D,
class: g(`vue-data-ui-component vue-ui-thermometer ${Y.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: Ae(`width:100%;background:${M.value.style.chart.backgroundColor};color:${M.value.style.chart.color};font-family:${M.value.style.fontFamily}`),
id: `thermometer__${E.value}`,
onMouseenter: n[0] ||= () => S(wt)(!0),
onMouseleave: n[1] ||= () => S(wt)(!1)
}, [
M.value.userOptions.buttons.annotator ? (v(), u(S(st), {
key: 0,
svgRef: S(R),
backgroundColor: M.value.style.chart.backgroundColor,
color: M.value.style.chart.color,
active: X.value,
isCursorPointer: bt.value,
onClose: Z
}, {
"annotator-action-close": C(() => [b(e.$slots, "annotator-action-close", {}, void 0, !0)]),
"annotator-action-color": C(({ color: t }) => [b(e.$slots, "annotator-action-color", _(h({ color: t })), void 0, !0)]),
"annotator-action-draw": C(({ mode: t }) => [b(e.$slots, "annotator-action-draw", _(h({ mode: t })), void 0, !0)]),
"annotator-action-undo": C(({ disabled: t }) => [b(e.$slots, "annotator-action-undo", _(h({ disabled: t })), void 0, !0)]),
"annotator-action-redo": C(({ disabled: t }) => [b(e.$slots, "annotator-action-redo", _(h({ disabled: t })), void 0, !0)]),
"annotator-action-delete": C(({ disabled: t }) => [b(e.$slots, "annotator-action-delete", _(h({ disabled: t })), void 0, !0)]),
_: 3
}, 8, [
"svgRef",
"backgroundColor",
"color",
"active",
"isCursorPointer"
])) : d("", !0),
Ot.value ? (v(), f("div", Re, null, 512)) : d("", !0),
M.value.style.title.text ? (v(), f("div", {
key: 2,
ref_key: "chartTitle",
ref: gt,
style: "width:100%"
}, [(v(), u(_e, {
key: `title_${ht.value}`,
config: {
title: {
cy: "thermometer-div-title",
...M.value.style.title
},
subtitle: {
cy: "thermometer-div-subtitle",
...M.value.style.title.subtitle
}
}
}, null, 8, ["config"]))], 512)) : d("", !0),
M.value.userOptions.show && vt.value && (S(Tt) || S(L)) ? (v(), u(S(ct), {
ref: "details",
key: `user_options_${mt.value}`,
backgroundColor: M.value.style.chart.backgroundColor,
color: M.value.style.chart.color,
isImaging: S(V),
isPrinting: S(B),
uid: E.value,
hasPdf: M.value.userOptions.buttons.pdf,
hasImg: M.value.userOptions.buttons.img,
hasSvg: M.value.userOptions.buttons.svg,
hasFullscreen: M.value.userOptions.buttons.fullscreen,
hasAltCopy: M.value.userOptions.buttons.altCopy,
hasXls: !1,
isFullscreen: Y.value,
titles: { ...M.value.userOptions.buttonTitles },
chartElement: D.value,
position: M.value.userOptions.position,
hasAnnotator: M.value.userOptions.buttons.annotator,
isAnnotation: X.value,
callbacks: M.value.userOptions.callbacks,
printScale: M.value.userOptions.print.scale,
isCursorPointer: bt.value,
onToggleFullscreen: It,
onGeneratePdf: S(Et),
onGenerateImage: Wt,
onGenerateSvg: Ut,
onToggleAnnotator: Z,
onCopyAlt: Gt,
style: Ae({ visibility: S(Tt) ? S(L) ? "visible" : "hidden" : "visible" })
}, De({ _: 2 }, [
e.$slots.menuIcon ? {
name: "menuIcon",
fn: C(({ isOpen: t, color: n }) => [b(e.$slots, "menuIcon", _(h({
isOpen: t,
color: n
})), void 0, !0)]),
key: "0"
} : void 0,
e.$slots.optionPdf ? {
name: "optionPdf",
fn: C(() => [b(e.$slots, "optionPdf", {}, void 0, !0)]),
key: "1"
} : void 0,
e.$slots.optionImg ? {
name: "optionImg",
fn: C(() => [b(e.$slots, "optionImg", {}, void 0, !0)]),
key: "2"
} : void 0,
e.$slots.optionSvg ? {
name: "optionSvg",
fn: C(() => [b(e.$slots, "optionSvg", {}, void 0, !0)]),
key: "3"
} : void 0,
e.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: C(({ toggleFullscreen: t, isFullscreen: n }) => [b(e.$slots, "optionFullscreen", _(h({
toggleFullscreen: t,
isFullscreen: n
})), void 0, !0)]),
key: "4"
} : void 0,
e.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: C(({ toggleAnnotator: t, isAnnotator: n }) => [b(e.$slots, "optionAnnotator", _(h({
toggleAnnotator: t,
isAnnotator: n
})), void 0, !0)]),
key: "5"
} : void 0,
e.$slots.optionAltCopy ? {
name: "optionAltCopy",
fn: C(({ altCopy: t }) => [b(e.$slots, "optionAltCopy", _(h({ altCopy: t })), void 0, !0)]),
key: "6"
} : void 0,
e.$slots["custom-menu-before"] ? {
name: "custom-menu-before",
fn: C(() => [b(e.$slots, "custom-menu-before", {}, void 0, !0)]),
key: "7"
} : void 0,
e.$slots["custom-menu-after"] ? {
name: "custom-menu-after",
fn: C(() => [b(e.$slots, "custom-menu-after", {}, void 0, !0)]),
key: "8"
} : void 0
]), 1032, [
"backgroundColor",
"color",
"isImaging",
"isPrinting",
"uid",
"hasPdf",
"hasImg",
"hasSvg",
"hasFullscreen",
"hasAltCopy",
"isFullscreen",
"titles",
"chartElement",
"position",
"hasAnnotator",
"isAnnotation",
"callbacks",
"printScale",
"isCursorPointer",
"onGeneratePdf",
"style"
])) : d("", !0),
(v(), f("svg", {
ref_key: "svgRef",
ref: R,
xmlns: S(ae),
class: g({
"vue-data-ui-fullscreen--on": Y.value,
"vue-data-ui-fulscreen--off": !Y.value
}),
width: "100%",
viewBox: `0 0 ${q.value.width} ${q.value.height}`,
style: "background:transparent",
"aria-labelledby": Kt.value,
"aria-describedby": qt.value
}, [
p("title", { id: Kt.value }, x(Jt.value), 9, Be),
p("desc", { id: qt.value }, x(Yt.value), 9, Ve),
Oe(S(w)),
e.$slots["chart-background"] ? (v(), f("foreignObject", {
key: 0,
x: 0,
y: 0,
width: q.value.width,
height: q.value.height,
style: { pointerEvents: "none" }
}, [b(e.$slots, "chart-background", {}, void 0, !0)], 8, He)) : d("", !0),
p("defs", null, [p("clipPath", {
id: `vueUiPill-${E.value}`,
clipPathUnits: "userSpaceOnUse"
}, [p("rect", {
x: q.value.left,
y: q.value.top,
width: q.value.thermoWidth,
height: q.value.thermoHeight,
rx: q.value.thermoWidth / 2,
ry: q.value.thermoWidth / 2
}, null, 8, We)], 8, Ue), (v(!0), f(c, null, Me(Ft.value, (e, n) => (v(), u(xe, {
t: "linear",
id: `vueUiThermometerGradient_${n}_${E.value}`,
key: `t_${n}_${E.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
stops: [
[
"0%",
e.color,
1
],
[
"50%",
S(t)(e.color, 100 - M.value.style.chart.graduations.gradient.intensity),
1
],
[
"100%",
e.color,
1
]
]
}, null, 8, ["id", "stops"]))), 128))]),
p("g", { "clip-path": `url(#vueUiPill-${E.value})` }, [
p("rect", {
x: q.value.left,
y: q.value.top,
height: q.value.thermoHeight,
width: q.value.thermoWidth,
fill: "#FFFFFF"
}, null, 8, Ke),
(v(!0), f(c, null, Me(Ft.value, (e, t) => (v(), f("g", { key: `graduation_${t}` }, [
p("rect", {
x: e.x,
y: e.y,
height: e.height,
width: q.value.thermoWidth,
fill: M.value.style.chart.graduations.gradient.show ? `url(#vueUiThermometerGradient_${t}_${E.value})` : e.color,
"shape-rendering": "crispEdges"
}, null, 8, qe),
M.value.style.chart.graduations.show && ["both", "left"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 0,
x1: e.x,
x2: e.x + 10,
y1: e.y,
y2: e.y,
"stroke-width": M.value.style.chart.graduations.strokeWidth,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Je)) : d("", !0),
M.value.style.chart.graduations.showIntermediate ? (v(), f(c, { key: 1 }, [
M.value.style.chart.graduations.show && ["both", "left"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 0,
x1: e.x,
x2: e.x + 5,
y1: e.halfY,
y2: e.halfY,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Ye)) : d("", !0),
M.value.style.chart.graduations.show && ["both", "left"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 1,
x1: e.x,
x2: e.x + 2.5,
y1: e.qYLess,
y2: e.qYLess,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Xe)) : d("", !0),
M.value.style.chart.graduations.show && ["both", "left"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 2,
x1: e.x,
x2: e.x + 2.5,
y1: e.qYMore,
y2: e.qYMore,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Ze)) : d("", !0)
], 64)) : d("", !0),
M.value.style.chart.graduations.show && ["both", "right"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 2,
x1: q.value.right,
x2: q.value.right - 10,
y1: e.y,
y2: e.y,
"stroke-width": M.value.style.chart.graduations.strokeWidth,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, Qe)) : d("", !0),
M.value.style.chart.graduations.showIntermediate ? (v(), f(c, { key: 3 }, [
M.value.style.chart.graduations.show && ["both", "right"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 0,
x1: q.value.right,
x2: q.value.right - 5,
y1: e.halfY,
y2: e.halfY,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, $e)) : d("", !0),
M.value.style.chart.graduations.show && ["both", "right"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 1,
x1: q.value.right,
x2: q.value.right - 2.5,
y1: e.qYLess,
y2: e.qYLess,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, et)) : d("", !0),
M.value.style.chart.graduations.show && ["both", "right"].includes(M.value.style.chart.graduations.sides) ? (v(), f("line", {
key: 2,
x1: q.value.right,
x2: q.value.right - 2.5,
y1: e.qYMore,
y2: e.qYMore,
"stroke-width": M.value.style.chart.graduations.strokeWidth / 2,
stroke: M.value.style.chart.graduations.stroke,
"stroke-linecap": "round"
}, null, 8, tt)) : d("", !0)
], 64)) : d("", !0)
]))), 128)),
p("rect", {
class: g({ "vue-ui-thermometer-temperature": M.value.style.chart.animation.use }),
x: q.value.left,
y: q.value.top,
height: J.value,
width: q.value.thermoWidth,
fill: "#FFFFFF66"
}, null, 10, nt)
], 8, Ge),
M.value.style.chart.label.show ? (v(), f("g", {
key: 1,
role: "status",
"aria-live": "polite",
"aria-label": S(F) ? "Loading data" : $.value
}, [S(F) ? (v(), f("rect", {
key: 0,
x: q.value.left - 60,
y: J.value + q.value.top - Q.value / 2,
width: 50,
height: Q.value,
fill: "#6A6A6A40",
rx: "3"
}, null, 8, it)) : (v(), f("text", {
key: 1,
"aria-hidden": "true",
class: g({
"vue-ui-thermometer-temperature-value": M.value.style.chart.animation.use,
"vue-ui-thermometer-label": !0
}),
y: J.value + q.value.top + Q.value / 3,
x: q.value.left - 10,
"text-anchor": "end",
fill: M.value.style.chart.label.color,
"font-size": Q.value,
"font-weight": M.value.style.chart.label.bold ? "bold" : "normal"
}, x($.value), 11, at))], 8, rt)) : d("", !0),
b(e.$slots, "svg", { svg: {
...At.value,
isPrintingImg: S(B) || S(V) || A.value,
isPrintingSvg: j.value
} }, void 0, !0)
], 10, ze)),
e.$slots.watermark ? (v(), f("div", ot, [b(e.$slots, "watermark", _(h({ isPrinting: S(B) || S(V) || A.value || j.value })), void 0, !0)])) : d("", !0),
e.$slots.source ? (v(), f("div", {
key: 5,
ref_key: "source",
ref: _t,
dir: "auto"
}, [b(e.$slots, "source", {}, void 0, !0)], 512)) : d("", !0),
b(e.$slots, "skeleton", {}, () => [S(F) ? (v(), u(pe, { key: 0 })) : d("", !0)], !0)
], 46, Le));
}
}, [["__scopeId", "data-v-9308a291"]]);
//#endregion
export { Ie as n, w as t };