vue-data-ui 3.5.2 → 3.7.0

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

@@ -65,7 +65,8 @@ declare module "vue-data-ui" {
         | VueUiCirclePackDatasetItem[]
         | VueUiWorldDataset
         | VueUiRidgelineDatasetItem[]
-        | VueUiChordDataset;
+        | VueUiChordDataset
+        | VueUiStacklineDatasetItem[];
 
     export type VueDataUiAnyConfig =
         | VueUi3dBarConfig
@@ -127,7 +128,8 @@ declare module "vue-data-ui" {
         | VueUiCirclePackConfig
         | VueUiWorldConfig
         | VueUiRidgelineConfig
-        | VueUiChordConfig;
+        | VueUiChordConfig
+        | VueUiStacklineConfig;
 
     export type VueDataUiProps = {
         loader?: VueDataUiLoader | null;
@@ -391,6 +393,7 @@ declare module "vue-data-ui" {
     export type Theme =
         | ""
         | "zen"
+        | "dark"
         | "hack"
         | "concrete"
         | "celebration"
@@ -605,6 +608,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiTreemap: DefineComponent<
@@ -772,6 +777,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiGalaxy: DefineComponent<
@@ -1500,7 +1507,8 @@ declare module "vue-data-ui" {
         | "bringToBack"
         | "printer"
         | "save"
-        | "svg";
+        | "svg"
+        | "chartStackline";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;
@@ -1677,6 +1685,8 @@ declare module "vue-data-ui" {
         toggleAnnotator(): void
         toggleTable(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiDonutEvolution: DefineComponent<
@@ -1952,6 +1962,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiRings: DefineComponent<
@@ -2180,10 +2192,18 @@ declare module "vue-data-ui" {
         width?: number;
     };
 
-    export const VueUiSparkStackbar: DefineComponent<{
-        config?: VueUiSparkStackbarConfig;
-        dataset: VueUiSparkStackbarDatasetItem[];
-    }>;
+    export type VueUiSparkStackbarExpose = {
+        showSeries(name: string): void
+        hideSeries(name: string): void
+    }
+
+    export const VueUiSparkStackbar: DefineComponent<
+        {
+            config?: VueUiSparkStackbarConfig;
+            dataset: VueUiSparkStackbarDatasetItem[];
+        },
+        VueUiSparkStackbarExpose
+    >;
 
     export type VueUiThermometerConfig = {
         debug?: boolean; // v3
@@ -3185,6 +3205,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiScatter: DefineComponent<
@@ -3794,6 +3816,8 @@ declare module "vue-data-ui" {
         toggleStack(): void
         toggleTable(): void
         toggleTooltip(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiXy: DefineComponent<
@@ -4016,6 +4040,8 @@ declare module "vue-data-ui" {
         toggleTable(): void
         toggleTooltip(): void
         autoSize(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiDonut: DefineComponent<
@@ -4225,6 +4251,8 @@ declare module "vue-data-ui" {
         toggleTable(): void
         toggleTooltip(): void
         autoSize(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiNestedDonuts: DefineComponent<
@@ -4376,6 +4404,8 @@ declare module "vue-data-ui" {
         toggleFullscreen(): void
         toggleTable(): void
         toggleTooltip(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiWaffle: DefineComponent<
@@ -4545,6 +4575,8 @@ declare module "vue-data-ui" {
         toggleAnnotator(): void
         toggleTooltip(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiRadar: DefineComponent<
@@ -4748,6 +4780,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiQuadrant: DefineComponent<
@@ -5256,6 +5290,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleTable(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiOnion: DefineComponent<
@@ -5457,6 +5493,8 @@ declare module "vue-data-ui" {
         toggleAnnotator(): void
         toggleTooltip(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export type VueUiHorizontalBarExpose = VueUiVerticalBarExpose; // v3 renaming
@@ -7241,6 +7279,8 @@ declare module "vue-data-ui" {
         toggleStack(): void
         toggleTooltip(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiXyCanvas: DefineComponent<
@@ -7607,6 +7647,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleAnnotator(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiParallelCoordinatePlot: DefineComponent<
@@ -8039,6 +8081,8 @@ declare module "vue-data-ui" {
         toggleLabels(): void
         toggleTooltip(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiStackbar: DefineComponent<
@@ -8050,6 +8094,250 @@ declare module "vue-data-ui" {
         VueUiStackbarExpose
     >;
 
+    export type VueUiStacklineDatapointItem = VueUiStackbarDatapointItem & {
+        shape: Shape;
+        standalone: boolean;
+    };
+
+    export type VueUiStacklineSeriesItem = VueUiStackbarSeriesItem & {
+        shape: Shape;
+        standalone: boolean;
+    };
+
+    export type VueUiStacklineDatasetItem = VueUiStackbarDatasetItem & {
+        shape?: Shape;
+        standalone?: boolean; // If true, series will not be part of stacked series
+    }
+
+    export type VueUiStacklineConfig = {
+        loading?: boolean;
+        debug?: boolean;
+        theme?: Theme;
+        responsive?: boolean;
+        events?: {
+            datapointEnter?: VueUiStacklineEvent;
+            datapointLeave?: VueUiStacklineEvent;
+            datapointClick?: VueUiStacklineEvent;
+        };
+        customPalette?: string[];
+        useCssAnimation?: boolean;
+        table?: {
+            show?: boolean;
+            useDialog?: boolean;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                period?: string;
+                total?: string;
+            };
+            th: ChartTableCell;
+            td: ChartTableCell & {
+                roundingValue?: number;
+            };
+        };
+        userOptions?: ChartUserOptions;
+        style?: {
+            fontFamily?: string;
+            chart?: {
+                backgroundColor?: string;
+                color?: string;
+                height?: number;
+                width?: number;
+                padding?: ChartPadding;
+                title?: ChartTitle;
+                legend?: ChartBaseLegend & {
+                    backgroundColor?: string;
+                    position?: 'top' | 'bottom';
+                };
+                zoom?: ChartZoom & {
+                    preview?: {
+                        enable?: boolean;
+                        fill?: string;
+                        stroke?: string;
+                        strokeWidth?: number;
+                        strokeDasharray?: number;
+                    };
+                    useDefaultFormat?: boolean;
+                    timeFormat?: string;
+                    customFormat?:
+                        | null
+                        | ((params: MinimalCustomFormatParams<Array<VueUiStacklineDatapointItem & { absoluteIndex: number }>>) => string);
+                };
+                highlighter?: {
+                    color?: string;
+                    opacity?: number;
+                    useLine?: boolean;
+                    lineDasharray?: number;
+                    lineWidth?: number;
+                };
+                tooltip?: ChartTooltip & {
+                    showValue?: boolean;
+                    showPercentage?: boolean;
+                    roundingValue?: number;
+                    roundingPercentage?: number;
+                    customFormat?:
+                    | null
+                    | ((
+                        params: VueUiTooltipParams<
+                            VueUiStacklineDatapointItem[],
+                            VueUiStacklineSeriesItem[],
+                            VueUiStacklineConfig
+                        >
+                    ) => string);
+                    showTimeLabel?: boolean;
+                    useDefaultTimeFormat?: boolean;
+                    timeFormat?: string;
+                    showTotal?: boolean;
+                    totalTranslation?: string;
+                };
+                lines?: {
+                    useArea?: boolean; // Only applied on stacked series (!standalone)
+                    smooth?: boolean;
+                    areaOpacity?: number;
+                    distributed?: boolean;
+                    showDistributedPercentage?: boolean;
+                    strokeWidth?: number;
+                    gradient?: {
+                        show?: boolean;
+                        intensity?: number;
+                    };
+                    dot?: {
+                        hideAboveMaxSerieLength?: number;
+                        useSerieColor?: boolean;
+                        fill?: string;
+                        strokeWidth?: number;
+                        radius?: number;
+                    };
+                    totalValues?: {
+                        show?: boolean;
+                        offsetY?: number;
+                        fontSize?: number;
+                        bold?: boolean;
+                        color?: string;
+                    };
+                    dataLabels?: {
+                        hideAboveMaxSerieLength?: number;
+                        offsetY?: number;
+                        show?: boolean;
+                        hideEmptyValues?: boolean;
+                        hideUnderValue?: number | null;
+                        hideEmptyPercentages?: boolean;
+                        hideUnderPercentage?: number | null;
+                        color?: string;
+                        fontSize?: number;
+                        bold?: boolean;
+                        rounding?: number;
+                        prefix?: string;
+                        formatter?: Formatter;
+                    }
+                };
+                grid?: {
+                    frame?: ChartFrame;
+                    scale?: {
+                        ticks?: number;
+                        scaleMin?: number | null;
+                        scaleMax?: number | null;
+                    };
+                    x?: {
+                        showAxis?: boolean;
+                        showHorizontalLines?: boolean;
+                        linesColor?: string;
+                        linesThickness?: number;
+                        linesStrokeDasharray?: number;
+                        axisColor?: string;
+                        axisThickness?: number;
+                        axisName?: {
+                            show?: boolean;
+                            text?: string;
+                            fontSize?: number;
+                            color?: string;
+                            bold?: boolean;
+                            offsetY?: number;
+                        };
+                        timeLabels?: {
+                            show?: boolean;
+                            values?: Array<number | string>;
+                            datetimeFormatter?: AxisDateFormatter;
+                            offsetY?: number;
+                            rotation?: number;
+                            autoRotate?: {
+                                enable?: boolean;
+                                angle?: number;
+                            };
+                            fontSize?: number;
+                            color?: string;
+                            bold?: boolean;
+                            showOnlyFirstAndLast?: boolean;
+                            showOnlyAtModulo?: boolean;
+                            modulo?: number;
+                        };
+                    };
+                    y?: {
+                        showAxis?: boolean;
+                        showVerticalLines?: boolean;
+                        linesColor?: string;
+                        linesThickness?: number;
+                        linesStrokeDasharray?: number;
+                        axisColor?: string;
+                        axisThickness?: number;
+                        axisName?: {
+                            show?: boolean;
+                            text?: string;
+                            fontSize?: number;
+                            color?: string;
+                            bold?: boolean;
+                            offsetX?: number;
+                        };
+                        axisLabels?: {
+                            formatter?: Formatter;
+                            show?: boolean;
+                            color?: string;
+                            fontSize?: number;
+                            bold?: boolean;
+                            rounding?: number;
+                        };
+                    };
+                };
+            }
+        }
+    }
+
+    export type VueUiStacklineExpose = {
+        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[],
+            standalone?: boolean
+        }>>
+        getImage(options?: { scale?: number }): GetImagePromise
+        generateCsv(): void
+        generateImage(): void
+        generatePdf(): void
+        toggleAnnotator(): void
+        toggleTable(): void
+        toggleLabels(): void
+        toggleTooltip(): void
+        toggleFullscreen(): void
+    }
+
+    export const VueUiStackline: DefineComponent<
+        {
+            config?: VueUiStacklineConfig;
+            dataset: VueUiStacklineDatasetItem[];
+            selectedXIndex?: number | null;
+        },
+        VueUiStacklineExpose
+    >;
+
     export type VueUiBulletSegment = {
         name: string;
         from: number;
@@ -8498,6 +8786,8 @@ declare module "vue-data-ui" {
         toggleTooltip(): void
         toggleTable(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiHistoryPlot: DefineComponent<
@@ -8944,6 +9234,8 @@ declare module "vue-data-ui" {
         toggleAnnotator(): void
         toggleTable(): void
         toggleFullscreen(): void
+        showSeries(name: string): void
+        hideSeries(name: string): void
     }
 
     export const VueUiRidgeline: DefineComponent<
@@ -9168,7 +9460,8 @@ declare module "vue-data-ui" {
         | VueUiCirclePackConfig
         | VueUiWorldConfig
         | VueUiRidgelineConfig
-        | VueUiChordConfig;
+        | VueUiChordConfig
+        | VueUiStacklineConfig;
 
     export type VueDataUiConfigKey =
         | "vue_ui_3d_bar"
@@ -9232,7 +9525,8 @@ declare module "vue-data-ui" {
         | "vue_ui_circle_pack"
         | "vue_ui_world"
         | "vue_ui_ridgeline"
-        | "vue_ui_chord";
+        | "vue_ui_chord"
+        | "vue_ui_stackline";
 
     export type VueDataUiWordCloudTransformCallback =
         | ((word: string) => string)

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

@@ -0,0 +1,18 @@
+import { DefineComponent } from 'vue';
+
+export type { 
+    VueUiStacklineDatasetItem,
+    VueUiStacklineDatapointItem,
+    VueUiStacklineSeriesItem,
+    VueUiStacklineConfig,
+    VueUiStacklineExpose,
+    VueUiStacklineEvent
+} from "./vue-data-ui";
+
+declare const VueUiStackline: DefineComponent<{
+    config?: VueUiStacklineConfig;
+    dataset: VueUiStacklineDatasetItem[];
+}, VueUiStacklineExpose>;
+
+export default VueUiStackline;
+export { VueUiStackline }

package/dist/{useAutoSizeLabelsInsideViewbox-BhzfwQ_k.js → useAutoSizeLabelsInsideViewbox-DOALwU4q.js}

@@ -1,4 +1,4 @@
-import { l as k } from "./lib-C_mNZmhD.js";
+import { f as k } from "./lib-C5BH09_g.js";
 function v({
   svgRef: x,
   fontSize: A,
@@ -9,8 +9,8 @@ function v({
 }) {
   let l = null;
   function F(i, t, o = 1) {
-    const { x: n, y: c, width: u, height: r } = i.getBBox(), e = n >= t.x + o, s = n + u <= t.x + t.width - o, h = c >= t.y + o, f = c + r <= t.y + t.height - o;
-    return e && s && h && f;
+    const { x: n, y: c, width: u, height: r } = i.getBBox(), e = n >= t.x + o, s = n + u <= t.x + t.width - o, f = c >= t.y + o, h = c + r <= t.y + t.height - o;
+    return e && s && f && h;
   }
   function b(i, t, o, n, c = 120, u = 1) {
     let r = o, e = 0;
@@ -29,17 +29,17 @@ function v({
         minSize: S,
         sizeRef: z
       }
-    ]), a.map((e) => i.querySelectorAll(e.selector).length).reduce((e, s) => e + s, 0) !== 0 && a.forEach(({ selector: e, baseSize: s, minSize: h, sizeRef: f }) => {
+    ]), a.map((e) => i.querySelectorAll(e.selector).length).reduce((e, s) => e + s, 0) !== 0 && a.forEach(({ selector: e, baseSize: s, minSize: f, sizeRef: h }) => {
       i.querySelectorAll(e).forEach((m) => {
         const O = k({
           el: m,
           bounds: u,
           currentFontSize: s,
-          minFontSize: h,
+          minFontSize: f,
           attempts: 200,
           padding: 1
-        }), w = b(m, u, O, h, 120, 1);
-        m.setAttribute("font-size", w), f.value = w;
+        }), w = b(m, u, O, f, 120, 1);
+        m.setAttribute("font-size", w), h.value = w;
       });
     });
   }