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

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
@@ -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;

package/dist/{useNestedProp-Cmx8ApWu.js → useNestedProp-B-ULAHAH.js}

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

package/dist/{usePrinter-BefhLUKK.js → usePrinter-BAQfJI9j.js}

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

package/dist/useTimeLabelCollider-V7AOiPLB.js

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