vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
315 lines (311 loc) • 14.3 kB
JavaScript
import { toRefs as ne, defineAsyncComponent as t, computed as c, ref as o, onMounted as re, watch as Q, shallowReactive as le, createElementBlock as ue, createBlock as d, openBlock as g, normalizeStyle as se, createElementVNode as ce, createTextVNode as ge, createCommentVNode as q, toDisplayString as pe, resolveDynamicComponent as me, mergeProps as de, toHandlers as Ve, createSlots as Ue, renderList as fe, withCtx as ve, renderSlot as ke, normalizeProps as Se, guardReactiveProps as he } from "vue";
import K from "./BaseIcon-Ba5t14Aj.js";
const be = { 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"
],
setup(Y, { expose: J, emit: Z }) {
const a = Y, { component: ye, dataset: R, config: w } = ne(a), p = {
VueUi3dBar: t(() => import("./vue-ui-3d-bar-BAhIDkuZ.js")),
VueUiAgePyramid: t(() => import("./vue-ui-age-pyramid-BCHrv_pN.js")),
VueUiAnnotator: t(() => import("./vue-ui-annotator-e63AQGlL.js")),
VueUiCandlestick: t(() => import("./vue-ui-candlestick-B4ZomXZH.js")),
VueUiChestnut: t(() => import("./vue-ui-chestnut-xOYySKHz.js")),
VueUiDashboard: t(() => import("./vue-ui-dashboard-BQVXD1yw.js")),
VueUiDigits: t(() => import("./vue-ui-digits-DOcvXxeY.js")),
VueUiDonut: t(() => import("./vue-ui-donut-CWqVFr45.js")),
VueUiDonutEvolution: t(() => import("./vue-ui-donut-evolution-CJG-T9IF.js")),
VueUiGalaxy: t(() => import("./vue-ui-galaxy-CBG_dHTI.js")),
VueUiGauge: t(() => import("./vue-ui-gauge-Bq2OsxXJ.js")),
VueUiHeatmap: t(() => import("./vue-ui-heatmap-iSDjQB2D.js")),
VueUiKpi: t(() => import("./vue-ui-kpi-CgRnp_cJ.js")),
VueUiMiniLoader: t(() => import("./vue-ui-mini-loader-DTjVCV7S.js")),
VueUiMolecule: t(() => import("./vue-ui-molecule-BSavwQtC.js")),
VueUiMoodRadar: t(() => import("./vue-ui-mood-radar-COsUMe6s.js")),
VueUiNestedDonuts: t(() => import("./vue-ui-nested-donuts-DMeTFOie.js")),
VueUiOnion: t(() => import("./vue-ui-onion-BktQN0g_.js")),
VueUiQuadrant: t(() => import("./vue-ui-quadrant-BhzVeQCV.js")),
VueUiRadar: t(() => import("./vue-ui-radar-DfVE-kqK.js")),
VueUiRating: t(() => import("./vue-ui-rating-MfJUf8xX.js")),
VueUiRelationCircle: t(() => import("./vue-ui-relation-circle-CICjGVGf.js")),
VueUiRings: t(() => import("./vue-ui-rings-B8o4BQ2G.js")),
VueUiScatter: t(() => import("./vue-ui-scatter-1PQZQqNy.js")),
VueUiSkeleton: t(() => import("./vue-ui-skeleton-CsMU8DwQ.js")),
VueUiSmiley: t(() => import("./vue-ui-smiley-DacrR2Cw.js")),
VueUiSparkbar: t(() => import("./vue-ui-sparkbar-A_U6AgV-.js")),
VueUiSparkgauge: t(() => import("./vue-ui-sparkgauge-DAUUwu7d.js")),
VueUiSparkHistogram: t(() => import("./vue-ui-sparkhistogram-CzJCDsJq.js")),
VueUiSparkline: t(() => import("./vue-ui-sparkline-BV4IwEwk.js")),
VueUiSparkStackbar: t(() => import("./vue-ui-sparkstackbar-DT9f1KVo.js")),
VueUiTable: t(() => import("./vue-ui-table-DsauO6_l.js")),
VueUiTableSparkline: t(() => import("./vue-ui-table-sparkline-CmYu64QM.js")),
VueUiThermometer: t(() => import("./vue-ui-thermometer-DkngGDNn.js")),
VueUiTiremarks: t(() => import("./vue-ui-tiremarks-CRQY5oHo.js")),
VueUiTreemap: t(() => import("./vue-ui-treemap-CduGSIrb.js")),
VueUiVerticalBar: t(() => import("./vue-ui-vertical-bar-s_TgTJ6V.js")),
VueUiWaffle: t(() => import("./vue-ui-waffle-DIkbOyw3.js")),
VueUiWheel: t(() => import("./vue-ui-wheel-ByrFGQ9q.js")),
VueUiXy: t(() => import("./vue-ui-xy-h8axaZKl.js")),
VueUiTableHeatmap: t(() => import("./vue-ui-table-heatmap-Dq6w3pRL.js")),
VueUiAccordion: t(() => import("./vue-ui-accordion-B6Svdk-2.js")),
VueUiQuickChart: t(() => import("./vue-ui-quick-chart-DzQ01uEc.js")),
VueUiCursor: t(() => import("./vue-ui-cursor-BVXQkrcF.js")),
VueUiSparkTrend: t(() => import("./vue-ui-spark-trend-pXZVNvXB.js")),
VueUiStripPlot: t(() => import("./vue-ui-strip-plot-ARslC1sm.js")),
VueUiDumbbell: t(() => import("./vue-ui-dumbbell-D29_Jzee.js")),
VueUiWordCloud: t(() => import("./vue-ui-word-cloud-wcMPXcF1.js")),
VueUiXyCanvas: t(() => import("./vue-ui-xy-canvas-Dh9uHIg9.js")),
VueUiFlow: t(() => import("./vue-ui-flow-CvSn3gXZ.js")),
VueUiParallelCoordinatePlot: t(() => import("./vue-ui-parallel-coordinate-plot-BWqr5iBT.js")),
VueUiTimer: t(() => import("./vue-ui-timer-Bm4mXdW1.js")),
VueUiCarouselTable: t(() => import("./vue-ui-carousel-table-DwlsP1pE.js")),
VueUiGizmo: t(() => import("./vue-ui-gizmo-DQ6sdjlS.js")),
VueUiStackbar: t(() => import("./vue-ui-stackbar-CoFaJTmW.js")),
VueUiBullet: t(() => import("./vue-ui-bullet-D_6sg1Zb.js")),
VueUiFunnel: t(() => import("./vue-ui-funnel-C7aRYjPW.js")),
VueUiHistoryPlot: t(() => import("./vue-ui-history-plot-z3-HJCjz.js")),
VueUiCirclePack: t(() => import("./vue-ui-circle-pack-BD4e2h_w.js")),
VueUiWorld: t(() => import("./vue-ui-world-Dpan2MFC.js")),
VueUiRidgeline: t(() => import("./vue-ui-ridgeline-Dwhp5rFz.js")),
VueUiChord: t(() => import("./vue-ui-chord-WjUUCZTb.js"))
}, ee = {
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"],
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"]
}, te = Z, V = c(() => !p[a.component]), oe = c(() => p[a.component] || null), r = o(null), ie = c(() => {
const e = ee[a.component] || [], i = {};
return e.includes("config") && (i.config = w.value), e.includes("dataset") && (i.dataset = R.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), P = o(() => null), A = o(() => null), T = o(() => null), D = o(() => null), I = o(() => null), x = o(() => null), F = o(() => null), H = o(() => null), L = o(() => null), B = o(() => null), N = o(() => null), E = o(() => null), G = o(() => null), O = o(() => null), _ = o(() => null), $ = o(() => null), z = o(() => null), M = o(() => null), W = o(() => null);
re(() => {
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("")}`);
}), Q(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 && (P.value = e.toggleLock), e.toggleTable && (A.value = e.toggleTable), e.toggleLabels && (T.value = e.toggleLabels), e.toggleSort && (D.value = e.toggleSort), e.toggleStack && (I.value = e.toggleStack), e.toggleTooltip && (x.value = e.toggleTooltip), e.start && (F.value = e.start), e.pause && (H.value = e.pause), e.reset && (L.value = e.reset), e.restart && (B.value = e.restart), e.lap && (N.value = e.lap), e.toggleAnimation && (E.value = e.toggleAnimation), e.pauseAnimation && (G.value = e.pauseAnimation), e.resumeAnimation && (O.value = e.resumeAnimation), e.toggleAnnotator && (_.value = e.toggleAnnotator), e.selectNode && ($.value = e.selectNode), e.selectGroup && (z.value = e.selectGroup), e.selectRibbon && (M.value = e.selectRibbon), e.autoSize && (W.value = e.autoSize));
});
const ae = () => {
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"
], i = {};
return e.forEach((l) => {
i[l] = (...n) => te(l, ...n);
}), i;
}, m = le([]);
function X(e, i) {
return new Promise((l, n) => {
m.push({ method: e, args: i, resolve: l, reject: n });
});
}
Q(r, (e) => {
if (e)
for (; m.length; ) {
const { method: i, args: l, resolve: n, reject: s } = m.shift(), j = e[i];
typeof j == "function" ? Promise.resolve().then(() => j(...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) : X("getData", e);
},
getImage(e = {}) {
const { scale: i = 2 } = e;
return r.value?.getImage ? r.value.getImage({ scale: i }) : X("getImage", [{ scale: i }]);
},
autoSize: W,
generatePdf: U,
generateCsv: f,
generateImage: v,
getItemsPositions: k,
toggleReadonly: S,
shoot: h,
close: b,
restoreOrder: y,
recalculateHeight: C,
toggleLock: P,
toggleTable: A,
toggleLabels: T,
toggleSort: D,
toggleStack: I,
toggleTooltip: x,
start: F,
pause: H,
reset: L,
restart: B,
lap: N,
pauseAnimation: G,
resumeAnimation: O,
toggleAnimation: E,
toggleAnnotator: _,
selectNode: $,
selectGroup: z,
selectRibbon: M
});
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(), ue("div", {
key: 0,
style: se({
width: "100%",
display: "flex",
gap: "6px",
alignItems: "center",
color: u.value.status === "notSupported" ? "#FF9000" : "#FF0000"
})
}, [
ce("div", be, [
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)
]),
ge(" " + pe(u.value.message), 1)
], 4)) : (g(), d(me(oe.value), de({
key: 1,
ref_key: "currentComponentRef",
ref: r
}, ie.value, Ve(ae())), Ue({ _: 2 }, [
fe(e.$slots, (l, n) => ({
name: n,
fn: ve((s) => [
ke(e.$slots, n, Se(he(s)))
])
}))
]), 1040));
}
};
export {
Ae as default
};