vue-chrts 2.1.0-beta-7 → 2.1.0-beta-9

package/dist/components/DagreGraph/DagreGraph.d.ts

@@ -0,0 +1,254 @@
+import { BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition } from '../../enums';
+/**
+ * Dagre layout direction options
+ */
+export type DagreRankDir = "TB" | "BT" | "LR" | "RL";
+/**
+ * Dagre layout alignment options
+ */
+export type DagreAlign = "UL" | "UR" | "DL" | "DR";
+/**
+ * Dagre ranking algorithm options
+ */
+export type DagreRanker = "network-simplex" | "tight-tree" | "longest-path";
+/**
+ * Node shape options
+ */
+export type NodeShape = "circle" | "square" | "triangle" | "diamond";
+/**
+ * Link arrow position options
+ */
+export type LinkArrowPosition = "start" | "end" | "both" | "none";
+/**
+ * Configuration for Dagre layout algorithm
+ */
+export interface DagreLayoutSettings {
+    /**
+     * Direction of the layout: 'TB' (top-to-bottom), 'BT' (bottom-to-top),
+     * 'LR' (left-to-right), 'RL' (right-to-left)
+     * @default 'TB'
+     */
+    rankdir?: DagreRankDir;
+    /**
+     * Alignment of nodes: 'UL' (up-left), 'UR' (up-right), 'DL' (down-left), 'DR' (down-right)
+     */
+    align?: DagreAlign;
+    /**
+     * Horizontal spacing between nodes in pixels
+     * @default 50
+     */
+    nodesep?: number;
+    /**
+     * Spacing between edges in pixels
+     * @default 10
+     */
+    edgesep?: number;
+    /**
+     * Vertical spacing between ranks in pixels
+     * @default 50
+     */
+    ranksep?: number;
+    /**
+     * Algorithm to use for ranking nodes
+     * @default 'network-simplex'
+     */
+    ranker?: DagreRanker;
+    /**
+     * Horizontal margin in pixels
+     * @default 0
+     */
+    marginx?: number;
+    /**
+     * Vertical margin in pixels
+     * @default 0
+     */
+    marginy?: number;
+}
+/**
+ * Node data structure for the graph
+ */
+export interface GraphNodeDatum {
+    /**
+     * Unique identifier for the node
+     */
+    id: string;
+    /**
+     * Display label for the node
+     */
+    label?: string;
+    /**
+     * Node level (for hierarchical data)
+     */
+    level?: number;
+    /**
+     * Additional data associated with the node
+     */
+    [key: string]: any;
+}
+/**
+ * Link/Edge data structure for the graph
+ */
+export interface GraphLinkDatum {
+    /**
+     * Source node ID
+     */
+    source: string;
+    /**
+     * Target node ID
+     */
+    target: string;
+    /**
+     * Label for the link
+     */
+    label?: string;
+    /**
+     * Additional data associated with the link
+     */
+    [key: string]: any;
+}
+/**
+ * Graph data structure containing nodes and links
+ */
+export interface GraphData<N = GraphNodeDatum, L = GraphLinkDatum> {
+    /**
+     * Array of node data
+     */
+    nodes: N[];
+    /**
+     * Array of link data
+     */
+    links: L[];
+}
+/**
+ * Props for the DagreGraph component
+ */
+export interface DagreGraphProps<N = GraphNodeDatum, L = GraphLinkDatum> {
+    /**
+     * The graph data containing nodes and links
+     */
+    data: GraphData<N, L>;
+    /**
+     * The height of the graph container in pixels
+     * @default 600
+     */
+    height?: number;
+    /**
+     * The width of the graph container in pixels
+     * @default undefined (auto)
+     */
+    width?: number;
+    /**
+     * Dagre layout configuration
+     */
+    dagreLayoutSettings?: DagreLayoutSettings;
+    /**
+     * Function or value to determine node size
+     * @default 40
+     */
+    nodeSize?: number | ((node: N, index: number) => number);
+    /**
+     * Function to extract node label
+     */
+    nodeLabel?: (node: N, index: number) => string;
+    /**
+     * Function or value to determine node shape
+     */
+    nodeShape?: NodeShape | ((node: N, index: number) => NodeShape);
+    /**
+     * Function or value to determine node fill color
+     */
+    nodeFill?: string | ((node: N, index: number) => string);
+    /**
+     * Function or value to determine node stroke color
+     */
+    nodeStroke?: string | ((node: N, index: number) => string);
+    /**
+     * Function or value to determine node stroke width
+     */
+    nodeStrokeWidth?: number | ((node: N, index: number) => number);
+    /**
+     * Link arrow configuration
+     * @default 'end'
+     */
+    linkArrow?: LinkArrowPosition;
+    /**
+     * Function to extract link label
+     */
+    linkLabel?: (link: L, index: number) => string;
+    /**
+     * Function or value to determine link color
+     */
+    linkStroke?: string | ((link: L, index: number) => string);
+    /**
+     * Function or value to determine link width
+     */
+    linkWidth?: number | ((link: L, index: number) => number);
+    /**
+     * Link curvature amount (0-1)
+     * @default 0
+     */
+    linkCurvature?: number;
+    /**
+     * Optional padding applied to the graph
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /**
+     * If true, hides the tooltip
+     */
+    hideTooltip?: boolean;
+    /**
+     * Enable zoom and pan controls
+     * @default true
+     */
+    zoomEnabled?: boolean;
+    /**
+     * Zoom scale extent [min, max]
+     * @default [0.1, 10]
+     */
+    zoomScaleExtent?: [number, number];
+    /**
+     * Enable node dragging
+     * @default false
+     */
+    nodeDraggingEnabled?: boolean;
+    /**
+     * If true, hides the legend
+     */
+    hideLegend?: boolean;
+    /**
+     * Legend position
+     * @default LegendPosition.BottomCenter
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Legend style
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * Legend items configuration
+     */
+    legendItems?: BulletLegendItemInterface[];
+    /**
+     * Custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (node: N) => string | number;
+    /**
+     * Custom formatter for tooltip content
+     */
+    tooltipContentFormatter?: (node: N) => string;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Animation duration in milliseconds
+     * @default 600
+     */
+    duration?: number;
+}

