vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
357 lines (353 loc) • 17.2 kB
JavaScript
import { toRefs as ht, defineAsyncComponent as e, computed as c, ref as o, onMounted as bt, watch as et, shallowReactive as vt, createElementBlock as ft, createBlock as d, openBlock as g, normalizeStyle as St, createElementVNode as kt, createTextVNode as Ct, createCommentVNode as ot, toDisplayString as yt, resolveDynamicComponent as Tt, mergeProps as Pt, toHandlers as At, createSlots as Dt, renderList as Lt, withCtx as It, renderSlot as zt, normalizeProps as Mt, guardReactiveProps as Ot } from "vue";
import it from "./BaseIcon-4i3dd7Ty.js";
const Nt = { style: { width: "36px" } }, Bt = {
__name: "vue-data-ui",
props: {
component: { type: String },
dataset: { type: [Object, Array, Number, String] },
config: { type: Object }
},
emits: [
"selectLegend",
"selectDatapoint",
"toggleOpenState",
"saveAnnotations",
"selectRoot",
"selectBranch",
"selectNut",
"change",
"selectPlot",
"selectSide",
"rate",
"postImage",
"hoverIndex",
"selectX",
"toggleLock",
"toggleTooltip",
"start",
"play",
"pause",
"reset",
"restart",
"lap",
"toggleAnnotator",
"selectGroup",
"selectRibbon",
"toggleTable",
"resetZoom",
"showSeries",
"hideSeries",
"toggleZoom",
"onNodeClick",
"onMidpointEnter",
"onMidpointLeave",
"focusLocation"
],
setup(at, { expose: nt, emit: lt }) {
const a = at, { component: Et, dataset: rt, config: ut } = ht(a), p = {
VueUi3dBar: e(() => import("./vue-ui-3d-bar-B3kUXUiU.js").then((t) => t.b)),
VueUiAgePyramid: e(() => import("./vue-ui-age-pyramid-ByKj9osZ.js").then((t) => t.b)),
VueUiAnnotator: e(() => import("./vue-ui-annotator-BZuXK7ov.js")),
VueUiCandlestick: e(() => import("./vue-ui-candlestick-B0rV5Vhv.js").then((t) => t.b)),
VueUiChestnut: e(() => import("./vue-ui-chestnut-CsTwZfmt.js").then((t) => t.b)),
VueUiDashboard: e(() => import("./vue-ui-dashboard-C1PRSeLr.js")),
VueUiDigits: e(() => import("./vue-ui-digits-DDh5Vxvc.js")),
VueUiDonut: e(() => import("./vue-ui-donut-CKDYWkKE.js").then((t) => t.a)),
VueUiDonutEvolution: e(() => import("./vue-ui-donut-evolution-BvNNQtyL.js").then((t) => t.b)),
VueUiGalaxy: e(() => import("./vue-ui-galaxy-C0TDWUTS.js").then((t) => t.b)),
VueUiGauge: e(() => import("./vue-ui-gauge-ChOANZyZ.js").then((t) => t.b)),
VueUiHeatmap: e(() => import("./vue-ui-heatmap-mxoacXPq.js").then((t) => t.b)),
VueUiKpi: e(() => import("./vue-ui-kpi-DQRm5B2_.js")),
VueUiMiniLoader: e(() => import("./vue-ui-mini-loader-CObyi21D.js")),
VueUiMolecule: e(() => import("./vue-ui-molecule-DjucsQhe.js").then((t) => t.b)),
VueUiMoodRadar: e(() => import("./vue-ui-mood-radar-DOd2rxuT.js").then((t) => t.b)),
VueUiNestedDonuts: e(() => import("./vue-ui-nested-donuts-DE7p2Fgp.js").then((t) => t.b)),
VueUiOnion: e(() => import("./vue-ui-onion-BATuVto7.js").then((t) => t.b)),
VueUiQuadrant: e(() => import("./vue-ui-quadrant-AW-eksks.js").then((t) => t.b)),
VueUiRadar: e(() => import("./vue-ui-radar-B710xZlD.js").then((t) => t.b)),
VueUiRating: e(() => import("./vue-ui-rating-iq2tKZ_U.js")),
VueUiRelationCircle: e(() => import("./vue-ui-relation-circle-C4noyjHV.js").then((t) => t.b)),
VueUiRings: e(() => import("./vue-ui-rings-Bwak5MGF.js").then((t) => t.b)),
VueUiScatter: e(() => import("./vue-ui-scatter-Bbk87yp_.js").then((t) => t.b)),
VueUiSkeleton: e(() => import("./vue-ui-skeleton-DTP-lHk-.js")),
VueUiSmiley: e(() => import("./vue-ui-smiley-Ccv9c7pA.js")),
VueUiSparkbar: e(() => import("./vue-ui-sparkbar-BHfJPNZl.js").then((t) => t.a)),
VueUiSparkgauge: e(() => import("./vue-ui-sparkgauge-3xNJCJ70.js").then((t) => t.a)),
VueUiSparkHistogram: e(() => import("./vue-ui-sparkhistogram-_lV4WXS_.js").then((t) => t.b)),
VueUiSparkline: e(() => import("./vue-ui-sparkline-BfFlV5kx.js").then((t) => t.b)),
VueUiSparkStackbar: e(() => import("./vue-ui-sparkstackbar-v3ayd3bl.js").then((t) => t.b)),
VueUiTable: e(() => import("./vue-ui-table-BBmsVv1l.js")),
VueUiTableSparkline: e(() => import("./vue-ui-table-sparkline-BmkIssWR.js").then((t) => t.b)),
VueUiThermometer: e(() => import("./vue-ui-thermometer-HNdHuF-6.js").then((t) => t.b)),
VueUiTiremarks: e(() => import("./vue-ui-tiremarks-H585-mQM.js").then((t) => t.b)),
VueUiTreemap: e(() => import("./vue-ui-treemap-YXAtO95p.js").then((t) => t.b)),
VueUiVerticalBar: e(() => import("./vue-ui-horizontal-bar-e_tYBG4d.js").then((t) => t.b)),
// legacy support
VueUiHorizontalBar: e(() => import("./vue-ui-horizontal-bar-e_tYBG4d.js").then((t) => t.b)),
// v3 renaming
VueUiWaffle: e(() => import("./vue-ui-waffle-BE8SWjIj.js").then((t) => t.b)),
VueUiWheel: e(() => import("./vue-ui-wheel-DWxbunQa.js").then((t) => t.b)),
VueUiXy: e(() => import("./vue-ui-xy-COxHwrGr.js").then((t) => t.a)),
VueUiTableHeatmap: e(() => import("./vue-ui-table-heatmap-B-T8pWI-.js").then((t) => t.b)),
VueUiAccordion: e(() => import("./vue-ui-accordion-DUuwVsuJ.js")),
VueUiQuickChart: e(() => import("./vue-ui-quick-chart-BCnCOAxm.js").then((t) => t.b)),
VueUiCursor: e(() => import("./vue-ui-cursor-Druq_LcL.js")),
VueUiSparkTrend: e(() => import("./vue-ui-spark-trend-BEVWCHis.js").then((t) => t.b)),
VueUiStripPlot: e(() => import("./vue-ui-strip-plot-Csh9RwiY.js").then((t) => t.b)),
VueUiDumbbell: e(() => import("./vue-ui-dumbbell-D4uWpexA.js").then((t) => t.b)),
VueUiWordCloud: e(() => import("./vue-ui-word-cloud-JwfLrZoU.js").then((t) => t.b)),
VueUiXyCanvas: e(() => import("./vue-ui-xy-canvas-Cg7fpBqF.js").then((t) => t.b)),
VueUiFlow: e(() => import("./vue-ui-flow-CTLxckNx.js").then((t) => t.b)),
VueUiParallelCoordinatePlot: e(() => import("./vue-ui-parallel-coordinate-plot-BLp7NM3E.js").then((t) => t.b)),
VueUiTimer: e(() => import("./vue-ui-timer-BHHgGQZo.js")),
VueUiCarouselTable: e(() => import("./vue-ui-carousel-table-CKRr0PUC.js")),
VueUiGizmo: e(() => import("./vue-ui-gizmo-Cd8foemN.js")),
VueUiStackbar: e(() => import("./vue-ui-stackbar-YQygDhDd.js").then((t) => t.b)),
VueUiStackline: e(() => import("./vue-ui-stackline-x9MMyg_1.js").then((t) => t.b)),
VueUiBullet: e(() => import("./vue-ui-bullet-DcFBb0YG.js").then((t) => t.b)),
VueUiFunnel: e(() => import("./vue-ui-funnel-BWyQixj8.js").then((t) => t.b)),
VueUiHistoryPlot: e(() => import("./vue-ui-history-plot-BsyGaRQT.js").then((t) => t.b)),
VueUiCirclePack: e(() => import("./vue-ui-circle-pack-CosGMpWi.js").then((t) => t.b)),
VueUiWorld: e(() => import("./vue-ui-world-CkgiS9TT.js")),
VueUiRidgeline: e(() => import("./vue-ui-ridgeline-Ciih1SOm.js").then((t) => t.b)),
VueUiChord: e(() => import("./vue-ui-chord-Ci7wdPU5.js").then((t) => t.b)),
VueUiDag: e(() => import("./vue-ui-dag-TkXJQIwo.js").then((t) => t.b)),
VueUiGeo: e(() => import("./vue-ui-geo-Cv7JzD1c.js").then((t) => t.b))
}, st = {
VueUi3dBar: ["config", "dataset"],
VueUiAgePyramid: ["config", "dataset"],
VueUiAnnotator: ["config", "dataset"],
VueUiCandlestick: ["config", "dataset"],
VueUiChestnut: ["config", "dataset"],
VueUiDashboard: ["config", "dataset"],
VueUiDigits: ["config", "dataset"],
VueUiDonut: ["config", "dataset"],
VueUiDonutEvolution: ["config", "dataset"],
VueUiGalaxy: ["config", "dataset"],
VueUiGauge: ["config", "dataset"],
VueUiHeatmap: ["config", "dataset"],
VueUiKpi: ["config", "dataset"],
VueUiMiniLoader: ["config"],
VueUiMolecule: ["config", "dataset"],
VueUiMoodRadar: ["config", "dataset"],
VueUiNestedDonuts: ["config", "dataset"],
VueUiOnion: ["config", "dataset"],
VueUiQuadrant: ["config", "dataset"],
VueUiRadar: ["config", "dataset"],
VueUiRating: ["config", "dataset"],
VueUiRelationCircle: ["config", "dataset"],
VueUiRings: ["config", "dataset"],
VueUiScatter: ["config", "dataset"],
VueUiSkeleton: ["config"],
VueUiSmiley: ["config", "dataset"],
VueUiSparkbar: ["config", "dataset"],
VueUiSparkgauge: ["config", "dataset"],
VueUiSparkHistogram: ["config", "dataset"],
VueUiSparkline: ["config", "dataset"],
VueUiSparkStackbar: ["config", "dataset"],
VueUiTable: ["config", "dataset"],
VueUiTableSparkline: ["config", "dataset"],
VueUiThermometer: ["config", "dataset"],
VueUiTiremarks: ["config", "dataset"],
VueUiTreemap: ["config", "dataset"],
VueUiVerticalBar: ["config", "dataset"],
// delete in v4
VueUiHorizontalBar: ["config", "dataset"],
// v3 renaming
VueUiWaffle: ["config", "dataset"],
VueUiWheel: ["config", "dataset"],
VueUiXy: ["config", "dataset"],
VueUiTableHeatmap: ["config", "dataset"],
VueUiAccordion: ["config"],
VueUiQuickChart: ["config", "dataset"],
VueUiCursor: ["config"],
VueUiSparkTrend: ["config", "dataset"],
VueUiStripPlot: ["config", "dataset"],
VueUiDumbbell: ["config", "dataset"],
VueUiWordCloud: ["config", "dataset"],
VueUiXyCanvas: ["config", "dataset"],
VueUiFlow: ["config", "dataset"],
VueUiParallelCoordinatePlot: ["config", "dataset"],
VueUiTimer: ["config"],
VueUiCarouselTable: ["config", "dataset"],
VueUiGizmo: ["config", "dataset"],
VueUiStackbar: ["config", "dataset"],
VueUiStackline: ["config", "dataset"],
VueUiBullet: ["config", "dataset"],
VueUiFunnel: ["config", "dataset"],
VueUiHistoryPlot: ["config", "dataset"],
VueUiCirclePack: ["config", "dataset"],
VueUiWorld: ["config", "dataset"],
VueUiRidgeline: ["config", "dataset"],
VueUiChord: ["config", "dataset"],
VueUiDag: ["config", "dataset"],
VueUiGeo: ["config", "dataset"]
}, ct = lt, V = c(() => !p[a.component]), gt = c(() => p[a.component] || null), l = o(null), pt = c(() => {
const t = st[a.component] || [], i = {};
return t.includes("config") && (i.config = ut.value), t.includes("dataset") && (i.dataset = rt.value), i;
}), U = o(() => null), h = o(() => null), b = o(() => null), v = o(() => null), f = o(() => null), S = o(() => null), k = o(() => null), C = o(() => null), y = o(() => null), T = o(() => null), P = o(() => null), A = o(() => null), D = o(() => null), L = o(() => null), I = o(() => null), z = o(() => null), M = o(() => null), O = o(() => null), N = o(() => null), E = o(() => null), H = o(() => null), x = o(() => null), B = o(() => null), F = o(() => null), G = o(() => null), Z = o(() => null), _ = o(() => null), $ = o(() => null), W = o(() => null), X = o(() => null), j = o(() => null), Q = o(() => null), q = o(() => null), mt = o(() => null), dt = o(() => null), Vt = o(() => null), K = o(() => null), Y = o(() => null), J = o(() => null), R = o(() => null);
bt(() => {
V.value && console.error(`
Vue Data UI exception:
The provided component "${a.component}" does not exist. Check the spelling.
Available components:
${Object.keys(p).map((t) => `. ${t}
`).join("")}`);
}), et(l, async (t) => {
t && (t.generatePdf && (U.value = t.generatePdf), t.generateImage && (b.value = t.generateImage), t.generateSvg && (v.value = t.generateSvg), t.generateCsv && (h.value = t.generateCsv), t.getItemsPositions && (f.value = t.getItemsPositions), t.toggleReadonly && (S.value = t.toggleReadonly), t.shoot && (k.value = t.shoot), t.close && (C.value = t.close), t.restoreOrder && (y.value = t.restoreOrder), t.recalculateHeight && (T.value = t.recalculateHeight), t.toggleLock && (P.value = t.toggleLock), t.toggleTable && (A.value = t.toggleTable), t.toggleLabels && (D.value = t.toggleLabels), t.toggleSort && (L.value = t.toggleSort), t.toggleStack && (I.value = t.toggleStack), t.toggleTooltip && (z.value = t.toggleTooltip), t.start && (M.value = t.start), t.pause && (O.value = t.pause), t.reset && (N.value = t.reset), t.restart && (E.value = t.restart), t.lap && (H.value = t.lap), t.toggleAnimation && (x.value = t.toggleAnimation), t.pauseAnimation && (B.value = t.pauseAnimation), t.resumeAnimation && (F.value = t.resumeAnimation), t.toggleAnnotator && (G.value = t.toggleAnnotator), t.selectNode && (Z.value = t.selectNode), t.selectGroup && (_.value = t.selectGroup), t.selectRibbon && ($.value = t.selectRibbon), t.autoSize && (W.value = t.autoSize), t.resetZoom && (X.value = t.resetZoom), t.showSeries && (j.value = t.showSeries), t.hideSeries && (Q.value = t.hideSeries), t.toggleZoom && (q.value = t.toggleZoom), t.onNodeClick && (mt.value = t.onNodeClick), t.onMidpointEnter && (dt.value = t.onMidpointEnter), t.onMidpointLeave && (Vt.value = t.onMidpointLeave), t.zoomIn && (K.value = t.zoomIn), t.zoomOut && (Y.value = t.zoomOut), t.switchOrientation && (J.value = t.switchOrientation), t.focusLocation && (R.value = t.focusLocation));
});
const Ut = () => {
const t = [
"selectLegend",
"selectDatapoint",
"toggleOpenState",
"saveAnnotations",
"selectRoot",
"selectBranch",
"selectNut",
"change",
"selectPlot",
"selectSide",
"rate",
"postImage",
"hoverIndex",
"selectX",
"toggleLock",
"toggleTooltip",
"start",
"pause",
"reset",
"restart",
"lap",
"toggleAnimation",
"pauseAnimation",
"resumeAnimation",
"toggleAnnotator",
"selectNode",
"selectGroup",
"selectRibbon",
"autoSize",
"toggleTable",
"resetZoom",
"showSeries",
"hideSeries",
"toggleZoom",
"onNodeClick",
"onMidpointEnter",
"onMidpointLeave",
"zoomIn",
"zoomOut",
"switchOrientation",
"focusLocation"
], i = {};
return t.forEach((r) => {
i[r] = (...n) => ct(r, ...n);
}), i;
}, m = vt([]);
function w(t, i) {
return new Promise((r, n) => {
m.push({ method: t, args: i, resolve: r, reject: n });
});
}
et(l, (t) => {
if (t)
for (; m.length; ) {
const { method: i, args: r, resolve: n, reject: s } = m.shift(), tt = t[i];
typeof tt == "function" ? Promise.resolve().then(() => tt(...r)).then(n).catch(s) : s(new Error(`Method ${i} not found on ${a.component}`));
}
}), nt({
getData(...t) {
return l.value?.getData ? l.value.getData(...t) : w("getData", t);
},
getImage(t = {}) {
const { scale: i = 2 } = t;
return l.value?.getImage ? l.value.getImage({ scale: i }) : w("getImage", [{ scale: i }]);
},
autoSize: W,
generatePdf: U,
generateCsv: h,
generateImage: b,
generateSvg: v,
getItemsPositions: f,
toggleReadonly: S,
shoot: k,
close: C,
restoreOrder: y,
recalculateHeight: T,
toggleLock: P,
toggleTable: A,
toggleLabels: D,
toggleSort: L,
toggleStack: I,
toggleTooltip: z,
start: M,
pause: O,
reset: N,
restart: E,
lap: H,
pauseAnimation: B,
resumeAnimation: F,
toggleAnimation: x,
toggleAnnotator: G,
selectNode: Z,
selectGroup: _,
selectRibbon: $,
resetZoom: X,
showSeries: j,
hideSeries: Q,
toggleZoom: q,
zoomIn: K,
zoomOut: Y,
switchOrientation: J,
focusLocation: R
});
const u = c(() => {
let t = `The provided component ${a.component} does not exist.`;
return ["VueUiIcon", "VueUiPattern", "Arrow"].includes(a.component) ? (t = `${a.component} is not supported by the VueDataUi universal component. You must import it individually.`, console.warn(t), {
status: "notSupported",
message: t
}) : (console.warn(t), {
status: "unknown",
message: t
});
});
return (t, i) => V.value ? (g(), ft("div", {
key: 0,
style: St({
width: "100%",
display: "flex",
gap: "6px",
alignItems: "center",
color: u.value.status === "notSupported" ? "#FF9000" : "#FF0000"
})
}, [
kt("div", Nt, [
u.value.status === "unknown" ? (g(), d(it, {
key: 0,
name: "moodFlat",
stroke: "#FF0000"
})) : ot("", !0),
u.value.status === "notSupported" ? (g(), d(it, {
key: 1,
name: "circleExclamation",
stroke: "#FF9000"
})) : ot("", !0)
]),
Ct(" " + yt(u.value.message), 1)
], 4)) : (g(), d(Tt(gt.value), Pt({
key: 1,
ref_key: "currentComponentRef",
ref: l
}, pt.value, At(Ut())), Dt({ _: 2 }, [
Lt(t.$slots, (r, n) => ({
name: n,
fn: It((s) => [
zt(t.$slots, n, Mt(Ot(s)))
])
}))
]), 1040));
}
};
export {
Bt as default
};