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

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

declare module 'vue-data-ui' {
    import type {
        Ref,
        DefineComponent,
        VNodeChild,
        Component,
        ComputedRef,
        MaybeRefOrGetter,
    } from 'vue';

    export type VueUiUnknownObj = {
        [key: string]: unknown;
    };

    export type AnyVueComponent = DefineComponent<any, any, any, any>;

    export type VueDataUiLoader = () => Promise<
        { default: AnyVueComponent } | AnyVueComponent
    >;

    export type VueDataUiAnyDataset =
        | VueUiHillDatasetItem[]
        | VueUi3dBarDataset
        | VueUiAgePyramidDataset
        | VueUiAnnotatorDataset
        | Array<Array<string | number>>
        | VueUiChestnutDatasetRoot[]
        | VueUiDashboardElement[]
        | number
        | string
        | VueUiDonutEvolutionDatasetItem[]
        | VueUiDonutDatasetItem[]
        | VueUiGaugeDataset
        | VueUiHeatmapDatasetItem[]
        | VueUiMoleculeDatasetNode[]
        | VueUiMoodRadarDataset
        | VueUiNestedDonutsDatasetItem[]
        | VueUiOnionDatasetItem[]
        | VueUiQuadrantDatasetItem[]
        | VueUiRadarDataset
        | VueUiRatingDataset
        | VueUiRelationCircleDatasetItem[]
        | VueUiRingsDatasetItem[]
        | VueUiScatterDatasetItem[]
        | VueUiSparkbarDatasetItem[]
        | VueUiSparkgaugeDataset
        | VueUiSparkHistogramDatasetItem[]
        | VueUiSparklineDatasetItem[]
        | VueUiSparkStackbarDatasetItem[]
        | VueUiTableSparklineDatasetItem[]
        | VueUiTableDataset
        | VueUiThermometerDataset
        | VueUiTiremarksDataset
        | VueUiVerticalBarDatasetItem[]
        | VueUiHorizontalBarDatasetItem[]
        | VueUiWaffleDatasetItem[]
        | VueUiWheelDataset
        | VueUiXyDatasetItem[]
        | VueUiTreemapDatasetItem[]
        | VueUiQuickChartDataset
        | number[]
        | Array<number | null>
        | VueUiStripPlotDataset[]
        | VueUiWordCloudDatasetItem[]
        | VueUiXyCanvasDatasetItem[]
        | VueUiFlowDatasetItem[]
        | VueUiParallelCoordinatePlotDatasetItem[]
        | VueUiCarouselTableDataset
        | VueUiGizmoDataset
        | VueUiStackbarDatasetItem[]
        | VueUiBulletDataset
        | VueUiFunnelDatasetItem[]
        | VueUiHistoryPlotDatasetItem[]
        | VueUiCirclePackDatasetItem[]
        | VueUiWorldDataset
        | VueUiRidgelineDatasetItem[]
        | VueUiChordDataset
        | VueUiStacklineDatasetItem[]
        | VueUiDagDataset
        | VueUiGeoDatasetItem[]
        | VueUiBumpDatasetItem[];

    export type VueDataUiAnyConfig =
        | VueUiHillConfig
        | VueUi3dBarConfig
        | VueUiAgePyramidConfig
        | VueUiAnnotatorConfig
        | VueUiCandlestickConfig
        | VueUiChestnutConfig
        | VueUiDashboardConfig
        | VueUiDigitsConfig
        | VueUiDonutEvolutionConfig
        | VueUiDonutConfig
        | VueUiGaugeConfig
        | VueUiHeatmapConfig
        | VueUiMiniLoaderConfig
        | VueUiMoleculeConfig
        | VueUiMoodRadarConfig
        | VueUiNestedDonutsConfig
        | VueUiOnionConfig
        | VueUiQuadrantConfig
        | VueUiRadarConfig
        | VueUiRatingConfig
        | VueUiRelationCircleConfig
        | VueUiRingsConfig
        | VueUiScatterConfig
        | VueUiSkeletonConfig
        | VueUiSmileyConfig
        | VueUiSparkbarConfig
        | VueUiSparkgaugeConfig
        | VueUiSparkHistogramConfig
        | VueUiSparklineConfig
        | VueUiSparkStackbarConfig
        | VueUiTableSparklineConfig
        | VueUiTableConfig
        | VueUiThermometerConfig
        | VueUiTiremarksConfig
        | VueUiVerticalBarConfig
        | VueUiHorizontalBarConfig
        | VueUiWaffleConfig
        | VueUiWheelConfig
        | VueUiXyConfig
        | VueUiKpiConfig
        | VueUiTreemapConfig
        | VueUiQuickChartConfig
        | VueUiCursorConfig
        | VueUiSparkTrendConfig
        | VueUiStripPlotConfig
        | VueUiDumbbellConfig
        | VueUiWordCloudConfig
        | VueUiXyCanvasConfig
        | VueUiFlowConfig
        | VueUiParallelCoordinatePlotConfig
        | VueUiTimerConfig
        | VueUiCarouselTableConfig
        | VueUiGizmoConfig
        | VueUiStackbarConfig
        | VueUiBulletConfig
        | VueUiFunnelConfig
        | VueUiHistoryPlotConfig
        | VueUiCirclePackConfig
        | VueUiWorldConfig
        | VueUiRidgelineConfig
        | VueUiChordConfig
        | VueUiStacklineConfig
        | VueUiDagConfig
        | VueUiGeoConfig
        | VueUiBumpConfig;

    export type VueDataUiProps = {
        loader?: VueDataUiLoader | null;
        component?: string;
        dataset: VueDataUiAnyDataset;
        config?: VueDataUiAnyConfig;
    };