package/dist/components/DagreGraph/DagreGraph.js

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

package/dist/components/DagreGraph/DagreGraph.vue.d.ts

@@ -1,4 +1,4 @@
-import { DagreGraphProps, GraphNodeDatum, GraphLinkDatum } from './types';
+import { DagreGraphProps, GraphNodeDatum, GraphLinkDatum } from './DagreGraph';
 declare const _default: <N extends GraphNodeDatum = GraphNodeDatum, L extends GraphLinkDatum = GraphLinkDatum>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onNodeClick?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;

package/dist/components/DagreGraph/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DagreGraph } from './DagreGraph.vue';
+export * from './DagreGraph';

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

@@ -1,4 +1,5 @@
-import { BulletLegendItemInterface, TooltipConfig, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition } from '../../enums';
 /**
  * Dagre layout direction options
  */

package/dist/components/DonutChart/{types.d.ts → DonutChart.d.ts}

@@ -1,4 +1,9 @@
-import { BulletLegendItemInterface, LegendPosition, TooltipConfig } from '../../types';
+import { BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition } from '../../enums';
+export declare enum DonutType {
+    Half = "half",
+    Full = "full"
+}
 export type DonutChartProps<T> = {
     /**
      * The type of donut chart to render.
@@ -17,7 +22,7 @@ export type DonutChartProps<T> = {
     /**
      * The height of the chart in pixels.
      */
-    height?: number;
+    height: number;
     /**
      * The radius of the donut in pixels.
      */
@@ -61,8 +66,3 @@ export type DonutChartProps<T> = {
      */
     duration?: number;
 };
-declare enum DonutType {
-    Half = "half",
-    Full = "full"
-}
-export { DonutType };

package/dist/components/DonutChart/DonutChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as L, useSlots as S, useTemplateRef as P, ref as W, computed as s, createElementBlock as y, openBlock as d, normalizeStyle as u, createVNode as a, createCommentVNode as c, createElementVNode as h, unref as i, withCtx as b, createBlock as N, renderSlot as f } from "vue";
+import { defineComponent as L, useSlots as S, useTemplateRef as P, ref as W, computed as s, openBlock as d, createElementBlock as y, normalizeStyle as u, createVNode as a, unref as i, withCtx as b, createBlock as N, createCommentVNode as c, createElementVNode as h, renderSlot as f } from "vue";
 import { Donut as $ } from "@unovis/ts";
-import { DonutType as j } from "./types.js";
+import { DonutType as j } from "./DonutChart2.js";
 import z from "../Tooltip.js";
 import { VisSingleContainer as H, VisTooltip as E, VisDonut as F, VisBulletLegend as O } from "@unovis/vue";
-import { LegendPosition as R } from "../../types.js";
+import { LegendPosition as R } from "../../enums.js";
 const M = { style: {
   position: "absolute",
   top: "50%",

package/dist/components/DonutChart/DonutChart.vue.d.ts

@@ -1,4 +1,4 @@
-import { DonutChartProps } from './types';
+import { DonutChartProps } from './DonutChart';
 declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onClick?: ((event: MouseEvent, values?: any) => any) | undefined;

package/dist/components/DonutChart/DonutChart2.js

@@ -1,4 +1,4 @@
-import f from "./DonutChart.js";
+var r = /* @__PURE__ */ ((l) => (l.Half = "half", l.Full = "full", l))(r || {});
 export {
-  f as default
+  r as DonutType
 };

package/dist/components/DonutChart/DonutChart3.js

@@ -0,0 +1,4 @@
+import f from "./DonutChart.js";
+export {
+  f as default
+};

package/dist/components/DonutChart/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DonutChart } from './DonutChart.vue';
+export * from './DonutChart';