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

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

@@ -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;
                             };
                         };
@@ -2231,7 +2265,14 @@ declare module "vue-data-ui" {
     export type VueUiAgePyramidDataset = Array<Array<string | number>>;
 
     export type VueUiAgePyramidConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiAgePyramidEvent; // v3
+            datapointLeave?: VueUiAgePyramidEvent; // v3
+            datapointClick?: VueUiAgePyramidEvent; // v3
+        };
         theme?: Theme;
         style?: {
             backgroundColor?: string;
@@ -2263,6 +2304,8 @@ declare module "vue-data-ui" {
                         scale?: number;
                         translation?: string;
                         formatter?: Formatter;
+                        rotation?: number;
+                        autoRotate?: boolean;
                     };
                     yAxis?: {
                         show?: boolean;
@@ -2372,7 +2415,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 +2450,7 @@ declare module "vue-data-ui" {
                             offsetY?: number;
                             bold?: boolean;
                             rotation?: number;
+                            autoRotate?: boolean;
                         };
                         timeLabels?: {
                             datetimeFormatter?: AxisDateFormatter
@@ -2742,19 +2793,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 +2852,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 +2865,7 @@ declare module "vue-data-ui" {
                     yAxis?: {
                         show?: boolean;
                         values?: Array<string | number>;
+                        datetimeFormatter?: AxisDateFormatter; // v3
                         fontSize?: number;
                         color?: string;
                         bold?: boolean;
@@ -2818,8 +2878,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 +2926,7 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiHeatmapDatasetItem = {
-        name: string;
+        name: string | number;
         values: number[];
     };
 
@@ -2954,10 +3015,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 +3036,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 +3108,8 @@ declare module "vue-data-ui" {
                         groupColor?: string | null;
                         scaleLabelOffsetX?: number;
                         scaleValueOffsetX?: number;
+                        rounding?: number;
+                        serieNameFormatter?: Formatter;
                     };
                     xAxis?: {
                         showBaseline?: boolean;
@@ -3053,6 +3128,7 @@ declare module "vue-data-ui" {
                         showOnlyAtModulo?: boolean;
                         modulo?: number;
                         datetimeFormatter?: AxisDateFormatter;
+                        autoRotate?: boolean;
                     };
                 };
             };
@@ -3105,6 +3181,8 @@ declare module "vue-data-ui" {
             userOptions?: ChartUserOptions;
         };
         bar?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             borderRadius?: number;
             useGradient?: boolean;
             periodGap?: number;
@@ -3131,6 +3209,8 @@ declare module "vue-data-ui" {
             };
         };
         line?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             strokeWidth?: number;
@@ -3159,6 +3239,8 @@ declare module "vue-data-ui" {
             };
         };
         plot?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             dot?: {
@@ -3289,11 +3371,23 @@ 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 VueUiAgePyramidEvent = ChartEvent<VueUiAgePyramidDatapoint>;
 
     export type VueUiDonutConfig = {
         debug?: boolean;
@@ -3527,6 +3621,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 +3667,7 @@ declare module "vue-data-ui" {
                             useSerieColor?: boolean;
                             showDonutName?: boolean;
                             boldDonutName?: boolean;
+                            curvedDonutName?: boolean;
                             donutNameAbbreviation?: boolean;
                             donutNameOffsetY?: number;
                             donutNameMaxAbbreviationSize?: number;
@@ -3575,6 +3675,7 @@ declare module "vue-data-ui" {
                         };
                     };
                     donut?: {
+                        radiusRatio?: number;
                         strokeWidth?: number;
                         borderWidth?: number;
                         spacingRatio?: number;
@@ -3716,7 +3817,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 +4831,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 +4902,7 @@ declare module "vue-data-ui" {
                         show?: boolean;
                         color?: string;
                         strokeWidth?: number;
+                        fullWidth?: boolean;
                     };
                 };
                 title?: ChartTitle;
@@ -4912,7 +5024,7 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiSparklineDatasetItem = {
-        period: string;
+        period: string | number;
         value: number;
         absoluteValue?: number;
         id?: string;
@@ -4924,9 +5036,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 +5113,7 @@ declare module "vue-data-ui" {
                 prefix?: string;
                 suffix?: string;
                 formatter?: Formatter;
+                datetimeFormatter?: AxisDateFormatter; // v3
             };
             title?: {
                 show?: boolean;
@@ -5633,6 +5753,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 +5774,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 +5813,8 @@ declare module "vue-data-ui" {
         tooltipFontSize?: number;
         tooltipPosition?: TooltipPosition;
         tooltipOffsetY?: number;
+        tooltipSmooth?: boolean;
+        tooltipBackdropFilter?: boolean;
         useCustomLegend?: boolean;
         valuePrefix?: string;
         valueSuffix?: string;
@@ -5704,6 +5835,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 +6613,7 @@ declare module "vue-data-ui" {
         inflow?: number;
         outflow?: number;
         percentOfTotal: number;
+        name?: string;
     }
 
     export type VueUiFlowFormattedDataset = {
@@ -6506,6 +6639,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;
@@ -6515,6 +6656,8 @@ declare module "vue-data-ui" {
             fontFamily?: string;
             chart?: {
                 backgroundColor?: string;
+                width?: number; // v3
+                height?: number; // v3
                 color?: string;
                 legend?: ChartBaseLegend & {
                     backgroundColor?: string;
@@ -6546,7 +6689,7 @@ declare module "vue-data-ui" {
                 title?: ChartTitle;
                 nodes?: {
                     gap?: number;
-                    minHeight?: number;
+                    // minHeight?: number; // v3 deprecated
                     width?: number;
                     labels?: {
                         fontSize?: number;
@@ -6563,7 +6706,7 @@ declare module "vue-data-ui" {
                     strokeWidth?: number;
                 };
                 links?: {
-                    width?: number;
+                    // width?: number; // v3 deprecated
                     opacity?: number;
                     stroke?: string;
                     strokeWidth?: number;
@@ -6646,7 +6789,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 +6835,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 +6891,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 +7180,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 +7293,7 @@ declare module "vue-data-ui" {
                             datetimeFormatter?: AxisDateFormatter;
                             offsetY?: number;
                             rotation?: number;
+                            autoRotate?: boolean;
                             fontSize?: number;
                             color?: string;
                             bold?: boolean;
@@ -7198,6 +7378,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 +7415,7 @@ declare module "vue-data-ui" {
                     };
                 };
                 target?: {
+                    show?: boolean;
                     onTop?: boolean;
                     color?: string;
                     rounded?: boolean;
@@ -8515,6 +8699,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;