vue-data-ui 3.0.0-next.0 → 3.0.0-next.10

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

@@ -39,6 +39,7 @@ declare module "vue-data-ui" {
         | VueUiThermometerDataset
         | VueUiTiremarksDataset
         | VueUiVerticalBarDatasetItem[]
+        | VueUiHorizontalBarDatasetItem[]
         | VueUiWaffleDatasetItem[]
         | VueUiWheelDataset
         | VueUiXyDatasetItem[]
@@ -95,6 +96,7 @@ declare module "vue-data-ui" {
         | VueUiThermometerConfig
         | VueUiTiremarksConfig
         | VueUiVerticalBarConfig
+        | VueUiHorizontalBarConfig
         | VueUiWaffleConfig
         | VueUiWheelConfig
         | VueUiXyConfig
@@ -221,9 +223,9 @@ declare module "vue-data-ui" {
             annotator?: null | (() => void);
             csv?: null | ((csvStr?: string) => void);
             fullscreen?: null | (() => void);
-            img?: null | ((base64?: string) => void);
+            img?: null | (({ domElement, imageUri, base64 }: { domElement?: string; imageUri?: string; base64?: string} = {}) => void);
             labels?: null | (() => void);
-            pdf?: null | ((chart?: HTMLElement) => void);
+            pdf?: null | (({ domElement, imageUri, base64 }: { domElement?: string; imageUri?: string; base64?: string} = {}) => void);
             sort?: null | (() => void);
             stack?: null | (() => void);
             table?: null | (() => void);
@@ -347,6 +349,15 @@ declare module "vue-data-ui" {
         plots?: TPlot;
     };
 
+    export type GetImagePromise = Promise<{
+        imageUri: string;
+        base64: string;
+        title: string;
+        width: number;
+        height: number;
+        aspectRatio: number;
+    }>
+
     export type VueUiTreemapDatasetItem = {
         name: string;
         value: number;
@@ -400,6 +411,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {
@@ -455,10 +468,25 @@ declare module "vue-data-ui" {
         value?: string;
     };
 
-    export const VueUiTreemap: DefineComponent<{
-        config?: VueUiTreemapConfig;
-        dataset: VueUiTreemapDatasetItem[];
-    }>;
+    export type VueUiTreemapExpose = {
+        getData(): Promise<Array<VueUiTreemapDatapoint>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiTreemap: DefineComponent<
+        {
+            config?: VueUiTreemapConfig;
+            dataset: VueUiTreemapDatasetItem[];
+        },
+        VueUiTreemapExpose
+    >;
 
     export type VueUiKpiConfig = {
         animationFrames?: number;
@@ -536,6 +564,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {
@@ -589,10 +619,29 @@ declare module "vue-data-ui" {
         value: number;
     };
 
-    export const VueUiGalaxy: DefineComponent<{
-        config?: VueUiGalaxyConfig;
-        dataset: VueUiGalaxyDatasetItem[];
-    }>;
+    export type VueUiGalaxyExpose = {
+        getData(): Promise<Array<{
+            name: string,
+            color: string,
+            value: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiGalaxy: DefineComponent<
+        {
+            config?: VueUiGalaxyConfig;
+            dataset: VueUiGalaxyDatasetItem[];
+        },
+        VueUiGalaxyExpose
+    >;
 
     export type VueUiSparkgaugeDataset = {
         value: number;
@@ -844,10 +893,26 @@ declare module "vue-data-ui" {
         uid: string;
     };
 
-    export const VueUiMolecule: DefineComponent<{
-        dataset: VueUiMoleculeDatasetNode[];
-        config?: VueUiMoleculeConfig;
-    }>;
+    export type VueUiMoleculeExpose = {
+        getData(): Promise<Array<VueUiMoleculeDatapoint>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleLabels(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiMolecule: DefineComponent<
+        {
+            dataset: VueUiMoleculeDatasetNode[];
+            config?: VueUiMoleculeConfig;
+        },
+        VueUiMoleculeExpose
+    >;
 
     export type VueUiDigitsConfig = {
         backgroundColor?: string;
@@ -952,10 +1017,23 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUi3dBar: DefineComponent<{
-        config?: VueUi3dBarConfig;
-        dataset: VueUi3dBarDataset;
-    }>;
+    export type VueUi3dBarExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUi3dBar: DefineComponent<
+        {
+            config?: VueUi3dBarConfig;
+            dataset: VueUi3dBarDataset;
+        },
+        VueUi3dBarExpose
+    >;
 
     export type VueUiMoodRadarDataset = {
         "1": number;
@@ -1037,10 +1115,30 @@ declare module "vue-data-ui" {
         userOptions?: ChartUserOptions;
     };
 
-    export const VueUiMoodRadar: DefineComponent<{
-        dataset: VueUiMoodRadarDataset;
-        config?: VueUiMoodRadarConfig;
-    }>;
+    export type VueUiMoodRadarExpose = {
+        getData(): Promise<Array<{
+            color: string
+            index: number
+            key: string
+            proportion: number
+            value: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiMoodRadar: DefineComponent<
+        {
+            dataset: VueUiMoodRadarDataset;
+            config?: VueUiMoodRadarConfig;
+        },
+        VueUiMoodRadarExpose
+    >;
 
     export type VueUiIconName =
         | "accordion"
@@ -1298,6 +1396,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingPercentage?: number;
                     roundingValue?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
             };
         };
@@ -1323,10 +1423,30 @@ declare module "vue-data-ui" {
         color?: string;
     };
 
-    export const VueUiDonutEvolution: DefineComponent<{
-        config?: VueUiDonutEvolutionConfig;
-        dataset: VueUiDonutEvolutionDatasetItem[];
-    }>;
+    export type VueUiDonutEvolutionExpose = {
+        getData(): Promise<Array<{
+            color: string
+            length: number
+            name: string
+            uid: string
+            values: Array<number | null>
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTable(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiDonutEvolution: DefineComponent<
+        {
+            config?: VueUiDonutEvolutionConfig;
+            dataset: VueUiDonutEvolutionDatasetItem[];
+        },
+        VueUiDonutEvolutionExpose
+    >;
 
     export type VueUiTiremarksConfig = {
         theme?: Theme;
@@ -1376,10 +1496,21 @@ declare module "vue-data-ui" {
         percentage: number;
     };
 
-    export const VueUiTiremarks: DefineComponent<{
-        config?: VueUiTiremarksConfig;
-        dataset: VueUiTiremarksDataset;
-    }>;
+    export type VueUiTiremarksExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiTiremarks: DefineComponent<
+        {
+            config?: VueUiTiremarksConfig;
+            dataset: VueUiTiremarksDataset;
+        },
+        VueUiTiremarksExpose
+    >;
 
     export type VueUiWheelConfig = {
         responsive?: boolean;
@@ -1433,10 +1564,21 @@ declare module "vue-data-ui" {
         percentage: number;
     };
 
-    export const VueUiWheel: DefineComponent<{
-        dataset: VueUiWheelDataset;
-        config?: VueUiWheelConfig;
-    }>;
+    export type VueUiWheelExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiWheel: DefineComponent<
+        {
+            dataset: VueUiWheelDataset;
+            config?: VueUiWheelConfig;
+        },
+        VueUiWheelExpose
+    >;
 
     export type VueUiRingsConfig = {
         responsive?: boolean;
@@ -1472,6 +1614,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {
@@ -1524,10 +1668,31 @@ declare module "vue-data-ui" {
         values: number[];
     };
 
-    export const VueUiRings: DefineComponent<{
-        config?: VueUiRingsConfig;
-        dataset: VueUiRingsDatasetItem[];
-    }>;
+    export type VueUiRingsExpose = {
+        getData(): Promise<Array<{
+            name: string
+            color: string
+            value: number
+            absoluteValues: number[]
+            percentage: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiRings: DefineComponent<
+        {
+            config?: VueUiRingsConfig;
+            dataset: VueUiRingsDatasetItem[];
+        },
+        VueUiRingsExpose
+    >;
 
     export type VueUiSparkHistogramConfig = {
         theme?: Theme;
@@ -1774,10 +1939,21 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiThermometer: DefineComponent<{
-        config?: VueUiThermometerConfig;
-        dataset: VueUiThermometerDataset;
-    }>;
+    export type VueUiThermometerExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiThermometer: DefineComponent<
+        {
+            config?: VueUiThermometerConfig;
+            dataset: VueUiThermometerDataset;
+        },
+        VueUiThermometerExpose
+    >;
 
     export type VueUiRelationCircleConfig = {
         responsive?: boolean;
@@ -1834,10 +2010,21 @@ declare module "vue-data-ui" {
         color?: string;
     };
 
-    export const VueUiRelationCircle: DefineComponent<{
-        config?: VueUiRelationCircleConfig;
-        dataset: VueUiRelationCircleDatasetItem[];
-    }>;
+    export type VueUiRelationCircleExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateImage(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiRelationCircle: DefineComponent<
+        {
+            config?: VueUiRelationCircleConfig;
+            dataset: VueUiRelationCircleDatasetItem[];
+        },
+        VueUiRelationCircleExpose
+    >;
 
     export type VueUiAnnotatorConfig = {
         style?: {
@@ -2165,10 +2352,24 @@ declare module "vue-data-ui" {
         segment: string;
     };
 
-    export const VueUiAgePyramid: DefineComponent<{
-        config?: VueUiAgePyramidConfig;
-        dataset: VueUiAgePyramidDataset;
-    }>;
+    export type VueUiAgePyramidExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiAgePyramid: DefineComponent<
+        {
+            config?: VueUiAgePyramidConfig;
+            dataset: VueUiAgePyramidDataset;
+        },
+        VueUiAgePyramidExpose
+    >;
 
     export type VueUiCandlestickConfig = {
         responsive?: boolean;
@@ -2294,10 +2495,24 @@ declare module "vue-data-ui" {
         volume: number;
     };
 
-    export const VueUiCandlestick: DefineComponent<{
-        config?: VueUiCandlestickConfig;
-        dataset: Array<Array<string | number>>;
-    }>;
+    export type VueUiCandlestickExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiCandlestick: DefineComponent<
+        {
+            config?: VueUiCandlestickConfig;
+            dataset: Array<Array<string | number>>;
+        },
+        VueUiCandlestickExpose
+    >;
 
     export type VueUiScatterDatasetValueItem = {
         name: string;
@@ -2506,10 +2721,25 @@ declare module "vue-data-ui" {
         values: Array<{ x: number; y: number; name: string }>;
     };
 
-    export const VueUiScatter: DefineComponent<{
-        config?: VueUiScatterConfig;
-        dataset: VueUiScatterDatasetItem[];
-    }>;
+    export type VueUiScatterExpose = {
+        getData(): Promise<Array<VueUiScatterSeries>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiScatter: DefineComponent<
+        {
+            config?: VueUiScatterConfig;
+            dataset: VueUiScatterDatasetItem[];
+        },
+        VueUiScatterExpose
+    >;
 
     export type VueUiHeatmapConfig = {
         theme?: Theme;
@@ -2639,10 +2869,37 @@ declare module "vue-data-ui" {
         values: number[];
     };
 
-    export const VueUiHeatmap: DefineComponent<{
-        config?: VueUiHeatmapConfig;
-        dataset: VueUiHeatmapDatasetItem[];
-    }>;
+    export type VueUiHeatmapExpose = {
+        getData(): Promise<Array<{
+            name: string
+            temperatures: Array<{
+                color: string
+                id: string
+                ratio: number
+                side: 'up' | 'down'
+                value: number
+                xAxisName: number | string
+                yAxisName: number | string
+            }>
+            values: Array<string | number>
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiHeatmap: DefineComponent<
+        {
+            config?: VueUiHeatmapConfig;
+            dataset: VueUiHeatmapDatasetItem[];
+        },
+        VueUiHeatmapExpose
+    >;
 
     export type VueUiXyHighlightArea = {
         show?: boolean;
@@ -2697,7 +2954,10 @@ declare module "vue-data-ui" {
     }
 
     export type VueUiXyConfig = {
+        debug?: boolean;
         responsive?: boolean;
+        autoSize?: boolean; // v3 opt-in
+        loading?: boolean; // v3
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -3011,18 +3271,46 @@ declare module "vue-data-ui" {
         value: number;
     };
 
-    export const VueUiXy: DefineComponent<{
-        config?: VueUiXyConfig;
-        dataset: VueUiXyDatasetItem[];
-    }>;
+    export type VueUiXyExpose = {
+        getData(): Promise<Array<{ values: Array<number | null>, color: string, name: string, type: string }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        toggleLabels(): void
+        toggleStack(): void
+        toggleTable(): void
+        toggleTooltip(): void
+    }
+
+    export const VueUiXy: DefineComponent<
+        {
+            config?: VueUiXyConfig;
+            dataset: VueUiXyDatasetItem[];
+        },
+        VueUiXyExpose
+    >;
+
+    export type VueUiDonutEvent = null | (({datapoint, seriesIndex }: { datapoint: VueUiDonutDatapoint; seriesIndex: number }) => void);
 
     export type VueUiDonutConfig = {
+        debug?: boolean;
         type?: "classic" | "polar";
+        loading?: boolean;
+        pie?: boolean;
+        autoSize?: boolean;
         responsive?: boolean;
         theme?: Theme;
         customPalette?: string[];
         useBlurOnHover?: boolean;
         useCssAnimation?: boolean;
+        events?: {
+            datapointEnter?: VueUiDonutEvent;
+            datapointLeave?: VueUiDonutEvent;
+            datapointClick?: VueUiDonutEvent;
+        };
         serieToggleAnimation?: {
             show?: boolean;
             durationMs?: number;
@@ -3061,6 +3349,7 @@ declare module "vue-data-ui" {
                             color?: string;
                             bold?: boolean;
                             fontSize?: number;
+                            minFontSize?: number;
                             rounding?: number;
                             formatter?: Formatter;
                         };
@@ -3068,6 +3357,7 @@ declare module "vue-data-ui" {
                             color?: string;
                             bold?: boolean;
                             fontSize?: number;
+                            minFontSize?: number;
                         };
                         hollow?: {
                             show?: boolean;
@@ -3115,6 +3405,9 @@ declare module "vue-data-ui" {
                         useShadow?: boolean;
                         shadowColor?: string;
                         emptyFill?: string;
+                        selectedColor?: string;
+                        borderColorAuto?: boolean;
+                        borderColor?: string;
                     };
                 };
                 comments?: ChartComments;
@@ -3122,6 +3415,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showPercentage?: boolean;
+                    showValue?: boolean;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {
@@ -3197,10 +3492,27 @@ declare module "vue-data-ui" {
         absoluteValues: number[];
     };
 
-    export const VueUiDonut: DefineComponent<{
-        config?: VueUiDonutConfig;
-        dataset: VueUiDonutDatasetItem[];
-    }>;
+    export type VueUiDonutExpose = {
+        getData(): Promise<Array<{ name: string, color: string, value: number | null }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        toggleLabels(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        autoSize():void
+    }
+
+    export const VueUiDonut: DefineComponent<
+        {
+            config?: VueUiDonutConfig;
+            dataset: VueUiDonutDatasetItem[];
+        },
+        VueUiDonutExpose
+    >;
 
     export type VueUiNestedDonutsDatasetItem = {
         name: string;
@@ -3208,6 +3520,9 @@ declare module "vue-data-ui" {
     };
 
     export type VueUiNestedDonutsConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        autoSize?: boolean; // v3
         responsive?: boolean;
         theme?: Theme;
         customPalette?: string[];
@@ -3253,6 +3568,7 @@ declare module "vue-data-ui" {
                             useSerieColor?: boolean;
                             showDonutName?: boolean;
                             boldDonutName?: boolean;
+                            curvedDonutName?: boolean;
                             donutNameAbbreviation?: boolean;
                             donutNameOffsetY?: number;
                             donutNameMaxAbbreviationSize?: number;
@@ -3266,12 +3582,17 @@ declare module "vue-data-ui" {
                         useShadow?: boolean;
                         shadowColor?: string;
                         emptyFill?: string;
+                        selectedColor?: string;
+                        borderColorAuto?: boolean;
+                        borderColor?: string;
                     };
                 };
                 legend?: ChartBaseLegend & {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {
@@ -3357,10 +3678,43 @@ declare module "vue-data-ui" {
         value: number;
     };
 
-    export const VueUiNestedDonuts: DefineComponent<{
-        config?: VueUiNestedDonutsConfig;
-        dataset: VueUiNestedDonutsDatasetItem[];
-    }>;
+    export type VueUiNestedDonutsExpose = {
+        getData(): Promise<Array<{
+            datasetIndex: number
+            id: string
+            name: string
+            series: Array<{
+                absoluteValues: number[]
+                arcOf: string
+                arcOfId: string
+                color: string
+                datasetIndex: number
+                id: string
+                name: string
+                seriesIndex: number
+                value: 0
+            }>
+            total: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        toggleLabels(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        autoSize():void
+    }
+
+    export const VueUiNestedDonuts: DefineComponent<
+        {
+            config?: VueUiNestedDonutsConfig;
+            dataset: VueUiNestedDonutsDatasetItem[];
+        },
+        VueUiNestedDonutsExpose
+    >;
 
     export type VueUiWaffleConfig = {
         responsive?: boolean;
@@ -3429,6 +3783,8 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
                 };
             };
         };
@@ -3477,10 +3833,30 @@ declare module "vue-data-ui" {
         values: number[];
     };
 
-    export const VueUiWaffle: DefineComponent<{
-        config?: VueUiWaffleConfig;
-        dataset: VueUiWaffleDatasetItem[];
-    }>;
+    export type VueUiWaffleExpose = {
+        getData(): Promise<Array<{
+            name: string
+            color: string,
+            value: number
+            proportion: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        toggleTable(): void
+        toggleTooltip(): void
+    }
+
+    export const VueUiWaffle: DefineComponent<
+        {
+            config?: VueUiWaffleConfig;
+            dataset: VueUiWaffleDatasetItem[];
+        },
+        VueUiWaffleExpose
+    >;
 
     export type VueUiRadarConfig = {
         responsive?: boolean;
@@ -3617,10 +3993,29 @@ declare module "vue-data-ui" {
         series: VueUiRadarDatasetSerieItem[];
     };
 
-    export const VueUiRadar: DefineComponent<{
-        config?: VueUiRadarConfig;
-        dataset: VueUiRadarDataset;
-    }>;
+    export type VueUiRadarExpose = {
+        getData(): Promise<{
+            name: string
+            color: string
+            proportion: number
+        }>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiRadar: DefineComponent<
+        {
+            config?: VueUiRadarConfig;
+            dataset: VueUiRadarDataset;
+        },
+        VueUiRadarExpose
+    >;
 
     export type VueUiQuadrantDatasetSerieItem = {
         name: string;
@@ -3784,10 +4179,37 @@ declare module "vue-data-ui" {
         shape: Shape;
     };
 
-    export const VueUiQuadrant: DefineComponent<{
-        dataset: VueUiQuadrantDatasetItem[];
-        config?: VueUiQuadrantConfig;
-    }>;
+    export type VueUiQuadrantExpose = {
+        getData(): Promise<Array<{
+            color: string
+            name: string
+            shape: string
+            series: Array<{
+                name: string
+                x: number
+                y: number
+                quadrantSide: string
+                sideName: string
+            }>
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleLabels(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiQuadrant: DefineComponent<
+        {
+            dataset: VueUiQuadrantDatasetItem[];
+            config?: VueUiQuadrantConfig;
+        },
+        VueUiQuadrantExpose
+    >;
 
     export type VueUiGaugeDatasetSerieItem = {
         from: number;
@@ -3893,10 +4315,21 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiGauge: DefineComponent<{
-        config?: VueUiGaugeConfig;
-        dataset: VueUiGaugeDataset;
-    }>;
+    export type VueUiGaugeExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiGauge: DefineComponent<
+        {
+            config?: VueUiGaugeConfig;
+            dataset: VueUiGaugeDataset;
+        },
+        VueUiGaugeExpose
+    >;
 
     export type VueUiChestnutDatasetBranchBreakdown = {
         name: string;
@@ -4089,10 +4522,32 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiChestnut: DefineComponent<{
-        config?: VueUiChestnutConfig;
-        dataset: VueUiChestnutDatasetRoot[];
-    }>;
+    export type VueUiChestnutExpose = {
+        getData(): Promise<Array<{
+            branches: Array<VueUiChesnutDatasetBranch & Record<string, any>>
+            color: string
+            id: string
+            name: string
+            rootIndex: number
+            total: number
+            type: string
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiChestnut: DefineComponent<
+        {
+            config?: VueUiChestnutConfig;
+            dataset: VueUiChestnutDatasetRoot[];
+        },
+        VueUiChestnutExpose
+    >;
 
     export type VueUiOnionDatasetItem = {
         name: string;
@@ -4220,28 +4675,67 @@ declare module "vue-data-ui" {
         value: number;
     };
 
-    export const VueUiOnion: DefineComponent<{
-        config?: VueUiOnionConfig;
-        dataset: VueUiOnionDatasetItem[];
-    }>;
+    export type VueUiOnionExpose = {
+        getData(): Promise<Array<{
+            absoluteIndex: number
+            color: string
+            id: string
+            percentage: number
+            radius: number
+            targetPercentage: number
+            value: number
+        } & Record<string, any>>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleTable(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiOnion: DefineComponent<
+        {
+            config?: VueUiOnionConfig;
+            dataset: VueUiOnionDatasetItem[];
+        },
+        VueUiOnionExpose
+    >;
 
     export type VueUiVerticalBarDatasetChild = {
         name: string;
         value: number;
     };
 
+    export type VueUiHorizontalBarDatasetChild = VueUiVerticalBarDatasetChild; // v3 renaming
+
     export type VueUiVerticalBarDatasetItem = {
         name: string;
         value: number;
         color?: string;
-        children?: VueUiVerticalBarDatasetChild[];
+        children?: VueUiVerticalBarDatasetChild[] | VueUiHorizontalBarDatasetChild[];
     };
 
+    export type VueUiHorizontalBarDatasetItem = VueUiVerticalBarDatasetItem // v3 renaming
+
+    export type VueUiVerticalBarEvent = null | (({ datapoint, seriesIndex }: { datapoint: VueUiVerticalBarDatapoint | VueUiHorizontalBarDatapoint; seriesIndex: number }) => void);
+
+    export type VueUiHorizontalBarEvent = VueUiVerticalBarEvent; // v3 renaming
+
     export type VueUiVerticalBarConfig = {
+        debug?: boolean;
+        loading?: boolean;
+        autoSize?: boolean;
         responsive?: boolean;
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
+        events?: {
+            datapointEnter?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
+            datapointLeave?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
+            datapointClick?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
+        };
         style?: {
             fontFamily?: string;
             chart?: {
@@ -4301,6 +4795,7 @@ declare module "vue-data-ui" {
                         show?: boolean;
                         color?: string;
                         strokeWidth?: number;
+                        fullWidth?: boolean;
                     };
                 };
                 title?: ChartTitle;
@@ -4323,9 +4818,9 @@ declare module "vue-data-ui" {
                     | null
                     | ((
                         params: VueUiTooltipParams<
-                            VueUiVerticalBarDatapoint,
-                            VueUiVerticalBarSerie[],
-                            VueUiVerticalBarConfig
+                            VueUiVerticalBarDatapoint | VueUiHorizontalBarDatapoint,
+                            VueUiVerticalBarSerie[] | VueUiHorizontalBarSerie[],
+                            VueUiVerticalBarConfig | VueUiHorizontalBarConfig
                         >
                     ) => string);
                 };
@@ -4352,6 +4847,8 @@ declare module "vue-data-ui" {
         };
     };
 
+    export type VueUiHorizontalBarConfig = VueUiVerticalBarConfig; // v3 renaming;
+
     export type VueUiVerticalBarDatapoint = {
         children?: Array<any>;
         childIndex?: number;
@@ -4368,8 +4865,10 @@ declare module "vue-data-ui" {
         value: number;
     };
 
+    export type VueUiHorizontalBarDatapoint = VueUiVerticalBarDatapoint; // v3 renaming
+
     export type VueUiVerticalBarSerie = {
-        children: VueUiVerticalBarDatapoint[];
+        children: VueUiVerticalBarDatapoint[] | VueUiHorizontalBarDatapoint[];
         color: string;
         hasChildren: boolean;
         is: string;
@@ -4380,10 +4879,42 @@ declare module "vue-data-ui" {
         value: number;
     };
 
-    export const VueUiVerticalBar: DefineComponent<{
-        config?: VueUiVerticalBarConfig;
-        dataset: VueUiVerticalBarDatasetItem[];
-    }>;
+    export type VueUiHorizontalBarSerie = VueUiVerticalBarSerie; // v3 renaming
+
+    export type VueUiVerticalBarExpose = {
+        getData(): Promise<Array<VueUiVerticalBarDatasetItem & Record<string, any>>> | Promise<Array<VueUiHorizontalBarDatasetItem & Record<string, any>>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        recalculateHeight(): void,
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleSort(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export type VueUiHorizontalBarExpose = VueUiVerticalBarExpose; // v3 renaming
+
+    export const VueUiVerticalBar: DefineComponent<
+        {
+            config?: VueUiVerticalBarConfig;
+            dataset: VueUiVerticalBarDatasetItem[];
+        },
+        VueUiVerticalBarExpose
+    >;
+
+    /**
+     * Renamed from the v2 VueUiVerticalBar
+     */
+    export const VueUiHorizontalBar: DefineComponent<
+        {
+            config?: VueUiHorizontalBarConfig;
+            dataset: VueUiHorizontalBarDatasetItem[];
+        },
+        VueUiHorizontalBarExpose
+    >;
 
     export type VueUiSparklineDatasetItem = {
         period: string;
@@ -5240,10 +5771,22 @@ declare module "vue-data-ui" {
         | VueUiQuickChartDatasetObjectItem
         | VueUiQuickChartDatasetObjectItem[];
 
-    export const VueUiQuickChart: DefineComponent<{
-        config?: VueUiQuickChartConfig;
-        dataset: VueUiQuickChartDataset;
-    }>;
+    export type VueUiQuickChartExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        toggleTooltip(): void
+    }
+
+    export const VueUiQuickChart: DefineComponent<
+        {
+            config?: VueUiQuickChartConfig;
+            dataset: VueUiQuickChartDataset;
+        },
+        VueUiQuickChartExpose
+    >;
 
     export type VueUiCursorConfig = {
         bubbleEffect?: boolean;
@@ -5469,11 +6012,39 @@ declare module "vue-data-ui" {
         name: string;
         plots: VueUiStripPlotDatasetItem[];
     };
+    
+    export type VueUiStripPlotExpose = {
+        getData(): Promise<Array<{
+            color: string
+            id: string
+            name: string
+            plots: Array<{
+                color: string
+                id: string
+                name: string
+                parentId: string
+                value: number
+                x: number
+            }>
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleLabels(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
 
-    export const VueUiStripPlot: DefineComponent<{
-        config?: VueUiStripPlotConfig;
-        dataset: VueUiStripPlotDataset[];
-    }>;
+    export const VueUiStripPlot: DefineComponent<
+        {
+            config?: VueUiStripPlotConfig;
+            dataset: VueUiStripPlotDataset[];
+        },
+        VueUiStripPlotExpose
+    >;
 
     export type VueUiDumbbellConfigLabel = {
         color?: string;
@@ -5582,10 +6153,29 @@ declare module "vue-data-ui" {
         end: number;
     };
 
-    export const VueUiDumbbell: DefineComponent<{
-        config?: VueUiDumbbellConfig;
-        dataset: VueUiDumbbellDataset[];
-    }>;
+    export type VueUiDumbbellExpose = {
+        getData(): Promise<Array<{
+            end: number
+            id: string
+            name: string
+            start: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiDumbbell: DefineComponent<
+        {
+            config?: VueUiDumbbellConfig;
+            dataset: VueUiDumbbellDataset[];
+        },
+        VueUiDumbbellExpose
+    >;
 
     export type VueUiWordCloudDatasetItem = {
         name: string;
@@ -5660,10 +6250,40 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiWordCloud: DefineComponent<{
-        config?: VueUiWordCloudConfig;
-        dataset: VueUiWordCloudDatasetItem[] | string;
-    }>;
+    export type VueUiWordCloudExpose = {
+        getData(): Promise<Array<{
+            angle: number
+            color: string
+            fontSize: number
+            height: number
+            id: string
+            maxX: number
+            maxY: number
+            minX: number
+            minY: number
+            name: string
+            value: number
+            width: number
+            x: number
+            y: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiWordCloud: DefineComponent<
+        {
+            config?: VueUiWordCloudConfig;
+            dataset: VueUiWordCloudDatasetItem[] | string;
+        },
+        VueUiWordCloudExpose
+    >;
 
     export type VueUiXyCanvasDatasetItem = {
         name: string;
@@ -5835,10 +6455,27 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiXyCanvas: DefineComponent<{
-        dataset: VueUiXyCanvasDatasetItem[];
-        config?: VueUiXyCanvasConfig;
-    }>;
+    export type VueUiXyCanvasExpose = {
+        getData(): Promise<Array<VueUiXyCanvasDatasetItem & Record<string, any>>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleLabels(): void
+        toggleStack(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiXyCanvas: DefineComponent<
+        {
+            dataset: VueUiXyCanvasDatasetItem[];
+            config?: VueUiXyCanvasConfig;
+        },
+        VueUiXyCanvasExpose
+    >;
 
     export type VueUiFlowDatasetItem = [string, string, number];
 
@@ -5959,10 +6596,47 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiFlow: DefineComponent<{
-        dataset: VueUiFlowDatasetItem[];
-        config?: VueUiFlowConfig;
-    }>;
+    export type VueUiFlowExpose = {
+        getData(): Promise<{
+            nodes: Array<{
+                name: string,
+                absoluteY: number
+                color: string
+                height: number
+                i: number
+                value: number
+                x: number,
+                y: number
+            }>
+            links: Array<{
+                id: string
+                path: string
+                source: string
+                sourceColor: string
+                target: string
+                targetColor: string
+                value: number
+            }>
+        }>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generatePdf(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleLabels(): void
+        toggleTooltip(): void
+        unselectNode(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiFlow: DefineComponent<
+        {
+            dataset: VueUiFlowDatasetItem[];
+            config?: VueUiFlowConfig;
+        },
+        VueUiFlowExpose
+    >;
 
     export type VueUiParallelCoordinatePlotDatasetSerieItem = {
         name: string;
@@ -6097,10 +6771,27 @@ declare module "vue-data-ui" {
         }>;
     };
 
-    export const VueUiParallelCoordinatePlot: DefineComponent<{
-        config?: VueUiParallelCoordinatePlotConfig;
-        dataset: VueUiParallelCoordinatePlotDatasetItem[];
-    }>;
+    export type VueUiParallelCoordinatePlotExpose = {
+        getData(): Promise<Array<VueUiParallelCoordinatePlotDatasetItem & Record<string, any>>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generatePdf(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleLabels(): void
+        toggleSort(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiParallelCoordinatePlot: DefineComponent<
+        {
+            config?: VueUiParallelCoordinatePlotConfig;
+            dataset: VueUiParallelCoordinatePlotDatasetItem[];
+        },
+        VueUiParallelCoordinatePlotExpose
+    >;
 
     export type VueUiTimerConfig = {
         type?: "stopwatch";
@@ -6387,7 +7078,9 @@ declare module "vue-data-ui" {
                     dataLabels?: {
                         show?: boolean;
                         hideEmptyValues?: boolean;
+                        hideUnderValue?: number | null;
                         hideEmptyPercentages?: boolean;
+                        hideUnderPercentage?: number | null;
                         adaptColorToBackground?: boolean;
                         color?: string;
                         fontSize?: number;
@@ -6407,6 +7100,9 @@ declare module "vue-data-ui" {
                     x?: {
                         showAxis?: boolean;
                         showHorizontalLines?: boolean;
+                        linesColor?: string;
+                        linesThickness?: number;
+                        linesStrokeDasharray?: number;
                         axisColor?: string;
                         axisThickness?: number;
                         axisName?: {
@@ -6431,6 +7127,9 @@ declare module "vue-data-ui" {
                     y?: {
                         showAxis?: boolean;
                         showVerticalLines?: boolean;
+                        linesColor?: string;
+                        linesThickness?: number;
+                        linesStrokeDasharray?: number;
                         axisColor?: string;
                         axisThickness?: number;
                         axisName?: {
@@ -6455,10 +7154,40 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiStackbar: DefineComponent<{
-        config?: VueUiStackbarConfig;
-        dataset: VueUiStackbarDatasetItem[];
-    }>;
+    export type VueUiStackbarExpose = {
+        getData(): Promise<Array<{
+            absoluteIndex: number
+            color: string
+            height: number[],
+            horizontal_width: number[],
+            horizontal_x: number[],
+            horizontal_y: number[],
+            id: string
+            name: string
+            proportions: number[],
+            series: number[],
+            signedSeries: number[],
+            x: number[],
+            y: number[],
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTable(): void
+        toggleLabels(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiStackbar: DefineComponent<
+        {
+            config?: VueUiStackbarConfig;
+            dataset: VueUiStackbarDatasetItem[];
+        },
+        VueUiStackbarExpose
+    >;
 
     export type VueUiBulletSegment = {
         name: string;
@@ -6537,10 +7266,36 @@ declare module "vue-data-ui" {
         }
     };
 
-    export const VueUiBullet: DefineComponent<{
-        config?: VueUiBulletConfig;
-        dataset: VueUiBulletDataset;
-    }>;
+    export type VueUiBulletExpose = {
+        getData(): Promise<{
+            chunks: Array<Record<string, any>>
+            scale: Record<string, any>
+            target: {
+                x: number
+            }
+            ticks: Array<{
+                value: number
+                x: number
+                y: number
+            }>
+            value: {
+                width: number
+            }
+        }>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiBullet: DefineComponent<
+        {
+            config?: VueUiBulletConfig;
+            dataset: VueUiBulletDataset;
+        },
+        VueUiBulletExpose
+    >;
 
     export type VueUiFunnelDatasetItem = {
         name: string;
@@ -6630,10 +7385,28 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiFunnel: DefineComponent<{
-        dataset: VueUiFunnelDatasetItem[];
-        config?: VueUiFunnelConfig;
-    }>;
+    export type VueUiFunnelExpose = {
+        getData(): Promise<Array<{ 
+            color: string
+            name: string
+            value: string
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTable(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiFunnel: DefineComponent<
+        {
+            dataset: VueUiFunnelDatasetItem[];
+            config?: VueUiFunnelConfig;
+        },
+        VueUiFunnelExpose
+    >;
 
     export type VueUiHistoryPlotDatasetItem = {
         name: string;
@@ -6810,10 +7583,45 @@ declare module "vue-data-ui" {
         seriesIndex: number;
     };
 
-    export const VueUiHistoryPlot: DefineComponent<{
-        config?: VueUiHistoryPlotConfig;
-        dataset: VueUiHistoryPlotDatasetItem[];
-    }>;
+    export type VueUiHistoryPlotExpose = {
+        getData(): Promise<Array<{
+            color: string
+            name: string
+            path: string
+            plots: Array<{
+                color: string
+                id: string
+                label: string
+                seriesName: string
+                valueX: number
+                valueY: number
+                x: number
+                y: number
+            }>
+            seriesIndex: number
+            values: Array<{
+                x: number
+                y: number
+                label: string
+            }>
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTooltip(): void
+        toggleTable(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiHistoryPlot: DefineComponent<
+        {
+            config?: VueUiHistoryPlotConfig;
+            dataset: VueUiHistoryPlotDatasetItem[];
+        },
+        VueUiHistoryPlotExpose
+    >;
 
     export type VueUiCirclePackDatasetItem = {
         name: string;
@@ -6898,10 +7706,32 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiCirclePack: DefineComponent<{
-        config?: VueUiCirclePackConfig;
-        dataset: VueUiCirclePackDatasetItem[];
-    }>;
+    export type VueUiCirclePackExpose = {
+        getData(): Promise<Array<{
+            color: string
+            id: string
+            name: string
+            r: number
+            value: number
+            x: number
+            y: number
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiCirclePack: DefineComponent<
+        {
+            config?: VueUiCirclePackConfig;
+            dataset: VueUiCirclePackDatasetItem[];
+        },
+        VueUiCirclePackExpose
+    >;
 
     export type VueUiWorldConfig = {
         userOptions?: ChartUserOptions;
@@ -6978,10 +7808,25 @@ declare module "vue-data-ui" {
         }
     }
 
-    export const VueUiWorld: DefineComponent<{
-        config?: VueUiWorldConfig;
-        dataset?: VueUiWorldDataset
-    }>
+    export type VueUiWorldExpose = {
+        getData(): Promise<Array<Record<string, any>>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleTooltip(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiWorld: DefineComponent<
+        {
+            config?: VueUiWorldConfig;
+            dataset?: VueUiWorldDataset
+        },
+        VueUiWorldExpose
+    >
 
     export type VueUiRidgelineDatapoint = {
         name: string;
@@ -7105,10 +7950,52 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiRidgeline: DefineComponent<{
-        config?: VueUiRidgelineConfig;
-        dataset: VueUiRidgelineDatasetItem[]
-    }>
+    export type VueUiRidgelineExpose = {
+        getData(): Promise<Array<{
+            datapoints: Array<{
+                color: string
+                id: string
+                name: string
+                pathLength: number
+                plots: Array<{
+                    isMaxPoint: boolean
+                    value: number
+                    x: number
+                    y: number
+                    zero: number
+                }>
+                smoothPath: string
+                smoothPathRidge: string
+                straightPath: string
+                straightPathRidge: string
+                uid: string
+                values: Array<number | null>
+                zeroPath: string
+            }>
+            label: {
+                x: number
+                y: number
+            }
+            labelLen: number
+            name: string
+            uid: string
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTable(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiRidgeline: DefineComponent<
+        {
+            config?: VueUiRidgelineConfig;
+            dataset: VueUiRidgelineDatasetItem[]
+        },
+        VueUiRidgelineExpose
+    >
 
     export type VueUiChordDataset = {
         matrix: number[][];
@@ -7189,10 +8076,36 @@ declare module "vue-data-ui" {
         };
     };
 
-    export const VueUiChord: DefineComponent<{
-        config?: VueUiChordConfig;
-        dataset: VueUiChordDataset
-    }>
+    export type VueUiChordExpose = {
+        getData(): Promise<{
+            chords: Array<{
+                id: string
+                source: Record<string, any>
+                target: Record<string, any>
+            }>
+            groups: Array<{
+                color: string
+                index: number
+                name: string
+                proportion: number
+            } & Record<string, any>>
+        }>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateCsv(): void
+        generateImage(): void
+        toggleTable(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiChord: DefineComponent<
+        {
+            config?: VueUiChordConfig;
+            dataset: VueUiChordDataset
+        },
+        VueUiChordExpose
+    >
 
     export type VueDataUiConfig =
         | VueUi3dBarConfig
@@ -7227,6 +8140,7 @@ declare module "vue-data-ui" {
         | VueUiThermometerConfig
         | VueUiTiremarksConfig
         | VueUiVerticalBarConfig
+        | VueUiHorizontalBarConfig
         | VueUiWaffleConfig
         | VueUiWheelConfig
         | VueUiXyConfig
@@ -7290,6 +8204,7 @@ declare module "vue-data-ui" {
         | "vue_ui_thermometer"
         | "vue_ui_tiremarks"
         | "vue_ui_vertical_bar"
+        | "vue_ui_horizontal_bar"
         | "vue_ui_waffle"
         | "vue_ui_wheel"
         | "vue_ui_xy"
@@ -7542,12 +8457,15 @@ declare module "vue-data-ui" {
      * ---
      * Get the default config for a given component
      * ___
+     * @typeParam T - The config type for the component
+     * @param key - Component key in snake_case (e.g. `"vue_ui_xy"`).
+     * @returns The default configuration of type `T`.
      * @example
-     * const defaultConfig = getVueDataUiConfig("vue_ui_xy");
-     *
-     * @param key - The key of the component in snake case (e.g., "vue_ui_xy")
+     * ```ts
+     * const defaultConfig = getVueDataUiConfig<VueUiXyConfig>("vue_ui_xy");
+     * ```
      */
-    export const getVueDataUiConfig: (key: VueDataUiConfigKey) => VueDataUiConfig;
+    export const getVueDataUiConfig: <T>(key: VueDataUiConfigKey) => T;
 
     /**
      * Vue Data UI utility
@@ -7649,60 +8567,15 @@ declare module "vue-data-ui" {
         y
     }: CreateTSpansArgs) => string;
 
-    export type UseObjectBindingsOptions = {
-        /** Delimiter to join object‑path segments */
-        delimiter?: string;
-        /** If true, array indices will not be traversed */
-        skipArrays?: boolean;
-    };
-
-    /**
-     * Recursively build a union of dot‑delimited paths for an object type,
-     * but skip arrays (we don’t traverse them by default at runtime).
-     */
-    type Paths<T> = T extends object
-        ? T extends any[]
-        ? never
-        : {
-            [K in Extract<keyof T, string>]:
-            // if the property is itself an object, recurse
-            T[K] extends object
-            ? `${K}` | `${K}.${Paths<T[K]>}`
-            : `${K}`;
-        }[Extract<keyof T, string>]
-        : never;
-
-    /**
-     * Given an object type `T` and one of its path strings `P`,
-     * resolve the type at that path.
-     */
-    type PathValue<T, P extends string> =
-        P extends `${infer K}.${infer Rest}`
-        ? K extends keyof T
-        ? PathValue<T[K], Rest>
-        : never
-        : P extends keyof T
-        ? T[P]
-        : never;
-
-    /**
-     * A fully‑typed bindings record: for each valid path `P` in `T`,
-     * `ComputedRef` of the exact `PathValue<T,P>`.
-     */
-    export type TypedBindings<T extends object> = {
-        [P in Paths<T>]: WritableComputedRef<PathValue<T, P>>;
-    };
-
     /**
      * Vue Data UI composable
      * ---
      * Flattens a reactive config object into computed refs for every leaf property.
      * 
      * @template T extends object
-     * @param configRef  A Vue `Ref<T>` holding your object.
+     * @param configRef  A Vue `Ref` holding your object.
      * @param options    Optional settings: `delimiter` (default `"."`) and `skipArrays` (default `true`).
-     * @returns         A `TypedBindings<T>` whose keys are every “leaf” path in `T`
-     *                  and whose values are `WritableComputedRef` of the exact property type.
+     * @returns         An object with flatten config as refs
      * 
      * ___
      * @example
@@ -7732,8 +8605,11 @@ declare module "vue-data-ui" {
      *   </template>
      * ```
      */
-    export function useObjectBindings<T extends object>(
-        configRef: Ref<T>,
-        options?: UseObjectBindingsOptions
-    ): TypedBindings<T>;
+    export function useObjectBindings(
+        configRef: Ref<Record<string, any>>,
+        options?: {
+            delimiter?: string
+            skipArrays?: boolean
+        }
+    ): Record<string, Ref<any>>;
 }