vue-chrts 2.0.0 → 2.1.0-beta-3

package/dist/components/BarChart/BarChart.js

@@ -1,5 +1,5 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, createElementBlock as p, openBlock as d, normalizeStyle as L, createVNode as b, createCommentVNode as x, createElementVNode as j, unref as a, withCtx as $, createBlock as c, Fragment as q, renderList as I, mergeProps as C, renderSlot as F } from "vue";
-import { Orientation as u, StackedBar as U, GroupedBar as J } from "@unovis/ts";
+import { defineComponent as W, useSlots as X, useTemplateRef as H, ref as Y, computed as k, createElementBlock as v, openBlock as d, normalizeStyle as h, createVNode as p, createCommentVNode as c, createElementVNode as j, unref as a, withCtx as $, createBlock as s, Fragment as q, renderList as I, mergeProps as P, renderSlot as F } from "vue";
+import { Orientation as g, StackedBar as U, GroupedBar as J } from "@unovis/ts";
 import { useStackedGrouped as K } from "./stackedGroupedUtils.js";
 import { VisXYContainer as Q, VisXYLabels as Z, VisTooltip as _, VisStackedBar as G, VisGroupedBar as ee, VisAxis as V, VisBulletLegend as te } from "@unovis/vue";
 import ae from "../Tooltip.js";