    export type VueDataUiExpose = {
        getData?: (...args: any[]) => Promise<any> | any;
        getImage?: (options?: { scale?: number }) => Promise<any>;
        generateCsv?: () => void;
        generateImage?: () => void;
        generateSvg(): () => void;
        generatePdf?: () => void;
        toggleAnnotator?: () => void;
        toggleFullscreen?: () => void;
        toggleLabels?: () => void;
        toggleStack?: () => void;
        toggleTable?: () => void;
        toggleTooltip?: () => void;
        autoSize?: () => void;
        getItemsPositions?: () => any;
        toggleReadonly?: () => void;
        shoot?: () => void;
        close?: () => void;
        restoreOrder?: () => void;
        recalculateHeight?: () => void;
        toggleLock?: () => void;
        toggleSort?: () => void;
        start?: () => void;
        pause?: () => void;
        reset?: () => void;
        restart?: () => void;
        lap?: () => void;
        pauseAnimation?: () => void;
        resumeAnimation?: () => void;
        toggleAnimation?: () => void;
        selectNode?: (...args: any[]) => void;
        selectGroup?: (...args: any[]) => void;
        selectRibbon?: (...args: any[]) => void;
        resetZoom?: () => void;
        zoomIn?: () => void;
        zoomOut?: () => void;
        switchDirection?: () => void;
        [key: string]: any;
    };

    /** Keep the named export exactly as before (now with loader/component props). */
    export const VueDataUi: DefineComponent<VueDataUiProps, VueDataUiExpose>;

    export type ChartEvent<T> =
        | null
        | (({
              datapoint,
              seriesIndex,
          }: {
              datapoint: T;
              seriesIndex: number;
          }) => void);

    export type VueUiFlowEvent = ChartEvent<VueUiFlowNode>;
    export type VueUi3dBarEvent = ChartEvent<VueUi3dBarDatapoint>;
    export type VueUiDonutEvent = ChartEvent<VueUiDonutDatapoint>;
    export type VueUiRadarEvent = ChartEvent<VueUiRadarDatapoint>;
    export type VueUiXyEvent = ChartEvent<VueUiXyDatapointItem[]>;
    export type VueUiRingsEvent = ChartEvent<VueUiRingsDatapoint>;
    export type VueUiOnionEvent = ChartEvent<VueUiOnionDatapoint>;
    export type VueUiWorldEvent = ChartEvent<VueUiWorldDatapoint>;
    export type VueUiGeoPointEvent = ChartEvent<VueUiGeoDatapoint>;
    export type VueUiGeoTerritoryEvent = ChartEvent<VueUiGeoTerritory>;
    export type VueUiGalaxyEvent = ChartEvent<VueUiGalaxyDatapoint>;
    export type VueUiWaffleEvent = ChartEvent<VueUiWaffleDatapoint>;
    export type VueUiScatterEvent = ChartEvent<VueUiScatterDatapoint>;
    export type VueUiTreemapEvent = ChartEvent<VueUiTreemapDatapoint>;
    export type VueUiDumbbellEvent = ChartEvent<VueUiDumbbellDatapoint>;
    export type VueUiMoleculeEvent = ChartEvent<VueUiMoleculeDatapoint>;
    export type VueUiQuadrantEvent = ChartEvent<VueUiQuadrantDatapoint>;
    export type VueUiSparkbarEvent = ChartEvent<VueUiSparkbarDatasetItem>;
    export type VueUiWordCloudEvent = ChartEvent<VueUiWordCloudDatapoint>;
    export type VueUiStripPlotEvent = ChartEvent<VueUiStripPlotDatapoint>;
    export type VueUiMoodRadarEvent = ChartEvent<VueUiMoodRadarDatapoint>;
    export type VueUiCirclePackEvent = ChartEvent<VueUiCirclePackDatapoint>;
    export type VueUiSparklineEvent = ChartEvent<VueUiSparklineDatasetItem>;
    export type VueUiAgePyramidEvent = ChartEvent<VueUiAgePyramidDatapoint>;
    export type VueUiStackbarEvent = ChartEvent<VueUiStackbarDatapointItem[]>;
    export type VueUiStacklineEvent = ChartEvent<VueUiStacklineDatapointItem[]>;
    export type VueUiCandlestickEvent = ChartEvent<VueUiCandlestickDatapoint>;
    export type VueUiRidgelineEvent = ChartEvent<VueUiRidgelineDatapointEvent>;
    export type VueUiSparkStackbarEvent =
        ChartEvent<VueUiSparkStackbarDatapoint>;
    export type VueUiHistoryPlotEvent =
        ChartEvent<VueUiHistoryPlotDatapointEvent>;
    export type VueUiRelationCircleEvent =
        ChartEvent<VueUiRelationCircleDatapoint>;
    export type VueUiDonutEvolutionEvent =
        ChartEvent<VueUiDonutEvolutionDatapoint>;
    export type VueUiSparkHistogramEvent =
        ChartEvent<VueUiSparkHistogramDatasetItem>;
    export type VueUiChordEvent = ChartEvent<
        VueUiChordDatapointArc | VueUiChordDatapointRibbon
    >;
    export type VueUiParallelCoordinatePlotEvent =
        ChartEvent<VueUiParallelCoordinatePlotEventDatapoint>;
    export type VueUiBumpEvent = ChartEvent<VueUiBumpDatapoint>;

    export type VueUiConfigNumberString = `${number}`;

    export type VueUiBuiltInSkeletonConfig<C> = Omit<
        C,
        'skeletonConfig' | 'skeletonDataset'
    >;
    export type VueUiBuiltInSkeletonDataset<D> = D | null;

    export type A11YConfig = {
        translations?: {
            keyboardNavigation?: string;
            tableAvailable?: string;
            tableCaption?: string;
        };
    };

    export type VueUiPatternName =
        | 'bubbles'
        | 'flooring'
        | 'grid'
        | 'hexagon-diamond'
        | 'hexagon-flooring'
        | 'hexagon-grid'
        | 'maze'
        | 'redrum'
        | 'scales'
        | 'squares'
        | 'wave'
        | 'zig-zag';

