vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
292 lines (288 loc) • 13.3 kB
JavaScript
import { toRefs as tt, defineAsyncComponent as e, computed as s, ref as o, onMounted as et, watch as M, shallowReactive as ot, createElementBlock as it, createBlock as m, openBlock as c, normalizeStyle as at, createElementVNode as nt, createTextVNode as rt, createCommentVNode as $, toDisplayString as lt, resolveDynamicComponent as ut, mergeProps as st, toHandlers as ct, createSlots as gt, renderList as pt, withCtx as mt, renderSlot as dt, normalizeProps as Vt, guardReactiveProps as Ut } from "vue";
import W from "./BaseIcon-CCOXJ43P.js";
const ft = { style: { width: "36px" } }, ht = {
__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"
],
setup(X, { expose: Q, emit: j }) {
const n = X, { component: vt, dataset: z, config: K } = tt(n), g = {
VueUi3dBar: e(() => import("./vue-ui-3d-bar-BJZ5zSaf.js")),
VueUiAgePyramid: e(() => import("./vue-ui-age-pyramid-k5Fu7j2-.js")),
VueUiAnnotator: e(() => import("./vue-ui-annotator-BZ0Yy6ia.js")),
VueUiCandlestick: e(() => import("./vue-ui-candlestick-CwJ_u0fV.js")),
VueUiChestnut: e(() => import("./vue-ui-chestnut-DPuTvEo_.js")),
VueUiDashboard: e(() => import("./vue-ui-dashboard-BkGZ-fol.js")),
VueUiDigits: e(() => import("./vue-ui-digits-BTsRKOh6.js")),
VueUiDonut: e(() => import("./vue-ui-donut-CHFJ4llc.js")),
VueUiDonutEvolution: e(() => import("./vue-ui-donut-evolution-Du7EzpBa.js")),
VueUiGalaxy: e(() => import("./vue-ui-galaxy-CV_lO5aH.js")),
VueUiGauge: e(() => import("./vue-ui-gauge-DLN6zs3X.js")),
VueUiHeatmap: e(() => import("./vue-ui-heatmap-BdWCJv-X.js")),
VueUiKpi: e(() => import("./vue-ui-kpi-B9HqS8K-.js")),
VueUiMiniLoader: e(() => import("./vue-ui-mini-loader-sTAHynyd.js")),
VueUiMolecule: e(() => import("./vue-ui-molecule-CBY0mkv6.js")),
VueUiMoodRadar: e(() => import("./vue-ui-mood-radar-0l5kOwOS.js")),
VueUiNestedDonuts: e(() => import("./vue-ui-nested-donuts-CaMgxVbA.js")),
VueUiOnion: e(() => import("./vue-ui-onion-LcKtpoza.js")),
VueUiQuadrant: e(() => import("./vue-ui-quadrant-DNIbdRlI.js")),
VueUiRadar: e(() => import("./vue-ui-radar-CO7-BuKy.js")),
VueUiRating: e(() => import("./vue-ui-rating-BXw-c2re.js")),
VueUiRelationCircle: e(() => import("./vue-ui-relation-circle-BVEursNY.js")),
VueUiRings: e(() => import("./vue-ui-rings-DW_FdNSK.js")),
VueUiScatter: e(() => import("./vue-ui-scatter-CNltzVkT.js")),
VueUiScreenshot: e(() => import("./vue-ui-screenshot-iEAAudBg.js")),
VueUiSkeleton: e(() => import("./vue-ui-skeleton-DApuwwZF.js")),
VueUiSmiley: e(() => import("./vue-ui-smiley-C-RH5eaS.js")),
VueUiSparkbar: e(() => import("./vue-ui-sparkbar-DSsaunzO.js")),
VueUiSparkgauge: e(() => import("./vue-ui-sparkgauge-DS_jMTUO.js")),
VueUiSparkHistogram: e(() => import("./vue-ui-sparkhistogram-D_gxEiyc.js")),
VueUiSparkline: e(() => import("./vue-ui-sparkline-BJBtHg1Z.js")),
VueUiSparkStackbar: e(() => import("./vue-ui-sparkstackbar-sk6RTxgo.js")),
VueUiTable: e(() => import("./vue-ui-table-CiYMFIvc.js")),
VueUiTableSparkline: e(() => import("./vue-ui-table-sparkline-qnUHp7_y.js")),
VueUiThermometer: e(() => import("./vue-ui-thermometer-B1pc1sTh.js")),
VueUiTiremarks: e(() => import("./vue-ui-tiremarks-DiWKoU3P.js")),
VueUiTreemap: e(() => import("./vue-ui-treemap-gTJuFH2s.js")),
VueUiVerticalBar: e(() => import("./vue-ui-vertical-bar-BBuDOBoW.js")),
VueUiWaffle: e(() => import("./vue-ui-waffle-BL0NYWzA.js")),
VueUiWheel: e(() => import("./vue-ui-wheel-Di-LA-Pk.js")),
VueUiXy: e(() => import("./vue-ui-xy-Caw1sPOs.js")),
VueUiTableHeatmap: e(() => import("./vue-ui-table-heatmap-E_W8ydlD.js")),
VueUiAccordion: e(() => import("./vue-ui-accordion-COi2Xtsr.js")),
VueUiQuickChart: e(() => import("./vue-ui-quick-chart-Bd2xUcYS.js")),
VueUiCursor: e(() => import("./vue-ui-cursor-BWDfw2Ie.js")),
VueUiSparkTrend: e(() => import("./vue-ui-spark-trend-CY_5HSpU.js")),
VueUiStripPlot: e(() => import("./vue-ui-strip-plot-Y_MY3klS.js")),
VueUiDumbbell: e(() => import("./vue-ui-dumbbell-D_ZrpG52.js")),
VueUiWordCloud: e(() => import("./vue-ui-word-cloud-CIL5uwJc.js")),
VueUiXyCanvas: e(() => import("./vue-ui-xy-canvas-CO_1a0bx.js")),
VueUiFlow: e(() => import("./vue-ui-flow-EOVRHoOo.js")),
VueUiParallelCoordinatePlot: e(() => import("./vue-ui-parallel-coordinate-plot-BNLSWVnA.js")),
VueUiTimer: e(() => import("./vue-ui-timer-aBhtv50v.js")),
VueUiCarouselTable: e(() => import("./vue-ui-carousel-table-BoC8-DRG.js")),
VueUiGizmo: e(() => import("./vue-ui-gizmo-G1WtSE2E.js")),
VueUiStackbar: e(() => import("./vue-ui-stackbar-usPJtqEt.js")),
VueUiBullet: e(() => import("./vue-ui-bullet-u2ESqCXp.js")),
VueUiFunnel: e(() => import("./vue-ui-funnel-BeEfwpch.js")),
VueUiHistoryPlot: e(() => import("./vue-ui-history-plot-Bch7yEUY.js")),
VueUiCirclePack: e(() => import("./vue-ui-circle-pack-_hLdrihN.js"))
}, q = {
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"],
VueUiScreenshot: ["config"],
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"],
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"],
VueUiBullet: ["config", "dataset"],
VueUiFunnel: ["config", "dataset"],
VueUiHistoryPlot: ["config", "dataset"],
VueUiCirclePack: ["config", "dataset"]
}, Y = j, d = s(() => !g[n.component]), J = s(() => g[n.component] || null), i = o(null), Z = s(() => {
const t = q[n.component] || [], a = {};
return t.includes("config") && (a.config = K.value), t.includes("dataset") && (a.dataset = z.value), a;
}), V = o(() => null), U = o(() => null), f = o(() => null), v = o(() => null), k = o(() => null), S = o(() => null), h = o(() => null), y = o(() => null), b = o(() => null), C = o(() => null), A = o(() => null), T = o(() => null), P = o(() => null), D = o(() => null), x = o(() => null), I = o(() => null), F = o(() => null), H = o(() => null), L = o(() => null), N = o(() => null), B = o(() => null), E = o(() => null), _ = o(() => null), O = o(() => null), G = o(() => null);
et(() => {
d.value && console.error(`
Vue Data UI exception:
The provided component "${n.component}" does not exist. Check the spelling.
Available components:
${Object.keys(g).map((t) => `. ${t}
`).join("")}`);
}), M(i, async (t) => {
t && (t.generatePdf && (V.value = t.generatePdf), t.generateImage && (f.value = t.generateImage), t.generateCsv && (U.value = t.generateCsv), t.getItemsPositions && (v.value = t.getItemsPositions), t.toggleReadonly && (k.value = t.toggleReadonly), t.shoot && (S.value = t.shoot), t.close && (h.value = t.close), t.restoreOrder && (y.value = t.restoreOrder), t.recalculateHeight && (b.value = t.recalculateHeight), t.toggleLock && (C.value = t.toggleLock), t.toggleTable && (A.value = t.toggleTable), t.toggleLabels && (T.value = t.toggleLabels), t.toggleSort && (P.value = t.toggleSort), t.toggleStack && (D.value = t.toggleStack), t.toggleTooltip && (x.value = t.toggleTooltip), t.start && (I.value = t.start), t.pause && (F.value = t.pause), t.reset && (H.value = t.reset), t.restart && (L.value = t.restart), t.lap && (N.value = t.lap), t.toggleAnimation && (B.value = t.toggleAnimation), t.pauseAnimation && (E.value = t.pauseAnimation), t.resumeAnimation && (_.value = t.resumeAnimation), t.toggleAnnotator && (O.value = t.toggleAnnotator), t.selectNode && (G.value = t.selectNode));
});
const R = () => {
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"
], a = {};
return t.forEach((p) => {
a[p] = (...u) => Y(p, ...u);
}), a;
}, r = ot([]);
M([r, i], () => {
if (i.value)
for (; r.length; ) {
const [t, ...a] = r.shift();
typeof i.value[t] == "function" && i.value[t](...a);
}
}), Q({
getData: (...t) => i.value && typeof i.value.getData == "function" ? i.value.getData() : r.push(["getData", ...t]),
generatePdf: V,
generateCsv: U,
generateImage: f,
getItemsPositions: v,
toggleReadonly: k,
shoot: S,
close: h,
restoreOrder: y,
recalculateHeight: b,
toggleLock: C,
toggleTable: A,
toggleLabels: T,
toggleSort: P,
toggleStack: D,
toggleTooltip: x,
start: I,
pause: F,
reset: H,
restart: L,
lap: N,
pauseAnimation: E,
resumeAnimation: _,
toggleAnimation: B,
toggleAnnotator: O,
selectNode: G
});
const l = s(() => {
let t = `The provided component ${n.component} does not exist.`;
return ["VueUiIcon", "VueUiPattern", "Arrow"].includes(n.component) ? (t = `${n.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, a) => d.value ? (c(), it("div", {
key: 0,
style: at({
width: "100%",
display: "flex",
gap: "6px",
alignItems: "center",
color: l.value.status === "notSupported" ? "#FF9000" : "#FF0000"
})
}, [
nt("div", ft, [
l.value.status === "unknown" ? (c(), m(W, {
key: 0,
name: "moodFlat",
stroke: "#FF0000"
})) : $("", !0),
l.value.status === "notSupported" ? (c(), m(W, {
key: 1,
name: "circleExclamation",
stroke: "#FF9000"
})) : $("", !0)
]),
rt(" " + lt(l.value.message), 1)
], 4)) : (c(), m(ut(J.value), st({
key: 1,
ref_key: "currentComponentRef",
ref: i
}, Z.value, ct(R())), gt({ _: 2 }, [
pt(t.$slots, (p, u) => ({
name: u,
fn: mt((w) => [
dt(t.$slots, u, Vt(Ut(w)))
])
}))
]), 1040));
}
};
export {
ht as default
};