x-next 1.7.0 → 1.8.0

package/dist/components/bar-chart/index.d.ts

@@ -0,0 +1,600 @@
+export declare const BarChart: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        categories: {
+            type: import('vue').PropType<Array<string | number>>;
+            default: () => never[];
+        };
+        series: {
+            required: boolean;
+            type: import('vue').PropType<import('./interface').BarChartSeries[]>;
+            default: () => never[];
+        };
+        stack: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        height: {
+            type: import('vue').PropType<number | string>;
+            default: number;
+        };
+        width: {
+            type: import('vue').PropType<number | string>;
+            default: string;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        barWidth: {
+            type: NumberConstructor;
+        };
+        barRadius: {
+            type: NumberConstructor;
+            default: number;
+        };
+        padding: {
+            default: string;
+            type: import('vue').PropType<string | number>;
+            validator(val: string | number): boolean;
+        };
+        grid: {
+            default: null;
+            type: import('vue').PropType<import('./interface').BarChartGridOptions>;
+        };
+        labels: {
+            default: null;
+            type: import('vue').PropType<import('./interface').BarChartLabelsOptions>;
+        };
+        tooltip: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        legend: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        valueFormatter: {
+            type: import('vue').PropType<(value: number) => string>;
+            default: (value: number) => string;
+        };
+        loading: {
+            type: import('vue').PropType<boolean | Record<string, unknown>>;
+            default: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+        };
+    }>> & Readonly<{
+        "onBar-click"?: ((data: import('./interface').BarChartClickData) => any) | undefined;
+        "onLegend-change"?: ((visibleIndexes: number[]) => any) | undefined;
+    }>, {
+        className: {
+            block: string;
+            element: (className: string) => string;
+            modifier: (className: string) => string;
+            is: (className: string) => string;
+        };
+        state: {
+            activeIndex: number | null;
+            keyboardActive: boolean;
+            hiddenIndexes: number[];
+            tooltipWidth: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        };
+        refs: {
+            root: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+            canvas: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+            tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        };
+        slots: Readonly<{
+            tooltip?: ((props: import('./interface').BarChartTooltipSlotProps) => unknown) | undefined;
+            legend?: ((props: {
+                series: import('./interface').BarChartSeries[];
+                hiddenIndexes: number[];
+            }) => unknown) | undefined;
+            bar?: ((props: {
+                seriesIndex: number;
+                index: number;
+                value: number;
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                color: string;
+            }) => unknown) | undefined;
+            empty?: (() => unknown) | undefined;
+        }>;
+        t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
+        fontSize: import('vue').ComputedRef<number>;
+        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+        yVisible: import('vue').ComputedRef<boolean>;
+        xVisible: import('vue').ComputedRef<boolean>;
+        showHorizontalLines: import('vue').ComputedRef<boolean>;
+        seriesList: import('vue').ComputedRef<import('./interface').BarChartSeries[]>;
+        visibleSeriesIndexes: import('vue').ComputedRef<number[]>;
+        categoryCount: import('vue').ComputedRef<number>;
+        hasData: import('vue').ComputedRef<boolean>;
+        plot: import('vue').ComputedRef<import('./helpers/layout').BarChartPlot>;
+        layout: import('vue').ComputedRef<import('./helpers/layout').BarChartLayout>;
+        axisTicks: import('vue').ComputedRef<{
+            y: number;
+            label: string;
+            isBaseline: boolean;
+        }[]>;
+        axisXLabels: import('vue').ComputedRef<{
+            x: number;
+            text: string;
+        }[]>;
+        visibleBarEntries: import('vue').ComputedRef<{
+            color: string;
+            index: number;
+            seriesIndex: number;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            path: string;
+        }[]>;
+        activeCategory: import('vue').ComputedRef<import('./interface').BarChartActiveData | null>;
+        tooltipSlotProps: import('vue').ComputedRef<import('./interface').BarChartTooltipSlotProps | null>;
+        tooltipEntries: import('vue').ComputedRef<{
+            key: number;
+            name: string;
+            value: string;
+            color: string;
+        }[]>;
+        tooltipTotal: import('vue').ComputedRef<{
+            label: string;
+            value: string;
+        } | null>;
+        tooltipStyle: import('vue').ComputedRef<Record<string, string>>;
+        legendItems: import('vue').ComputedRef<{
+            key: number;
+            name: string;
+            color: string;
+            hidden: boolean;
+        }[]>;
+        categoryLabel: (index: number) => string;
+        formatValue: import('vue').ComputedRef<(value: number) => string>;
+        liveText: import('vue').ComputedRef<string>;
+        handleMouseMove: (ev: MouseEvent) => void;
+        handleClick: (ev: MouseEvent) => void;
+        handleKeydown: (ev: KeyboardEvent) => void;
+        clearActive: () => void;
+        toggleSeries: (index: number) => void;
+        setTooltipElement: (el: HTMLDivElement | null) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        'bar-click': (data: import('./interface').BarChartClickData) => boolean;
+        'legend-change': (visibleIndexes: number[]) => boolean;
+    }, import('vue').PublicProps, {
+        loading: boolean | Record<string, unknown>;
+        legend: boolean;
+        height: string | number;
+        width: string | number;
+        grid: import('./interface').BarChartGridOptions;
+        padding: string | number;
+        tooltip: boolean;
+        categories: (string | number)[];
+        series: import('./interface').BarChartSeries[];
+        stack: boolean;
+        barRadius: number;
+        labels: import('./interface').BarChartLabelsOptions;
+        valueFormatter: (value: number) => string;
+    }, true, {}, import('vue').SlotsType<{
+        tooltip?: (props: import('./interface').BarChartTooltipSlotProps) => unknown;
+        legend?: (props: {
+            series: import('./interface').BarChartSeries[];
+            hiddenIndexes: number[];
+        }) => unknown;
+        bar?: (props: {
+            seriesIndex: number;
+            index: number;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            color: string;
+        }) => unknown;
+        empty?: () => unknown;
+    }>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        categories: {
+            type: import('vue').PropType<Array<string | number>>;
+            default: () => never[];
+        };
+        series: {
+            required: boolean;
+            type: import('vue').PropType<import('./interface').BarChartSeries[]>;
+            default: () => never[];
+        };
+        stack: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        height: {
+            type: import('vue').PropType<number | string>;
+            default: number;
+        };
+        width: {
+            type: import('vue').PropType<number | string>;
+            default: string;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        barWidth: {
+            type: NumberConstructor;
+        };
+        barRadius: {
+            type: NumberConstructor;
+            default: number;
+        };
+        padding: {
+            default: string;
+            type: import('vue').PropType<string | number>;
+            validator(val: string | number): boolean;
+        };
+        grid: {
+            default: null;
+            type: import('vue').PropType<import('./interface').BarChartGridOptions>;
+        };
+        labels: {
+            default: null;
+            type: import('vue').PropType<import('./interface').BarChartLabelsOptions>;
+        };
+        tooltip: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        legend: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        valueFormatter: {
+            type: import('vue').PropType<(value: number) => string>;
+            default: (value: number) => string;
+        };
+        loading: {
+            type: import('vue').PropType<boolean | Record<string, unknown>>;
+            default: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+        };
+    }>> & Readonly<{
+        "onBar-click"?: ((data: import('./interface').BarChartClickData) => any) | undefined;
+        "onLegend-change"?: ((visibleIndexes: number[]) => any) | undefined;
+    }>, {
+        className: {
+            block: string;
+            element: (className: string) => string;
+            modifier: (className: string) => string;
+            is: (className: string) => string;
+        };
+        state: {
+            activeIndex: number | null;
+            keyboardActive: boolean;
+            hiddenIndexes: number[];
+            tooltipWidth: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        };
+        refs: {
+            root: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+            canvas: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+            tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        };
+        slots: Readonly<{
+            tooltip?: ((props: import('./interface').BarChartTooltipSlotProps) => unknown) | undefined;
+            legend?: ((props: {
+                series: import('./interface').BarChartSeries[];
+                hiddenIndexes: number[];
+            }) => unknown) | undefined;
+            bar?: ((props: {
+                seriesIndex: number;
+                index: number;
+                value: number;
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                color: string;
+            }) => unknown) | undefined;
+            empty?: (() => unknown) | undefined;
+        }>;
+        t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
+        fontSize: import('vue').ComputedRef<number>;
+        labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+        yVisible: import('vue').ComputedRef<boolean>;
+        xVisible: import('vue').ComputedRef<boolean>;
+        showHorizontalLines: import('vue').ComputedRef<boolean>;
+        seriesList: import('vue').ComputedRef<import('./interface').BarChartSeries[]>;
+        visibleSeriesIndexes: import('vue').ComputedRef<number[]>;
+        categoryCount: import('vue').ComputedRef<number>;
+        hasData: import('vue').ComputedRef<boolean>;
+        plot: import('vue').ComputedRef<import('./helpers/layout').BarChartPlot>;
+        layout: import('vue').ComputedRef<import('./helpers/layout').BarChartLayout>;
+        axisTicks: import('vue').ComputedRef<{
+            y: number;
+            label: string;
+            isBaseline: boolean;
+        }[]>;
+        axisXLabels: import('vue').ComputedRef<{
+            x: number;
+            text: string;
+        }[]>;
+        visibleBarEntries: import('vue').ComputedRef<{
+            color: string;
+            index: number;
+            seriesIndex: number;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            path: string;
+        }[]>;
+        activeCategory: import('vue').ComputedRef<import('./interface').BarChartActiveData | null>;
+        tooltipSlotProps: import('vue').ComputedRef<import('./interface').BarChartTooltipSlotProps | null>;
+        tooltipEntries: import('vue').ComputedRef<{
+            key: number;
+            name: string;
+            value: string;
+            color: string;
+        }[]>;
+        tooltipTotal: import('vue').ComputedRef<{
+            label: string;
+            value: string;
+        } | null>;
+        tooltipStyle: import('vue').ComputedRef<Record<string, string>>;
+        legendItems: import('vue').ComputedRef<{
+            key: number;
+            name: string;
+            color: string;
+            hidden: boolean;
+        }[]>;
+        categoryLabel: (index: number) => string;
+        formatValue: import('vue').ComputedRef<(value: number) => string>;
+        liveText: import('vue').ComputedRef<string>;
+        handleMouseMove: (ev: MouseEvent) => void;
+        handleClick: (ev: MouseEvent) => void;
+        handleKeydown: (ev: KeyboardEvent) => void;
+        clearActive: () => void;
+        toggleSeries: (index: number) => void;
+        setTooltipElement: (el: HTMLDivElement | null) => void;
+    }, {}, {}, {}, {
+        loading: boolean | Record<string, unknown>;
+        legend: boolean;
+        height: string | number;
+        width: string | number;
+        grid: import('./interface').BarChartGridOptions;
+        padding: string | number;
+        tooltip: boolean;
+        categories: (string | number)[];
+        series: import('./interface').BarChartSeries[];
+        stack: boolean;
+        barRadius: number;
+        labels: import('./interface').BarChartLabelsOptions;
+        valueFormatter: (value: number) => string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    categories: {
+        type: import('vue').PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    series: {
+        required: boolean;
+        type: import('vue').PropType<import('./interface').BarChartSeries[]>;
+        default: () => never[];
+    };
+    stack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    barWidth: {
+        type: NumberConstructor;
+    };
+    barRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        default: string;
+        type: import('vue').PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    grid: {
+        default: null;
+        type: import('vue').PropType<import('./interface').BarChartGridOptions>;
+    };
+    labels: {
+        default: null;
+        type: import('vue').PropType<import('./interface').BarChartLabelsOptions>;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    legend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueFormatter: {
+        type: import('vue').PropType<(value: number) => string>;
+        default: (value: number) => string;
+    };
+    loading: {
+        type: import('vue').PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onBar-click"?: ((data: import('./interface').BarChartClickData) => any) | undefined;
+    "onLegend-change"?: ((visibleIndexes: number[]) => any) | undefined;
+}>, {
+    className: {
+        block: string;
+        element: (className: string) => string;
+        modifier: (className: string) => string;
+        is: (className: string) => string;
+    };
+    state: {
+        activeIndex: number | null;
+        keyboardActive: boolean;
+        hiddenIndexes: number[];
+        tooltipWidth: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    refs: {
+        root: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        canvas: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    };
+    slots: Readonly<{
+        tooltip?: ((props: import('./interface').BarChartTooltipSlotProps) => unknown) | undefined;
+        legend?: ((props: {
+            series: import('./interface').BarChartSeries[];
+            hiddenIndexes: number[];
+        }) => unknown) | undefined;
+        bar?: ((props: {
+            seriesIndex: number;
+            index: number;
+            value: number;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            color: string;
+        }) => unknown) | undefined;
+        empty?: (() => unknown) | undefined;
+    }>;
+    t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
+    fontSize: import('vue').ComputedRef<number>;
+    labelColor: import('vue').ComputedRef<"var(--x-chart-color-axis-text)" | import('./props').CSSColor>;
+    yVisible: import('vue').ComputedRef<boolean>;
+    xVisible: import('vue').ComputedRef<boolean>;
+    showHorizontalLines: import('vue').ComputedRef<boolean>;
+    seriesList: import('vue').ComputedRef<import('./interface').BarChartSeries[]>;
+    visibleSeriesIndexes: import('vue').ComputedRef<number[]>;
+    categoryCount: import('vue').ComputedRef<number>;
+    hasData: import('vue').ComputedRef<boolean>;
+    plot: import('vue').ComputedRef<import('./helpers/layout').BarChartPlot>;
+    layout: import('vue').ComputedRef<import('./helpers/layout').BarChartLayout>;
+    axisTicks: import('vue').ComputedRef<{
+        y: number;
+        label: string;
+        isBaseline: boolean;
+    }[]>;
+    axisXLabels: import('vue').ComputedRef<{
+        x: number;
+        text: string;
+    }[]>;
+    visibleBarEntries: import('vue').ComputedRef<{
+        color: string;
+        index: number;
+        seriesIndex: number;
+        value: number;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        path: string;
+    }[]>;
+    activeCategory: import('vue').ComputedRef<import('./interface').BarChartActiveData | null>;
+    tooltipSlotProps: import('vue').ComputedRef<import('./interface').BarChartTooltipSlotProps | null>;
+    tooltipEntries: import('vue').ComputedRef<{
+        key: number;
+        name: string;
+        value: string;
+        color: string;
+    }[]>;
+    tooltipTotal: import('vue').ComputedRef<{
+        label: string;
+        value: string;
+    } | null>;
+    tooltipStyle: import('vue').ComputedRef<Record<string, string>>;
+    legendItems: import('vue').ComputedRef<{
+        key: number;
+        name: string;
+        color: string;
+        hidden: boolean;
+    }[]>;
+    categoryLabel: (index: number) => string;
+    formatValue: import('vue').ComputedRef<(value: number) => string>;
+    liveText: import('vue').ComputedRef<string>;
+    handleMouseMove: (ev: MouseEvent) => void;
+    handleClick: (ev: MouseEvent) => void;
+    handleKeydown: (ev: KeyboardEvent) => void;
+    clearActive: () => void;
+    toggleSeries: (index: number) => void;
+    setTooltipElement: (el: HTMLDivElement | null) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'bar-click': (data: import('./interface').BarChartClickData) => boolean;
+    'legend-change': (visibleIndexes: number[]) => boolean;
+}, string, {
+    loading: boolean | Record<string, unknown>;
+    legend: boolean;
+    height: string | number;
+    width: string | number;
+    grid: import('./interface').BarChartGridOptions;
+    padding: string | number;
+    tooltip: boolean;
+    categories: (string | number)[];
+    series: import('./interface').BarChartSeries[];
+    stack: boolean;
+    barRadius: number;
+    labels: import('./interface').BarChartLabelsOptions;
+    valueFormatter: (value: number) => string;
+}, {}, string, import('vue').SlotsType<{
+    tooltip?: (props: import('./interface').BarChartTooltipSlotProps) => unknown;
+    legend?: (props: {
+        series: import('./interface').BarChartSeries[];
+        hiddenIndexes: number[];
+    }) => unknown;
+    bar?: (props: {
+        seriesIndex: number;
+        index: number;
+        value: number;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        color: string;
+    }) => unknown;
+    empty?: () => unknown;
+}>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install(app: import('vue').App): void;
+};
+export { BarChart as default };
+export type { BarChartActiveData, BarChartClickData, BarChartGridOptions, BarChartLabelsOptions, BarChartSeries, BarChartTooltipItem, BarChartTooltipSlotProps, } from './interface';

package/dist/components/bar-chart/interface.d.ts

@@ -0,0 +1,74 @@
+import { CSSColor } from '../../_props/css';
+/**
+ * 一个数据系列。
+ *
+ * `data` 与 `categories` 按下标一一对应；`null` / `undefined` / 负数按 0 处理，
+ * 用于表达「当天没有数据」这类缺测日。
+ */
+export interface BarChartSeries {
+    /** 系列名，用于悬浮提示与多系列区分 */
+    name?: string;
+    /** 该系列按 categories 顺序排列的值 */
+    data: Array<number | null | undefined>;
+    /** 该系列的颜色，默认取内置分类色板（按系列下标循环） */
+    color?: CSSColor;
+}
+/** 横向网格线配置 */
+export interface BarChartGridOptions {
+    /** 是否显示横向网格线，默认 true */
+    horizontalLines?: boolean;
+    /** 横向网格线数量（含基线），默认 4 */
+    horizontalLinesNumber?: number;
+}
+/** 坐标轴标签配置 */
+export interface BarChartLabelsOptions {
+    /** 是否显示类目标签，默认 true */
+    xVisible?: boolean;
+    /** 是否显示数值轴标签，默认 true */
+    yVisible?: boolean;
+    /** 类目标签格式化 */
+    xFormatter?: (label: string, index: number) => string;
+    /** 数值轴刻度格式化 */
+    yFormatter?: (value: number) => string;
+    /** 轴标签字号，默认 12 */
+    fontSize?: number;
+    /** 轴标签颜色，默认取组件文字 token */
+    color?: CSSColor;
+}
+/** 悬浮提示中的一行（一个系列） */
+export interface BarChartTooltipItem {
+    /** 系列下标 */
+    seriesIndex: number;
+    /** 系列名，未提供时为 undefined */
+    name?: string;
+    /** 该系列在当前类目的值 */
+    value: number;
+    /**
+     * 该系列生效的颜色：业务传入值原样返回，未传入时是内置色板的
+     * `var(--x-bar-chart-color-series-N)` 引用，可直接用于 style 背景色。
+     */
+    color: string;
+}
+/** 悬浮或点击时命中的类目数据 */
+export interface BarChartActiveData {
+    /** 类目下标 */
+    index: number;
+    /** 类目标签（已应用 labels.xFormatter） */
+    label: string;
+    /** 各类目的系列值 */
+    items: BarChartTooltipItem[];
+    /** 所有系列的合计值；stack 时为堆叠总值 */
+    total: number;
+}
+/** bar-click 事件的载荷，在类目数据之外带上命中的具体柱体 */
+export interface BarChartClickData extends BarChartActiveData {
+    /** 命中的系列下标；点击落在空白或零值类目时为 null */
+    seriesIndex: number | null;
+    /** 命中的柱体值；未命中时为 null */
+    value: number | null;
+}
+/** tooltip 插槽的入参 */
+export interface BarChartTooltipSlotProps extends BarChartActiveData {
+    /** 组件当前的数值格式化函数，供自定义内容保持一致 */
+    formatValue: (value: number) => string;
+}