    export const VueUiPattern: DefineComponent<{
        name: VueUiPatternName;
        id: string;
        fill?: string;
        stroke?: string;
        strokeWidth?: number;
        scale?: number;
    }>;

    export type DevHints = { enable?: boolean };

    export type ChartTitle = {
        text?: string;
        color?: string;
        fontSize?: number;
        bold?: boolean;
        textAlign?: TextAlign;
        paddingLeft?: number;
        paddingRight?: number;
        subtitle?: {
            color?: string;
            text?: string;
            fontSize?: number;
            bold?: boolean;
        };
    };

    export type ChartTransitions = {
        enable?: boolean;
        pauseOnLoad?: boolean;
        pauseOnDatasetChange?: boolean;
        activationDelayMs?: number;
    };

    export type ChartComments = {
        show?: boolean;
        showInTooltip?: boolean;
        width?: number;
        offsetY?: number;
        offsetX?: number;
    };

    export type ChartPadding = {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };

    export type ChartLegendToggle = {
        show?: boolean;
        backgroundColor?: string;
        color?: string;
    };

    export type ChartBaseLegend = {
        color?: string;
        show?: boolean;
        fontSize?: number;
        bold?: boolean;
        selectAllToggle?: ChartLegendToggle;
    };

    export type ChartFrame = {
        show?: boolean;
        stroke?: string;
        strokeWidth?: number;
        strokeLinecap?: 'round' | 'butt' | 'square';
        strokeLinejoin?: 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
        strokeDasharray?: number;
    };

    export type ChartZoomControls = {
        position?: 'top' | 'bottom';
        show?: boolean;
        backgroundColor?: string;
        buttonColor?: string;
        color?: string;
        fontSize?: number;
        border?: string;
        padding?: string;
        borderRadius?: string;
    };

    export type AltCopyArgs<
        TDataset = unknown,
        TConfig = Record<string, any>,
    > = {
        dataset: TDataset;
        config: TConfig;
    };

    export type ChartCallbacks<
        TDataset = unknown,
        TConfig = Record<string, any>,
    > = {
        animation?: null | (() => void);
        annotator?: null | (() => void);
        csv?: null | ((csvStr?: string) => void);
        fullscreen?: null | (() => void);
        img?:
            | null
            | ((args?: {
                  domElement?: string;
                  imageUri?: string;
                  base64?: string;
              }) => void);
        labels?: null | (() => void);
        pdf?:
            | null
            | ((args?: {
                  domElement?: string;
                  imageUri?: string;
                  base64?: string;
              }) => void);
        sort?: null | (() => void);
        stack?: null | (() => void);
        table?: null | (() => void);
        tooltip?: null | (() => void);
        svg?:
            | null
            | ((args: {
                  blob: Blob;
                  url: URL;
                  text: string;
                  dataUrl: string;
              }) => void);
        zoom?: null | (() => void);
        altCopy?: null | ((args: AltCopyArgs<TDataset, TConfig>) => void);
    };

    export type ChartUserOptions<
        TDataset = unknown,
        TConfig = Record<string, any>,
    > = {
        show?: boolean;
        showOnChartHover?: boolean;
        keepStateOnChartLeave?: boolean;
        position?: 'left' | 'right';
        useCursorPointer?: boolean;
        buttons?: {
            animation?: boolean;
            annotator?: boolean;
            csv?: boolean;
            fullscreen?: boolean;
            img?: boolean;
            labels?: boolean;
            pdf?: boolean;
            sort?: boolean;
            stack?: boolean;
            table?: boolean;
            tooltip?: boolean;
            svg?: boolean;
            zoom?: boolean;
            altCopy?: boolean;
        };
        buttonTitles?: {
            animation?: string;
            annotator?: string;
            close?: string;
            csv?: string;
            fullscreen?: string;
            img?: string;
            labels?: string;
            open?: string;
            pdf?: string;
            sort?: string;
            stack?: string;
            table?: string;
            tooltip?: string;
            svg?: string;
            zoom?: string;
            altCopy?: string;
        };
        callbacks?: ChartCallbacks<TDataset, TConfig>;
        print?: {
            scale?: number;
            orientation?: 'auto' | 'l' | 'p';
            overflowTolerance?: number;
        };
    };

    export type ChartTableCell = {
        backgroundColor?: string;
        color?: string;
        outline?: string;
    };

    export type ChartTooltip = {
        show?: boolean;
        color?: string;
        backgroundColor?: string;
        fontSize?: number;
        borderRadius?: number;
        borderColor?: string;
        borderWidth?: number;
        backgroundOpacity?: number;
        position?: TooltipPosition;
        offsetX?: number;
        offsetY?: number;
        smooth?: boolean;
        backdropFilter?: boolean;
        smoothForce?: number;
        smoothSnapThreshold?: number;
        teleportTo?: string;
    };

    export type ZoomMinimap = {
        show?: boolean;
        smooth?: boolean;
        selectedColor?: string;
        selectedColorOpacity?: number;
        lineColor?: string;
        selectionRadius?: number;
        indicatorColor?: string;
        verticalHandles?: boolean;
        compact?: boolean;
        merged?: boolean;
        frameColor?: string;
        additionalHeight?: number;
        handleIconColor?: string | null;
        handleBorderWidth?: number;
        handleBorderColor?: string | null;
        handleFill?: string | null;
        handleWidth?: number;
        handleType?: '' | 'empty' | 'chevron' | 'grab' | 'arrow';
    };

    export type ChartZoom = {
        show?: boolean;
        autoFit?: boolean;
        color?: string;
        highlightColor?: string;
        fontSize?: number;
        useResetSlot?: boolean; // TODO: Legacy, now useless, remove in v4
        minimap?: ZoomMinimap;
        startIndex?: number | null;
        endIndex?: number | null;
        enableRangeHandles?: boolean;
        enableSelectionDrag?: boolean;
        focusOnDrag?: boolean;
        focusRangeRatio?: number;
        maxWidth?: number | null;
    };

