vue-data-ui 3.0.0-next.7 → 3.0.0-next.70

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

@@ -124,6 +124,37 @@ declare module "vue-data-ui" {
         | VueUiChordConfig;
     }>;
 
+    export type ChartEvent<T> = null | (({ datapoint, seriesIndex} : { datapoint: T, seriesIndex: number}) => void);
+
+    export type VueUiFlowEvent = ChartEvent<VueUiFlowNode>;
+    export type VueUi3dBarEvent = ChartEvent<VueUi3dBarDatapoint>;
+    export type VueUiDonutEvent = ChartEvent<VueUiDonutDatapoint>;
+    export type VueUiRadarEvent = ChartEvent<VueUiRadarDatapoint>;
+    export type VueUiXyEvent = ChartEvent<VueUiXyDatapointItem[]>;
+    export type VueUiRingsEvent = ChartEvent<VueUiRingsDatapoint>;
+    export type VueUiOnionEvent = ChartEvent<VueUiOnionDatapoint>;
+    export type VueUiWaffleEvent = ChartEvent<VueUiWaffleDatapoint>;
+    export type VueUiScatterEvent = ChartEvent<VueUiScatterDatapoint>;
+    export type VueUiTreemapEvent = ChartEvent<VueUiTreemapDatapoint>;
+    export type VueUiDumbbellEvent = ChartEvent<VueUiDumbbellDatapoint>;
+    export type VueUiQuadrantEvent = ChartEvent<VueUiQuadrantDatapoint>;
+    export type VueUiSparkbarEvent = ChartEvent<VueUiSparkbarDatasetItem>;
+    export type VueUiWordCloudEvent = ChartEvent<VueUiWordCloudDatapoint>;
+    export type VueUiStripPlotEvent = ChartEvent<VueUiStripPlotDatapoint>;
+    export type VueUiMoodRadarEvent = ChartEvent<VueUiMoodRadarDatapoint>;
+    export type VueUiSparklineEvent = ChartEvent<VueUiSparklineDatasetItem>;
+    export type VueUiAgePyramidEvent = ChartEvent<VueUiAgePyramidDatapoint>;
+    export type VueUiStackbarEvent = ChartEvent<VueUiStackbarDatapointItem[]>;
+    export type VueUiCandlestickEvent = ChartEvent<VueUiCandlestickDatapoint>;
+    export type VueUiRidgelineEvent = ChartEvent<VueUiRidgelineDatapointEvent>;
+    export type VueUiSparkStackbarEvent = ChartEvent<VueUiSparkStackbarDatapoint>;
+    export type VueUiHistoryPlotEvent = ChartEvent<VueUiHistoryPlotDatapointEvent>;
+    export type VueUiRelationCircleEvent = ChartEvent<VueUiRelationCircleDatapoint>;
+    export type VueUiDonutEvolutionEvent = ChartEvent<VueUiDonutEvolutionDatapoint>;
+    export type VueUiSparkHistogramEvent = ChartEvent<VueUiSparkHistogramDatasetItem>;
+    export type VueUiChordEvent = ChartEvent<VueUiChordDatapointArc | VueUiChordDatapointRibbon>;
+    export type VueUiParallelCoordinatePlotEvent = ChartEvent<VueUiParallelCoordinatePlotEventDatapoint>;
+
     export type VueUiPatternName =
         | "bubbles"
         | "flooring"
