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 { Ref, WritableComputedRef, DefineComponent } from "vue";

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

    export const VueDataUi: DefineComponent<{
        dataset?:
        | 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;
        config?:
        | 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;
    }>;

    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 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 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 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 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 ChartComments = {
        show?: boolean;
        showInTooltip?: boolean;
        width?: number;
        offsetY?: number;
        offsetX?: number;
    };

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

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

    export type ChartUserOptions = {
        show?: boolean;
        showOnChartHover?: boolean;
        keepStateOnChartLeave?: boolean;
        position?: "left" | "right";
        buttons?: {
            animation?: boolean;
            annotator?: boolean;
            csv?: boolean;
            fullscreen?: boolean;
            img?: boolean;
            labels?: boolean;
            pdf?: boolean;
            sort?: boolean;
            stack?: boolean;
            table?: boolean;
            tooltip?: 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;
        };
        callbacks?: {
            animation?: null | (() => void);
            annotator?: null | (() => void);
            csv?: null | ((csvStr?: string) => void);
            fullscreen?: null | (() => void);
            img?: null | (({ domElement, imageUri, base64 }: { domElement?: string; imageUri?: string; base64?: string} = {}) => void);
            labels?: null | (() => void);
            pdf?: null | (({ domElement, imageUri, base64 }: { domElement?: string; imageUri?: string; base64?: string} = {}) => void);
            sort?: null | (() => void);
            stack?: null | (() => void);
            table?: null | (() => void);
            tooltip?: null | (() => void);
        };
        // old html2canvas options
        print?: {
            allowTaint?: boolean;
            backgroundColor?: string;
            useCORS?: boolean;
            onclone?: null | ((doc: Document) => void);
            scale?: number;
            logging?: boolean;
        };
    };

    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;
        offsetY?: number;
        smooth?: boolean;
        backdropFilter?: boolean;
    };

    export type ZoomMinimap = {
        show?: boolean;
        smooth?: boolean;
        selectedColor?: string;
        selectedColorOpacity?: number;
        lineColor?: string;
        selectionRadius?: number;
        indicatorColor?: string;
        verticalHandles?: boolean;
    };

    export type ChartZoom = {
        show?: boolean;
        color?: string;
        highlightColor?: string;
        fontSize?: number;
        useResetSlot?: boolean;
        minimap?: ZoomMinimap;
        startIndex?: number | null;
        endIndex?: number | null;
        enableRangeHandles?: boolean;
        enableSelectionDrag?: boolean;
    };

    export type Theme =
        | ""
        | "zen"
        | "hack"
        | "concrete"
        | "celebration"
        | "celebrationNight";
    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 = "ar" | "be-cyrl" | "be-latn" | "ca" | "cs" | "da" | "de" | "el" | "en" | "es" | "et" | "fa" | "fi" | "fr" | "he" | "hi" | "hr" | "hu" | "hy" | "id" | "it" | "ja" | "ka" | "ko" | "lt" | "lv" | "ms" | "nb" | "nl" | "pl" | "pt-br" | "pt" | "rs" | "ru" | "se" | "sk" | "sl" | "sq" | "th" | "tr" | "ua" | "vi" | "zh-cn" | "zh-tw";

    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 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 VueUiTreemapDatasetItem = {
        name: string;
        value: number;
        children?: VueUiTreemapDatasetItem[];
        parentId?: string;
        color?: string;
    };

    export type VueUiTreemapConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean;
        events?: {
            datapointEnter?: VueUiTreemapEvent; // v3
            datapointLeave?: VueUiTreemapEvent; // v3
            datapointClick?: VueUiTreemapEvent; // v3
        };
        theme?: Theme;
        customPalette?: string[];
        userOptions?: ChartUserOptions;
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                height?: number;
                width?: number;
                padding?: ChartPadding;
                layout?: {
                    sorted?: boolean;
                    rects?: {
                        stroke?: string;
                        strokeWidth?: number;
                        borderRadius?: number;
                        colorRatio?: number;
                        gradient?: {
                            show?: boolean;
                            intensity?: number;
                        };
                        selected?: {
                            stroke?: string;
                            strokeWidth?: number;
                            unselectedOpacity?: number;
                        };
                    };
                    labels?: {
                        showDefaultLabels?: boolean;
                        fontSize?: number;
                        minFontSize?: number;
                        hideUnderProportion?: number;
                        prefix?: string;
                        suffix?: string;
                        rounding?: number;
                        formatter?: Formatter;
                    };
                };
                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;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
    };

    export type VueUiTreemapDatapoint = {
        children?: VueUiTreemapDatapoint[];
        color: string;
        id: string;
        name: string;
        normalizedValue: number;
        parentName?: string;
        parentId?: string;
        proportion: number;
        value: number;
        x0: number;
        x1: number;
        y0: number;
        y1: number;
    };

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

    export type VueUiTreemapExpose = {
        getData(): Promise<Array<VueUiTreemapDatapoint>>
        getImage(options?: { scale?: number }): GetImagePromise
        generateCsv(): void
        generateImage(): void
        generatePdf(): void
        toggleTable(): void
        toggleTooltip(): void
        toggleAnnotator(): void
        toggleFullscreen(): void
    }

    export const VueUiTreemap: DefineComponent<
        {
            config?: VueUiTreemapConfig;
            dataset: VueUiTreemapDatasetItem[];
        },
        VueUiTreemapExpose
    >;

    export type VueUiKpiConfig = {
        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 const VueUiKpi: DefineComponent<{
        dataset: number;
        config?: VueUiKpiConfig;
    }>;

    export type VueUiGalaxyDatasetItem = VueUiDonutDatasetItem;

    export type VueUiGalaxyConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        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?: {
                            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;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
        userOptions?: ChartUserOptions;
    };

    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
        toggleTable(): void
        toggleTooltip(): void
        toggleAnnotator(): void
        toggleFullscreen(): void
    }

    export const VueUiGalaxy: DefineComponent<
        {
            config?: VueUiGalaxyConfig;
            dataset: VueUiGalaxyDatasetItem[];
        },
        VueUiGalaxyExpose
    >;

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

    export type VueUiSparkgaugeConfig = {
        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 const VueUiSparkgauge: DefineComponent<{
        dataset: VueUiSparkgaugeDataset;
        config?: VueUiSparkgaugeConfig;
    }>;

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

    export type VueUiMiniLoaderConfig = {
        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: number[];
        color?: string;
    };

    export type VueUiTableSparklineConfig = {
        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;
            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;
    };

    export const VueUiTableSparkline: DefineComponent<{
        dataset: VueUiTableSparklineDatasetItem[];
        config: VueUiTableSparklineConfig;
    }>;

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

    export type VueUiMoleculeConfig = {
        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;
                };
                title?: ChartTitle;
                tooltip?: ChartTooltip & {
                    customFormat?:
                    | null
                    | ((
                        params: VueUiTooltipParams<
                            VueUiMoleculeDatapoint,
                            VueUiMoleculeDatapoint[],
                            VueUiMoleculeConfig
                        >
                    ) => string);
                };
                zoom?: {
                    speed?: number;
                };
            };
        };
        table?: {
            show?: boolean;
            responsiveBreakpoint?: number;
            th?: ChartTableCell;
            td?: ChartTableCell;
            translations?: {
                nodeName?: string;
                details?: string;
                ancestor?: string;
            };
        };
        userOptions?: ChartUserOptions;
    };

    export type VueUiMoleculeDatapoint = {
        circleRadius: number;
        color: string;
        name: string;
        details?: string;
        nodes?: VueUiMoleculeDatapoint;
        ancestor?: VueUiMoleculeDatapoint;
        polygonPath: {
            coordinates: Array<{
                x: number;
                y: number;
            }>;
        };
        uid: string;
    };

    export type VueUiMoleculeExpose = {
        getData(): Promise<Array<VueUiMoleculeDatapoint>>
        getImage(options?: { scale?: number }): GetImagePromise
        generatePdf(): void
        generateCsv(): void
        generateImage(): void
        toggleTable(): void
        toggleTooltip(): void
        toggleLabels(): void
        toggleAnnotator(): void
        toggleFullscreen(): void
    }

    export const VueUiMolecule: DefineComponent<
        {
            dataset: VueUiMoleculeDatasetNode[];
            config?: VueUiMoleculeConfig;
        },
        VueUiMoleculeExpose
    >;

    export type VueUiDigitsConfig = {
        backgroundColor?: string;
        height?: string;
        width?: string;
        digits?: {
            color?: string;
            skeletonColor?: string;
        };
    };

    export const VueUiDigits: DefineComponent<{
        dataset: number;
        config?: VueUiDigitsConfig;
    }>;

    export type VueUi3dBarDatasetBreakdown = {
        name: string;
        value: number;
    };

    export type VueUi3dBarDataset = {
        percentage?: number;
        series?: Array<{
            name: string;
            value: number;
            color?: string;
            breakdown?: VueUi3dBarDatasetBreakdown[];
        }>;
    };

    export type VueUi3dBarDatapoint = {
        breakdown: null | Array<{
            name: string;
            value: number;
        }>;
        color: string;
        fill: Object; // Feeling too lazy to drill that one
        id: string;
        name: string;
        proportion: number;
        seriesIndex: number;
        value: number;
    }

    export type VueUi3dBarConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        events?: { // v3
            datapointEnter?: VueUi3dBarEvent; // v3
            datapointLeave?: VueUi3dBarEvent; // v3
            datapointClick?: VueUi3dBarEvent; // v3
        };
        useCssAnimation?: boolean; // v3
        theme?: Theme;
        customPalette?: string[];
        style?: {
            fontFamily?: string;
            shape?: "bar" | "tube";
            chart?: {
                animation?: {
                    use?: boolean;
                    speed?: number;
                    acceleration?: number;
                };
                backgroundColor?: string;
                color?: string;
                bar?: {
                    color?: string;
                    stroke?: string;
                    strokeWidth?: number;
                    shadeColor?: string;
                };
                box?: {
                    stroke?: string;
                    strokeWidth?: number;
                    strokeDasharray?: number;
                    dimensions?: {
                        width?: number;
                        height?: number;
                        top?: number;
                        bottom?: number;
                        left?: number;
                        right?: number;
                        perspective?: number;
                    };
                };
                title?: ChartTitle;
                legend?: {
                    showDefault?: boolean;
                    fontSize?: number;
                    color?: string;
                    bold?: boolean;
                    roundingValue?: number;
                    roundingPercentage?: number;
                    prefix?: string;
                    suffix?: string;
                    hideUnderPercentage?: number;
                };
                dataLabel?: {
                    show?: boolean;
                    bold?: boolean;
                    color?: string;
                    fontSize?: number;
                    rounding?: number;
                    formatter?: Formatter;
                };
            };
        };
        userOptions?: ChartUserOptions;
        table?: {
            show?: boolean;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
    };

    export type VueUi3dBarExpose = {
        getImage(options?: { scale?: number }): GetImagePromise
        generatePdf(): void
        generateCsv(): void
        generateImage(): void
        toggleTable(): void
        toggleAnnotator(): void
        toggleFullscreen(): void
    }

    export const VueUi3dBar: DefineComponent<
        {
            config?: VueUi3dBarConfig;
            dataset: VueUi3dBarDataset;
        },
        VueUi3dBarExpose
    >;

    export type VueUiMoodRadarDataset = {
        "1": number;
        "2": number;
        "3": number;
        "4": number;
        "5": number;
    };

    export type VueUiMoodRadarDatapoint = {
        index: number;
        key: "1" | "2" | "3" | "4" | "5";
        value: number;
        proportion: number;
        color: string;
    }

    export type VueUiMoodRadarConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        events?: {
            datapointEnter?: VueUiMoodRadarEvent; // v3
            datapointLeave?: VueUiMoodRadarEvent; // v3
            datapointClick?: VueUiMoodRadarEvent; // v3
        };
        theme?: Theme;
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                layout?: {
                    grid?: {
                        show?: boolean;
                        stroke?: string;
                        strokeWidth?: number;
                    };
                    outerPolygon?: {
                        stroke?: string;
                        strokeWidth?: number;
                    };
                    dataPolygon?: {
                        color?: string;
                        opacity?: number;
                        gradient?: {
                            show?: boolean;
                            intensity?: number;
                        };
                        stroke?: string;
                        strokeWidth?: number;
                    };
                    smileys?: {
                        strokeWidth?: number;
                        colors?: {
                            "1": string;
                            "2": string;
                            "3": string;
                            "4": string;
                            "5": string;
                        };
                    };
                    dataLabel?: {
                        color?: string;
                        roundingPercentage?: number;
                        roundingValue?: number;
                        bold?: boolean;
                        formatter?: Formatter;
                        prefix?: string;
                        suffix?: string;
                    };
                };
                title?: ChartTitle;
                legend?: ChartBaseLegend & {
                    backgroundColor?: string;
                    roundingPercentage?: number;
                    roundingValue?: number;
                    position?: 'bottom' | 'top';
                };
            };
        };
        table?: {
            show?: boolean;
            responsiveBreakpoint?: number;
            columnNames?: {
                series?: string;
                value?: string;
                percentage?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
        userOptions?: ChartUserOptions;
    };

    export type VueUiMoodRadarExpose = {
        getData(): Promise<Array<{
            color: string
            index: number
            key: string
            proportion: number
            value: number
        }>>
        getImage(options?: { scale?: number }): GetImagePromise
        generatePdf(): void
        generateCsv(): void
        generateImage(): void
        toggleTable(): void
        toggleAnnotator(): void
        toggleFullscreen(): void
    }

    export const VueUiMoodRadar: DefineComponent<
        {
            dataset: VueUiMoodRadarDataset;
            config?: VueUiMoodRadarConfig;
        },
        VueUiMoodRadarExpose
    >;

    export type VueUiIconName =
        | "accordion"
        | "annotator"
        | "annotatorDisabled"
        | "arrowBottom"
        | "arrowLeft"
        | "arrowRight"
        | "arrowTop"
        | "battery"
        | "boxes"
        | "carouselTable"
        | "chart3dBar"
        | "chartAgePyramid"
        | "chartBar"
        | "chartBullet"
        | "chartCandlestick"
        | "chartChestnut"
        | "chartCirclePack"
        | "chartCluster"
        | "chartDonut"
        | "chartDonutEvolution"
        | "chartDumbbell"
        | "chartFlow"
        | "chartFunnel"
        | "chartGalaxy"
        | "chartGauge"
        | "chartHeatmap"
        | "chartHistoryPlot"
        | "chartLine"
        | "chartMoodRadar"
        | "chartNestedDonuts"
        | "chartOnion"
        | "chartParallelCoordinatePlot"
        | "chartQuadrant"
        | "chartRadar"
        | "chartRelationCircle"
        | "chartRings"
        | "chartScatter"
        | "chartSparkHistogram"
        | "chartSparkStackbar"
        | "chartSparkbar"
        | "chartSparkline"
        | "chartStackbar"
        | "chartStripPlot"
        | "chartTable"
        | "chartTableSparkline"
        | "chartThermometer"
        | "chartTiremarks"
        | "chartVerticalBar"
        | "chartWaffle"
        | "chartWheel"
        | "chartWordCloud"
        | "circle"
        | "circleCancel"
        | "circleCheck"
        | "circleExclamation"
        | "circleFill"
        | "circleQuestion"
        | "clipBoard"
        | "clipboardBar"
        | "clipboardDonut"
        | "clipboardLine"
        | "clipboardVariable"
        | "close"
        | "colorPicker"
        | "copy"
        | "copyLeft"
        | "csv"
        | "cursor"
        | "dashboard"
        | "diamond"
        | "diamondFill"
        | "digit0"
        | "digit1"
        | "digit2"
        | "digit3"
        | "digit4"
        | "digit5"
        | "digit6"
        | "digit7"
        | "digit8"
        | "digit9"
        | "excel"
        | "exitFullscreen"
        | "fullscreen"
        | "func"
        | "hexagon"
        | "hexagonFill"
        | "image"
        | "kpi"
        | "kpiBox"
        | "labelClose"
        | "labelOpen"
        | "lambda"
        | "lap"
        | "legend"
        | "menu"
        | "moodEmbarrassed"
        | "moodFlat"
        | "moodHappy"
        | "moodLaughing"
        | "moodNeutral"
        | "moodSad"
        | "moodSurprised"
        | "moodWink"
        | "mu"
        | "numbers"
        | "palette"
        | "pause"
        | "pdf"
        | "pentagon"
        | "pentagonFill"
        | "people"
        | "play"
        | "ratio"
        | "refresh"
        | "restart"
        | "screenshot"
        | "settings"
        | "sigma"
        | "skeleton"
        | "smiley"
        | "sort"
        | "spin"
        | "square"
        | "squareFill"
        | "stack"
        | "star"
        | "starFace"
        | "starFill"
        | "stop"
        | "tableClose"
        | "tableOpen"
        | "tooltip"
        | "tooltipDisabled"
        | "trash"
        | "trend"
        | "trendDown"
        | "trendUp"
        | "triangle"
        | "triangleFill"
        | "unstack"
        | "vueDataUi"
        | "zoomMinus"
        | "zoomPlus"
        | "home"
        | "homeFilled"
        | "icons"
        | "robot"
        | "hourglass"
        | "computer"
        | "htmlTag"
        | "curlyBrackets"
        | "curlySpread"
        | "text"
        | "world"
        | "eye"
        | "chartRidgeline"
        | "chartChord";

    export const VueUiIcon: DefineComponent<{
        name: VueUiIconName;
        stroke?: string;
        strokeWidth?: number;
        size?: number | string;
        isSpin?: boolean;
    }>;

    export type VueUiDonutEvolutionDatapoint = {
        activeRadius: number;
        donut: VueUiDonutDatapoint[];
        donutFocus: VueUiDonutDatapoint[];
        donutHover: VueUiDonutDatapoint[];
        hoverRadius: number;
        index: number;
        percentages: number[0];
        radius: number;
        subtotal: number;
        values: Array<number | null>;
        x: number;
        y: number;
    }

    export type VueUiDonutEvolutionConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        events?: { // v3
            datapointEnter?: VueUiDonutEvolutionEvent; // v3
            datapointLeave?: VueUiDonutEvolutionEvent; // v3
            datapointClick?: VueUiDonutEvolutionEvent; // v3
        };
        theme?: Theme;
        customPalette?: string[];
        style?: {
            fontFamily?: string;
            chart?: {
                backgroundColor?: string;
                color?: string;
                zoom?: ChartZoom;
                donuts?: {
                    hover?: {
                        hideLabelsUnderValue?: number;
                    };
                    /** Deprecated since v2.12.4. Use style.chart.dialog */
                    zoom?: {
                        /** Deprecated since v2.12.4. Use style.chart.dialog */
                        hideLabelsUnderValue?: number;
                    }
                };
                dialog?: {
                    show?: boolean;
                    backgroundColor?: string;
                    color?: string;
                    header?: {
                        backgroundColor?: string;
                        color?: string;
                    };
                    donutChart?: VueUiDonutConfig;
                };
                layout?: {
                    height?: number;
                    width?: number;
                    padding?: ChartPadding;
                    grid?: {
                        show?: boolean;
                        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;
                                fontSize?: number;
                                color?: string;
                                roundingValue?: number;
                                offsetX?: number;
                                bold?: boolean;
                                steps?: number;
                            };
                        };
                        xAxis?: {
                            dataLabels?: {
                                show?: boolean;
                                values?: Array<number | string>;
                                datetimeFormatter?: AxisDateFormatter;
                                fontSize?: number;
                                showOnlyFirstAndLast?: boolean;
                                color?: string;
                                rotation?: number;
                                autoRotate?: { // v3
                                    enable?: boolean; // v3
                                    angle?: number; // v3
                                };
                                offsetY?: number;
                            };
                        };
                    };
                    line?: {
                        show?: boolean;
                        stroke?: string;
                        strokeWidth?: number;
                    };
                    highlighter?: {
                        color?: string;
                        opacity?: number;
                    };
                    dataLabels?: {
                        show?: boolean;
                        fontSize?: number;
                        color?: string;
                        bold?: boolean;
                        rounding?: number;
                        prefix?: string;
                        suffix?: string;
                        offsetY?: number;
                        formatter?: Formatter;
                    };
                };
                title?: ChartTitle;
                legend?: ChartBaseLegend & {
                    backgroundColor?: string;
                    roundingPercentage?: number;
                    roundingValue?: number;
                    showValue?: boolean;
                    showPercentage?: boolean;
                    position?: 'bottom' | 'top';
                };
            };
        };
        table?: {
            show?: boolean;
            responsiveBreakpoint?: number;
            columnNames?: {
                period?: string;
                total?: string;
            };
            th?: ChartTableCell;
            td?: ChartTableCell & {
                roundingValue?: number;
                roundingPercentage?: number;
            };
        };
        userOptions?: ChartUserOptions;
    };

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

    export type VueUiDonutEvolutionExpose = {
        getData(): Promise<Array<{
            color: string
            length: number
            name: string
            uid: string
            values: Array<number | null>
        }>>
        getImage(options?: { scale?: number }): GetImagePromise
        generateCsv(): void
        generateImage(): void
        generatePdf(): void
        toggleAnnotator(): void
        toggleTable(): void
        toggleFullscreen(): void
    }

    export const VueUiDonutEvolution: DefineComponent<
        {
            config?: VueUiDonutEvolutionConfig;
            dataset: VueUiDonutEvolutionDatasetItem[];
        },
        VueUiDonutEvolutionExpose
    >;

    export type VueUiTiremarksConfig = {
        debug?: boolean; // v3
        loading?: boolean; // v3
        responsive?: boolean; // v3
        theme?: Theme;
        userOptions?: ChartUserOptions;
        style?: {
            fontFamily?: string;
            chart?: {
                width?: number; // v3
                height?: number; // v3
                backgroundColor?: string;
                color?: string;
                animation?: {
                    use?: boolean;
                    speed?: number;
                    acceleration?: number;
                };
                layout?: {
                    display?: "horizontal" | "vertical";
                    crescendo?: boolean;
                    curved?: boolean;
                    curveAngleX?: number;
                    curveAngleY?: number;
                    activeColor?: string;
                    inactiveColor?: string;
                    ticks?: {
                        gradient?: {
                            show?: boolean;
                            shiftHueIntensity?: number;
                        };
                    };
                };
                percentage?: {
                    show?: boolean;
                    useGradientColor?: boolean;
                    color?: string;
                    fontSize?: number;
                    bold?: boolean;
                    rounding?: number;
                    verticalPosition?: "bottom" | "top";
                    horizontalPosition?: "left" | "right";