    export type Theme =
        | ''
        | 'zen'
        | 'dark'
        | 'hack'
        | 'concrete'
        | 'celebration'
        | 'celebrationNight'
        | 'minimal'
        | 'minimalDark';
    export type TextAlign = 'left' | 'center' | 'right';
    export type TooltipPosition = TextAlign;
    export type FontVariantNumeric =
        | 'normal'
        | 'slashed-zero'
        | 'tabular-nums'
        | 'oldstyle-nums';
    export type Shape =
        | 'circle'
        | 'triangle'
        | 'square'
        | 'diamond'
        | 'pentagon'
        | 'hexagon'
        | 'star';

    export type FormatterParams = {
        value: number;
        config?: any;
    };
    export type Formatter =
        | null
        | ((params: FormatterParams) => string | number);

    export type Locale = string;

    export type AxisDateFormatter = {
        enable?: boolean;
        locale?: Locale;
        useUTC?: boolean;
        januaryAsYear?: boolean;
        options?: {
            year?: string;
            month?: string;
            day?: string;
            hour?: string;
            minute?: string;
            second?: string;
        };
    };

    export type MinimalCustomFormatParams<TDatapoint = any> = {
        absoluteIndex: number;
        seriesIndex: number;
        datapoint: TDatapoint;
    };

    export type VueUiTooltipParams<
        TDatapoint,
        TSeries,
        TConfig,
        TBar = any,
        TLine = any,
        TPlot = any,
    > = {
        seriesIndex?: number;
        plotIndex?: number;
        series?: TSeries;
        datapoint?: TDatapoint;
        config?: TConfig;
        bars?: TBar;
        lines?: TLine;
        plots?: TPlot;
    };

    export type GetImagePromise = Promise<{
        imageUri: string;
        base64: string;
        title: string;
        width: number;
        height: number;
        aspectRatio: number;
    }>;

    export type CommonAnnotatorSlots = {
        ['annotator-action-close']?: () => VNodeChild;
        ['annotator-action-color']?: (
            props: VueUiAnnotatorActionColorSlotProps,
        ) => VNodeChild;
        ['annotator-action-draw']?: (
            props: VueUiAnnotatorActionDrawSlotProps,
        ) => VNodeChild;
        ['annotator-action-undo']?: (
            props: VueUiAnnotatorActionUndoSlotProps,
        ) => VNodeChild;
        ['annotator-action-redo']?: (
            props: VueUiAnnotatorActionRedoSlotProps,
        ) => VNodeChild;
        ['annotator-action-delete']?: (
            props: VueUiAnnotatorActionDeleteSlotProps,
        ) => VNodeChild;
    };

    export type VueUiTreemapDatasetItem = {
        [key: string]: any;
        name: string;
        value: number;
        children?: VueUiTreemapDatasetItem[];
        parentId?: string;
        color?: string;
    };

