vue-data-ui 3.0.0-next.4 → 3.0.0-next.40

package/dist/types/vue-data-ui.d.ts

@@ -259,6 +259,8 @@ declare module "vue-data-ui" {
         backgroundOpacity?: number;
         position?: TooltipPosition;
         offsetY?: number;
+        smooth?: boolean;
+        backdropFilter?: boolean;
     };
 
     export type ZoomMinimap = {
@@ -1308,7 +1310,30 @@ declare module "vue-data-ui" {
         isSpin?: boolean;
     }>;
 
+    export type VueUiDonutEvolutionDatapoint = {
+        activeRadius: number;
+        donut: VueUiDonutDatapoint[];
+        donutFocus: VueUiDonutDatapoint[];
+        donutHover: VueUiDonutDatapoint[];
+        hoverRadius: number;
+        index: number;
+        percentages: number[0];
+        radius: number;
+        subtotal: number;
+        values: Array<number | null>;
+        x: number;
+        y: number;
+    }
+
     export type VueUiDonutEvolutionConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
+        events?: { // v3
+            datapointEnter?: VueUiDonutEvolutionEvent; // v3
+            datapointLeave?: VueUiDonutEvolutionEvent; // v3
+            datapointClick?: VueUiDonutEvolutionEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         style?: {
@@ -1346,6 +1371,14 @@ declare module "vue-data-ui" {
                         stroke?: string;
                         strokeWidth?: number;
                         showVerticalLines?: boolean;
+                        axis?: { // v3
+                            yLabel?: string; // v3
+                            yLabelOffsetX?: number; // v3
+                            xLabel?: string; // v3
+                            xLabelOffsetY?: number; // v3
+                            fontSize?: number; // v3
+                            color?: string; // v3
+                        };
                         yAxis?: {
                             dataLabels?: {
                                 show?: boolean;
@@ -1366,6 +1399,7 @@ declare module "vue-data-ui" {
                                 showOnlyFirstAndLast?: boolean;
                                 color?: string;
                                 rotation?: number;
+                                autoRotate?: boolean;
                                 offsetY?: number;
                             };
                         };
@@ -2372,7 +2406,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiCandlestickConfig = {
+        debug?: boolean;
+        loading?: boolean;
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiCandlestickEvent; // v3
+            datapointLeave?: VueUiCandlestickEvent; // v3
+            datapointClick?: VueUiCandlestickEvent; // v3
+        };
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         useCssAnimation?: boolean;
@@ -2400,6 +2441,7 @@ declare module "vue-data-ui" {
                             offsetY?: number;
                             bold?: boolean;
                             rotation?: number;
+                            autoRotate?: boolean;
                         };
                         timeLabels?: {
                             datetimeFormatter?: AxisDateFormatter
@@ -2742,19 +2784,25 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiHeatmapConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         style?: {
             backgroundColor?: string;
             color?: string;
             fontFamily?: string;
             layout?: {
+                height?: number;
+                width?: number;
                 padding?: ChartPadding;
                 cells?: {
-                    height?: number;
+                    // height?: number; // v3 deprecated
                     columnTotal?: {
                         value?: {
                             show?: boolean;
                             rotation?: number;
+                            autoRotate?: boolean; // v3
                             offsetX?: number;
                             offsetY?: number;
                         };
@@ -2795,8 +2843,10 @@ declare module "vue-data-ui" {
                     xAxis?: {
                         show?: boolean;
                         values?: Array<string | number>;
+                        datetimeFormatter?: AxisDateFormatter; // v3
                         showOnlyAtModulo?: number | null;
                         rotation?: number;
+                        autoRotate?: boolean; // v3
                         fontSize?: number;
                         color?: string;
                         bold?: boolean;
@@ -2806,6 +2856,7 @@ declare module "vue-data-ui" {
                     yAxis?: {
                         show?: boolean;
                         values?: Array<string | number>;
+                        datetimeFormatter?: AxisDateFormatter; // v3
                         fontSize?: number;
                         color?: string;
                         bold?: boolean;
@@ -2818,8 +2869,9 @@ declare module "vue-data-ui" {
             legend?: ChartBaseLegend & {
                 backgroundColor?: string;
                 roundingValue?: number;
-                position?: "right" | "bottom";
-                scaleBorderRadius?: number;
+                width?: number;
+                // position?: "right" | "bottom"; // v3 deprecated
+                // scaleBorderRadius?: number; // v3 deprecated
             };
             tooltip?: ChartTooltip & {
                 roundingValue?: number;
@@ -2865,7 +2917,7 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiHeatmapDatasetItem = {
-        name: string;
+        name: string | number;
         values: number[];
     };
 
@@ -2954,10 +3006,14 @@ declare module "vue-data-ui" {
     }
 
     export type VueUiXyConfig = {
-        debug?: boolean;
-        responsive?: boolean;
-        autoSize?: boolean; // v3 opt-in
+        debug?: boolean; // v3
+        responsive?: boolean; // v3
         loading?: boolean; // v3
+        events?: { // v3
+            datapointEnter?: VueUiXyEvent; // v3
+            datapointLeave?: VueUiXyEvent; // v3
+            datapointClick?: VueUiXyEvent; // v3
+        };
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -2971,7 +3027,15 @@ declare module "vue-data-ui" {
             color?: string;
             height?: number;
             width?: number;
-            zoom?: ChartZoom;
+            zoom?: ChartZoom & {
+                preview?: {
+                    enable?: boolean;
+                    fill?: string;
+                    stroke?: string;
+                    strokeWidth?: number;
+                    strokeDasharray?: number;
+                };
+            };
             padding?: ChartPadding;
             annotations?: VueUiXyAnnotation[];
             highlighter?: {
@@ -3035,6 +3099,8 @@ declare module "vue-data-ui" {
                         groupColor?: string | null;
                         scaleLabelOffsetX?: number;
                         scaleValueOffsetX?: number;
+                        rounding?: number;
+                        serieNameFormatter?: Formatter;
                     };
                     xAxis?: {
                         showBaseline?: boolean;
@@ -3053,6 +3119,7 @@ declare module "vue-data-ui" {
                         showOnlyAtModulo?: boolean;
                         modulo?: number;
                         datetimeFormatter?: AxisDateFormatter;
+                        autoRotate?: boolean;
                     };
                 };
             };
@@ -3105,6 +3172,8 @@ declare module "vue-data-ui" {
             userOptions?: ChartUserOptions;
         };
         bar?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             borderRadius?: number;
             useGradient?: boolean;
             periodGap?: number;
@@ -3131,6 +3200,8 @@ declare module "vue-data-ui" {
             };
         };
         line?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             strokeWidth?: number;
@@ -3159,6 +3230,8 @@ declare module "vue-data-ui" {
             };
         };
         plot?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             dot?: {
@@ -3289,11 +3362,22 @@ declare module "vue-data-ui" {
         {
             config?: VueUiXyConfig;
             dataset: VueUiXyDatasetItem[];
+            selectedXIndex?: number | null; // v3
         },
         VueUiXyExpose
     >;
 
-    export type VueUiDonutEvent = null | (({datapoint, seriesIndex }: { datapoint: VueUiDonutDatapoint; seriesIndex: number }) => void);
+    export type ChartEvent<T> = null | (({ datapoint, seriesIndex} : { datapoint: T, seriesIndex: number}) => void);
+
+    export type VueUiDonutEvent = ChartEvent<VueUiDonutDatapoint>;
+    export type VueUiSparklineEvent = ChartEvent<VueUiSparklineDatasetItem>;
+    export type VueUiXyEvent = ChartEvent<VueUiXyDatapointItem[]>;
+    export type VueUiStackbarEvent = ChartEvent<VueUiStackbarDatapointItem[]>;
+    export type VueUiCandlestickEvent = ChartEvent<VueUiCandlestickDatapoint>;
+    export type VueUiDonutEvolutionEvent = ChartEvent<VueUiDonutEvolutionDatapoint>;
+    export type VueUiWaffleEvent = ChartEvent<VueUiWaffleDatapoint>;
+    export type VueUiParallelCoordinatePlotEvent = ChartEvent<VueUiParallelCoordinatePlotEventDatapoint>
+    export type VueUiFlowEvent = ChartEvent<VueUiFlowNode>
 
     export type VueUiDonutConfig = {
         debug?: boolean;
@@ -3527,6 +3611,11 @@ declare module "vue-data-ui" {
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
+        events?: {
+            datapointEnter?: VueUiDonutEvent;
+            datapointLeave?: VueUiDonutEvent;
+            datapointClick?: VueUiDonutEvent;
+        };
         serieToggleAnimation?: {
             show?: boolean;
             durationMs?: number;
@@ -3568,6 +3657,7 @@ declare module "vue-data-ui" {
                             useSerieColor?: boolean;
                             showDonutName?: boolean;
                             boldDonutName?: boolean;
+                            curvedDonutName?: boolean;
                             donutNameAbbreviation?: boolean;
                             donutNameOffsetY?: number;
                             donutNameMaxAbbreviationSize?: number;
@@ -3575,6 +3665,7 @@ declare module "vue-data-ui" {
                         };
                     };
                     donut?: {
+                        radiusRatio?: number;
                         strokeWidth?: number;
                         borderWidth?: number;
                         spacingRatio?: number;
@@ -3716,7 +3807,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiWaffleConfig = {
+        debug?: boolean;
+        loading?: boolean;
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiWaffleEvent; // v3
+            datapointLeave?: VueUiWaffleEvent; // v3
+            datapointClick?: VueUiWaffleEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         useBlurOnHover?: boolean;
@@ -4723,6 +4821,9 @@ declare module "vue-data-ui" {
     export type VueUiHorizontalBarEvent = VueUiVerticalBarEvent; // v3 renaming
 
     export type VueUiVerticalBarConfig = {
+        debug?: boolean;
+        loading?: boolean;
+        autoSize?: boolean;
         responsive?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -4791,6 +4892,7 @@ declare module "vue-data-ui" {
                         show?: boolean;
                         color?: string;
                         strokeWidth?: number;
+                        fullWidth?: boolean;
                     };
                 };
                 title?: ChartTitle;
@@ -4912,7 +5014,7 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiSparklineDatasetItem = {
-        period: string;
+        period: string | number;
         value: number;
         absoluteValue?: number;
         id?: string;
@@ -4924,9 +5026,16 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiSparklineConfig = {
+        loading?: boolean; // v3
+        debug?: boolean; // v3
         theme?: Theme;
         type?: "line" | "bar";
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiSparklineEvent; // v3
+            datapointLeave?: VueUiSparklineEvent; // v3
+            datapointClick?: VueUiSparklineEvent; // v3
+        };
         downsample?: {
             threshold?: number;
         };
@@ -4994,6 +5103,7 @@ declare module "vue-data-ui" {
                 prefix?: string;
                 suffix?: string;
                 formatter?: Formatter;
+                datetimeFormatter?: AxisDateFormatter; // v3
             };
             title?: {
                 show?: boolean;
@@ -5633,6 +5743,13 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiQuickChartConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        events?: {
+            datapointEnter?: ChartEvent<object| object[]>;
+            datapointLeave?: ChartEvent<object| object[]>;
+            datapointClick?: ChartEvent<object| object[]>;
+        };
         responsive?: boolean;
         theme?: Theme;
         axisLabelsFontSize?: number;
@@ -5647,11 +5764,13 @@ declare module "vue-data-ui" {
         dataLabelFontSize?: number;
         dataLabelRoundingPercentage?: number;
         dataLabelRoundingValue?: number;
+        donutCurvedMarkers?: boolean; // v3
         donutHideLabelUnderPercentage?: number;
         donutLabelMarkerStrokeWidth?: number;
         donutRadiusRatio?: number;
         donutShowTotal?: boolean;
         donutStrokeWidth?: number;
+        donutStroke?: string; // v3
         donutThicknessRatio?: number;
         donutTotalLabelFontSize?: number;
         donutTotalLabelOffsetY?: number;
@@ -5684,6 +5803,8 @@ declare module "vue-data-ui" {
         tooltipFontSize?: number;
         tooltipPosition?: TooltipPosition;
         tooltipOffsetY?: number;
+        tooltipSmooth?: boolean;
+        tooltipBackdropFilter?: boolean;
         useCustomLegend?: boolean;
         valuePrefix?: string;
         valueSuffix?: string;
@@ -5704,6 +5825,7 @@ declare module "vue-data-ui" {
         xyPeriods?: Array<number | string>;
         datetimeFormatter?: AxisDateFormatter;
         xyPeriodLabelsRotation?: number;
+        xyPeriodLabelsAutoRotate?: boolean; // v3
         xyPeriodsShowOnlyAtModulo?: boolean;
         xyPeriodsModulo?: number;
         xyScaleSegments?: number;
@@ -6481,6 +6603,7 @@ declare module "vue-data-ui" {
         inflow?: number;
         outflow?: number;
         percentOfTotal: number;
+        name?: string;
     }
 
     export type VueUiFlowFormattedDataset = {
@@ -6506,6 +6629,14 @@ declare module "vue-data-ui" {
     }
 
     export type VueUiFlowConfig = {
+        debug?: boolean;
+        loading?: boolean;
+        responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiFlowEvent;
+            datapointLeave?: VueUiFlowEvent;
+            datapointClick?: VueUiFlowEvent;
+        };
         theme?: Theme;
         customPalette?: string[];
         userOptions?: ChartUserOptions;
@@ -6646,7 +6777,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiParallelCoordinatePlotConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiParallelCoordinatePlotEvent; // v3
+            datapointLeave?: VueUiParallelCoordinatePlotEvent; // v3
+            datapointClick?: VueUiParallelCoordinatePlotEvent; // v3
+        },
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         useCssAnimation?: boolean;
@@ -6685,6 +6823,8 @@ declare module "vue-data-ui" {
                         axisNames?: string[];
                         axisNamesColor?: string;
                         axisNamesFontSize?: number;
+                        axisNamesRotation?: number; // v3
+                        axisNamesAutoRotate?: boolean; // v3
                         axisNamesBold?: boolean;
                         roundings?: number[];
                         prefixes?: string[];
@@ -6739,6 +6879,28 @@ declare module "vue-data-ui" {
         };
     };
 
+    export type VueUiParallelCoordinatePlotEventDatapoint = {
+        color: string;
+        datapoints: Array<{
+            axisIndex: number;
+            comment: string;
+            datapointIndex: number;
+            name: string;
+            seriesIndex: number;
+            seriesName: string;
+            value: number;
+            x: number;
+            y: number;
+        }>;
+        id: string;
+        name: string;
+        pathLength: number;
+        shape: Shape;
+        smoothPath: string;
+        straightPath: string;
+        values: number[];
+    }
+
     export type VueUiParallelCoordinatePlotDatapointSelection = {
         id: string;
         name: string;
@@ -7006,6 +7168,11 @@ declare module "vue-data-ui" {
         responsive?: boolean;
         customPalette?: string[];
         useCssAnimation?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiStackbarEvent; // v3
+            datapointLeave?: VueUiStackbarEvent; // v3
+            datapointClick?: VueUiStackbarEvent; // v3
+        };
         orientation?: "vertical" | "horizontal";
         table?: {
             show?: boolean;
@@ -7114,6 +7281,7 @@ declare module "vue-data-ui" {
                             datetimeFormatter?: AxisDateFormatter;
                             offsetY?: number;
                             rotation?: number;
+                            autoRotate?: boolean;
                             fontSize?: number;
                             color?: string;
                             bold?: boolean;
@@ -7198,6 +7366,9 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiBulletConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         userOptions?: ChartUserOptions;
         style?: {
@@ -7232,6 +7403,7 @@ declare module "vue-data-ui" {
                     };
                 };
                 target?: {
+                    show?: boolean;
                     onTop?: boolean;
                     color?: string;
                     rounded?: boolean;
@@ -8515,6 +8687,55 @@ declare module "vue-data-ui" {
      * @returns The shifted color in hexadecimal format.
      */
     export const shiftColorHue: (color: string, strength: number) => string;
+    
+    export type FormatSmallValueArgs = {
+        value: number;
+        maxDecimals?: number;
+        fallbackFormatter?: (value: number) => string;
+        removeTrailingZero?: boolean
+    }
+
+    /**
+     * Vue Data UI utility
+     * ---
+     * Formats numeric values with a controlled number of decimal places,
+     * applying maxDecimals for all values when no fallbackFormatter is given,
+     * or calling the fallbackFormatter for values ≥ 1 if provided.
+     * ___
+     * @example
+     * // Zero value
+     * formatSmallValue({ value: 0 }); // "0"
+     *
+     * // Values < 1 use minimal decimals
+     * formatSmallValue({ value: 0.9 }); // "0.9"
+     * formatSmallValue({ value: 0.0042 }); // "0.0042"
+     * formatSmallValue({ value: 0.00420001 }); // "0.0042"
+     *
+     * // Retain trailing zeros
+     * formatSmallValue({ value: 0.9, removeTrailingZero: false }); // "0.90"
+     *
+     * // Values ≥ 1 without fallback apply maxDecimals
+     * formatSmallValue({ value: 1.61803, maxDecimals: 3 }); // "1.618"
+     *
+     * // Values ≥ 1 with fallbackFormatter
+     * formatSmallValue({ value: 2.5, fallbackFormatter: v => v.toFixed(1) }); // "2.5"
+     *
+     * // Negative values
+     * formatSmallValue({ value: -0.056 }); // "-0.056"
+     * 
+     * @param {FormatSmallValueArgs} options - Configuration object for formatting.
+     * @param {number} options.value                 - The numeric value to format.
+     * @param {number} [options.maxDecimals=4]       - Maximum decimal places to use.
+     * @param {(value: number) => string} [options.fallbackFormatter] - Formatter for values ≥ 1.
+     * @param {boolean} [options.removeTrailingZero=true] - Whether to strip unnecessary trailing zeros.
+     * @returns {string} The formatted number as a string.
+     */
+    export const formatSmallValue: ({
+        value,
+        maxDecimals,
+        fallbackFormatter,
+        removeTrailingZero
+    }: FormatSmallValueArgs) => string
 
     export type CreateTSpansArgs = {
         content: string;

package/dist/{useNestedProp-B6Dz15k2.js → useNestedProp-CiNTcBth.js}

@@ -1,4 +1,4 @@
-import { A as o, z as n } from "./index-BnnNoGGd.js";
+import { A as o, z as n } from "./index-Dt40W2hN.js";
 function c({ defaultConfig: e, userConfig: r }) {
   if (!Object.keys(r || {}).length)
     return e;

package/dist/{usePrinter-Dd-RkmL8.js → usePrinter-C4Hc_Nbf.js}

@@ -10,7 +10,7 @@ function m({
     !t || r.value || (r.value = !0, clearTimeout(n.value), n.value = setTimeout(async () => {
       if (t)
         try {
-          const { default: e } = await import("./pdf-urw1sGoX.js");
+          const { default: e } = await import("./pdf-DtFuExHv.js");
           await e({
             domElement: document.getElementById(u),
             fileName: l,
@@ -27,7 +27,7 @@ function m({
     !t || a.value || (a.value = !0, clearTimeout(n.value), n.value = setTimeout(async () => {
       if (t)
         try {
-          const { default: e } = await import("./img-CP2uNkKq.js");
+          const { default: e } = await import("./img-lSctQ4V6.js");
           await e({
             domElement: document.getElementById(u),
             fileName: l,

package/dist/useTimeLabelCollider-CIsgDrl9.js

@@ -0,0 +1,78 @@
+import { watch as A, nextTick as D } from "vue";
+function S({
+  timeLabelsEls: F,
+  timeLabels: L,
+  slicer: x,
+  configRef: s,
+  rotationPath: r,
+  autoRotatePath: p,
+  isAutoSize: N,
+  setViewBox: y,
+  forceResizeObserver: C,
+  callback: o,
+  targetClass: j = ".vue-data-ui-time-label",
+  rotation: w = -30.0001,
+  height: T = null,
+  width: b = null
+}) {
+  function i(a, n) {
+    return n.reduce((e, t) => e && e[t], a);
+  }
+  function g(a, n, e) {
+    n.slice(0, -1).reduce((t, l) => t[l], a)[n.slice(-1)] = e;
+  }
+  function q(a) {
+    const n = /translate\(\s*([^\s,]+)\s*,\s*([^\s,]+)\s*\)/.exec(a);
+    return n ? {
+      x: parseFloat(n[1]),
+      y: parseFloat(n[2])
+    } : { x: 0, y: 0 };
+  }
+  async function c() {
+    await D();
+    const a = F.value;
+    if (!a) return;
+    const e = Array.from(a.querySelectorAll(j)).map((u) => ({
+      ...q(u.getAttribute("transform")),
+      width: u.getBBox().width
+    }));
+    let t = !1;
+    const l = 4;
+    for (let u = 0; u < e.length && !t; u += 1)
+      for (let m = u + 1; m < e.length; m += 1) {
+        const v = e[u], f = e[m];
+        if (!(v.x + v.width + l < f.x || f.x + f.width + l < v.x)) {
+          t = !0;
+          break;
+        }
+      }
+    const d = i(s.value, r);
+    t && !d ? (g(s.value, r, w), o && o({ collision: t }), N.value && y && C && (y(), C())) : !t && d === w && (g(s.value, r, 0), o && o({ collision: t }));
+  }
+  function B(a, n) {
+    let e;
+    return (...t) => {
+      clearTimeout(e), e = setTimeout(() => a(...t), n);
+    };
+  }
+  const h = B(c, 200);
+  return T && b && A([() => b.value, () => T.value], async ([a, n], [e, t]) => {
+    if (!i(s.value, p)) return;
+    a !== e || n !== t ? h() : await c();
+  }), A(
+    [
+      () => L.value,
+      () => i(s.value, r),
+      () => x.value.start,
+      () => x.value.end
+    ],
+    async ([, , a, n], [, , e, t]) => {
+      if (!i(s.value, p)) return;
+      a !== e || n !== t ? h() : await c();
+    },
+    { immediate: !0 }
+  ), { detectTimeLabelCollision: c };
+}
+export {
+  S as u
+};