@@ -7,7 +7,7 @@ import { LegendPosition as ie } from "../../types.js";
 const ne = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ue = /* @__PURE__ */ W({
+}, ce = /* @__PURE__ */ W({
   __name: "BarChart",
   props: {
     data: {},
@@ -35,8 +35,12 @@ const ne = {
     radius: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: u.Vertical },
+    orientation: { default: g.Vertical },
     legendPosition: { default: ie.BottomCenter },
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -55,7 +59,7 @@ const ne = {
   },
   emits: ["click"],
   setup(e, { emit: S }) {
-    const O = S, t = e, D = X(), h = H("slotWrapper"), g = Y();
+    const w = S, t = e, D = X(), L = H("slotWrapper"), y = Y();
     if (t.valueLabel && !t.xAxis)
       throw new Error(
         "BarChart: 'xAxis' prop is required when 'valueLabel' is enabled. Please provide an 'xAxis' to display value labels."
@@ -65,7 +69,7 @@ const ne = {
     const A = k(() => t.yAxis.map((i) => (l) => l[i])), B = (i, l) => {
       var o;
       return (o = Object.values(t.categories)[l]) == null ? void 0 : o.color;
-    }, y = k(
+    }, m = k(
       () => K({
         data: t.data,
         categories: t.categories,
@@ -73,75 +77,80 @@ const ne = {
         xAxis: t.xAxis,
         spacing: t.stackedGroupedSpacing
       }).value
-    ), E = k(() => t.legendPosition.startsWith("top")), N = k(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    function T(i) {
-      g.value = i;
+    ), O = k(() => t.legendPosition.startsWith("top")), E = k(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function C(i) {
+      y.value = i;
     }
-    const P = t.yAxis.map((i) => (l) => l[i]), M = P.length, w = t.data.flatMap(
-      (i, l) => P.map((o, s) => ({
+    const T = t.yAxis.map((i) => (l) => l[i]), N = T.length, M = t.data.flatMap(
+      (i, l) => T.map((o, u) => ({
         x: l,
         y: Number(o(i) ?? 0),
-        itemIndex: s
+        itemIndex: u
       }))
     ), z = (i) => {
       if (t.stacked || t.stackAndGrouped) return i.x;
-      const l = M;
+      const l = N;
       if (l <= 1) return i.x;
-      const s = 1 - (t.groupPadding ?? 0), m = s / l, f = -s / 2, n = m * i.itemIndex + m / 2, v = 1 - (t.barPadding ?? 0), R = (f + n) * v;
+      const u = 1 - (t.groupPadding ?? 0), f = u / l, x = -u / 2, n = f * i.itemIndex + f / 2, b = 1 - (t.barPadding ?? 0), R = (x + n) * b;
       return i.x + R;
     };
-    return (i, l) => (d(), p("div", {
-      style: L({
+    return (i, l) => (d(), v("div", {
+      style: h({
         display: "flex",
-        flexDirection: E.value ? "column-reverse" : "column",
+        flexDirection: O.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: l[0] || (l[0] = (o) => O("click", o, g.value))
+      onClick: l[0] || (l[0] = (o) => w("click", o, y.value))
     }, [
-      b(a(Q), {
+      p(a(Q), {
         padding: e.padding,
-        height: e.height
+        height: e.height,
+        duration: e.duration
       }, {
         default: $(() => {
-          var o, s, m, f;
+          var o, u, f, x;
           return [
-            e.valueLabel ? (d(), c(a(Z), {
+            e.valueLabel ? (d(), s(a(Z), {
               key: 0,
-              data: a(w),
+              data: a(M),
               x: z,
               y: (n) => {
                 var r;
                 return n.y + (((r = t.valueLabel) == null ? void 0 : r.labelSpacing) ?? 0);
               },
               label: (o = t.valueLabel) == null ? void 0 : o.label,
-              backgroundColor: ((s = t.valueLabel) == null ? void 0 : s.backgroundColor) ?? "transparent",
-              color: ((m = t.valueLabel) == null ? void 0 : m.color) ?? "red",
-              labelFontSize: (f = t.valueLabel) == null ? void 0 : f.labelFontSize
-            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : x("", !0),
-            b(a(_), {
+              backgroundColor: ((u = t.valueLabel) == null ? void 0 : u.backgroundColor) ?? "transparent",
+              color: ((f = t.valueLabel) == null ? void 0 : f.color) ?? "red",
+              labelFontSize: (x = t.valueLabel) == null ? void 0 : x.labelFontSize
+            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : c("", !0),
+            e.hideTooltip ? c("", !0) : (d(), s(a(_), {
+              key: 1,
+              followCursor: t.tooltip.followCursor,
+              "show-delay": t.tooltip.showDelay,
+              "hide-delay": t.tooltip.hideDelay,
               triggers: {
                 [a(J).selectors.bar]: (n) => {
                   var r;
-                  return T(n), n ? (r = h.value) == null ? void 0 : r.innerHTML : "";
+                  return C(n), n ? (r = L.value) == null ? void 0 : r.innerHTML : "";
                 },
                 [a(U).selectors.bar]: (n) => {
                   var r;
-                  return T(n), n ? (r = h.value) == null ? void 0 : r.innerHTML : "";
+                  return C(n), n ? (r = L.value) == null ? void 0 : r.innerHTML : "";
                 }
               }
-            }, null, 8, ["triggers"]),
-            e.stackAndGrouped ? (d(!0), p(q, { key: 1 }, I(y.value.states, (n) => (d(), c(a(G), {
+            }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+            e.stackAndGrouped ? (d(!0), v(q, { key: 2 }, I(m.value.states, (n) => (d(), s(a(G), {
               key: n,
-              data: y.value.chartData,
-              x: (r, v) => v + y.value.positions[n],
-              y: y.value.bars[n],
-              color: y.value.colorFunctions[n],
+              data: m.value.chartData,
+              x: (r, b) => b + m.value.positions[n],
+              y: m.value.bars[n],
+              color: m.value.colorFunctions[n],
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding,
-              orientation: e.orientation ?? a(u).Vertical
-            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (d(), c(a(G), {
-              key: 3,
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (d(), s(a(G), {
+              key: 4,
               data: e.data,
               x: (n, r) => r,
               y: A.value,
@@ -149,9 +158,9 @@ const ne = {
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(u).Vertical
-            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), c(a(ee), {
-              key: 2,
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), s(a(ee), {
+              key: 3,
               data: e.data,
               x: (n, r) => r,
               y: A.value,
@@ -159,10 +168,10 @@ const ne = {
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(u).Vertical
+              orientation: e.orientation ?? a(g).Vertical
             }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-            e.hideXAxis ? x("", !0) : (d(), c(a(V), C({
-              key: 4,
+            e.hideXAxis ? c("", !0) : (d(), s(a(V), P({
+              key: 5,
               type: "x",
               "tick-format": e.xFormatter,
               label: e.xLabel,
@@ -171,31 +180,33 @@ const ne = {
               "tick-line": e.xTickLine,
               "num-ticks": e.xNumTicks,
               "tick-values": e.xExplicitTicks,
-              minMaxTicksOnly: e.minMaxTicksOnly
-            }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-            e.hideYAxis ? x("", !0) : (d(), c(a(V), C({
-              key: 5,
+              minMaxTicksOnly: e.minMaxTicksOnly,
+              duration: e.duration
+            }, e.xAxisConfig), null, 16, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly", "duration"])),
+            e.hideYAxis ? c("", !0) : (d(), s(a(V), P({
+              key: 6,
               type: "y",
               label: e.yLabel,
-              "grid-line": e.orientation !== a(u).Horizontal && e.yGridLine,
+              "grid-line": e.orientation !== a(g).Horizontal && e.yGridLine,
               "domain-line": !!e.yDomainLine,
               "tick-format": e.yFormatter,
               "num-ticks": e.yNumTicks,
-              "tick-line": e.yTickLine
-            }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
+              "tick-line": e.yTickLine,
+              duration: e.duration
+            }, e.yAxisConfig), null, 16, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line", "duration"]))
           ];
         }),
         _: 1
-      }, 8, ["padding", "height"]),
-      t.hideLegend ? x("", !0) : (d(), p("div", {
+      }, 8, ["padding", "height", "duration"]),
+      t.hideLegend ? c("", !0) : (d(), v("div", {
         key: 0,
-        style: L({
+        style: h({
           display: "flex",
-          justifyContent: N.value
+          justifyContent: E.value
         })
       }, [
-        b(a(te), {
-          style: L([
+        p(a(te), {
+          style: h([
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
@@ -208,19 +219,19 @@ const ne = {
       j("div", ne, [
         a(D).tooltip ? F(i.$slots, "tooltip", {
           key: 0,
-          values: g.value
-        }) : g.value ? F(i.$slots, "fallback", { key: 1 }, () => [
-          b(ae, {
-            data: g.value,
+          values: y.value
+        }) : y.value ? F(i.$slots, "fallback", { key: 1 }, () => [
+          p(ae, {
+            data: y.value,
             categories: t.categories,
             "title-formatter": t.tooltipTitleFormatter,
-            yFormatter: t.orientation === a(u).Horizontal ? t.xFormatter : t.yFormatter
+            yFormatter: t.orientation === a(g).Horizontal ? t.xFormatter : t.yFormatter
           }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-        ]) : x("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  ue as default
+  ce as default
 };

package/dist/components/BarChart/types.d.ts

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter, AxisConfig } from '../../types';
+import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter, AxisConfig, TooltipConfig } from '../../types';
 type BarChartPropsBase<T> = {
     /**
      * The data to be displayed in the bar chart.
@@ -105,6 +105,14 @@ type BarChartPropsBase<T> = {
      * See `LegendPosition` for available options.
      */
     legendPosition?: LegendPosition;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
     /**
      * Optional style object for the legend container. Allows custom CSS styling.
      */

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,12 +1,12 @@
-import { defineComponent as O, useSlots as S, useTemplateRef as D, ref as R, computed as g, createElementBlock as p, openBlock as l, normalizeStyle as d, createVNode as s, createCommentVNode as r, createElementVNode as w, unref as t, withCtx as K, createBlock as u, mergeProps as x, renderSlot as k } from "vue";
+import { defineComponent as D, useSlots as N, useTemplateRef as O, ref as S, computed as p, createElementBlock as g, openBlock as r, normalizeStyle as d, createVNode as c, createCommentVNode as n, createElementVNode as R, unref as t, withCtx as K, createBlock as u, mergeProps as x, renderSlot as k } from "vue";
 import { Scatter as M, Position as E } from "@unovis/ts";
 import { VisXYContainer as G, VisTooltip as W, VisScatter as $, VisAxis as L, VisBulletLegend as j } from "@unovis/vue";
 import { LegendPosition as X } from "../../types.js";
 import Y from "../Tooltip.js";
-const _ = {
+const q = {
   ref: "slotWrapper",
   class: "hidden"
-}, Q = /* @__PURE__ */ O({
+}, Q = /* @__PURE__ */ D({
   __name: "BubbleChart",
   props: {
     xAccessor: {},
@@ -46,61 +46,69 @@ const _ = {
       color: "#666"
     }) },
     xAxisConfig: {},
-    yAxisConfig: {}
+    yAxisConfig: {},
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) }
   },
   emits: ["click"],
-  setup(c, { emit: h }) {
-    const e = c, T = S(), y = D("slotWrapper"), n = R(), v = e.xAccessor, b = e.yAccessor, B = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), A = (i) => {
+  setup(s, { emit: h }) {
+    const e = s, T = N(), y = O("slotWrapper"), l = S(), v = e.xAccessor, b = e.yAccessor, C = e.sizeAccessor || ((o) => typeof o.comments == "number" ? o.comments : 1), B = (o) => {
       var f, m;
       if (!e.categories || !e.categoryKey)
         return console.warn(
           "BubbleChart: categories and categoryKey are required for color mapping"
         ), "#cccccc";
-      const a = String(i[e.categoryKey]);
-      let o = (f = e.categories[a]) == null ? void 0 : f.color;
-      return Object.keys(e.categories).length === 1 && (o = (m = e.categories[e.categoryKey]) == null ? void 0 : m.color), o || (console.warn(
+      const a = String(o[e.categoryKey]);
+      let i = (f = e.categories[a]) == null ? void 0 : f.color;
+      return Object.keys(e.categories).length === 1 && (i = (m = e.categories[e.categoryKey]) == null ? void 0 : m.color), i || (console.warn(
         `BubbleChart: No color defined for category "${a}"`
       ), "#cccccc");
-    }, C = h;
-    function F(i) {
-      return n.value = i, V();
+    }, A = h;
+    function F(o) {
+      return l.value = o, w();
     }
-    function V(i) {
+    function w(o) {
       return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
     }
-    const z = {
+    const V = {
       [M.selectors.point]: F
-    }, P = g(() => e.legendPosition.startsWith("top")), N = g(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
-    return (i, a) => (l(), p("div", {
+    }, z = p(() => e.legendPosition.startsWith("top")), P = p(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    return (o, a) => (r(), g("div", {
       style: d({
         display: "flex",
-        flexDirection: P.value ? "column-reverse" : "column",
+        flexDirection: z.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       })
     }, [
-      s(t(G), {
+      c(t(G), {
         data: e.data,
         height: e.height || 600,
         padding: e.padding,
+        duration: s.duration,
         scaleByDomain: !0,
-        onClick: a[0] || (a[0] = (o) => C("click", o, n.value))
+        onClick: a[0] || (a[0] = (i) => A("click", i, l.value))
       }, {
         default: K(() => [
-          e.hideTooltip ? r("", !0) : (l(), u(t(W), {
+          e.hideTooltip ? n("", !0) : (r(), u(t(W), {
             key: 0,
-            triggers: z
-          })),
-          s(t($), {
+            triggers: V,
+            followCursor: e.tooltip.followCursor,
+            "show-delay": e.tooltip.showDelay,
+            "hide-delay": e.tooltip.hideDelay
+          }, null, 8, ["followCursor", "show-delay", "hide-delay"])),
+          c(t($), {
             x: t(v),
             y: t(b),
-            color: A,
-            size: t(B),
+            color: B,
+            size: t(C),
             labelPosition: e.labelPosition || t(E).Bottom,
             sizeRange: e.sizeRange || [1, 20],
             opacity: e.opacity,
             cursor: "pointer"
           }, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
-          e.hideXAxis ? r("", !0) : (l(), u(t(L), x({
+          e.hideXAxis ? n("", !0) : (r(), u(t(L), x({
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -110,9 +118,10 @@ const _ = {
             tickLine: e.xTickLine,
             numTicks: e.xNumTicks,
             tickValues: e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, c.xAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
-          e.hideYAxis ? r("", !0) : (l(), u(t(L), x({
+            minMaxTicksOnly: e.minMaxTicksOnly,
+            duration: e.duration
+          }, s.xAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly", "duration"])),
+          e.hideYAxis ? n("", !0) : (r(), u(t(L), x({
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -120,42 +129,43 @@ const _ = {
             gridLine: e.yGridLine,
             domainLine: !!e.yDomainLine,
             tickLine: e.yTickLine,
-            numTicks: e.yNumTicks
-          }, c.yAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks"]))
+            numTicks: e.yNumTicks,
+            duration: e.duration
+          }, s.yAxisConfig), null, 16, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "duration"]))
         ]),
         _: 1
-      }, 8, ["data", "height", "padding"]),
-      e.hideLegend ? r("", !0) : (l(), p("div", {
+      }, 8, ["data", "height", "padding", "duration"]),
+      e.hideLegend ? n("", !0) : (r(), g("div", {
         key: 0,
         style: d({
           display: "flex",
-          justifyContent: N.value
+          justifyContent: P.value
         })
       }, [
-        s(t(j), {
+        c(t(j), {
           class: "bulletLegendOverrides",
           style: d([
             e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(e.categories).map((o) => ({
-            ...o,
-            color: Array.isArray(o.color) ? o.color[0] : o.color
+          items: Object.values(e.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      w("div", _, [
-        t(T).tooltip ? k(i.$slots, "tooltip", {
+      R("div", q, [
+        t(T).tooltip ? k(o.$slots, "tooltip", {
           key: 0,
-          values: n.value
-        }) : n.value ? k(i.$slots, "fallback", { key: 1 }, () => [
-          s(Y, {
-            data: n.value,
+          values: l.value
+        }) : l.value ? k(o.$slots, "fallback", { key: 1 }, () => [
+          c(Y, {
+            data: l.value,
             categories: e.categories || {},
             "title-formatter": e.tooltipTitleFormatter,
             yFormatter: e.yFormatter
           }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-        ]) : r("", !0)
+        ]) : n("", !0)
       ], 512)
     ], 4));
   }

package/dist/components/BubbleChart/types.d.ts

@@ -1,4 +1,4 @@
-import { axisFormatter, BulletLegendItemInterface, LegendPosition, CrosshairConfig, AxisConfig } from '../../types';
+import { axisFormatter, BulletLegendItemInterface, LegendPosition, CrosshairConfig, AxisConfig, TooltipConfig } from '../../types';
 import { NumericAccessor, Position } from '@unovis/ts';
 export interface SizeOptions {
     minRadius?: number;
@@ -161,4 +161,12 @@ export interface BubbleChartProps<T> {
      * Axis configuration object for customizing the appearance of the axes.
      */
     yAxisConfig?: AxisConfig;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
 }

package/dist/components/DagreGraph/DagreGraph.js

@@ -0,0 +1,171 @@
+import { defineComponent as E, useSlots as M, useTemplateRef as N, ref as V, computed as l, createElementBlock as c, openBlock as u, normalizeStyle as f, createVNode as k, createCommentVNode as s, createElementVNode as g, unref as a, withCtx as P, createBlock as G, renderSlot as h, toDisplayString as y } from "vue";
+import { VisSingleContainer as I, VisTooltip as Z, VisGraph as $, VisBulletLegend as j } from "@unovis/vue";
+import { Graph as m, GraphLayoutType as R } from "@unovis/ts";
+import { LegendPosition as q } from "../../types.js";
+const H = {
+  ref: "slotWrapper",
+  style: { display: "none" }
+}, J = { class: "dagre-tooltip" }, K = { class: "font-semibold" }, O = {
+  key: 0,
+  class: "text-sm text-gray-500"
+}, _ = /* @__PURE__ */ E({
+  __name: "DagreGraph",
+  props: {
+    data: {},
+    height: { default: 600 },
+    width: { default: void 0 },
+    dagreLayoutSettings: { default: () => ({
+      rankdir: "TB",
+      nodesep: 50,
+      ranksep: 100,
+      ranker: "network-simplex",
+      marginx: 20,
+      marginy: 20
+    }) },
+    nodeSize: { type: [Number, Function], default: 40 },
+    nodeLabel: {},
+    nodeShape: { type: [String, Function], default: "circle" },
+    nodeFill: { type: [String, Function], default: "#3b82f6" },
+    nodeStroke: { type: [String, Function], default: "#1e40af" },
+    nodeStrokeWidth: { type: [Number, Function], default: 2 },
+    linkArrow: { default: "end" },
+    linkLabel: {},
+    linkStroke: { type: [String, Function], default: "#9ca3af" },
+    linkWidth: { type: [Number, Function], default: 2 },
+    linkCurvature: { default: 0 },
+    padding: { default: () => ({ top: 20, right: 20, bottom: 20, left: 20 }) },
+    hideTooltip: { type: Boolean, default: !1 },
+    zoomEnabled: { type: Boolean, default: !0 },
+    zoomScaleExtent: { default: () => [0.1, 10] },
+    nodeDraggingEnabled: { type: Boolean, default: !1 },
+    hideLegend: { type: Boolean, default: !0 },
+    legendPosition: { default: q.BottomCenter },
+    legendStyle: { default: void 0 },
+    legendItems: { default: () => [] },
+    tooltipTitleFormatter: {},
+    tooltipContentFormatter: {},
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
+    duration: { default: 600 }
+  },
+  emits: ["nodeClick", "nodeMouseover", "nodeMouseout", "linkClick", "linkMouseover", "linkMouseout"],
+  setup(t, { emit: S }) {
+    const e = t, r = S, p = M();
+    N("slotWrapper");
+    const i = V(), v = l(() => typeof e.nodeSize == "function" ? e.nodeSize : () => e.nodeSize), b = l(() => e.nodeLabel ? e.nodeLabel : (o) => o.label || o.id), C = l(() => typeof e.nodeShape == "function" ? e.nodeShape : () => e.nodeShape), L = l(() => typeof e.nodeFill == "function" ? e.nodeFill : () => e.nodeFill), F = l(() => typeof e.nodeStroke == "function" ? e.nodeStroke : () => e.nodeStroke), w = l(() => typeof e.nodeStrokeWidth == "function" ? e.nodeStrokeWidth : () => e.nodeStrokeWidth), A = l(() => e.linkLabel ? e.linkLabel : (o) => o.label || ""), W = l(() => typeof e.linkStroke == "function" ? e.linkStroke : () => e.linkStroke), x = l(() => typeof e.linkWidth == "function" ? e.linkWidth : () => e.linkWidth), z = l(() => {
+      switch (e.linkArrow) {
+        case "start":
+          return "start";
+        case "end":
+          return "end";
+        case "both":
+          return "both";
+        case "none":
+          return;
+        default:
+          return "end";
+      }
+    }), T = l(() => e.legendPosition.startsWith("top")), B = l(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), D = {
+      [m.selectors.node]: {
+        click: (o, n) => {
+          r("nodeClick", o, n);
+        },
+        mouseover: (o, n) => {
+          i.value = o, r("nodeMouseover", o, n);
+        },
+        mouseout: (o, n) => {
+          i.value = void 0, r("nodeMouseout", o, n);
+        }
+      },
+      [m.selectors.link]: {
+        click: (o, n) => {
+          r("linkClick", o, n);
+        },
+        mouseover: (o, n) => {
+          r("linkMouseover", o, n);
+        },
+        mouseout: (o, n) => {
+          r("linkMouseout", o, n);
+        }
+      }
+    };
+    return (o, n) => (u(), c("div", {
+      style: f({
+        display: "flex",
+        flexDirection: T.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      class: "dagre-graph-container"
+    }, [
+      k(a(I), {
+        data: t.data,
+        height: t.height,
+        width: t.width,
+        duration: t.duration,
+        padding: t.padding
+      }, {
+        default: P(() => [
+          t.hideTooltip ? s("", !0) : (u(), G(a(Z), {
+            key: 0,
+            followCursor: e.tooltip.followCursor,
+            "show-delay": e.tooltip.showDelay,
+            "hide-delay": e.tooltip.hideDelay
+          }, null, 8, ["followCursor", "show-delay", "hide-delay"])),
+          k(a($), {
+            layoutType: a(R).Dagre,
+            dagreLayoutSettings: t.dagreLayoutSettings,
+            nodeSize: v.value,
+            nodeLabel: b.value,
+            nodeShape: C.value,
+            nodeFill: L.value,
+            nodeStroke: F.value,
+            nodeStrokeWidth: w.value,
+            linkArrow: z.value,
+            linkLabel: A.value,
+            linkStroke: W.value,
+            linkWidth: x.value,
+            linkCurvature: t.linkCurvature,
+            zoomScaleExtent: t.zoomScaleExtent,
+            disableZoom: !t.zoomEnabled,
+            disableDrag: !t.nodeDraggingEnabled,
+            events: D
+          }, null, 8, ["layoutType", "dagreLayoutSettings", "nodeSize", "nodeLabel", "nodeShape", "nodeFill", "nodeStroke", "nodeStrokeWidth", "linkArrow", "linkLabel", "linkStroke", "linkWidth", "linkCurvature", "zoomScaleExtent", "disableZoom", "disableDrag"])
+        ]),
+        _: 1
+      }, 8, ["data", "height", "width", "duration", "padding"]),
+      !t.hideLegend && t.legendItems && t.legendItems.length > 0 ? (u(), c("div", {
+        key: 0,
+        style: f({
+          display: "flex",
+          justifyContent: B.value
+        })
+      }, [
+        k(a(j), {
+          style: f([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: t.legendItems.map((d) => ({
+            ...d,
+            color: Array.isArray(d.color) ? d.color[0] : d.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)) : s("", !0),
+      g("div", H, [
+        a(p).tooltip ? h(o.$slots, "tooltip", {
+          key: 0,
+          node: i.value
+        }) : i.value ? h(o.$slots, "fallback", { key: 1 }, () => [
+          g("div", J, [
+            g("div", K, y(t.tooltipTitleFormatter ? t.tooltipTitleFormatter(i.value) : i.value.label || i.value.id), 1),
+            t.tooltipContentFormatter ? (u(), c("div", O, y(t.tooltipContentFormatter(i.value)), 1)) : s("", !0)
+          ])
+        ]) : s("", !0)
+      ], 512)
+    ], 4));
+  }
+});
+export {
+  _ as default
+};