vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
514 lines (510 loc) • 20.3 kB
JavaScript
import { defineAsyncComponent as $, ref as g, computed as f, onMounted as ke, watch as Z, onBeforeUnmount as we, createElementBlock as n, openBlock as r, unref as o, normalizeStyle as T, normalizeClass as ee, createBlock as C, createCommentVNode as i, createElementVNode as _, createSlots as xe, withCtx as b, renderSlot as m, normalizeProps as O, guardReactiveProps as A, createVNode as Ce, Fragment as U, renderList as N, toDisplayString as B } from "vue";
import { u as _e, o as Le, e as te, g as $e, c as Oe, l as Ae, D as Be, d as Pe, i as P, f as S, X as Se, a as Ie } from "./index-BLtEpj8j.js";
import { u as ae } from "./useNestedProp-Bw1KcAmj.js";
import { u as Fe } from "./usePrinter-DnRwTdvS.js";
import { u as He } from "./useUserOptionState-BIvW1Kz7.js";
import { u as Me } from "./useChartAccessibility-9icAAmYg.js";
import Te from "./Legend-E7G897sw.js";
import Ue from "./Title-DkG60EPg.js";
import Ne from "./img-D-vWHxhM.js";
import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ze = ["id"], Ee = {
key: 1,
ref: "noTitle",
class: "vue-data-ui-no-title-space",
style: "height:36px; width: 100%;background:transparent"
}, We = ["xmlns", "viewBox"], Ve = ["width", "height"], De = { key: 1 }, je = ["x", "y", "height", "width", "fill", "stroke"], Ge = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], qe = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], Xe = ["x", "y", "font-size", "font-weight", "fill"], Ye = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], Je = { key: 3 }, Ke = ["x", "y", "fill", "font-size", "font-weight"], Qe = { key: 4 }, Ze = ["x1", "x2", "y1", "y2", "stroke"], et = {
key: 5,
class: "vue-data-ui-watermark"
}, tt = {
class: "vue-ui-bullet-legend-item",
dir: "auto"
}, at = { style: { "margin-right": "2px" } }, lt = {
key: 7,
ref: "source",
dir: "auto"
}, st = {
__name: "vue-ui-bullet",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
setup(le, { expose: se }) {
const re = $(() => import("./PackageVersion-CnRyWKP-.js")), oe = $(() => import("./PenAndPaper-7BWf7zgA.js")), ne = $(() => import("./vue-ui-skeleton-CsMU8DwQ.js")), ue = $(() => import("./UserOptions-DGw0HvSp.js")), { vue_ui_bullet: ie } = _e(), u = le, k = g(null), ce = g(null), R = g(0), he = g(null), ve = g(0), y = f({
get: () => u.dataset.hasOwnProperty("value"),
set: (t) => t
}), w = f(() => u.dataset.segments ? Array.isArray(u.dataset.segments) ? u.dataset.segments.length ? !0 : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), y.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), y.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
segments: [
{
name: string;
from: number;
to: number;
color?: string;
},
{...}
]
`), y.value = !1, !1));
ke(z);
function z() {
Le(u.dataset) ? te({
componentName: "VueUiBullet",
type: "dataset"
}) : w.value ? u.dataset.segments.forEach((t, s) => {
$e({
datasetObject: t,
requiredAttributes: ["name", "from", "to"]
}).forEach((a) => {
y.value = !1, te({
componentName: "VueUiBullet segment",
type: "datasetSerieAttribute",
property: a,
index: s
});
});
}) : y.value = !1, e.value.style.chart.animation.show && G(u.dataset.value || 0);
}
const I = g(Oe());
function E() {
const t = ae({
userConfig: u.config,
defaultConfig: ie
});
return t.theme ? {
...ae({
userConfig: Ie.vue_ui_bullet[t.theme] || u.config,
defaultConfig: t
})
} : t;
}
const e = f({
get: () => E(),
set: (t) => t
}), { userOptionsVisible: F, setUserOptionsVisibility: W, keepUserOptionState: V } = He({ config: e.value }), { svgRef: D } = Me({ config: e.value.style.chart.title });
Z(() => u.config, (t) => {
e.value = E(), F.value = !e.value.userOptions.showOnChartHover, z(), R.value += 1;
}, { deep: !0 });
const l = f(() => {
const t = e.value.style.chart.height, s = e.value.style.chart.width, a = e.value.style.chart.padding.left, d = s - e.value.style.chart.padding.right, p = e.value.style.chart.padding.top, c = t - e.value.style.chart.padding.bottom;
return {
height: t,
width: s,
left: a,
right: d,
top: p,
bottom: c,
chartWidth: d - a,
chartHeight: c - p
};
}), de = f(() => {
if (!w.value) return [];
const t = [];
for (let s = 0; s < u.dataset.segments.length; s += 1)
t.push(Ae(e.value.style.chart.segments.baseColor, s / u.dataset.segments.length));
return t;
}), H = f(() => w.value ? {
min: Math.min(...u.dataset.segments.map((t) => t.from)),
max: Math.max(...u.dataset.segments.map((t) => t.to))
} : { min: 0, max: 1 }), h = g(ge());
Z(() => u.dataset, (t) => {
e.value.style.chart.animation.show ? G(t.value || 0) : h.value = t.value || 0;
}, { deep: !0 });
function ge() {
return e.value.style.chart.animation.show ? H.value.min : u.dataset.value || 0;
}
const j = g(null);
function G(t) {
const s = Math.abs(t - h.value) / e.value.style.chart.animation.animationFrames;
function a() {
h.value < t ? h.value = Math.min(h.value + s, t) : h.value > t && (h.value = Math.max(h.value - s, t)), h.value !== t && (j.value = requestAnimationFrame(a));
}
a();
}
we(() => {
cancelAnimationFrame(j.value);
});
const v = f(() => {
if (!w.value)
return [];
const t = Be(H.value.min, H.value.max, e.value.style.chart.segments.ticks.divisions), s = t.min >= 0 ? 0 : Math.abs(t.min), a = {
x: l.value.left + (u.dataset.target + s) / (t.max + s) * l.value.chartWidth - e.value.style.chart.target.width / 2
}, d = {
width: (h.value + s) / (t.max + s) * l.value.chartWidth
}, p = t.ticks.map((c) => ({
value: c,
y: l.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
x: l.value.left + (c + s) / (t.max + s) * l.value.chartWidth
}));
return {
scale: t,
target: a,
value: d,
ticks: p,
chunks: u.dataset.segments.map((c, be) => ({
...c,
color: c.color ? Pe(c.color) : de.value[be],
x: l.value.left + l.value.chartWidth * ((c.from + s) / (t.max + s)),
y: l.value.top,
height: l.value.chartHeight,
width: l.value.chartWidth * (Math.abs(c.to - c.from) / (t.max + s))
}))
};
}), q = f(() => !v.value || !v.value.chunks || !v.value.chunks.length ? [] : v.value.chunks.map((t) => {
const s = P(
e.value.style.chart.segments.dataLabels.formatter,
t.from,
S({
p: e.value.style.chart.segments.dataLabels.prefix,
v: t.from,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
), a = P(
e.value.style.chart.segments.dataLabels.formatter,
t.to,
S({
p: e.value.style.chart.segments.dataLabels.prefix,
v: t.to,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
);
return {
...t,
shape: "square",
value: `${s} - ${a}`
};
})), fe = f(() => ({
cy: "bullet-div-legend",
backgroundColor: "transparent",
color: e.value.style.chart.legend.color,
fontSize: e.value.style.chart.legend.fontSize,
paddingBottom: 6,
fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
})), { isPrinting: X, isImaging: Y, generatePdf: J, generateImage: K } = Fe({
elementId: `bullet_${I.value}`,
fileName: e.value.style.chart.title.text || "vue-ui-bullet",
options: e.value.userOptions.print
}), me = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), x = g(!1);
function Q(t) {
x.value = t, ve.value += 1;
}
function ye() {
return v.value;
}
const L = g(!1);
function M() {
L.value = !L.value;
}
async function pe({ scale: t = 2 } = {}) {
if (!k.value) return;
const { width: s, height: a } = k.value.getBoundingClientRect(), d = s / a, { imageUri: p, base64: c } = await Ne({ domElement: k.value, base64: !0, img: !0, scale: t });
return {
imageUri: p,
base64: c,
title: e.value.style.chart.title.text,
width: s,
height: a,
aspectRatio: d
};
}
return se({
getData: ye,
getImage: pe,
generatePdf: J,
generateImage: K,
toggleAnnotator: M,
toggleFullscreen: Q
}), (t, s) => (r(), n("div", {
ref_key: "bulletChart",
ref: k,
class: ee(`vue-ui-bullet ${x.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
style: T(`font-family:${e.value.style.fontFamily};width:100%;background:${e.value.style.chart.backgroundColor}`),
id: `bullet_${I.value}`,
onMouseenter: s[0] || (s[0] = () => o(W)(!0)),
onMouseleave: s[1] || (s[1] = () => o(W)(!1))
}, [
e.value.userOptions.buttons.annotator ? (r(), C(o(oe), {
key: 0,
svgRef: o(D),
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
active: L.value,
onClose: M
}, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : i("", !0),
me.value ? (r(), n("div", Ee, null, 512)) : i("", !0),
e.value.style.chart.title.text ? (r(), n("div", {
key: 2,
ref_key: "chartTitle",
ref: ce,
style: "width:100%;background:transparent;"
}, [
(r(), C(Ue, {
lineHeight: "1.3rem",
key: `title_${R.value}`,
config: {
title: {
cy: "bullet-div-title",
...e.value.style.chart.title
},
subtitle: {
cy: "bullet-div-subtitle",
...e.value.style.chart.title.subtitle
}
}
}, null, 8, ["config"]))
], 512)) : i("", !0),
e.value.userOptions.show && y.value && (o(V) || o(F)) ? (r(), C(o(ue), {
key: 3,
ref: "details",
backgroundColor: e.value.style.chart.backgroundColor,
color: e.value.style.chart.color,
isPrinting: o(X),
isImaging: o(Y),
uid: I.value,
hasTooltip: !1,
hasPdf: e.value.userOptions.buttons.pdf,
hasImg: e.value.userOptions.buttons.img,
hasXls: !1,
hasTable: !1,
hasLabel: !1,
hasFullscreen: e.value.userOptions.buttons.fullscreen,
isFullscreen: x.value,
chartElement: k.value,
position: e.value.userOptions.position,
titles: { ...e.value.userOptions.buttonTitles },
hasAnnotator: e.value.userOptions.buttons.annotator,
isAnnotation: L.value,
callbacks: e.value.userOptions.callbacks,
printScale: e.value.userOptions.print.scale,
onToggleFullscreen: Q,
onGeneratePdf: o(J),
onGenerateImage: o(K),
onToggleAnnotator: M,
style: T({
visibility: o(V) ? o(F) ? "visible" : "hidden" : "visible"
})
}, xe({ _: 2 }, [
t.$slots.menuIcon ? {
name: "menuIcon",
fn: b(({ isOpen: a, color: d }) => [
m(t.$slots, "menuIcon", O(A({ isOpen: a, color: d })), void 0, !0)
]),
key: "0"
} : void 0,
t.$slots.optionPdf ? {
name: "optionPdf",
fn: b(() => [
m(t.$slots, "optionPdf", {}, void 0, !0)
]),
key: "1"
} : void 0,
t.$slots.optionImg ? {
name: "optionImg",
fn: b(() => [
m(t.$slots, "optionImg", {}, void 0, !0)
]),
key: "2"
} : void 0,
t.$slots.optionFullscreen ? {
name: "optionFullscreen",
fn: b(({ toggleFullscreen: a, isFullscreen: d }) => [
m(t.$slots, "optionFullscreen", O(A({ toggleFullscreen: a, isFullscreen: d })), void 0, !0)
]),
key: "3"
} : void 0,
t.$slots.optionAnnotator ? {
name: "optionAnnotator",
fn: b(({ toggleAnnotator: a, isAnnotator: d }) => [
m(t.$slots, "optionAnnotator", O(A({ toggleAnnotator: a, isAnnotator: d })), void 0, !0)
]),
key: "4"
} : void 0
]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
y.value ? (r(), n("svg", {
key: 4,
ref_key: "svgRef",
ref: D,
xmlns: o(Se),
class: ee({ "vue-data-ui-fullscreen--on": x.value, "vue-data-ui-fulscreen--off": !x.value, "vue-ui-bullet-svg": !0 }),
viewBox: `0 0 ${l.value.width} ${l.value.height}`,
style: T(`width: 100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
}, [
Ce(o(re)),
t.$slots["chart-background"] ? (r(), n("foreignObject", {
key: 0,
x: 0,
y: 0,
width: l.value.width,
height: l.value.height,
style: {
pointerEvents: "none"
}
}, [
m(t.$slots, "chart-background", {}, void 0, !0)
], 8, Ve)) : i("", !0),
w.value ? (r(), n("g", De, [
(r(!0), n(U, null, N(v.value.chunks, (a) => (r(), n("rect", {
x: a.x,
y: a.y,
height: a.height,
width: a.width,
fill: a.color,
"stroke-width": 1,
stroke: e.value.style.chart.backgroundColor
}, null, 8, je))), 256)),
e.value.style.chart.target.onTop ? i("", !0) : (r(), n("rect", {
key: 0,
x: v.value.target.x,
y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
height: l.value.chartHeight * e.value.style.chart.target.heightRatio,
width: e.value.style.chart.target.width,
rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
fill: e.value.style.chart.target.color,
stroke: e.value.style.chart.target.stroke,
"stroke-width": e.value.style.chart.target.strokeWidth
}, null, 8, Ge)),
_("rect", {
x: l.value.left,
y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.valueBar.heightRatio) / 2,
height: l.value.chartHeight * e.value.style.chart.valueBar.heightRatio,
width: v.value.value.width,
fill: e.value.style.chart.valueBar.color,
stroke: e.value.style.chart.valueBar.stroke,
"stroke-width": e.value.style.chart.valueBar.strokeWidth
}, null, 8, qe),
e.value.style.chart.valueBar.label.show ? (r(), n("text", {
key: 1,
x: l.value.left + v.value.value.width,
y: l.value.top - 6 + e.value.style.chart.valueBar.label.offsetY,
"font-size": e.value.style.chart.valueBar.label.fontSize,
"font-weight": e.value.style.chart.valueBar.label.bold ? "bold" : "normal",
fill: e.value.style.chart.valueBar.label.color,
"text-anchor": "middle"
}, B(o(P)(
e.value.style.chart.segments.dataLabels.formatter,
h.value,
o(S)({
p: e.value.style.chart.segments.dataLabels.prefix,
v: h.value,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
)), 9, Xe)) : i("", !0),
e.value.style.chart.target.onTop ? (r(), n("rect", {
key: 2,
x: v.value.target.x,
y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
height: l.value.chartHeight * e.value.style.chart.target.heightRatio,
width: e.value.style.chart.target.width,
rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
fill: e.value.style.chart.target.color,
stroke: e.value.style.chart.target.stroke,
"stroke-width": e.value.style.chart.target.strokeWidth
}, null, 8, Ye)) : i("", !0),
e.value.style.chart.segments.dataLabels.show ? (r(), n("g", Je, [
(r(!0), n(U, null, N(v.value.ticks, (a) => (r(), n("text", {
x: a.x,
y: a.y,
"text-anchor": "middle",
fill: e.value.style.chart.segments.dataLabels.color,
"font-size": e.value.style.chart.segments.dataLabels.fontSize + "px",
"font-weight": e.value.style.chart.segments.dataLabels.bold ? "bold" : "normal"
}, B(o(P)(
e.value.style.chart.segments.dataLabels.formatter,
a.value,
o(S)({
p: e.value.style.chart.segments.dataLabels.prefix,
v: a.value,
s: e.value.style.chart.segments.dataLabels.suffix,
r: e.value.style.chart.segments.dataLabels.rounding
})
)), 9, Ke))), 256))
])) : i("", !0),
e.value.style.chart.segments.dataLabels.show && e.value.style.chart.segments.ticks.show ? (r(), n("g", Qe, [
(r(!0), n(U, null, N(v.value.ticks, (a) => (r(), n("line", {
x1: a.x,
x2: a.x,
y1: l.value.bottom,
y2: l.value.bottom + 3,
stroke: e.value.style.chart.segments.ticks.stroke,
"stroke-width": 1,
"stroke-linecap": "round"
}, null, 8, Ze))), 256))
])) : i("", !0)
])) : i("", !0),
m(t.$slots, "svg", { svg: l.value }, void 0, !0)
], 14, We)) : i("", !0),
t.$slots.watermark ? (r(), n("div", et, [
m(t.$slots, "watermark", O(A({ isPrinting: o(X) || o(Y) })), void 0, !0)
])) : i("", !0),
y.value ? i("", !0) : (r(), C(o(ne), {
key: 6,
config: {
type: "bullet",
style: {
backgroundColor: e.value.style.chart.backgroundColor,
bullet: {
color: "#CCCCCC"
}
}
}
}, null, 8, ["config"])),
_("div", {
ref_key: "chartLegend",
ref: he
}, [
e.value.style.chart.legend.show ? (r(), C(Te, {
key: 0,
clickable: !1,
legendSet: q.value,
config: fe.value
}, {
item: b(({ legend: a }) => [
_("div", tt, [
_("span", at, B(a.name) + ":", 1),
_("span", null, B(a.value), 1)
])
]),
_: 1
}, 8, ["legendSet", "config"])) : i("", !0),
m(t.$slots, "legend", { legend: q.value }, void 0, !0)
], 512),
t.$slots.source ? (r(), n("div", lt, [
m(t.$slots, "source", {}, void 0, !0)
], 512)) : i("", !0)
], 46, ze));
}
}, ft = /* @__PURE__ */ Re(st, [["__scopeId", "data-v-42012d4b"]]);
export {
ft as default
};