vue-chrts 2.1.0-beta-8 → 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,7 +1,7 @@
 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 "../../packages/shared/dist/index.js";
+import { LegendPosition as J } from "../../enums.js";
 const K = {
   ref: "slotWrapper",
   style: { display: "none" }

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 '../../../../shared/dist/index.d.ts';
+import { BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition } from '../../enums';
 /**
  * Dagre layout direction options
  */

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

@@ -0,0 +1,68 @@
+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.
+     * See `DonutType` for available options.
+     */
+    type?: DonutType;
+    /**
+     * The data to be displayed in the donut chart.
+     * Each number in the array represents a segment value.
+     */
+    data: number[];
+    /**
+     * The arc width of the chart in pixels.
+     */
+    arcWidth?: number;
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * The radius of the donut in pixels.
+     */
+    radius: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * Pad angle. Default: 0
+     */
+    padAngle?: number;
+    /**
+     * 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;
+};

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, 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 { LegendPosition as j } from "../../packages/shared/dist/index.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 { DonutType as R } from "../../packages/shared/dist/donut-chart.js";
+import { LegendPosition as R } from "../../enums.js";
 const M = { style: {
   position: "absolute",
   top: "50%",
@@ -21,7 +21,7 @@ const M = { style: {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    legendPosition: { default: j.BottomCenter },
+    legendPosition: { default: R.BottomCenter },
     legendStyle: {},
     categories: {},
     padAngle: {},
@@ -34,7 +34,7 @@ const M = { style: {
   },
   emits: ["click"],
   setup(l, { emit: v }) {
-    const C = v, e = l, w = S(), g = P("slotWrapper"), n = W(), k = (t) => t, T = e.type === R.Half;
+    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 = {

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';

package/dist/components/DualChart/DualChart.d.ts

@@ -0,0 +1,195 @@
+import { axisFormatter, CrosshairConfig, AxisConfig, BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition, Orientation, CurveType } from '../../enums';
+export interface DualChartProps<T> {
+    /**
+     * The data to be displayed in the dual chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis (used for both bar and line by default).
+     */
+    yLabel?: string;
+    /**
+     * Optional label for the secondary y-axis (line chart).
+     */
+    yLabelSecondary?: string;
+    /**
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /**
+     * A record mapping bar category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for bar categories in the chart's legend.
+     */
+    barCategories: Record<string, BulletLegendItemInterface>;
+    /**
+     * A record mapping line category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for line categories in the chart's legend.
+     */
+    lineCategories: Record<string, BulletLegendItemInterface>;
+    /**
+     * An array of property keys from the data object type 'T' to be used for the bar chart y-axis values.
+     */
+    barYAxis: (keyof T)[];
+    /**
+     * An array of property keys from the data object type 'T' to be used for the line chart y-axis values.
+     */
+    lineYAxis: (keyof T)[];
+    /**
+     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
+     * @param {number} i - The index of the tick in the `ticks` array.
+     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
+     * @returns {string} The formatted string representation of the tick.
+     */
+    xFormatter?: axisFormatter;
+    /**
+     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
+     * @param {number} i - The index of the tick in the `ticks` array.
+     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
+     * @returns {string} The formatted string representation of the tick.
+     */
+    yFormatter?: axisFormatter;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
+    /**
+     * The type of curve to use for the line chart lines.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * The width of the line in pixels. Default is 2px.
+     */
+    lineWidth?: number;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: (number | string | Date)[];
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: boolean;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    xDomainLine?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the y-axis.
+     */
+    yDomainLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the y-axis.
+     */
+    yTickLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    yGridLine?: boolean;
+    /**
+     * If `true`, hide the x-axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * If `true`, hide the y-axis.
+     */
+    hideYAxis?: boolean;
+    /**
+     * Crosshair configuration object for customizing the appearance of the crosshair line.
+     */
+    crosshairConfig?: CrosshairConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
+    /**
+     * The domain for the y-axis, specified as a tuple of two values.
+     */
+    yDomain?: [number | undefined, number | undefined];
+    /**
+     * The domain for the x-axis, specified as a tuple of two values.
+     */
+    xDomain?: [number | undefined, number | undefined];
+    /**
+     * If `true`, creates stacked bars.
+     */
+    stacked?: boolean;
+    /**
+     * The padding between groups of bars in pixels.
+     */
+    groupPadding?: number;
+    /**
+     * Fractional padding between the bars in the range of [0,1). Default: 0.2
+     */
+    barPadding?: number;
+    /**
+     * Rounded corners for top bars. Boolean or number (to set the radius in pixels). Default: 2
+     */
+    radius?: number;
+    /**
+     * The orientation of the bars (vertical or horizontal).
+     * See `Orientation` for available options.
+     */
+    orientation?: Orientation;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
+}

package/dist/components/DualChart/DualChart.js

@@ -2,7 +2,7 @@ import { defineComponent as G, useSlots as z, useTemplateRef as H, ref as X, com
 import { Orientation as g, CurveType as Y, Position as w, StackedBar as U, GroupedBar as I } from "@unovis/ts";
 import { VisXYContainer as J, VisTooltip as K, VisGroupedBar as Q, VisStackedBar as Z, VisLine as _, VisAxis as P, VisCrosshair as ee, VisBulletLegend as te } from "@unovis/vue";
 import ie from "../Tooltip.js";
-import { LegendPosition as ae } from "../../packages/shared/dist/index.js";
+import { LegendPosition as ae } from "../../enums.js";
 const ne = {
   ref: "slotWrapper",
   style: { display: "none" }

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

@@ -1,4 +1,4 @@
-import { DualChartProps } from './types';
+import { DualChartProps } from './DualChart';
 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?: T | undefined) => any) | undefined;

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

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

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

@@ -1,5 +1,5 @@
-import { axisFormatter, CrosshairConfig, AxisConfig, BulletLegendItemInterface, TooltipConfig, LegendPosition, Orientation } from '../../../../shared/dist/index.d.ts';
-import { CurveType } from '@unovis/ts';
+import { axisFormatter, CrosshairConfig, AxisConfig, BulletLegendItemInterface, TooltipConfig } from '../../types';
+import { LegendPosition, Orientation, CurveType } from '../../enums';
 export interface DualChartProps<T> {
     /**
      * The data to be displayed in the dual chart.