vue-data-ui 3.0.0-next.3 → 3.0.0-next.31

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

@@ -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
@@ -257,6 +259,8 @@ declare module "vue-data-ui" {
         backgroundOpacity?: number;
         position?: TooltipPosition;
         offsetY?: number;
+        smooth?: boolean;
+        backdropFilter?: boolean;
     };
 
     export type ZoomMinimap = {
@@ -1307,6 +1311,9 @@ declare module "vue-data-ui" {
     }>;
 
     export type VueUiDonutEvolutionConfig = {
+        debug?: boolean; // v3
+        loading?: boolean; // v3
+        responsive?: boolean; // V3
         theme?: Theme;
         customPalette?: string[];
         style?: {
@@ -1344,6 +1351,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;
@@ -1364,6 +1379,7 @@ declare module "vue-data-ui" {
                                 showOnlyFirstAndLast?: boolean;
                                 color?: string;
                                 rotation?: number;
+                                autoRotate?: boolean;
                                 offsetY?: number;
                             };
                         };
@@ -2370,6 +2386,8 @@ declare module "vue-data-ui" {
     >;
 
     export type VueUiCandlestickConfig = {
+        debug?: boolean;
+        loading?: boolean;
         responsive?: boolean;
         responsiveProportionalSizing?: boolean;
         theme?: Theme;
@@ -2398,6 +2416,7 @@ declare module "vue-data-ui" {
                             offsetY?: number;
                             bold?: boolean;
                             rotation?: number;
+                            autoRotate?: boolean;
                         };
                         timeLabels?: {
                             datetimeFormatter?: AxisDateFormatter
@@ -2952,10 +2971,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[];
@@ -3033,6 +3056,8 @@ declare module "vue-data-ui" {
                         groupColor?: string | null;
                         scaleLabelOffsetX?: number;
                         scaleValueOffsetX?: number;
+                        rounding?: number;
+                        serieNameFormatter?: Formatter;
                     };
                     xAxis?: {
                         showBaseline?: boolean;
@@ -3051,6 +3076,7 @@ declare module "vue-data-ui" {
                         showOnlyAtModulo?: boolean;
                         modulo?: number;
                         datetimeFormatter?: AxisDateFormatter;
+                        autoRotate?: boolean;
                     };
                 };
             };
@@ -3287,11 +3313,16 @@ declare module "vue-data-ui" {
         {
             config?: VueUiXyConfig;
             dataset: VueUiXyDatasetItem[];
+            selectedXIndex?: number | null; // v3
         },
         VueUiXyExpose
     >;
 
-    export type VueUiDonutEvent = null | (({datapoint, seriesIndex }: { datapoint: VueUiDonutDatapoint; seriesIndex: number }) => void);
+    export type ChartEvent<T> = null | (({ datapoint, seriesIndex} : { datapoint: T, seriesIndex: number}) => void)
+
+    export type VueUiDonutEvent = ChartEvent<VueUiDonutDatapoint>;
+    export type VueUiSparklineEvent = ChartEvent<VueUiSparklineDatasetItem>;
+    export type VueUiXyEvent = ChartEvent<VueUiXyDatapointItem[]>;
 
     export type VueUiDonutConfig = {
         debug?: boolean;
@@ -3525,6 +3556,11 @@ declare module "vue-data-ui" {
         theme?: Theme;
         customPalette?: string[];
         useCssAnimation?: boolean;
+        events?: {
+            datapointEnter?: VueUiDonutEvent;
+            datapointLeave?: VueUiDonutEvent;
+            datapointClick?: VueUiDonutEvent;
+        };
         serieToggleAnimation?: {
             show?: boolean;
             durationMs?: number;
@@ -3566,6 +3602,7 @@ declare module "vue-data-ui" {
                             useSerieColor?: boolean;
                             showDonutName?: boolean;
                             boldDonutName?: boolean;
+                            curvedDonutName?: boolean;
                             donutNameAbbreviation?: boolean;
                             donutNameOffsetY?: number;
                             donutNameMaxAbbreviationSize?: number;
@@ -3573,6 +3610,7 @@ declare module "vue-data-ui" {
                         };
                     };
                     donut?: {
+                        radiusRatio?: number;
                         strokeWidth?: number;
                         borderWidth?: number;
                         spacingRatio?: number;
@@ -4705,24 +4743,33 @@ declare module "vue-data-ui" {
         value: number;
     };
 
+    export type VueUiHorizontalBarDatasetChild = VueUiVerticalBarDatasetChild; // v3 renaming
+
     export type VueUiVerticalBarDatasetItem = {
         name: string;
         value: number;
         color?: string;
-        children?: VueUiVerticalBarDatasetChild[];
+        children?: VueUiVerticalBarDatasetChild[] | VueUiHorizontalBarDatasetChild[];
     };
 
-    export type VueUiVerticalBarEvent = null | (({ datapoint, seriesIndex }: { datapoint: VueUiVerticalBarDatapoint; seriesIndex: number }) => void);
+    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;
-            datapointLeave?: VueUiVerticalBarEvent;
-            datapointClick?: VueUiVerticalBarEvent;
+            datapointEnter?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
+            datapointLeave?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
+            datapointClick?: VueUiVerticalBarEvent | VueUiHorizontalBarEvent;
         };
         style?: {
             fontFamily?: string;
@@ -4783,6 +4830,7 @@ declare module "vue-data-ui" {
                         show?: boolean;
                         color?: string;
                         strokeWidth?: number;
+                        fullWidth?: boolean;
                     };
                 };
                 title?: ChartTitle;
@@ -4805,9 +4853,9 @@ declare module "vue-data-ui" {
                     | null
                     | ((
                         params: VueUiTooltipParams<
-                            VueUiVerticalBarDatapoint,
-                            VueUiVerticalBarSerie[],
-                            VueUiVerticalBarConfig
+                            VueUiVerticalBarDatapoint | VueUiHorizontalBarDatapoint,
+                            VueUiVerticalBarSerie[] | VueUiHorizontalBarSerie[],
+                            VueUiVerticalBarConfig | VueUiHorizontalBarConfig
                         >
                     ) => string);
                 };
@@ -4834,6 +4882,8 @@ declare module "vue-data-ui" {
         };
     };
 
+    export type VueUiHorizontalBarConfig = VueUiVerticalBarConfig; // v3 renaming;
+
     export type VueUiVerticalBarDatapoint = {
         children?: Array<any>;
         childIndex?: number;
@@ -4850,8 +4900,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;
@@ -4862,8 +4914,10 @@ declare module "vue-data-ui" {
         value: number;
     };
 
+    export type VueUiHorizontalBarSerie = VueUiVerticalBarSerie; // v3 renaming
+
     export type VueUiVerticalBarExpose = {
-        getData(): Promise<Array<VueUiVerticalBarDatasetItem & Record<string, any>>>
+        getData(): Promise<Array<VueUiVerticalBarDatasetItem & Record<string, any>>> | Promise<Array<VueUiHorizontalBarDatasetItem & Record<string, any>>>
         getImage(options?: { scale?: number }): GetImagePromise
         recalculateHeight(): void,
         generateCsv(): void
@@ -4876,6 +4930,8 @@ declare module "vue-data-ui" {
         toggleFullscreen(): void
     }
 
+    export type VueUiHorizontalBarExpose = VueUiVerticalBarExpose; // v3 renaming
+
     export const VueUiVerticalBar: DefineComponent<
         {
             config?: VueUiVerticalBarConfig;
@@ -4884,8 +4940,19 @@ declare module "vue-data-ui" {
         VueUiVerticalBarExpose
     >;
 
+    /**
+     * Renamed from the v2 VueUiVerticalBar
+     */
+    export const VueUiHorizontalBar: DefineComponent<
+        {
+            config?: VueUiHorizontalBarConfig;
+            dataset: VueUiHorizontalBarDatasetItem[];
+        },
+        VueUiHorizontalBarExpose
+    >;
+
     export type VueUiSparklineDatasetItem = {
-        period: string;
+        period: string | number;
         value: number;
         absoluteValue?: number;
         id?: string;
@@ -4897,9 +4964,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;
         };
@@ -4967,6 +5041,7 @@ declare module "vue-data-ui" {
                 prefix?: string;
                 suffix?: string;
                 formatter?: Formatter;
+                datetimeFormatter?: AxisDateFormatter; // v3
             };
             title?: {
                 show?: boolean;
@@ -5657,6 +5732,8 @@ declare module "vue-data-ui" {
         tooltipFontSize?: number;
         tooltipPosition?: TooltipPosition;
         tooltipOffsetY?: number;
+        tooltipSmooth?: boolean;
+        tooltipBackdropFilter?: boolean;
         useCustomLegend?: boolean;
         valuePrefix?: string;
         valueSuffix?: string;
@@ -7087,6 +7164,7 @@ declare module "vue-data-ui" {
                             datetimeFormatter?: AxisDateFormatter;
                             offsetY?: number;
                             rotation?: number;
+                            autoRotate?: boolean;
                             fontSize?: number;
                             color?: string;
                             bold?: boolean;
@@ -8108,6 +8186,7 @@ declare module "vue-data-ui" {
         | VueUiThermometerConfig
         | VueUiTiremarksConfig
         | VueUiVerticalBarConfig
+        | VueUiHorizontalBarConfig
         | VueUiWaffleConfig
         | VueUiWheelConfig
         | VueUiXyConfig
@@ -8171,6 +8250,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"
@@ -8486,6 +8566,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;