    export type VueUiTreemapConfig = {
        devHints?: DevHints;
        skeletonConfig?: VueUiBuiltInSkeletonConfig<VueUiTreemapConfig> | null;
        skeletonDataset?: VueUiBuiltInSkeletonDataset<
            VueUiTreemapDatasetItem[]
        > | null;
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean;
        a11y?: A11YConfig;
        transitions?: ChartTransitions;
        events?: {
            datapointEnter?: VueUiTreemapEvent; // v3
            datapointLeave?: VueUiTreemapEvent; // v3
            datapointClick?: VueUiTreemapEvent; // v3
        };
        theme?: Theme;
        customPalette?: string[];
        userOptions?: ChartUserOptions<
            VueUiTreemapDatapoint[],
            VueUiTreemapConfig
        >;
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                height?: number;
                width?: number;
                padding?: ChartPadding;
                zoom?: {
                    show?: boolean;
                };
                layout?: {
                    sorted?: boolean;
                    rects?: {
                        stroke?: string;
                        strokeWidth?: number;
                        borderRadius?: number;
                        colorRatio?: number;
                        gradient?: {
                            show?: boolean;
                            intensity?: number;
                        };
                        selected?: {
                            stroke?: string;
                            strokeWidth?: number;
                            unselectedOpacity?: number;
                        };
                        group?: {
                            stroke?: string;
                            strokeWidth?: number;
                            useSeriesBackgroundColor?: boolean;
                            backgroundLighterRatio?: number;
                            label?: {
                                adaptColorToBackground?: boolean;
                                color?: string;
                            };
                        };
                    };
                    labels?: {
                        showDefaultLabels?: boolean;
                        fontSize?: number;
                        fontSizeZoomFactor?: number;
                        minFontSize?: number;
                        hideUnderProportion?: number;
                        prefix?: string;
                        suffix?: string;
                        rounding?: number;
                        formatter?: Formatter;
                        name?: {
                            show?: boolean;
                            bold?: boolean;
                        };
                        value?: {
                            show?: boolean;
                            bold?: boolean;
                        };
                    };
                };
                legend?: ChartBaseLegend & {
                    backgroundColor?: string;
                    roundingValue?: number;
                    roundingPercentage?: number;
                    showValue?: boolean;
                    showPercentage?: boolean;
                    position?: 'bottom' | 'top';
                };
                title?: ChartTitle;
                tooltip?: ChartTooltip & {
                    roundingValue?: number;
                    customFormat?:
                        | null
                        | ((
                              params: VueUiTooltipParams<
                                  VueUiTreemapDatapoint,
                                  VueUiTreemapSeriesItem[],
                                  VueUiTreemapConfig
                              >,
                          ) => string);
                };
            };
        };
        table?: {
            show?: boolean;
            useDialog?: boolean;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
    };

    export type VueUiTreemapDatapoint = {
        [key: string]: any;
        children?: VueUiTreemapDatapoint[];
        color: string;
        depth: number;
        id: string;
        isVisibleNode: boolean;
        name: string;
        normalizedValue: number;
        parentId?: string | null;
        proportion: number;
        showLabel: boolean;
        sourceColor: string | null;
        value: number;
        x0: number;
        x1: number;
        y0: number;
        y1: number;
    };

    export type VueUiTreemapSeriesItem = {
        children?: VueUiTreemapSeriesItem[];
        color?: string;
        id?: string;
        name?: string;
        value?: string;
        sourceColor?: string;
    };

    export type VueUiTreemapExpose = {
        getData(): Promise<Array<VueUiTreemapDatapoint>>;
        getImage(options?: { scale?: number }): GetImagePromise;
        generateCsv(): void;
        generateImage(): void;
        generateSvg(): void;
        generatePdf(): void;
        toggleTable(): void;
        toggleTooltip(): void;
        toggleAnnotator(): void;
        toggleFullscreen(): void;
        showSeries(name: string): void;
        hideSeries(name: string): void;
        toggleZoom(): void;
        resetZoom(): void;
    };

    export type VueUiTreemapBreadcrumbLabelSlotProps = {
        crumb: { id: null; label: string };
        isFocus: boolean;
        isRoot: boolean;
    };

    export type VueUiTreemapRectSlotProps = {
        fontSize: number;
        isZoom: boolean;
        key: number;
        rect: VueUiTreemapDatapoint;
        shouldShow: boolean;
        textColor: string;
    };

    export type VueUiTreemapSvgSlotProps = {
        svg: {
            left: number;
            top: number;
            right: number;
            bottom: number;
            width: number;
            height: number;
            vbWidth: number;
            vbHeight: number;
            offsetY: number;
        };
        isPrintingImg: boolean;
        isPrintingSvg: boolean;
        isZoom: boolean;
        rect: VueUiTreemapDatapoint | null;
        config: VueUiTreemapConfig;
    };

    export type VueUiTreemapLegendItem = {
        children: VueUiTreemapSeriesItem[];
        color: string;
        display: string;
        id: string;
        isSegregated: boolean;
        name: string;
        opacity: number;
        proportion: number;
        segregate: () => void;
        shape: Shape;
        sourceColor: null;
        value: number;
    };

    export type VueUiTreemapLegendSlotProps = {
        legend: VueUiTreemapLegendItem[];
    };

    export type VueUiTooltipSlotProps = {
        config: VueUiTreemapConfig;
        datapoint: VueUiTreemapDatapoint;
        series: VueUiTreemapSeriesItem[];
        seriesIndex: number;
    };

    export type VueUiTreemapOptionZoomSlotProps = {
        toggleZoom: () => void;
        isZoomLocked: boolean;
    };

    export type VueUiTreemapProps = {
        config?: VueUiTreemapConfig;
        dataset: VueUiTreemapDatasetItem[];
    };

    export type VueUiTreemapEmitSelectLegend = VueUiTreemapSeriesItem[];

    export type VueUiTreemapEmitSelectDatapoint = VueUiTreemapDatapoint;

    export type VueUiTreemapEmitCopyAlt = {
        config: VueUiTreemapConfig;
        dataset: VueUiTreemapDatapoint[];
    };

    export type VueUiTreemapEmits = {
        selectLegend: (payload: VueUiTreemapEmitSelectLegend) => void;
        selectDatapoint: (payload: VueUiTreemapEmitSelectDatapoint) => void;
        copyAlt: (payload: VueUiTreemapEmitCopyAlt) => void;
    };

    const VueUiTreemapBase: DefineComponent<
        VueUiTreemapProps,
        {},
        {},
        {},
        {},
        {},
        {},
        VueUiTreemapEmits
    >;

    export const VueUiTreemap: typeof VueUiTreemapBase & {
        new (): VueUiTreemapExpose & {
            $slots: CommonAnnotatorSlots & {
                ['custom-menu-before']?: () => VNodeChild;
                ['custom-menu-after']?: () => VNodeChild;
                menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild;
                optionTooltip?: () => VNodeChild;
                optionPdf?: () => VNodeChild;
                optionCsv?: () => VNodeChild;
                optionImg?: () => VNodeChild;
                optionSvg?: () => VNodeChild;
                optionTable?: () => VNodeChild;
                optionZoom?: (
                    props: VueUiTreemapOptionZoomSlotProps,
                ) => VNodeChild;
                optionFullscreen?: (
                    props: VueUiOptionFullscreenSlotProps,
                ) => VNodeChild;
                optionAltCopy?: () => VNodeChild;
                optionAnnotator?: (
                    props: VueUiOptionAnnotatorSlotProps,
                ) => VNodeChild;
                ['breadcrumb-label']?: (
                    props: VueUiTreemapBreadcrumbLabelSlotProps,
                ) => VNodeChild;
                ['breadcrumb-arrow']?: () => VNodeChild;
                rect?: (props: VueUiTreemapRectSlotProps) => VNodeChild;
                svg?: (props: VueUiTreemapSvgSlotProps) => VNodeChild;
                hint?: (
                    props: VueUiKeyboardNavigationHintSlotProps,
                ) => VNodeChild;
                watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
                source?: () => VNodeChild;
                skeleton?: () => VNodeChild;
                legend?: (props: VueUiTreemapLegendSlotProps) => VNodeChild;
                ['tooltip-before']?: (
                    props: VueUiTooltipSlotProps,
                ) => VNodeChild;
                tooltip?: (props: VueUiTooltipSlotProps) => VNodeChild;
                ['tooltip-after']?: (
                    props: VueUiTooltipSlotProps,
                ) => VNodeChild;
            };
        };
    };

    export type VueUiKpiConfig = {
        devHints?: DevHints;
        debug?: boolean;
        animationFrames?: number;
        animationValueStart?: number;
        backgroundColor?: string;
        fontFamily?: string;
        layoutClass?: string;
        layoutCss?: string;
        prefix?: string;
        suffix?: string;
        title?: string;
        titleBold?: boolean;
        titleColor?: string;
        titleClass?: string;
        titleCss?: string;
        titleFontSize?: number;
        useAnimation?: boolean;
        valueBold?: boolean;
        valueColor?: string;
        valueClass?: string;
        valueCss?: string;
        valueFontSize?: number;
        valueRounding?: number;
        formatter?: Formatter;
        analogDigits?: {
            show?: boolean;
            height?: number;
            color?: string;
            skeletonColor?: string;
        };
    };

    export type VueUiKpiCommentSlotProps = {
        comment: number;
    };

    export type VueUiKpiProps = {
        dataset: number;
        config?: VueUiKpiConfig;
    };

    const VueUiKpiBase: DefineComponent<VueUiKpiProps>;

    export const VueUiKpi: typeof VueUiKpiBase & {
        new (): {
            $slots: {
                title?: (props: VueUiKpiCommentSlotProps) => VNodeChild;
                ['comment-before']?: (
                    props: VueUiKpiCommentSlotProps,
                ) => VNodeChild;
                ['value']?: (props: VueUiKpiCommentSlotProps) => VNodeChild;
                ['comment-after']?: (
                    props: VueUiKpiCommentSlotProps,
                ) => VNodeChild;
            };
        };
    };

    export type VueUiGalaxyDatasetItem = VueUiDonutDatasetItem;

    export type VueUiGalaxyConfig = {
        devHints?: DevHints;
        skeletonDataset?: VueUiBuiltInSkeletonDataset<
            VueUiGalaxyDatasetItem[]
        > | null;
        skeletonConfig?: VueUiBuiltInSkeletonConfig<VueUiGalaxyConfig> | null;
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        a11y?: A11YConfig;
        transitions?: ChartTransitions;
        events?: {
            // v3
            datapointEnter?: VueUiGalaxyEvent; // v3
            datapointLeave?: VueUiGalaxyEvent; // v3
            datapointClick?: VueUiGalaxyEvent; // v3
        };
        theme?: Theme;
        customPalette?: string[];
        useCssAnimation?: boolean;
        useBlurOnHover?: boolean;
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                layout?: {
                    arcs?: {
                        strokeWidth?: number;
                        borderWidth?: number;
                        offsetX?: number;
                        offsetY?: number;
                        hoverEffect?: {
                            show?: boolean;
                            multiplicator?: number;
                        };
                        gradient?: {
                            show?: boolean;
                            intensity?: number;
                            color?: string;
                        };
                    };
                    labels?: {
                        dataLabels?: {
                            showValueFirst?: boolean;
                            usePercentageParens?: boolean;
                            useValueParens?: boolean;
                            prefix?: string;
                            suffix?: string;
                            formatter?: Formatter;
                        };
                    };
                };
                legend?: ChartBaseLegend & {
                    backgroundColor?: string;
                    roundingValue?: number;
                    roundingPercentage?: number;
                    showValue?: boolean;
                    showPercentage?: boolean;
                    position?: 'bottom' | 'top';
                };
                title?: ChartTitle;
                tooltip?: ChartTooltip & {
                    showValue?: boolean;
                    showPercentage: boolean;
                    roundingValue?: number;
                    roundingPercentage?: number;
                    customFormat?:
                        | null
                        | ((
                              params: VueUiTooltipParams<
                                  VueUiGalaxyDatapoint,
                                  VueUiGalaxySeriesItem[],
                                  VueUiGalaxyConfig
                              >,
                          ) => string);
                };
            };
        };
        table?: {
            show?: boolean;
            useDialog?: boolean;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
        userOptions?: ChartUserOptions<
            VueUiGalaxyFormattedDatapoint[],
            VueUiGalaxyConfig
        >;
    };

    export type VueUiGalaxyDatapoint = VueUiGalaxyDatasetItem & {
        color: string;
        id: string;
        path: string;
        points: number;
        proportion: number;
        seriesIndex: number;
        value: number;
        absoluteIndex: number;
    };

    export type VueUiGalaxySeriesItem = VueUiGalaxyDatasetItem & {
        id: string;
        color: string;
        seriesIndex: number;
        value: number;
    };

    export type VueUiGalaxyExpose = {
        getData(): Promise<
            Array<{
                name: string;
                color: string;
                value: number;
            }>
        >;
        getImage(options?: { scale?: number }): GetImagePromise;
        generateCsv(): void;
        generateImage(): void;
        generatePdf(): void;
        generateSvg(): void;
        toggleTable(): void;
        toggleTooltip(): void;
        toggleAnnotator(): void;
        toggleFullscreen(): void;
        showSeries(name: string): void;
        hideSeries(name: string): void;
    };

    export type VueUiGalaxyFormattedDatapoint = {
        absoluteIndex: number;
        absoluteValues: Array<number | null>;
        color: string;
        id: string;
        name: string;
        value: number;
    };

    export type VueUiGalaxyLegendItem = VueUiGalaxyFormattedDatapoint & {
        display: string;
        isSegregated: boolean;
        opacity: number;
        proportion: number;
        segregate: () => void;
        shape: Shape;
    };

    export type VueUiGalaxyDatapointTooltip = Omit<
        VueUiGalaxyLegendItem,
        'isSegregated' | 'segregate'
    > & {
        path: string;
        points: number;
    };

    export type VueUiGalaxyTooltipSlotProps = {
        datapoint: VueUiGalaxyDatapointTooltip;
        series: VueUiGalaxyFormattedDatapoint[];
        seriesIndex: number;
        config: VueUiGalaxyConfig;
    };

    export type VueUiGalaxyLegendSlotProps = {
        legend: VueUiGalaxyLegendItem[];
    };

    export type VueUiGalaxySvgSlotProps = {
        svg: {
            height: number;
            isPrintingImg: boolean;
            isPrintingSvg: boolean;
            viewBox: string;
            width: number;
        };
    };

    export type VueUiGalaxyProps = {
        config?: VueUiGalaxyConfig;
        dataset: VueUiGalaxyDatasetItem[];
    };

    export type VueUiGalaxyEmitSelectLegend = Array<{
        name: string;
        color: string;
        value: number;
    }>;

    export type VueUiGalaxyEmitSelectDatapoint =
        VueUiGalaxyFormattedDatapoint & {
            path: string;
            points: number;
            proportion: number;
            seriesIndex: number;
        };

    export type VueUiGalaxyEmitCopyAlt = {
        config: VueUiGalaxyConfig;
        dataset: VueUiGalaxyFormattedDatapoint[];
    };

    export type VueUiGalaxyEmits = {
        selectLegend: (payload: VueUiGalaxyEmitSelectLegend) => void;
        selectDatapoint: (payload: VueUiGalaxyEmitSelectDatapoint) => void;
        copyAlt: (payload: VueUiGalaxyEmitCopyAlt) => void;
    };

    const VueUiGalaxyBase: DefineComponent<
        VueUiGalaxyProps,
        {},
        {},
        {},
        {},
        {},
        {},
        VueUiGalaxyEmits
    >;

    export const VueUiGalaxy: typeof VueUiGalaxyBase & {
        new (): VueUiGalaxyExpose & {
            $slots: CommonAnnotatorSlots & {
                ['custom-menu-before']?: () => VNodeChild;
                ['custom-menu-after']?: () => VNodeChild;
                menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild;
                optionTooltip?: () => VNodeChild;
                optionPdf?: () => VNodeChild;
                optionCsv?: () => VNodeChild;
                optionImg?: () => VNodeChild;
                optionSvg?: () => VNodeChild;
                optionTable?: () => VNodeChild;
                optionFullscreen?: (
                    props: VueUiOptionFullscreenSlotProps,
                ) => VNodeChild;
                optionAnnotator?: (
                    props: VueUiOptionAnnotatorSlotProps,
                ) => VNodeChild;
                optionAltCopy?: () => VNodeChild;
                ['chart-background']?: () => VNodeChild;
                svg?: (props: VueUiGalaxySvgSlotProps) => VNodeChild;
                hint?: (
                    props: VueUiKeyboardNavigationHintSlotProps,
                ) => VNodeChild;
                watermark?: (props: VueUiWatermarkSlotProps) => VNodeChild;
                legend?: (props: VueUiGalaxyLegendSlotProps) => VNodeChild;
                source?: () => VNodeChild;
                ['tooltip-before']?: (
                    props: VueUiGalaxyTooltipSlotProps,
                ) => VNodeChild;
                tooltip?: (props: VueUiGalaxyTooltipSlotProps) => VNodeChild;
                ['tooltip-after']?: (
                    props: VueUiGalaxyTooltipSlotProps,
                ) => VNodeChild;
                skeleton?: () => VNodeChild;
            };
        };
    };

    export type VueUiSparkgaugeDataset = {
        value: number;
        min: number;
        max: number;
        title?: string;
    };

    export type VueUiSparkgaugeConfig = {
        devHints?: DevHints;
        skeletonConfig?: VueUiBuiltInSkeletonConfig<VueUiSparkgaugeConfig> | null;
        skeletonDataset?: VueUiBuiltInSkeletonDataset<VueUiSparkgaugeDataset> | null;
        debug?: boolean; // v3
        loading?: boolean; // v3
        theme?: Theme;
        style?: {
            fontFamily?: string;
            background?: string;
            height?: number;
            basePosition?: number;
            animation?: {
                show?: boolean;
                speedMs?: number;
            };
            title?: {
                show?: boolean;
                fontSize?: number;
                position?: 'top' | 'bottom';
                textAlign?: TextAlign;
                bold?: boolean;
                color?: string;
            };
            dataLabel?: {
                fontSize?: number;
                autoColor?: boolean;
                color?: string;
                offsetY?: number;
                bold?: boolean;
                rounding?: number;
                prefix?: string;
                suffix?: string;
                formatter?: Formatter;
            };
            colors?: {
                min?: string;
                max?: string;
                showGradient?: boolean;
            };
            track?: {
                autoColor?: boolean;
                color?: string;
                strokeLinecap?: 'round' | 'square' | 'butt';
            };
            gutter?: {
                color?: string;
                strokeLinecap?: 'round' | 'square' | 'butt';
            };
        };
    };

    export type VueUiSparkgaugeProps = {
        dataset: VueUiSparkgaugeDataset;
        config?: VueUiSparkgaugeConfig;
    };

    const VueUiSparkgaugeBase: DefineComponent<VueUiSparkgaugeProps>;

    export const VueUiSparkgauge: typeof VueUiSparkgaugeBase & {
        new (): {
            $slots: {
                ['chart-background']?: () => VNodeChild;
                source?: () => VNodeChild;
                skeleton?: () => VNodeChild;
            };
        };
    };

    export type VueUiMiniLoaderConfigType = {
        gutterColor?: string;
        gutterOpacity?: number;
        gutterBlur?: number;
        trackHueRotate?: number;
        trackBlur?: number;
        trackColor?: string;
    };

    export type VueUiMiniLoaderConfig = {
        devHints?: DevHints;
        type?: 'line' | 'bar' | 'onion';
        onion?: VueUiMiniLoaderConfigType;
        line?: VueUiMiniLoaderConfigType;
        bar?: VueUiMiniLoaderConfigType;
    };

    export const VueUiMiniLoader: DefineComponent<{
        config?: VueUiMiniLoaderConfig;
    }>;

    export const Arrow: DefineComponent<{
        markerEnd?: boolean;
        markerSize?: number;
        markerStart?: boolean;
        stroke?: string;
        strokeDasharray?: number;
        strokeLinecap?: 'round' | 'butt' | 'square';
        strokeWidth?: number;
        x1: number;
        x2: number;
        y1: number;
        y2: number;
    }>;

    export type VueUiTableSparklineDatasetItem = {
        name: string;
        values: Array<number | null>;
        color?: string;
    };

    export type VueUiTableSparklineConfig = {
        devHints?: DevHints;
        theme?: Theme;
        customPalette?: string[];
        responsiveBreakpoint?: number;
        showAverage?: boolean;
        showMedian?: boolean;
        showTotal?: boolean;
        roundingAverage?: number;
        roundingMedian?: number;
        roundingValues?: number;
        roundingTotal?: number;
        prefix?: string;
        suffix?: string;
        showSparklines?: boolean;
        fontFamily?: string;
        colNames?: string[];
        sortedDataColumnIndices?: number[];
        sortedSeriesName?: boolean;
        sortedSum?: boolean;
        sortedAverage?: boolean;
        sortedMedian?: boolean;
        resetSortOnClickOutside?: boolean;
        formatter?: Formatter;
        sparkline?: {
            useGradient?: boolean;
            showArea?: boolean;
            strokeWidth?: number;
            type?: 'line' | 'bar';
            smooth?: boolean;
            cutNullValues?: boolean;
            dimensions?: {
                width?: number;
                heightRatio?: number;
            };
            animation?: {
                show?: boolean;
                animationFrames?: number;
            };
        };
        translations?: {
            serie?: string;
            total?: string;
            average?: string;
            median?: string;
            chart?: string;
        };
        title?: {
            backgroundColor?: string;
            text?: string;
            fontSize?: number;
            color?: string;
            bold?: boolean;
            textAlign?: TextAlign;
            subtitle?: {
                text?: string;
                color?: string;
                fontSize?: number;
                bold?: boolean;
            };
        };
        thead?: ChartTableCell & {
            fontSize?: number;
            textAlign?: TextAlign;
            bold?: boolean;
        };
        tbody?: ChartTableCell & {
            fontSize?: number;
            textAlign?: TextAlign;
            bold?: boolean;
            showColorMarker?: boolean;
            selectedColor?: {
                useSerieColor?: boolean;
                fallback?: string;
            };
        };
        userOptions?: ChartUserOptions<
            VueUiTableSparklineFormattedDatasetItem[],
            VueUiTableSparklineConfig
        >;
    };

    export type VueUiTableSparklineFormattedDatasetItem = {
        average: number;
        color: string;
        median: number;
        name: string;
        sparklineDataset: Array<{ period: string; value: number | null }>;
        sum: number;
        values: Array<number | null>;
    };

    export type VueUiTableSparklineProps = {
        dataset: VueUiTableSparklineDatasetItem[];
        config: VueUiTableSparklineConfig;
    };

    export type VueUiTableSparklineEmitCopyAlt = {
        config: VueUiTableSparklineConfig;
        dataset: VueUiTableSparklineFormattedDatasetItem[];
    };

    export type VueUiTableSparklineEmits = {
        copyAlt: (payload: VueUiTableSparklineEmitCopyAlt) => void;
    };

    const VueUiTableSparklineBase: DefineComponent<
        VueUiTableSparklineProps,
        {},
        {},
        {},
        {},
        {},
        {},
        VueUiTableSparklineEmits
    >;

    export const VueUiTableSparkline: typeof VueUiTableSparklineBase & {
        new (): {
            $slots: {
                ['custom-menu-before']?: () => VNodeChild;
                ['custom-menu-after']?: () => VNodeChild;
                menuIcon?: (props: VueUiMenuIconSlotProps) => VNodeChild;
                optionPdf?: () => VNodeChild;
                optionCsv?: () => VNodeChild;
                optionImg?: () => VNodeChild;
                optionFullscreen?: (
                    props: VueUiOptionFullscreenSlotProps,
                ) => VNodeChild;
                optionAltCopy?: () => VNodeChild;
                source?: () => VNodeChild;
            };
        };
    };

    export type VueUiMoleculeDatasetNode = {
        name: string;
        details?: string;
        nodes?: VueUiMoleculeDatasetNode[];
        color?: string;
    };

    export type VueUiMoleculeConfig = {
        devHints?: DevHints;
        skeletonDataset?: VueUiBuiltInSkeletonDataset<
            VueUiMoleculeDatasetNode[]
        > | null;
        skeletonConfig?: VueUiBuiltInSkeletonConfig<VueUiMoleculeConfig> | null;
        debug?: boolean; // v3
        loading?: boolean; // v3
        events?: {
            datapointEnter?: VueUiMoleculeEvent; // v3
            datapointLeave?: VueUiMoleculeEvent; // v3
            datapointClick?: VueUiMoleculeEvent; // v3
        };
        theme?: Theme;
        customPalette?: string[];
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                nodes?: {
                    stroke?: string;
                    strokeHovered?: string;
                };
                links?: {
                    stroke?: string;
                    strokeWidth?: number;
                    useChildColor?: boolean;
                };
                title?: ChartTitle;
                tooltip?: ChartTooltip & {
                    customFormat?:
                        | null
                        | ((
                              params: VueUiTooltipParams<
                                  VueUiMoleculeDatapoint,
                                  VueUiMoleculeDatapoint[],
                                  VueUiMoleculeConfig
                              >,
                          ) => string);
                };
                zoom?: {
                    show?: boolean;
                    speed?: number;
                };
            };
        };
        table?: {
            show?: boolean;
            useDialog?: boolean;
            responsiveBreakpoint?: number;
            th?: ChartTableCell;
            td?: ChartTableCell;
            translations?: {
                nodeName?: string;
                details?: string;
                ancestor?: string;
            };
        };
        userOptions?: ChartUserOptions<
            VueUiMoleculeDatapoint[],
            VueUiMoleculeConfig
        >;
    };

    export type VueUiMoleculeDatapoint = {
        circleRadius: number;
        color: string;
        name: string;
        details?: string;
        nodes?: VueUiMoleculeDatapoint[];
        ancestor?: VueUiMol