vue-data-ui/dist/vue-ui-dashboard-C1PRSeLr.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { useCssVars as we, computed as y, defineAsyncComponent as o, ref as r, watch as W, createElementBlock as S, openBlock as U, createElementVNode as k, createBlock as N, createCommentVNode as _, normalizeStyle as C, Fragment as K, renderList as Te, normalizeClass as Ce, renderSlot as c, resolveDynamicComponent as $e, mergeProps as Ie, withCtx as p, normalizeProps as w, guardReactiveProps as T, unref as $, createSlots as Me } from "vue";
import { u as Oe, a as Pe } from "./useNestedProp-OFRiX4kU.js";
import { c as Se } from "./lib-BwysEpWI.js";
import { u as Re } from "./usePrinter-BJzHDpYF.js";
import ze from "./UserOptions-CzJWRC4s.js";
import { u as Ae } from "./useUserOptionState-BIvW1Kz7.js";
import Xe from "./PenAndPaper-DxIUvoQ8.js";
import { _ as He } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const De = ["id"], Ye = ["onMousedown", "onTouchstart"], We = ["onMousedown", "onTouchstart"], Ne = ["onMousedown", "onTouchstart"], _e = ["onMousedown", "onTouchstart"], Ee = ["onMousedown", "onTouchstart"], H = 1, Le = {
  __name: "vue-ui-dashboard",
  props: {
    dataset: Array,
    config: Object
  },
  emits: ["change"],
  setup(q, { expose: J, emit: Z }) {
    we((e) => ({
      v34dbb5f9: ve.value,
      v4c375efe: fe.value
    }));
    const ee = {
      VueDataUi: o(() => import("./vue-data-ui-DLBPk_qz.js")),
      VueUi3dBar: o(() => import("./vue-ui-3d-bar-B3kUXUiU.js").then((e) => e.b)),
      VueUiAccordion: o(() => import("./vue-ui-accordion-DUuwVsuJ.js")),
      VueUiAgePyramid: o(() => import("./vue-ui-age-pyramid-ByKj9osZ.js").then((e) => e.b)),
      VueUiAnnotator: o(() => import("./vue-ui-annotator-BZuXK7ov.js")),
      VueUiCandlestick: o(() => import("./vue-ui-candlestick-B0rV5Vhv.js").then((e) => e.b)),
      VueUiChestnut: o(() => import("./vue-ui-chestnut-CsTwZfmt.js").then((e) => e.b)),
      VueUiDigits: o(() => import("./vue-ui-digits-DDh5Vxvc.js")),
      VueUiDonut: o(() => import("./vue-ui-donut-CKDYWkKE.js").then((e) => e.a)),
      VueUiDonutEvolution: o(() => import("./vue-ui-donut-evolution-BvNNQtyL.js").then((e) => e.b)),
      VueUiDumbbell: o(() => import("./vue-ui-dumbbell-D4uWpexA.js").then((e) => e.b)),
      VueUiFlow: o(() => import("./vue-ui-flow-CTLxckNx.js").then((e) => e.b)),
      VueUiGalaxy: o(() => import("./vue-ui-galaxy-C0TDWUTS.js").then((e) => e.b)),
      VueUiGauge: o(() => import("./vue-ui-gauge-ChOANZyZ.js").then((e) => e.b)),
      VueUiHeatmap: o(() => import("./vue-ui-heatmap-mxoacXPq.js").then((e) => e.b)),
      VueUiKpi: o(() => import("./vue-ui-kpi-DQRm5B2_.js")),
      VueUiMiniLoader: o(() => import("./vue-ui-mini-loader-CObyi21D.js")),
      VueUiMolecule: o(() => import("./vue-ui-molecule-DjucsQhe.js").then((e) => e.b)),
      VueUiMoodRadar: o(() => import("./vue-ui-mood-radar-DOd2rxuT.js").then((e) => e.b)),
      VueUiNestedDonuts: o(() => import("./vue-ui-nested-donuts-DE7p2Fgp.js").then((e) => e.b)),
      VueUiOnion: o(() => import("./vue-ui-onion-BATuVto7.js").then((e) => e.b)),
      VueUiParallelCoordinatePlot: o(() => import("./vue-ui-parallel-coordinate-plot-BLp7NM3E.js").then((e) => e.b)),
      VueUiQuadrant: o(() => import("./vue-ui-quadrant-AW-eksks.js").then((e) => e.b)),
      VueUiQuickChart: o(() => import("./vue-ui-quick-chart-BCnCOAxm.js").then((e) => e.b)),
      VueUiRadar: o(() => import("./vue-ui-radar-B710xZlD.js").then((e) => e.b)),
      VueUiRating: o(() => import("./vue-ui-rating-iq2tKZ_U.js")),
      VueUiRelationCircle: o(() => import("./vue-ui-relation-circle-C4noyjHV.js").then((e) => e.b)),
      VueUiRings: o(() => import("./vue-ui-rings-Bwak5MGF.js").then((e) => e.b)),
      VueUiScatter: o(() => import("./vue-ui-scatter-Bbk87yp_.js").then((e) => e.b)),
      VueUiSkeleton: o(() => import("./vue-ui-skeleton-DTP-lHk-.js")),
      VueUiSmiley: o(() => import("./vue-ui-smiley-Ccv9c7pA.js")),
      VueUiSparkHistogram: o(() => import("./vue-ui-sparkhistogram-_lV4WXS_.js").then((e) => e.b)),
      VueUiSparkStackbar: o(() => import("./vue-ui-sparkstackbar-v3ayd3bl.js").then((e) => e.b)),
      VueUiSparkTrend: o(() => import("./vue-ui-spark-trend-BEVWCHis.js").then((e) => e.b)),
      VueUiSparkbar: o(() => import("./vue-ui-sparkbar-BHfJPNZl.js").then((e) => e.a)),
      VueUiSparkgauge: o(() => import("./vue-ui-sparkgauge-3xNJCJ70.js").then((e) => e.a)),
      VueUiSparkline: o(() => import("./vue-ui-sparkline-BfFlV5kx.js").then((e) => e.b)),
      VueUiStripPlot: o(() => import("./vue-ui-strip-plot-Csh9RwiY.js").then((e) => e.b)),
      VueUiTable: o(() => import("./vue-ui-table-BBmsVv1l.js")),
      VueUiTableHeatmap: o(() => import("./vue-ui-table-heatmap-B-T8pWI-.js").then((e) => e.b)),
      VueUiTableSparkline: o(() => import("./vue-ui-table-sparkline-BmkIssWR.js").then((e) => e.b)),
      VueUiThermometer: o(() => import("./vue-ui-thermometer-HNdHuF-6.js").then((e) => e.b)),
      VueUiTimer: o(() => import("./vue-ui-timer-BHHgGQZo.js")),
      VueUiTiremarks: o(() => import("./vue-ui-tiremarks-H585-mQM.js").then((e) => e.b)),
      VueUiTreemap: o(() => import("./vue-ui-treemap-YXAtO95p.js").then((e) => e.b)),
      VueUiVerticalBar: o(() => import("./vue-ui-horizontal-bar-e_tYBG4d.js").then((e) => e.b)),
      VueUiHorizontalBar: o(() => import("./vue-ui-horizontal-bar-e_tYBG4d.js").then((e) => e.b)),
      VueUiWaffle: o(() => import("./vue-ui-waffle-BE8SWjIj.js").then((e) => e.b)),
      VueUiWheel: o(() => import("./vue-ui-wheel-DWxbunQa.js").then((e) => e.b)),
      VueUiWordCloud: o(() => import("./vue-ui-word-cloud-JwfLrZoU.js").then((e) => e.b)),
      VueUiXy: o(() => import("./vue-ui-xy-COxHwrGr.js").then((e) => e.a)),
      VueUiXyCanvas: o(() => import("./vue-ui-xy-canvas-Cg7fpBqF.js").then((e) => e.b)),
      VueUiCarouselTable: o(() => import("./vue-ui-carousel-table-CKRr0PUC.js")),
      VueUiGizmo: o(() => import("./vue-ui-gizmo-Cd8foemN.js")),
      VueUiStackbar: o(() => import("./vue-ui-stackbar-YQygDhDd.js").then((e) => e.b)),
      VueUiStackline: o(() => import("./vue-ui-stackline-x9MMyg_1.js").then((e) => e.b)),
      VueUiBullet: o(() => import("./vue-ui-bullet-DcFBb0YG.js").then((e) => e.b)),
      VueUiFunnel: o(() => import("./vue-ui-funnel-BWyQixj8.js").then((e) => e.b)),
      VueUiHistoryPlot: o(() => import("./vue-ui-history-plot-BsyGaRQT.js").then((e) => e.b)),
      VueUiCirclePack: o(() => import("./vue-ui-circle-pack-CosGMpWi.js").then((e) => e.b)),
      VueUiWorld: o(() => import("./vue-ui-world-CkgiS9TT.js")),
      VueUiChord: o(() => import("./vue-ui-chord-Ci7wdPU5.js").then((e) => e.b)),
      VueUiRidgeline: o(() => import("./vue-ui-ridgeline-Ciih1SOm.js").then((e) => e.b))
    }, { vue_ui_dashboard: te } = Oe(), oe = r(null), ne = r(null), D = r(null), R = q, i = y(() => Pe({
      userConfig: R.config,
      defaultConfig: te
    })), Y = r(Se()), v = r(i.value.locked);
    function ae() {
      v.value = !v.value;
    }
    W(() => R.config, () => {
      v.value = i.value.locked, Q.value = !i.value.userOptions.showOnChartHover;
    });
    function E() {
      return R.dataset.map((e, t) => ({
        ...e,
        index: t
      }));
    }
    const s = r(E());
    W(() => R.dataset, () => {
      s.value = E();
    });
    const I = y(
      () => s.value.map((e) => ({
        ...e,
        resolvedComponent: typeof e.component == "string" ? ee[e.component] : e.component
      }))
    ), f = r(null), l = r(null), m = r({ x: 0, y: 0 }), b = r({ x: 0, y: 0 }), d = r(null), h = r(!1), g = r(null), M = r(!1);
    function L(e) {
      const t = e.target;
      (t.tagName === "INPUT" && t.type === "range" || t.classList.contains("range-handle")) && (M.value = !0);
    }
    function B(e) {
      const t = e.target;
      t.tagName === "INPUT" && t.type === "range" && (M.value = !1);
    }
    const { isPrinting: ie, isImaging: ue, generatePdf: G, generateImage: le } = Re({
      elementId: `vue-ui-dashboard_${Y.value}`,
      fileName: i.value.userOptions.print.filename || "dashboard",
      options: {
        ...i.value.userOptions.print,
        aspectRatio: i.value.style.board.aspectRatio
      }
    });
    function re(e) {
      if (!v.value && (h.value = !0, g.value = e, l.value === null)) {
        f.value = e, m.value = { x: event.clientX, y: event.clientY };
        const t = s.value[e], n = 100 - t.width, a = 100 - t.height;
        t.left < 0 && (t.left = 0), t.top < 0 && (t.top = 0), t.left > n && (t.left = n), t.top > a && (t.top = a), t.left < 0 && (t.left = 0), t.top < 0 && (t.top = 0), t.left + t.width > 100 && (t.left = 100 - t.width), t.top + t.height > 100 && (t.top = 100 - t.height);
      }
    }
    function z(e, t) {
      h.value = !0, g.value = e, l.value = { index: e, direction: t };
      const n = s.value[e];
      b.value = { x: event.clientX, y: event.clientY, initialWidth: n.width, initialHeight: n.height };
    }
    function F(e, t, n) {
      if (l.value.direction.includes("top")) {
        const a = e.height - n / d.value.offsetHeight * 100;
        a >= H && (e.top += n / d.value.offsetHeight * 100, e.height = a);
      }
      if (l.value.direction.includes("bottom")) {
        const a = e.height + n / d.value.offsetHeight * 100;
        a >= H && (e.height = a);
      }
      if (l.value.direction.includes("left")) {
        const a = e.width - t / d.value.offsetWidth * 100;
        a >= H && (e.left += t / d.value.offsetWidth * 100, e.width = a);
      }
      if (l.value.direction.includes("right")) {
        const a = e.width + t / d.value.offsetWidth * 100;
        a >= H && (e.width = a);
      }
    }
    function se(e) {
      if (!(v.value || M.value)) {
        if (h.value = !0, f.value !== null) {
          const t = s.value[f.value], n = e.clientX - m.value.x, a = e.clientY - m.value.y, u = t.left + n / d.value.offsetWidth * 100, V = t.top + a / d.value.offsetHeight * 100;
          u >= 0 && V >= 0 && u + t.width <= 100 && V + t.height <= 100 && (t.left = u, t.top = V), m.value = { x: e.clientX, y: e.clientY };
        }
        if (l.value !== null) {
          const t = s.value[l.value.index], n = e.clientX - b.value.x, a = e.clientY - b.value.y;
          F(t, n, a), b.value = { x: e.clientX, y: e.clientY };
        }
      }
    }
    const de = Z;
    W(
      s,
      (e) => {
        e && !h.value && de("change", s.value);
      },
      { deep: !0 }
    );
    function ce() {
      f.value = null, l.value = null, h.value = !1, g.value = null, s.value.forEach((e) => {
        e.left = Math.round(e.left / 100 * 100), e.top = Math.round(e.top / 100 * 100), e.width = Math.round(e.width / 100 * 100), e.height = Math.round(e.height / 100 * 100);
      });
    }
    function he(e) {
      v.value || M.value || (h.value = !0, g.value = e, l.value === null && (f.value = e, m.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }));
    }
    function A(e, t, n) {
      if (h.value = !0, g.value = e, l.value === null) {
        l.value = { index: e, direction: t };
        const a = s.value[e];
        b.value = { x: n.touches[0].clientX, y: n.touches[0].clientY, initialWidth: a.width, initialHeight: a.height };
      }
    }
    function X(e) {
      if (h.value = !0, e.preventDefault(), l.value !== null) {
        const t = s.value[l.value.index], n = e.touches[0].clientX - b.value.x, a = e.touches[0].clientY - b.value.y;
        F(t, n, a), b.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
      }
    }
    function pe(e) {
      if (!(v.value || M.value) && (h.value = !0, e.preventDefault(), f.value !== null)) {
        const t = s.value[f.value], n = e.touches[0].clientX - m.value.x, a = e.touches[0].clientY - m.value.y, u = t.left + n / d.value.offsetWidth * 100, V = t.top + a / d.value.offsetHeight * 100;
        u >= 0 && V >= 0 && u + t.width <= 100 && V + t.height <= 100 && (t.left = u, t.top = V), m.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
      }
    }
    function O() {
      h.value = !1, g.value = null, f.value = null, l.value = null, s.value.forEach((e) => {
        e.left = Math.round(e.left / 100 * 100), e.top = Math.round(e.top / 100 * 100), e.width = Math.round(e.width / 100 * 100), e.height = Math.round(e.height / 100 * 100);
      });
    }
    const ve = y(() => i.value.style.item.borderColor), fe = y(() => i.value.style.resizeHandles.backgroundColor), me = y(() => i.value.style.board.aspectRatio), be = y(() => i.value.style.board.backgroundColor), ge = y(() => i.value.style.board.border);
    function Ue() {
      return s.value;
    }
    const { userOptionsVisible: Q, setUserOptionsVisibility: j, keepUserOptionState: Ve } = Ae({ config: i.value }), P = r(!1);
    function x() {
      P.value = !P.value;
    }
    function ye() {
      j(!0);
    }
    function ke() {
      j(!1);
    }
    return J({
      generatePdf: G,
      getItemsPositions: Ue,
      toggleLock: ae
    }), (e, t) => (U(), S("div", {
      id: `vue-ui-dashboard_${Y.value}`,
      onMousedown: L,
      onMouseup: B,
      onTouchstart: L,
      onTouchend: B,
      onMouseenter: ye,
      onMouseleave: ke,
      ref_key: "dashboardRef",
      ref: oe,
      style: {
        position: "relative"
      },
      class: "vue-data-ui-component"
    }, [
      k("div", {
        class: "vue-ui-dashboard-container",
        ref_key: "dashboardContainer",
        ref: d,
        style: C(`outline:${ge.value}; background:${be.value}; aspect-ratio:${me.value};${P.value ? "pointer-events:none" : ""}`)
      }, [
        k("div", {
          class: "vue-ui-dashboard-grid-container",
          ref: "container",
          onMousemove: se,
          onMouseup: ce,
          onTouchmove: pe,
          onTouchend: O,
          style: C(`background:${i.value.style.board.backgroundColor}`)
        }, [
          t[4] || (t[4] = k("div", { class: "vue-ui-dashboard-grid" }, null, -1)),
          (U(!0), S(K, null, Te(I.value, (n, a) => (U(), S("div", {
            key: n.id,
            class: Ce({ "vue-ui-dashboard-grid-item": !0, "vue-ui-dashboard-grid-item--locked": v.value }),
            style: C({
              width: `${n.width}%`,
              height: `${n.height}%`,
              left: `${n.left}%`,
              top: `${n.top}%`,
              cursor: "move",
              boxShadow: g.value === a ? "0 6px 12px -3px rgba(0,0,0,0.3)" : "",
              zIndex: g.value === a ? I.value.length + 1 : n.index,
              backgroundColor: i.value.style.item.backgroundColor
            }),
            onMousedown: (u) => re(a),
            onTouchstart: (u) => he(a)
          }, [
            v.value ? _("", !0) : (U(), S(K, { key: 0 }, [
              k("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",
                onMousedown: (u) => z(a, "top-left"),
                onTouchstart: (u) => A(a, "top-left", u),
                onTouchmove: t[0] || (t[0] = (u) => X(u)),
                onTouchend: O
              }, null, 40, We),
              k("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",
                onMousedown: (u) => z(a, "top-right"),
                onTouchstart: (u) => A(a, "top-right", u),
                onTouchmove: t[1] || (t[1] = (u) => X(u)),
                onTouchend: O
              }, null, 40, Ne),
              k("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",
                onMousedown: (u) => z(a, "bottom-left"),
                onTouchstart: (u) => A(a, "bottom-left", u),
                onTouchmove: t[2] || (t[2] = (u) => X(u)),
                onTouchend: O
              }, null, 40, _e),
              k("div", {
                class: "vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",
                onMousedown: (u) => z(a, "bottom-right"),
                onTouchstart: (u) => A(a, "bottom-right", u),
                onTouchmove: t[3] || (t[3] = (u) => X(u)),
                onTouchend: O
              }, null, 40, Ee)
            ], 64)),
            c(e.$slots, "top", {
              item: n,
              index: a
            }, void 0, !0),
            n.resolvedComponent ? (U(), N($e(n.resolvedComponent), Ie({
              key: 1,
              ref_for: !0
            }, n.props), null, 16)) : c(e.$slots, "content", {
              key: 2,
              item: n,
              index: a,
              left: n.left,
              top: n.top,
              height: n.height,
              width: n.width
            }, void 0, !0),
            c(e.$slots, "bottom", {
              item: n,
              index: a
            }, void 0, !0)
          ], 46, Ye))), 128))
        ], 36)
      ], 4),
      (U(), S("svg", {
        style: C({
          width: "100%",
          height: "100%",
          pointerEvents: "none",
          position: "absolute",
          top: 0,
          left: 0,
          zIndex: I.value.length + 1
        }),
        ref_key: "svgRef",
        ref: D
      }, null, 4)),
      i.value.userOptions.buttons.annotator && d.value && D.value ? (U(), N(Xe, {
        key: 0,
        color: i.value.style.board.color,
        backgroundColor: i.value.style.board.backgroundColor,
        active: P.value,
        svgRef: D.value,
        onClose: x,
        style: C({
          zIndex: I.value.length + 1
        })
      }, {
        "annotator-action-close": p(() => [
          c(e.$slots, "annotator-action-close", {}, void 0, !0)
        ]),
        "annotator-action-color": p(({ color: n }) => [
          c(e.$slots, "annotator-action-color", w(T({ color: n })), void 0, !0)
        ]),
        "annotator-action-draw": p(({ mode: n }) => [
          c(e.$slots, "annotator-action-draw", w(T({ mode: n })), void 0, !0)
        ]),
        "annotator-action-undo": p(({ disabled: n }) => [
          c(e.$slots, "annotator-action-undo", w(T({ disabled: n })), void 0, !0)
        ]),
        "annotator-action-redo": p(({ disabled: n }) => [
          c(e.$slots, "annotator-action-redo", w(T({ disabled: n })), void 0, !0)
        ]),
        "annotator-action-delete": p(({ disabled: n }) => [
          c(e.$slots, "annotator-action-delete", w(T({ disabled: n })), void 0, !0)
        ]),
        _: 3
      }, 8, ["color", "backgroundColor", "active", "svgRef", "style"])) : _("", !0),
      (i.value.allowPrint || i.value.userOptions.show) && (i.value.userOptions.buttons.pdf || i.value.userOptions.buttons.img) ? (U(), N(ze, {
        key: 1,
        ref_key: "userOptionsRef",
        ref: ne,
        backgroundColor: i.value.style.board.backgroundColor,
        color: i.value.style.board.color,
        isPrinting: $(ie),
        isImaging: $(ue),
        uid: Y.value,
        position: i.value.userOptions.position,
        hasTooltip: !1,
        hasPdf: i.value.userOptions.buttons.pdf,
        hasImg: i.value.userOptions.buttons.img,
        hasXls: !1,
        hasTable: !1,
        hasLabel: !1,
        hasFullscreen: !1,
        chartElement: d.value,
        callbacks: i.value.userOptions.callbacks,
        hasAnnotator: i.value.userOptions.buttons.annotator,
        isAnnotation: P.value,
        printScale: i.value.userOptions.print.scale,
        titles: { ...i.value.userOptions.buttonTitles },
        onGeneratePdf: $(G),
        onGenerateImage: $(le),
        onToggleAnnotator: x,
        style: C({ visibility: $(Ve) ? $(Q) ? "visible" : "hidden" : "visible", zIndex: I.value.length + 1 })
      }, Me({ _: 2 }, [
        e.$slots.menuIcon ? {
          name: "menuIcon",
          fn: p(({ isOpen: n, color: a }) => [
            c(e.$slots, "menuIcon", w(T({ isOpen: n, color: a })), void 0, !0)
          ]),
          key: "0"
        } : void 0,
        e.$slots.optionPdf ? {
          name: "optionPdf",
          fn: p(() => [
            c(e.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        e.$slots.optionImg ? {
          name: "optionImg",
          fn: p(() => [
            c(e.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        e.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: p(({ toggleAnnotator: n, isAnnotator: a }) => [
            c(e.$slots, "optionAnnotator", w(T({ toggleAnnotator: n, isAnnotator: a })), void 0, !0)
          ]),
          key: "3"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "position", "hasPdf", "hasImg", "chartElement", "callbacks", "hasAnnotator", "isAnnotation", "printScale", "titles", "onGeneratePdf", "onGenerateImage", "style"])) : _("", !0)
    ], 40, De));
  }
}, Je = /* @__PURE__ */ He(Le, [["__scopeId", "data-v-1b8fa42d"]]);
export {
  Je as default
};