vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
326 lines (322 loc) • 14.7 kB
JavaScript
import { toRefs as re, defineAsyncComponent as t, computed as c, ref as o, onMounted as le, watch as Z, shallowReactive as ue, createElementBlock as se, createBlock as d, openBlock as g, normalizeStyle as ce, createElementVNode as ge, createTextVNode as pe, createCommentVNode as q, toDisplayString as me, resolveDynamicComponent as de, mergeProps as Ve, toHandlers as Ue, createSlots as fe, renderList as ve, withCtx as ke, renderSlot as Se, normalizeProps as he, guardReactiveProps as be } from "vue";
import K from "./BaseIcon-CCivwZUq.js";
const ye = { style: { width: "36px" } }, Ae = {
__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"
],
setup(Y, { expose: J, emit: R }) {
const a = Y, { component: Ce, dataset: w, config: ee } = re(a), p = {
VueUi3dBar: t(() => import("./vue-ui-3d-bar-DGu87lcK.js")),
VueUiAgePyramid: t(() => import("./vue-ui-age-pyramid-DeS1T-Bw.js")),
VueUiAnnotator: t(() => import("./vue-ui-annotator-CrqM9fa9.js")),
VueUiCandlestick: t(() => import("./vue-ui-candlestick-n8koDNMv.js")),
VueUiChestnut: t(() => import("./vue-ui-chestnut-HbK7CLPq.js")),
VueUiDashboard: t(() => import("./vue-ui-dashboard-B0clnW3D.js")),
VueUiDigits: t(() => import("./vue-ui-digits-BapPpCcj.js")),
VueUiDonut: t(() => import("./vue-ui-donut-CdLAu_O5.js")),
VueUiDonutEvolution: t(() => import("./vue-ui-donut-evolution-DHYtqqYZ.js")),
VueUiGalaxy: t(() => import("./vue-ui-galaxy-BnPiyPdD.js")),
VueUiGauge: t(() => import("./vue-ui-gauge-B6BeYUW3.js")),
VueUiHeatmap: t(() => import("./vue-ui-heatmap-Di-qNaDB.js")),
VueUiKpi: t(() => import("./vue-ui-kpi-nZXBg4tm.js")),
VueUiMiniLoader: t(() => import("./vue-ui-mini-loader-NoQltPUC.js")),
VueUiMolecule: t(() => import("./vue-ui-molecule-kZceITfL.js")),
VueUiMoodRadar: t(() => import("./vue-ui-mood-radar-DtoNCs1x.js")),
VueUiNestedDonuts: t(() => import("./vue-ui-nested-donuts-BXZ2WcBF.js")),
VueUiOnion: t(() => import("./vue-ui-onion-DNP-X1Kr.js")),
VueUiQuadrant: t(() => import("./vue-ui-quadrant-qQkLdaFk.js")),
VueUiRadar: t(() => import("./vue-ui-radar-BMAqVZty.js")),
VueUiRating: t(() => import("./vue-ui-rating-NQHqua4r.js")),
VueUiRelationCircle: t(() => import("./vue-ui-relation-circle-uYPKJzRP.js")),
VueUiRings: t(() => import("./vue-ui-rings-C8ofrNp2.js")),
VueUiScatter: t(() => import("./vue-ui-scatter-l4Q3KmVI.js")),
VueUiSkeleton: t(() => import("./vue-ui-skeleton-DS0KyQM7.js")),
VueUiSmiley: t(() => import("./vue-ui-smiley-Dvz9CJOH.js")),
VueUiSparkbar: t(() => import("./vue-ui-sparkbar-BNoRSCo7.js")),
VueUiSparkgauge: t(() => import("./vue-ui-sparkgauge-Dlq3vjoo.js")),
VueUiSparkHistogram: t(() => import("./vue-ui-sparkhistogram-CfcpDn_W.js")),
VueUiSparkline: t(() => import("./vue-ui-sparkline-ClRCVth4.js")),
VueUiSparkStackbar: t(() => import("./vue-ui-sparkstackbar-XpDLFtos.js")),
VueUiTable: t(() => import("./vue-ui-table-Cr8fNe8Z.js")),
VueUiTableSparkline: t(() => import("./vue-ui-table-sparkline-BUzu6v2P.js")),
VueUiThermometer: t(() => import("./vue-ui-thermometer-BsJ_z0Nw.js")),
VueUiTiremarks: t(() => import("./vue-ui-tiremarks-qT3POAeD.js")),
VueUiTreemap: t(() => import("./vue-ui-treemap-B4ezfcLU.js")),
VueUiVerticalBar: t(() => import("./vue-ui-vertical-bar-Bwpe58hH.js")),
// delete in v4
VueUiHorizontalBar: t(() => import("./vue-ui-vertical-bar-Bwpe58hH.js")),
// v3 renaming
VueUiWaffle: t(() => import("./vue-ui-waffle-CSKAC_dQ.js")),
VueUiWheel: t(() => import("./vue-ui-wheel-CVg1L12p.js")),
VueUiXy: t(() => import("./vue-ui-xy-Bsh6AmS0.js")),
VueUiTableHeatmap: t(() => import("./vue-ui-table-heatmap-ClCYuGAL.js")),
VueUiAccordion: t(() => import("./vue-ui-accordion-D46i_gkB.js")),
VueUiQuickChart: t(() => import("./vue-ui-quick-chart-CR-rtVnh.js")),
VueUiCursor: t(() => import("./vue-ui-cursor-Dl_Gep_y.js")),
VueUiSparkTrend: t(() => import("./vue-ui-spark-trend-CZEFnuFC.js")),
VueUiStripPlot: t(() => import("./vue-ui-strip-plot-DoRnEXsU.js")),
VueUiDumbbell: t(() => import("./vue-ui-dumbbell-SgiIfwyE.js")),
VueUiWordCloud: t(() => import("./vue-ui-word-cloud-DY88UMDD.js")),
VueUiXyCanvas: t(() => import("./vue-ui-xy-canvas-D7VaVkKk.js")),
VueUiFlow: t(() => import("./vue-ui-flow-D7dra0Tp.js")),
VueUiParallelCoordinatePlot: t(() => import("./vue-ui-parallel-coordinate-plot-BaMmD1DR.js")),
VueUiTimer: t(() => import("./vue-ui-timer-0x5nZPEp.js")),
VueUiCarouselTable: t(() => import("./vue-ui-carousel-table-BeUapat0.js")),
VueUiGizmo: t(() => import("./vue-ui-gizmo-DoTyGRKN.js")),
VueUiStackbar: t(() => import("./vue-ui-stackbar-B_2xrLjj.js")),
VueUiBullet: t(() => import("./vue-ui-bullet-0TypghaZ.js")),
VueUiFunnel: t(() => import("./vue-ui-funnel-CfhMmeX5.js")),
VueUiHistoryPlot: t(() => import("./vue-ui-history-plot-D_ax0e1n.js")),
VueUiCirclePack: t(() => import("./vue-ui-circle-pack-HrpJA3B3.js")),
VueUiWorld: t(() => import("./vue-ui-world-UaCxKRrk.js")),
VueUiRidgeline: t(() => import("./vue-ui-ridgeline-Wesfuq0m.js")),
VueUiChord: t(() => import("./vue-ui-chord-DdNd8wIQ.js"))
}, te = {
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"],
VueUiBullet: ["config", "dataset"],
VueUiFunnel: ["config", "dataset"],
VueUiHistoryPlot: ["config", "dataset"],
VueUiCirclePack: ["config", "dataset"],
VueUiWorld: ["config", "dataset"],
VueUiRidgeline: ["config", "dataset"],
VueUiChord: ["config", "dataset"]
}, oe = R, V = c(() => !p[a.component]), ie = c(() => p[a.component] || null), r = o(null), ae = c(() => {
const e = te[a.component] || [], i = {};
return e.includes("config") && (i.config = ee.value), e.includes("dataset") && (i.dataset = w.value), i;
}), U = o(() => null), f = o(() => null), v = o(() => null), k = o(() => null), S = o(() => null), h = o(() => null), b = o(() => null), y = o(() => null), C = o(() => null), T = o(() => null), P = o(() => null), A = o(() => null), D = o(() => null), I = o(() => null), H = o(() => null), x = o(() => null), B = o(() => null), F = o(() => null), L = o(() => null), N = o(() => null), E = o(() => null), G = o(() => null), z = o(() => null), O = o(() => null), _ = o(() => null), $ = o(() => null), M = o(() => null), W = o(() => null), X = o(() => null);
le(() => {
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((e) => `. ${e}
`).join("")}`);
}), Z(r, async (e) => {
e && (e.generatePdf && (U.value = e.generatePdf), e.generateImage && (v.value = e.generateImage), e.generateCsv && (f.value = e.generateCsv), e.getItemsPositions && (k.value = e.getItemsPositions), e.toggleReadonly && (S.value = e.toggleReadonly), e.shoot && (h.value = e.shoot), e.close && (b.value = e.close), e.restoreOrder && (y.value = e.restoreOrder), e.recalculateHeight && (C.value = e.recalculateHeight), e.toggleLock && (T.value = e.toggleLock), e.toggleTable && (P.value = e.toggleTable), e.toggleLabels && (A.value = e.toggleLabels), e.toggleSort && (D.value = e.toggleSort), e.toggleStack && (I.value = e.toggleStack), e.toggleTooltip && (H.value = e.toggleTooltip), e.start && (x.value = e.start), e.pause && (B.value = e.pause), e.reset && (F.value = e.reset), e.restart && (L.value = e.restart), e.lap && (N.value = e.lap), e.toggleAnimation && (E.value = e.toggleAnimation), e.pauseAnimation && (G.value = e.pauseAnimation), e.resumeAnimation && (z.value = e.resumeAnimation), e.toggleAnnotator && (O.value = e.toggleAnnotator), e.selectNode && (_.value = e.selectNode), e.selectGroup && ($.value = e.selectGroup), e.selectRibbon && (M.value = e.selectRibbon), e.autoSize && (W.value = e.autoSize), e.resetZoom && (X.value = e.resetZoom));
});
const ne = () => {
const e = [
"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"
], i = {};
return e.forEach((l) => {
i[l] = (...n) => oe(l, ...n);
}), i;
}, m = ue([]);
function j(e, i) {
return new Promise((l, n) => {
m.push({ method: e, args: i, resolve: l, reject: n });
});
}
Z(r, (e) => {
if (e)
for (; m.length; ) {
const { method: i, args: l, resolve: n, reject: s } = m.shift(), Q = e[i];
typeof Q == "function" ? Promise.resolve().then(() => Q(...l)).then(n).catch(s) : s(new Error(`Method ${i} not found on ${a.component}`));
}
}), J({
getData(...e) {
return r.value?.getData ? r.value.getData(...e) : j("getData", e);
},
getImage(e = {}) {
const { scale: i = 2 } = e;
return r.value?.getImage ? r.value.getImage({ scale: i }) : j("getImage", [{ scale: i }]);
},
autoSize: W,
generatePdf: U,
generateCsv: f,
generateImage: v,
getItemsPositions: k,
toggleReadonly: S,
shoot: h,
close: b,
restoreOrder: y,
recalculateHeight: C,
toggleLock: T,
toggleTable: P,
toggleLabels: A,
toggleSort: D,
toggleStack: I,
toggleTooltip: H,
start: x,
pause: B,
reset: F,
restart: L,
lap: N,
pauseAnimation: G,
resumeAnimation: z,
toggleAnimation: E,
toggleAnnotator: O,
selectNode: _,
selectGroup: $,
selectRibbon: M,
resetZoom: X
});
const u = c(() => {
let e = `The provided component ${a.component} does not exist.`;
return ["VueUiIcon", "VueUiPattern", "Arrow"].includes(a.component) ? (e = `${a.component} is not supported by the VueDataUi universal component. You must import it individually.`, console.warn(e), {
status: "notSupported",
message: e
}) : (console.warn(e), {
status: "unknown",
message: e
});
});
return (e, i) => V.value ? (g(), se("div", {
key: 0,
style: ce({
width: "100%",
display: "flex",
gap: "6px",
alignItems: "center",
color: u.value.status === "notSupported" ? "#FF9000" : "#FF0000"
})
}, [
ge("div", ye, [
u.value.status === "unknown" ? (g(), d(K, {
key: 0,
name: "moodFlat",
stroke: "#FF0000"
})) : q("", !0),
u.value.status === "notSupported" ? (g(), d(K, {
key: 1,
name: "circleExclamation",
stroke: "#FF9000"
})) : q("", !0)
]),
pe(" " + me(u.value.message), 1)
], 4)) : (g(), d(de(ie.value), Ve({
key: 1,
ref_key: "currentComponentRef",
ref: r
}, ae.value, Ue(ne())), fe({ _: 2 }, [
ve(e.$slots, (l, n) => ({
name: n,
fn: ke((s) => [
Se(e.$slots, n, he(be(s)))
])
}))
]), 1040));
}
};
export {
Ae as default
};