vue-chrts 2.0.0 → 2.1.0-beta-3

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

@@ -0,0 +1,33 @@
+import { DagreGraphProps, GraphNodeDatum, GraphLinkDatum } from './types';
+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;
+        readonly onNodeMouseover?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;
+        readonly onNodeMouseout?: ((node: N, event?: MouseEvent | undefined) => any) | undefined;
+        readonly onLinkClick?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
+        readonly onLinkMouseover?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
+        readonly onLinkMouseout?: ((link: L, event?: MouseEvent | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onNodeClick" | "onNodeMouseover" | "onNodeMouseout" | "onLinkClick" | "onLinkMouseover" | "onLinkMouseout"> & DagreGraphProps<N, L> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {
+            node: N | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: {
+        (e: "nodeClick", node: N, event?: MouseEvent): void;
+        (e: "nodeMouseover", node: N, event?: MouseEvent): void;
+        (e: "nodeMouseout", node: N, event?: MouseEvent): void;
+        (e: "linkClick", link: L, event?: MouseEvent): void;
+        (e: "linkMouseover", link: L, event?: MouseEvent): void;
+        (e: "linkMouseout", link: L, event?: MouseEvent): void;
+    };
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/DagreGraph/DagreGraph2.js

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

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

@@ -0,0 +1,253 @@
+import { BulletLegendItemInterface, TooltipConfig, LegendPosition } from '../../types';
+/**
+ * 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/DonutChart/DonutChart.js

@@ -1,18 +1,18 @@
-import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as p, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
-import { Donut as N } from "@unovis/ts";
-import { DonutType as $ } from "./types.js";
-import j from "../Tooltip.js";
-import { VisSingleContainer as z, VisTooltip as H, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
-import { LegendPosition as O } from "../../types.js";
-const R = { style: {
+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 { Donut as $ } from "@unovis/ts";
+import { DonutType as j } from "./types.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";
+const M = { style: {
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)"
-} }, M = {
+} }, U = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, K = /* @__PURE__ */ B({
+}, X = /* @__PURE__ */ L({
   __name: "DonutChart",
   props: {
     type: {},
@@ -21,98 +21,108 @@ const R = { style: {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    legendPosition: { default: O.BottomCenter },
+    legendPosition: { default: R.BottomCenter },
     legendStyle: {},
     categories: {},
     padAngle: {},
-    tooltipTitleFormatter: {}
+    tooltipTitleFormatter: {},
+    hideTooltip: { type: Boolean },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
+    duration: { default: 600 }
   },
   emits: ["click"],
-  setup(l, { emit: h }) {
-    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === $.Half;
-    function x(e) {
-      const o = Object.values(t.categories)[e.index].name;
-      return i.value = {
+  setup(l, { emit: v }) {
+    const C = v, e = l, w = S(), g = P("slotWrapper"), n = W(), k = (t) => t, T = e.type === j.Half;
+    function V(t) {
+      const o = Object.values(e.categories)[t.index].name;
+      return n.value = {
         label: o,
-        [o]: e.data
-      }, A();
+        [o]: t.data
+      }, x();
     }
-    function A() {
-      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
+    function x() {
+      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
     }
-    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, f = s(() => Object.values(t.categories)), w = (e, o) => {
-      const n = f.value[o];
-      if (n)
-        return g(n.color);
+    const B = s(() => e.legendPosition.includes("top")), D = s(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), p = (t, o = "#ccc") => t ? Array.isArray(t) ? t[0] || o : t : o, m = s(() => Object.values(e.categories)), A = (t, o) => {
+      const r = m.value[o];
+      if (r)
+        return p(r.color);
     };
-    return (e, o) => (m(), p("div", {
-      style: d({
+    return (t, o) => (d(), y("div", {
+      style: u({
         display: "flex",
-        flexDirection: L.value ? "column-reverse" : "column",
+        flexDirection: B.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: o[0] || (o[0] = (n) => C("click", n, i.value))
+      onClick: o[0] || (o[0] = (r) => C("click", r, n.value))
     }, [
-      a(r(z), {
+      a(i(H), {
         data: l.data,
         height: l.height,
+        duration: l.duration,
         margin: {}
       }, {
         default: b(() => [
-          a(r(H), {
+          l.hideTooltip ? c("", !0) : (d(), N(i(E), {
+            key: 0,
             "horizontal-shift": 20,
             "vertical-shift": 20,
+            followCursor: e.tooltip.followCursor,
+            "show-delay": e.tooltip.showDelay,
+            "hide-delay": e.tooltip.hideDelay,
             triggers: {
-              [r(N).selectors.segment]: x
+              [i($).selectors.segment]: V
             }
-          }, null, 8, ["triggers"]),
-          a(r(E), {
-            value: T,
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+          a(i(F), {
+            value: k,
             "corner-radius": l.radius,
             "arc-width": l.arcWidth ?? 20,
-            color: w,
-            "angle-range": V ? [-1.5707963267948966, 1.5707963267948966] : [],
-            "pad-angle": t.padAngle || 0
+            color: A,
+            "angle-range": T ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": e.padAngle || 0
           }, null, 8, ["corner-radius", "arc-width", "angle-range", "pad-angle"]),
-          y("div", R, [
-            u(e.$slots, "default")
+          h("div", M, [
+            f(t.$slots, "default")
           ])
         ]),
         _: 3
-      }, 8, ["data", "height"]),
-      t.hideLegend ? v("", !0) : (m(), p("div", {
+      }, 8, ["data", "height", "duration"]),
+      e.hideLegend ? c("", !0) : (d(), y("div", {
         key: 0,
-        style: d({
+        style: u({
           display: "flex",
-          justifyContent: S.value
+          justifyContent: D.value
         })
       }, [
-        a(r(F), {
-          style: d([
-            t.legendStyle,
+        a(i(O), {
+          style: u([
+            e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: f.value.map((n) => ({
-            ...n,
-            color: g(n.color)
+          items: m.value.map((r) => ({
+            ...r,
+            color: p(r.color)
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      y("div", M, [
-        r(k).tooltip ? u(e.$slots, "tooltip", {
+      h("div", U, [
+        i(w).tooltip ? f(t.$slots, "tooltip", {
           key: 0,
-          values: i.value
-        }) : i.value ? u(e.$slots, "fallback", { key: 1 }, () => [
-          a(j, {
-            data: i.value,
-            categories: t.categories,
-            "title-formatter": t.tooltipTitleFormatter
+          values: n.value
+        }) : n.value ? f(t.$slots, "fallback", { key: 1 }, () => [
+          a(z, {
+            data: n.value,
+            categories: e.categories,
+            "title-formatter": e.tooltipTitleFormatter
           }, null, 8, ["data", "categories", "title-formatter"])
-        ]) : v("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  K as default
+  X as default
 };

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, LegendPosition, TooltipConfig } from '../../types';
 export type DonutChartProps<T> = {
     /**
      * The type of donut chart to render.
@@ -17,7 +17,7 @@ export type DonutChartProps<T> = {
     /**
      * The height of the chart in pixels.
      */
-    height: number;
+    height?: number;
     /**
      * The radius of the donut in pixels.
      */
@@ -48,6 +48,18 @@ export type DonutChartProps<T> = {
      * Use custom formatter for tooltip titles
      */
     tooltipTitleFormatter?: (data: T) => string | number;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Animation duration in milliseconds.
+     */
+    duration?: number;
 };
 declare enum DonutType {
     Half = "half",