@@ -259,6 +290,8 @@ declare module "vue-data-ui" {
         backgroundOpacity?: number;
         position?: TooltipPosition;
         offsetY?: number;
+        smooth?: boolean;
+        backdropFilter?: boolean;
     };
 
     export type ZoomMinimap = {
@@ -367,7 +400,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiTreemapConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiTreemapEvent; // v3
+            datapointLeave?: VueUiTreemapEvent; // v3
+            datapointClick?: VueUiTreemapEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         userOptions?: ChartUserOptions;
@@ -452,6 +492,7 @@ declare module "vue-data-ui" {
         name: string;
         normalizedValue: number;
         parentName?: string;
+        parentId?: string;
         proportion: number;
         value: number;
         x0: number;
@@ -489,6 +530,7 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiKpiConfig = {
+        debug?: boolean;
         animationFrames?: number;
         animationValueStart?: number;
         backgroundColor?: string;
@@ -651,6 +693,8 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiSparkgaugeConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         theme?: Theme;
         style?: {
             fontFamily?: string;
@@ -944,7 +988,30 @@ declare module "vue-data-ui" {
         }>;
     };
 
+    export type VueUi3dBarDatapoint = {
+        breakdown: null | Array<{
+            name: string;
+            value: number;
+        }>;
+        color: string;
+        fill: Object; // Feeling too lazy to drill that one
+        id: string;
+        name: string;
+        proportion: number;
+        seriesIndex: number;
+        value: number;
+    }
+
     export type VueUi3dBarConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
+        events?: { // v3
+            datapointEnter?: VueUi3dBarEvent; // v3
+            datapointLeave?: VueUi3dBarEvent; // v3
+            datapointClick?: VueUi3dBarEvent; // v3
+        };
+        useCssAnimation?: boolean; // v3
         theme?: Theme;
         customPalette?: string[];
         style?: {
@@ -1043,7 +1110,23 @@ declare module "vue-data-ui" {
         "5": number;
     };
 
+    export type VueUiMoodRadarDatapoint = {
+        index: number;
+        key: "1" | "2" | "3" | "4" | "5";
+        value: number;
+        proportion: number;
+        color: string;
+    }
+
     export type VueUiMoodRadarConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
+        events?: {
+            datapointEnter?: VueUiMoodRadarEvent; // v3
+            datapointLeave?: VueUiMoodRadarEvent; // v3
+            datapointClick?: VueUiMoodRadarEvent; // v3
+        };
         theme?: Theme;
         style?: {
             fontFamily?: string;
@@ -1308,7 +1391,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 +1452,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 +1480,7 @@ declare module "vue-data-ui" {
                                 showOnlyFirstAndLast?: boolean;
                                 color?: string;
                                 rotation?: number;
+                                autoRotate?: boolean;
                                 offsetY?: number;
                             };
                         };
@@ -1449,11 +1564,16 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiTiremarksConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         userOptions?: ChartUserOptions;
         style?: {
             fontFamily?: string;
             chart?: {
+                width?: number; // v3
+                height?: number; // v3
                 backgroundColor?: string;
                 color?: string;
                 animation?: {
@@ -1513,6 +1633,8 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiWheelConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
         theme?: Theme;
         style?: {
@@ -1581,7 +1703,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiRingsConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiRingsEvent; // v3
+            datapointLeave?: VueUiRingsEvent; // v3
+            datapointClick?: VueUiRingsEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
@@ -1660,6 +1789,7 @@ declare module "vue-data-ui" {
         strokeWidth: number;
         uid: string;
         value: number;
+        absoluteIndex: number;
     };
 
     export type VueUiRingsDatasetItem = {
@@ -1695,6 +1825,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiSparkHistogramConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
+        events?: {
+            datapointEnter?: VueUiSparkHistogramEvent; // v3
+            datapointLeave?: VueUiSparkHistogramEvent; // v3
+            datapointClick?: VueUiSparkHistogramEvent; // v3
+        };
         theme?: Theme;
         style?: {
             backgroundColor?: string;
@@ -1731,6 +1869,7 @@ declare module "vue-data-ui" {
             labels?: {
                 value?: {
                     fontSize?: number;
+                    minFontSize?: number; // v3
                     color?: string;
                     bold?: boolean;
                     rounding?: number;
@@ -1741,12 +1880,14 @@ declare module "vue-data-ui" {
                 };
                 valueLabel?: {
                     fontSize?: number;
+                    minFontSize?: number; // v3
                     color?: string;
                     bold?: boolean;
                     rounding?: number;
                 };
                 timeLabel?: {
                     fontSize?: number;
+                    minFontSize?: number; // v3
                     color?: string;
                     bold?: boolean;
                 };
@@ -1797,7 +1938,26 @@ declare module "vue-data-ui" {
         dataset: VueUiSparkHistogramDatasetItem[];
     }>;
 
+    export type VueUiSparkStackbarDatapoint = {
+        color: string;
+        id: string;
+        name: string;
+        proportion: number;
+        proportionLabel: string;
+        seriesIndex: number;
+        start: number;
+        value: number;
+        width: number;
+    }
+
     export type VueUiSparkStackbarConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        events?: {
+            datapointEnter?: VueUiSparkStackbarEvent; // v3
+            datapointLeave?: VueUiSparkStackbarEvent; // v3
+            datapointClick?: VueUiSparkStackbarEvent; // v3
+        }
         theme?: Theme;
         customPalette?: string[];
         style?: {
@@ -1885,6 +2045,9 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiThermometerConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         customPalette?: string[];
         style?: {
@@ -1893,10 +2056,15 @@ declare module "vue-data-ui" {
                 backgroundColor?: string;
                 color?: string;
                 height?: number;
+                width?: number; // v3
                 thermometer?: {
                     width?: number;
                 };
-                padding?: ChartPadding;
+                padding?: {
+                    // v3 left and right are deprecated
+                    top?: number;
+                    bottom?: number;
+                };
                 graduations?: {
                     show?: boolean;
                     sides?: "left" | "right" | "both" | "none";
@@ -1914,7 +2082,9 @@ declare module "vue-data-ui" {
                     speedMs?: number;
                 };
                 label?: {
+                    show?: boolean; // v3
                     fontSize?: number;
+                    minFontSize?: number;
                     rounding?: number;
                     bold?: boolean;
                     prefix?: string;
@@ -1956,7 +2126,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiRelationCircleConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiRelationCircleEvent; // v3
+            datapointLeave?: VueUiRelationCircleEvent; // v3
+            datapointClick?: VueUiRelationCircleEvent; // v3
+        };
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -1973,6 +2150,7 @@ declare module "vue-data-ui" {
             labels?: {
                 color?: string;
                 fontSize?: number;
+                minFontSize?: number; // v3
             };
             weightLabels?: {
                 size?: number;
@@ -2010,6 +2188,18 @@ declare module "vue-data-ui" {
         color?: string;
     };
 
+    export type VueUiRelationCircleDatapoint = {
+        color: string;
+        id: string;
+        label: string;
+        regAngle: number;
+        relations: string[];
+        totalWeight: number;
+        weights: number[];
+        x: number;
+        y: number;
+    }
+
     export type VueUiRelationCircleExpose = {
         getImage(options?: { scale?: number }): GetImagePromise
         generatePdf(): void
@@ -2158,7 +2348,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiSparkbarConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         theme?: Theme;
+        events?: { // v3
+            datapointEnter?: VueUiSparkbarEvent; // v3
+            datapointLeave?: VueUiSparkbarEvent; // v3
+            datapointClick?: VueUiSparkbarEvent; // v3
+        }
         customPalette?: string[];
         style?: {
             backgroundColor?: string;
@@ -2231,7 +2428,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 +2467,8 @@ declare module "vue-data-ui" {
                         scale?: number;
                         translation?: string;
                         formatter?: Formatter;
+                        rotation?: number;
+                        autoRotate?: boolean;
                     };
                     yAxis?: {
                         show?: boolean;
@@ -2372,7 +2578,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 +2613,7 @@ declare module "vue-data-ui" {
                             offsetY?: number;
                             bold?: boolean;
                             rotation?: number;
+                            autoRotate?: boolean;
                         };
                         timeLabels?: {
                             datetimeFormatter?: AxisDateFormatter
@@ -2530,7 +2744,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiScatterConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiScatterEvent; // v3
+            datapointLeave?: VueUiScatterEvent; // v3
+            datapointClick?: VueUiScatterEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
@@ -2742,19 +2963,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 +3022,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 +3035,7 @@ declare module "vue-data-ui" {
                     yAxis?: {
                         show?: boolean;
                         values?: Array<string | number>;
+                        datetimeFormatter?: AxisDateFormatter; // v3
                         fontSize?: number;
                         color?: string;
                         bold?: boolean;
@@ -2818,8 +3048,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 +3096,7 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiHeatmapDatasetItem = {
-        name: string;
+        name: string | number;
         values: number[];
     };
 
@@ -2954,10 +3185,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 +3206,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 +3278,8 @@ declare module "vue-data-ui" {
                         groupColor?: string | null;
                         scaleLabelOffsetX?: number;
                         scaleValueOffsetX?: number;
+                        rounding?: number;
+                        serieNameFormatter?: Formatter;
                     };
                     xAxis?: {
                         showBaseline?: boolean;
@@ -3053,6 +3298,7 @@ declare module "vue-data-ui" {
                         showOnlyAtModulo?: boolean;
                         modulo?: number;
                         datetimeFormatter?: AxisDateFormatter;
+                        autoRotate?: boolean;
                     };
                 };
             };
@@ -3105,9 +3351,12 @@ declare module "vue-data-ui" {
             userOptions?: ChartUserOptions;
         };
         bar?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             borderRadius?: number;
             useGradient?: boolean;
             periodGap?: number;
+            innerGap?: number;
             border?: {
                 useSerieColor?: boolean;
                 strokeWidth?: number;
@@ -3131,6 +3380,8 @@ declare module "vue-data-ui" {
             };
         };
         line?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             strokeWidth?: number;
@@ -3159,6 +3410,8 @@ declare module "vue-data-ui" {
             };
         };
         plot?: {
+            showTransition?: boolean;
+            transitionDurationMs?: number;
             radius?: number;
             useGradient?: boolean;
             dot?: {
@@ -3289,12 +3542,11 @@ 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 VueUiDonutConfig = {
         debug?: boolean;
         type?: "classic" | "polar";
@@ -3527,6 +3779,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 +3825,7 @@ declare module "vue-data-ui" {
                             useSerieColor?: boolean;
                             showDonutName?: boolean;
                             boldDonutName?: boolean;
+                            curvedDonutName?: boolean;
                             donutNameAbbreviation?: boolean;
                             donutNameOffsetY?: number;
                             donutNameMaxAbbreviationSize?: number;
@@ -3575,6 +3833,7 @@ declare module "vue-data-ui" {
                         };
                     };
                     donut?: {
+                        radiusRatio?: number;
                         strokeWidth?: number;
                         borderWidth?: number;
                         spacingRatio?: number;
@@ -3716,7 +3975,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;
@@ -3858,7 +4124,14 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiRadarConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiRadarEvent; // v3
+            datapointLeave?: VueUiRadarEvent; // v3
+            datapointClick?: VueUiRadarEvent; // v3
+        }
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
@@ -3948,6 +4221,7 @@ declare module "vue-data-ui" {
         values: number[];
         x: number;
         y: number;
+        formatter: Formatter
     };
 
     export type VueUiRadarCategory = {
@@ -4037,7 +4311,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiQuadrantConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiQuadrantEvent; // v3
+            datapointLeave?: VueUiQuadrantEvent; // v3
+            datapointClick?: VueUiQuadrantEvent; // v3
+        };
         theme?: Theme;
         useCssAnimation?: boolean;
         zoomAnimationFrames?: number;
@@ -4226,6 +4507,8 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiGaugeConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -4269,6 +4552,7 @@ declare module "vue-data-ui" {
                         curved?: boolean;
                         offsetRatio?: number;
                         fontSize?: number;
+                        minFontSize?: number; // v3
                         useSerieColor?: boolean;
                         color?: string;
                         bold?: boolean;
@@ -4558,7 +4842,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiOnionConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiOnionEvent; // v3
+            datapointLeave?: VueUiOnionEvent; // v3
+            datapointClick?: VueUiOnionEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
@@ -4583,6 +4874,7 @@ declare module "vue-data-ui" {
                     labels?: {
                         show?: boolean;
                         fontSize?: number;
+                        minFontSize?: number; // v3
                         color?: string;
                         roundingValue?: number;
                         roundingPercentage?: number;
@@ -4916,7 +5208,7 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiSparklineDatasetItem = {
-        period: string;
+        period: string | number;
         value: number;
         absoluteValue?: number;
         id?: string;
@@ -4928,9 +5220,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;
         };
@@ -4998,6 +5297,7 @@ declare module "vue-data-ui" {
                 prefix?: string;
                 suffix?: string;
                 formatter?: Formatter;
+                datetimeFormatter?: AxisDateFormatter; // v3
             };
             title?: {
                 show?: boolean;
@@ -5637,6 +5937,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;
@@ -5651,11 +5958,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;
@@ -5688,6 +5997,8 @@ declare module "vue-data-ui" {
         tooltipFontSize?: number;
         tooltipPosition?: TooltipPosition;
         tooltipOffsetY?: number;
+        tooltipSmooth?: boolean;
+        tooltipBackdropFilter?: boolean;
         useCustomLegend?: boolean;
         valuePrefix?: string;
         valueSuffix?: string;
@@ -5708,6 +6019,7 @@ declare module "vue-data-ui" {
         xyPeriods?: Array<number | string>;
         datetimeFormatter?: AxisDateFormatter;
         xyPeriodLabelsRotation?: number;
+        xyPeriodLabelsAutoRotate?: boolean; // v3
         xyPeriodsShowOnlyAtModulo?: boolean;
         xyPeriodsModulo?: number;
         xyScaleSegments?: number;
@@ -5819,6 +6131,9 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiSparkTrendConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         downsample?: {
             threshold?: number;
@@ -5826,6 +6141,8 @@ declare module "vue-data-ui" {
         style?: {
             backgroundColor?: string;
             fontFamily?: string;
+            width?: number; // v3
+            height?: number; // v3
             animation?: {
                 show?: boolean;
                 animationFrames?: number;
@@ -5879,7 +6196,14 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiStripPlotConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiStripPlotEvent; // v3
+            datapointLeave?: VueUiStripPlotEvent; // v3
+            datapointClick?: VueUiStripPlotEvent; // v3
+        };
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -5903,7 +6227,8 @@ declare module "vue-data-ui" {
                 backgroundColor?: string;
                 color?: string;
                 height?: number;
-                stripWidth?: number;
+                width?: number; // v3
+                // stripWidth?: number; // v3 deprecated
                 padding?: ChartPadding;
                 grid?: {
                     show?: boolean;
@@ -5959,6 +6284,8 @@ declare module "vue-data-ui" {
                         color?: string;
                         fontSize?: number;
                         offsetY?: number;
+                        rotation?: number; // v3
+                        autoRotate?: boolean; // v3
                     };
                     yAxisLabels?: {
                         show?: boolean;
@@ -5990,6 +6317,9 @@ declare module "vue-data-ui" {
         id: string;
         name: string;
         parentId: string;
+        parentIndex: number;
+        parentName: string;
+        plotIndex: number;
         value: number;
         x: number;
         y: number;
@@ -6053,8 +6383,32 @@ declare module "vue-data-ui" {
         show?: boolean;
     };
 
+    export type VueUiDumbbellDatapoint = {
+        centerX: number;
+        end: number | null;
+        endVal: number;
+        endX: number;
+        id: string;
+        name: string;
+        start: number | null;
+        startX: number;
+        y: number;
+        evaluationColor: string;
+        evaluationGrad: string;
+        isPositive: boolean;
+        isNegative: boolean;
+        isNeutral: boolean;
+    }
+
     export type VueUiDumbbellConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiDumbbellEvent; // v3
+            datapointLeave?: VueUiDumbbellEvent; // v3
+            datapointClick?: VueUiDumbbellEvent; // v3
+        };
         theme?: Theme;
         useAnimation?: boolean;
         animationSpeed?: number;
@@ -6070,6 +6424,12 @@ declare module "vue-data-ui" {
                 plots?: {
                     startColor?: string;
                     endColor?: string;
+                    evaluationColors?: { // v3
+                        enable?: boolean; // v3
+                        positive?: string; // v3
+                        negative?: string; // v3
+                        neutral?: string; // v3
+                    };
                     radius?: number;
                     stroke?: string;
                     strokeWidth?: number;
@@ -6085,6 +6445,8 @@ declare module "vue-data-ui" {
                 grid?: {
                     strokeWidth?: number;
                     scaleSteps?: number;
+                    scaleMin?: number | null; // v3
+                    scaleMax?: number | null; // v3
                     horizontalGrid?: {
                         show?: boolean;
                         stroke?: string;
@@ -6098,6 +6460,21 @@ declare module "vue-data-ui" {
                         strokeDasharray?: number;
                     };
                 };
+                comparisonLines?: { // v3
+                    show?: boolean; // v3
+                    strokeWidth?: number; // v3
+                    strokeDasharray?: number; // v3
+                    showRect?: boolean; // v3
+                    rectColor?: string; // v3
+                    rectOpacity?: number; // v3
+                    showLabel?: boolean; // v3
+                    labelColor?: string; // v3
+                    labelFontSize?: number; // v3
+                }; // v3
+                highlighter?: { // v3
+                    color?: string; // v3
+                    opacity?: number; // v3
+                };
                 labels?: {
                     prefix?: string;
                     suffix?: string;
@@ -6110,21 +6487,37 @@ declare module "vue-data-ui" {
                         rounding?: number;
                         show?: boolean;
                         showProgression?: boolean;
+                        formatter?: Formatter; // v3
+                    };
+                    axis?: { // v3
+                        yLabel?: string; // v3
+                        yLabelOffsetX?: number; // v3
+                        xLabel?: string; // v3
+                        xLabelOffsetY?: number; // v3
+                        fontSize?: number; // v3
+                        color?: string; // v3
                     };
                     xAxisLabels?: VueUiDumbbellConfigLabel & {
                         bold?: boolean;
+                        rotation?: number; // v3
+                        autoRotate?: boolean; // v3
                     };
                     startLabels?: VueUiDumbbellConfigLabel & {
                         useStartColor?: boolean;
+                        useEvaluationColor?: boolean; // v3
                     };
                     endLabels?: VueUiDumbbellConfigLabel & {
                         useEndColor?: boolean;
+                        useEvaluationColor?: boolean;
                     };
                 };
                 legend?: ChartBaseLegend & {
+                    backgroundColor?: string;
                     labelStart?: string;
                     labelEnd?: string;
-                    backgroundColor?: string;
+                    labelPositive?: string; // v3
+                    labelNegative?: string; // v3
+                    labelNeutral?: string; // v3
                 };
                 title?: ChartTitle;
             };
@@ -6148,16 +6541,16 @@ declare module "vue-data-ui" {
 
     export type VueUiDumbbellDataset = {
         name: string;
-        start: number;
-        end: number;
+        start: number | null;
+        end: number | null;
     };
 
     export type VueUiDumbbellExpose = {
         getData(): Promise<Array<{
-            end: number
+            end: number | null
             id: string
             name: string
-            start: number
+            start: number | null
         }>>
         getImage(options?: { scale?: number }): GetImagePromise
         generatePdf(): void
@@ -6194,7 +6587,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiWordCloudConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiWordCloudEvent; // v3
+            datapointLeave?: VueUiWordCloudEvent; // v3
+            datapointClick?: VueUiWordCloudEvent; // v3
+        }
         theme?: string;
         customPalette?: string[];
         userOptions?: ChartUserOptions;
@@ -6485,6 +6885,7 @@ declare module "vue-data-ui" {
         inflow?: number;
         outflow?: number;
         percentOfTotal: number;
+        name?: string;
     }
 
     export type VueUiFlowFormattedDataset = {
@@ -6510,6 +6911,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;
@@ -6519,6 +6928,8 @@ declare module "vue-data-ui" {
             fontFamily?: string;
             chart?: {
                 backgroundColor?: string;
+                width?: number; // v3
+                height?: number; // v3
                 color?: string;
                 legend?: ChartBaseLegend & {
                     backgroundColor?: string;
@@ -6550,7 +6961,7 @@ declare module "vue-data-ui" {
                 title?: ChartTitle;
                 nodes?: {
                     gap?: number;
-                    minHeight?: number;
+                    // minHeight?: number; // v3 deprecated
                     width?: number;
                     labels?: {
                         fontSize?: number;
@@ -6567,7 +6978,7 @@ declare module "vue-data-ui" {
                     strokeWidth?: number;
                 };
                 links?: {
-                    width?: number;
+                    // width?: number; // v3 deprecated
                     opacity?: number;
                     stroke?: string;
                     strokeWidth?: number;
@@ -6650,7 +7061,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;
@@ -6689,6 +7107,8 @@ declare module "vue-data-ui" {
                         axisNames?: string[];
                         axisNamesColor?: string;
                         axisNamesFontSize?: number;
+                        axisNamesRotation?: number; // v3
+                        axisNamesAutoRotate?: boolean; // v3
                         axisNamesBold?: boolean;
                         roundings?: number[];
                         prefixes?: string[];
@@ -6743,6 +7163,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;
@@ -6961,6 +7403,8 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiGizmoConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         type?: "battery" | "gauge";
         size?: number;
         stroke?: string;
@@ -7010,6 +7454,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;
@@ -7118,6 +7567,7 @@ declare module "vue-data-ui" {
                             datetimeFormatter?: AxisDateFormatter;
                             offsetY?: number;
                             rotation?: number;
+                            autoRotate?: boolean;
                             fontSize?: number;
                             color?: string;
                             bold?: boolean;
@@ -7202,6 +7652,9 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiBulletConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // v3
         theme?: Theme;
         userOptions?: ChartUserOptions;
         style?: {
@@ -7236,6 +7689,7 @@ declare module "vue-data-ui" {
                     };
                 };
                 target?: {
+                    show?: boolean;
                     onTop?: boolean;
                     color?: string;
                     rounded?: boolean;
@@ -7414,7 +7868,14 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiHistoryPlotConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
         responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiHistoryPlotEvent; // v3
+            datapointLeave?: VueUiHistoryPlotEvent; // v3
+            datapointClick?: VueUiHistoryPlotEvent; // v3
+        }
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -7477,6 +7938,7 @@ declare module "vue-data-ui" {
                             rounding?: number;
                             offsetY?: number;
                             rotation?: number;
+                            autoRotate?: boolean; // v3
                             formatter?: Formatter;
                             prefix?: string;
                             suffix?: string;
@@ -7578,6 +8040,11 @@ declare module "vue-data-ui" {
         y: number;
     };
 
+    export type VueUiHistoryPlotDatapointEvent = VueUiHistoryPlotDatapoint & {
+        plotIndex: number;
+        seriesIndex: number;
+    }
+
     export type VueUiHistoryPlotDatpointSeries = VueUiHistoryPlotDatasetItem & {
         seriesIndex: number;
     };
@@ -7838,10 +8305,31 @@ declare module "vue-data-ui" {
         datapoints: VueUiRidgelineDatapoint[]
     }
 
+    export type VueUiRidgelineDatapointEventUnit = {
+        color: string;
+        name: string;
+        values: number[];
+        id: string;
+    };
+
+    export type VueUiRidgelineDatapointEventEntry = {
+        dp: VueUiRidgelineDatapointEventUnit;
+        selected: number;
+    };      
+
+    export type VueUiRidgelineDatapointEvent = VueUiRidgelineDatapointEventEntry[][];
+
     export type VueUiRidgelineConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean;
+        events?: { // v3
+            datapointEnter?: VueUiRidgelineEvent; // v3
+            datapointLeave?: VueUiRidgelineEvent; // v3
+            datapointClick?: VueUiRidgelineEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
-        responsive?: boolean;
         userOptions?: ChartUserOptions;
         useCssAnimation?: boolean;
         table?: {
@@ -7926,6 +8414,7 @@ declare module "vue-data-ui" {
                         prefix?: string;
                         suffix?: string;
                         rotation?: number;
+                        autoRotate?: boolean; // v3
                         values?: Array<number | string>;
                         datetimeFormatter?: AxisDateFormatter;
                         color?: string;
@@ -8002,13 +8491,53 @@ declare module "vue-data-ui" {
         colors?: string[];
     }
 
+    export type VueUiChordDatapointArc = {
+        color: string;
+        endAngle: number;
+        id: string;
+        index: number;
+        name: string;
+        pattern: string;
+        proportion: number;
+        startAngle: number;
+    }
+
+    export type VueUiChordNode = {
+        endAngle: number;
+        groupColor: string;
+        groupId: string;
+        groupName: string;
+        index: number;
+        midAngle: number;
+        midBaseX: number;
+        midBaseY: number;
+        pattern: string;
+        startAngle: number;
+        subIndex: number;
+        value: number;
+    }
+
+    export type VueUiChordDatapointRibbon = {
+        color: string;
+        id: string;
+        source: VueUiChordNode;
+        target: VueUiChordNode;
+    }
+
     export type VueUiChordConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiChordEvent; // v3
+            datapointLeave?: VueUiChordEvent; // v3
+            datapointClick?: VueUiChordEvent; // v3
+        };
         theme?: Theme;
         customPalette?: string[];
         enableRotation?: boolean;
         initialRotation?: nulber;
         useCssAnimation?: boolean;
-        responsive?: boolean;
         userOptions?: ChartUserOptions;
         table?: {
             show?: boolean;
@@ -8519,6 +9048,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;