vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
481 lines (480 loc) • 19.9 kB
JavaScript
import { useCssVars as ke, computed as d, onMounted as be, ref as m, watch as xe, createElementBlock as u, openBlock as l, unref as h, normalizeStyle as te, normalizeClass as F, createBlock as I, createCommentVNode as i, createSlots as _e, withCtx as x, renderSlot as f, normalizeProps as O, guardReactiveProps as A, createVNode as we, createElementVNode as v, Fragment as M, renderList as se, toDisplayString as Ce } from "vue";
import { u as $e, o as Pe, e as oe, g as Fe, c as Ie, t as Oe, p as _, a as Ae, b as Me, v as g, d as U, X as Ue, s as Ye, i as Ne, f as Se } from "./index-CHWA6Lnw.js";
import { _ as Te } from "./Title-BwZtefYd.js";
import { u as qe, U as Le } from "./usePrinter-DibtVl2x.js";
import Ve from "./vue-ui-skeleton-BSUFPx4a.js";
import { u as le } from "./useNestedProp-ByBiJC9_.js";
import { _ as Ee } from "./PackageVersion-DcMafJMi.js";
import { P as Ge } from "./PenAndPaper-ljJaW1FE.js";
import { u as We } from "./useUserOptionState-BIvW1Kz7.js";
import { u as je } from "./useChartAccessibility-BWojgys7.js";
import { _ as ze } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Be = ["id"], Re = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, De = {
key: 2,
style: "width:100%"
}, He = ["xmlns", "viewBox"], Xe = ["width", "height"], Je = {
id: "vueUiPill",
clipPathUnits: "objectBoundingBox"
}, Ke = ["fill"], Qe = ["id"], Ze = ["stop-color"], et = ["stop-color"], tt = ["stop-color"], st = { "clip-path": "url(#vueUiPill)" }, ot = ["x", "y", "height", "width"], lt = ["x", "y", "height", "width", "fill"], at = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], rt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], nt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], ut = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], it = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], ht = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], ct = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], dt = ["x1", "x2", "y1", "y2", "stroke-width", "stroke"], vt = ["x", "y", "height", "width"], yt = ["y", "x", "fill", "font-size", "font-weight"], ft = {
key: 5,
class: "vue-data-ui-watermark"
}, gt = {
key: 6,
ref: "source",
dir: "auto"
}, mt = {
__name: "vue-ui-thermometer",
props: {
dataset: {
type: Object,
default() {
return {};
}
},
config: {
type: Object,
default() {
return {};
}
}
},
setup(w, { expose: ae }) {
ke((s) => ({
"81f57fe8": de.value,
"0e444a02": ce.value,
"6100776f": he.value
}));
const { vue_ui_thermometer: re } = $e(), a = w, Y = d(() => !!a.dataset && Object.keys(a.dataset).length);
be(() => {
G();
});
function G() {
Pe(a.dataset) ? oe({
componentName: "VueUiThermometer",
type: "dataset"
}) : Fe({
datasetObject: a.dataset,
requiredAttributes: ["value", "from", "to"]
}).forEach((s) => {
oe({
componentName: "VueUiThermometer",
type: "datasetAttribute",
property: s
});
});
}
const p = m(Ie()), W = m(null), j = m(0), z = m(0), e = d({
get: () => H(),
set: (s) => s
}), { userOptionsVisible: N, setUserOptionsVisibility: B, keepUserOptionState: R } = We({ config: e.value }), { svgRef: D } = je({ config: e.value.style.title });
function H() {
const s = le({
userConfig: a.config,
defaultConfig: re
});
return s.theme ? {
...le({
userConfig: Ae.vue_ui_thermometer[s.theme] || a.config,
defaultConfig: s
}),
customPalette: Oe[s.theme] || _
} : s;
}
xe(() => a.config, (s) => {
e.value = H(), N.value = !e.value.userOptions.showOnChartHover, G(), z.value += 1;
}, { deep: !0 });
const { isPrinting: X, isImaging: J, generatePdf: K, generateImage: Q } = qe({
elementId: `thermometer__${p.value}`,
fileName: e.value.style.title.text || "vue-ui-thermometer"
}), ne = d(() => e.value.userOptions.show && !e.value.style.title.text), C = d(() => Me(e.value.customPalette)), ue = d(() => e.value.style.chart.thermometer.width), y = d(() => a.dataset.steps || 10), c = m({
top: e.value.style.chart.padding.top,
left: e.value.style.chart.padding.left,
right: e.value.style.chart.padding.right,
bottom: e.value.style.chart.padding.bottom
});
function $(s, r, t) {
const n = [], V = Z(s), E = Z(r);
for (let b = 0; b < t; b++) {
const fe = S(V.red, E.red, b, t), ge = S(V.green, E.green, b, t), me = S(V.blue, E.blue, b, t), pe = `#${T(fe)}${T(ge)}${T(me)}`;
n.push(pe);
}
return n;
}
function Z(s) {
const r = s.slice(1);
return {
red: parseInt(r.slice(0, 2), 16),
green: parseInt(r.slice(2, 4), 16),
blue: parseInt(r.slice(4, 6), 16)
};
}
function S(s, r, t, n) {
return Math.round(s + (r - s) * t / n);
}
function T(s) {
return s.toString(16).padStart(2, "0");
}
const o = d(() => {
const s = ue.value + c.value.left + c.value.right, r = e.value.style.chart.height;
return {
width: s,
left: c.value.left,
right: s - c.value.right,
top: c.value.top,
bottom: r - c.value.bottom,
height: r
};
}), ie = d(() => o.value), q = d(() => {
const s = g(a.dataset.from) < 0 ? Math.abs(g(a.dataset.from)) : g(a.dataset.from), r = g(a.dataset.to) < 0 ? Math.abs(g(a.dataset.to)) : g(a.dataset.to);
let t = 0;
return g(a.dataset.to) > 0 ? t = s + r : s > r ? t = s - r : t = r - s, (1 - (Math.abs(g(a.dataset.from)) + g(a.dataset.value)) / t) * (o.value.height - c.value.top - c.value.bottom);
}), he = d(() => `${q.value}px`), ce = d(() => `${o.value.height - e.value.style.chart.padding.bottom - c.value.top}px`), de = d(() => `${e.value.style.chart.animation.speedMs}ms`), ve = d(() => {
if (a.dataset.colors) {
if (!a.dataset.colors.from)
return $(C.value[0] || _[0], U(a.dataset.colors.to), y.value || 10);
if (!a.dataset.colors.to)
return $(U(a.dataset.colors.from), C.value[1] || _[1], y.value || 10);
} else
return $(C.value[1] || _[1], C.value[0] || _[0], y.value || 10);
return $(U(a.dataset.colors.from), U(a.dataset.colors.to), y.value || 10);
}), ee = d(() => {
const s = [];
let r = 0;
const t = o.value.height - c.value.top - c.value.bottom;
for (let n = 0; n < t - 1; n += t / y.value)
s.push({
x: o.value.left,
y: o.value.top + n,
qYLess: o.value.top + n + t / y.value / 4,
halfY: o.value.top + n + t / y.value / 2,
qYMore: o.value.top + n + t / y.value / 4 * 3,
color: ve.value[r],
height: t / y.value
}), r += 1;
return s;
}), k = m(!1);
function ye(s) {
k.value = s, j.value += 1;
}
const P = m(!1);
function L() {
P.value = !P.value;
}
return ae({
generatePdf: K,
generateImage: Q,
toggleAnnotator: L
}), (s, r) => (l(), u("div", {
ref_key: "thermoChart",
ref: W,
class: F(`vue-ui-thermometer ${k.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: te(`width:100%;background:${e.value.style.chart.backgroundColor};color:${e.value.style.chart.color};font-family:${e.value.style.fontFamily}`),
id: `thermometer__${p.value}`,
onMouseenter: r[0] || (r[0] = () => h(B)(!0)),
onMouseleave: r[1] || (r[1] = () => h(B)(!1))
}, [
e.value.userOptions.buttons.annotator ? (l(), I(Ge, {
key: 0,
svgRef: h(D),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: P.value,
onClose: L
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : i("", !0),
ne.value ? (l(), u("div", Re, null, 512)) : i("", !0),
e.value.style.title.text ? (l(), u("div", De, [
(l(), I(Te, {
key: `title_${z.value}`,
config: {
title: {
cy: "thermometer-div-title",
...e.value.style.title
},
subtitle: {
cy: "thermometer-div-subtitle",
...e.value.style.title.subtitle
}
}
}, null, 8, ["config"]))
])) : i("", !0),
e.value.userOptions.show && Y.value && (h(R) || h(N)) ? (l(), I(Le, {
ref: "details",
key: `user_options_${j.value}`,
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isImaging: h(J),
isPrinting: h(X),
uid: p.value,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
hasXls: !1,
isFullscreen: k.value,
titles: { ...e.value.userOptions.buttonTitles },
chartElement: W.value,
position: e.value.userOptions.position,
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: P.value,
onToggleFullscreen: ye,
onGeneratePdf: h(K),
onGenerateImage: h(Q),
onToggleAnnotator: L,
style: te({
visibility: h(R) ? h(N) ? "visible" : "hidden" : "visible"
})
}, _e({ _: 2 }, [
s.$slots.menuIcon ? {
name: "menuIcon",
fn: x(({ isOpen: t, color: n }) => [
f(s.$slots, "menuIcon", O(A({ isOpen: t, color: n })), void 0, !0)
]),
key: "0"
} : void 0,
s.$slots.optionPdf ? {
name: "optionPdf",
fn: x(() => [
f(s.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
s.$slots.optionImg ? {
name: "optionImg",
fn: x(() => [
f(s.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
s.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: x(({ toggleFullscreen: t, isFullscreen: n }) => [
f(s.$slots, "optionFullscreen", O(A({ toggleFullscreen: t, isFullscreen: n })), void 0, !0)
]),
key: "3"
} : void 0,
s.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: x(({ toggleAnnotator: t, isAnnotator: n }) => [
f(s.$slots, "optionAnnotator", O(A({ toggleAnnotator: t, isAnnotator: n })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
Y.value ? (l(), u("svg", {
key: 4,
ref_key: "svgRef",
ref: D,
xmlns: h(Ue),
class: F({ "vue-data-ui-fullscreen--on": k.value, "vue-data-ui-fulscreen--off": !k.value }),
width: "100%",
viewBox: `0 0 ${o.value.width} ${o.value.height}`,
style: "background:transparent"
}, [
we(Ee),
s.$slots["chart-background"] ? (l(), u("foreignObject", {
key: 0,
x: 0,
y: 0,
width: o.value.width,
height: o.value.height,
style: {
pointerEvents: "none"
}
}, [
f(s.$slots, "chart-background", {}, void 0, !0)
], 8, Xe)) : i("", !0),
v("defs", null, [
v("clipPath", Je, [
v("rect", {
x: "0",
y: "0",
width: "1",
height: "1",
rx: "0.5",
ry: "0.07",
fill: e.value.style.chart.backgroundColor
}, null, 8, Ke)
]),
(l(!0), u(M, null, se(ee.value, (t, n) => (l(), u("linearGradient", {
id: `vueUiThermometerGradient_${n}_${p.value}`,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}, [
v("stop", {
offset: "0%",
"stop-color": t.color
}, null, 8, Ze),
v("stop", {
offset: "50%",
"stop-color": h(Ye)(t.color, 100 - e.value.style.chart.graduations.gradient.intensity)
}, null, 8, et),
v("stop", {
offset: "100%",
"stop-color": t.color
}, null, 8, tt)
], 8, Qe))), 256))
]),
v("g", st, [
v("rect", {
x: o.value.left,
y: o.value.top,
height: o.value.height - c.value.top - c.value.bottom,
width: o.value.width - c.value.left - c.value.right,
fill: "#FFFFFF"
}, null, 8, ot),
(l(!0), u(M, null, se(ee.value, (t, n) => (l(), u("g", {
key: `graduation_${n}`
}, [
v("rect", {
x: t.x,
y: t.y,
height: t.height,
width: o.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right,
fill: e.value.style.chart.graduations.gradient.show ? `url(#vueUiThermometerGradient_${n}_${p.value})` : t.color,
"shape-rendering": "crispEdges"
}, null, 8, lt),
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (l(), u("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, at)) : i("", !0),
e.value.style.chart.graduations.showIntermediate ? (l(), u(M, { key: 1 }, [
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (l(), u("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, rt)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "left"].includes(e.value.style.chart.graduations.sides) ? (l(), u("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) ? (l(), u("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, ut)) : i("", !0)
], 64)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (l(), u("line", {
key: 2,
x1: o.value.right,
x2: o.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, it)) : i("", !0),
e.value.style.chart.graduations.showIntermediate ? (l(), u(M, { key: 3 }, [
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (l(), u("line", {
key: 0,
x1: o.value.right,
x2: o.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) ? (l(), u("line", {
key: 1,
x1: o.value.right,
x2: o.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, ct)) : i("", !0),
e.value.style.chart.graduations.show && ["both", "right"].includes(e.value.style.chart.graduations.sides) ? (l(), u("line", {
key: 2,
x1: o.value.right,
x2: o.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, dt)) : i("", !0)
], 64)) : i("", !0)
]))), 128)),
v("rect", {
class: F({ "vue-ui-thermometer-temperature": e.value.style.chart.animation.use }),
x: o.value.left,
y: o.value.top,
height: q.value,
width: o.value.width - e.value.style.chart.padding.left - e.value.style.chart.padding.right,
fill: "#FFFFFF66"
}, null, 10, vt)
]),
v("text", {
class: F({ "vue-ui-thermometer-temperature-value": e.value.style.chart.animation.use }),
y: q.value + o.value.top + e.value.style.chart.label.fontSize / 3,
x: o.value.left - 10,
"text-anchor": "end",
fill: e.value.style.chart.label.color,
"font-size": e.value.style.chart.label.fontSize,
"font-weight": e.value.style.chart.label.bold ? "bold" : "normal"
}, Ce(h(Ne)(
e.value.style.chart.label.formatter,
w.dataset.value,
h(Se)({
p: e.value.style.chart.label.prefix,
v: w.dataset.value,
s: e.value.style.chart.label.suffix,
r: e.value.style.chart.label.rounding
}),
{ datapoint: w.dataset }
)), 11, yt),
f(s.$slots, "svg", { svg: ie.value }, void 0, !0)
], 10, He)) : i("", !0),
s.$slots.watermark ? (l(), u("div", ft, [
f(s.$slots, "watermark", O(A({ isPrinting: h(X) || h(J) })), void 0, !0)
])) : i("", !0),
s.$slots.source ? (l(), u("div", gt, [
f(s.$slots, "source", {}, void 0, !0)
], 512)) : i("", !0),
Y.value ? i("", !0) : (l(), I(Ve, {
key: 7,
config: {
type: "thermometer",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
thermometer: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"]))
], 46, Be));
}
}, Ot = /* @__PURE__ */ ze(mt, [["__scopeId", "data-v-b9d565e0"]]);
export {
Ot as default
};