x-next 1.7.0 → 1.8.1

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

@@ -0,0 +1,145 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { CSSColor } from '../../_props/css';
+import { BarChartGridOptions, BarChartLabelsOptions, BarChartSeries } from './interface';
+export declare const barChartProps: {
+    /**
+     * @zh 类目轴标签，与每个系列 data 的下标一一对应；缺省时按 1、2、3… 显示
+     * @en Category axis labels, aligned by index with each series data
+     */
+    categories: {
+        type: PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    /**
+     * @zh 数据系列；单系列渲染为普通柱状图，多系列可并排或堆叠
+     * @en Data series; a single series renders plain bars, multiple series render
+     * grouped or stacked
+     */
+    series: {
+        required: boolean;
+        type: PropType<BarChartSeries[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 是否堆叠多系列；false 时同组柱体并排
+     * @en Whether to stack multiple series; side-by-side when false
+     * @defaultValue false
+     */
+    stack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 图表高度，数字按 px 处理
+     * @en Chart height; numbers are treated as px
+     * @defaultValue 240
+     */
+    height: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    /**
+     * @zh 图表宽度，数字按 px 处理，默认撑满父容器
+     * @en Chart width; numbers are treated as px, defaults to filling the parent
+     * @defaultValue '100%'
+     */
+    width: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /**
+     * @zh 数值轴上界；传入后不再自动计算「好看」的刻度，超出部分被截断
+     * @en Upper bound of the value axis; disables nice-tick calculation and clamps
+     * larger values
+     */
+    max: {
+        type: NumberConstructor;
+    };
+    /**
+     * @zh 柱体宽度，默认按类目带自适应（并排时不超过 24px，单柱不超过 32px）
+     * @en Bar width; defaults to adapting to the band (max 24px grouped, 32px single)
+     */
+    barWidth: {
+        type: NumberConstructor;
+    };
+    /**
+     * @zh 柱顶圆角半径
+     * @en Radius of the bar top corners
+     * @defaultValue 4
+     */
+    barRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * @zh 绘制边距，支持 1-4 个非负数字字符串或单个非负数字
+     * @en Plot padding; supports a single non-negative number or CSS-like 1-4 values
+     * @defaultValue '8'
+     */
+    padding: {
+        default: string;
+        type: PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    /**
+     * @zh 横向网格线配置
+     * @en Horizontal grid line options
+     */
+    grid: {
+        default: null;
+        type: PropType<BarChartGridOptions>;
+    };
+    /**
+     * @zh 坐标轴标签配置
+     * @en Axis label options
+     */
+    labels: {
+        default: null;
+        type: PropType<BarChartLabelsOptions>;
+    };
+    /**
+     * @zh 悬浮提示
+     * @en Hover tooltip
+     * @defaultValue true
+     */
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 图例；多系列时建议开启，点击图例项可临时隐藏/显示对应系列
+     * @en Legend; recommended for multiple series, clicking an item toggles the
+     * series visibility
+     * @defaultValue false
+     */
+    legend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 数值格式化函数，用于提示、图例与数值轴
+     * @en Value formatter used by tooltip, legend and the value axis
+     */
+    valueFormatter: {
+        type: PropType<(value: number) => string>;
+        default: (value: number) => string;
+    };
+    /**
+     * @zh 加载中
+     * @en Loading state
+     * @defaultValue false
+     */
+    loading: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    /**
+     * @zh 无障碍名称；设置后根节点带 role="img"
+     * @en Accessible name; adds role="img" to the root when set
+     */
+    ariaLabel: {
+        type: StringConstructor;
+    };
+};
+export type BarChartProps = ExtractPropTypes<typeof barChartProps>;
+export type { BarChartGridOptions, BarChartLabelsOptions, BarChartSeries, CSSColor };

package/dist/components/heatmap/Heatmap.d.ts

@@ -125,7 +125,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     mergedSize: import('vue').ComputedRef<"mini" | "small" | "medium" | "large">;
     cells: import('vue').ComputedRef<HeatmapCell[]>;
-    rows: import('vue').ComputedRef<HeatmapCell[][]>;
     range: import('vue').ComputedRef<HeatmapResolvedRange | null>;
     gridStyle: import('vue').ComputedRef<{
         '--x-heatmap-cell-size': string;
@@ -153,6 +152,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         cancel(): void;
     };
     clearActive: () => void;
+    handleKeydown: (ev: KeyboardEvent) => void;
+    handleGridFocus: () => void;
+    activeDescendant: import('vue').ComputedRef<string | undefined>;
+    gridLabel: import('vue').ComputedRef<string>;
+    cellIdPrefix: string;
+    liveText: import('vue').ComputedRef<string>;
     isInRange: (cell: HeatmapCell) => boolean;
     colorPalette: import('vue').ComputedRef<string[]>;
     slots: Readonly<{
@@ -165,6 +170,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         'indicator-leading-text'?: (() => unknown) | undefined;
         'indicator-trailing-text'?: (() => unknown) | undefined;
     }>;
+    refs: {
+        tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    };
+    setTooltipElement: (el: HTMLDivElement | null) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     /**
      * @zh 点击某个日期格时触发

package/dist/components/heatmap/index.d.ts

@@ -62,7 +62,6 @@ export declare const Heatmap: {
         };
         mergedSize: import('vue').ComputedRef<"mini" | "small" | "medium" | "large">;
         cells: import('vue').ComputedRef<import('./interface').HeatmapCell[]>;
-        rows: import('vue').ComputedRef<import('./interface').HeatmapCell[][]>;
         range: import('vue').ComputedRef<import('./interface').HeatmapResolvedRange | null>;
         gridStyle: import('vue').ComputedRef<{
             '--x-heatmap-cell-size': string;
@@ -90,6 +89,12 @@ export declare const Heatmap: {
             cancel(): void;
         };
         clearActive: () => void;
+        handleKeydown: (ev: KeyboardEvent) => void;
+        handleGridFocus: () => void;
+        activeDescendant: import('vue').ComputedRef<string | undefined>;
+        gridLabel: import('vue').ComputedRef<string>;
+        cellIdPrefix: string;
+        liveText: import('vue').ComputedRef<string>;
         isInRange: (cell: import('./interface').HeatmapCell) => boolean;
         colorPalette: import('vue').ComputedRef<string[]>;
         slots: Readonly<{
@@ -102,6 +107,10 @@ export declare const Heatmap: {
             'indicator-leading-text'?: (() => unknown) | undefined;
             'indicator-trailing-text'?: (() => unknown) | undefined;
         }>;
+        refs: {
+            tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        };
+        setTooltipElement: (el: HTMLDivElement | null) => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         cellClick: (cell: import('./interface').HeatmapCell, ev: MouseEvent) => true;
     }, import('vue').PublicProps, {
@@ -191,7 +200,6 @@ export declare const Heatmap: {
         };
         mergedSize: import('vue').ComputedRef<"mini" | "small" | "medium" | "large">;
         cells: import('vue').ComputedRef<import('./interface').HeatmapCell[]>;
-        rows: import('vue').ComputedRef<import('./interface').HeatmapCell[][]>;
         range: import('vue').ComputedRef<import('./interface').HeatmapResolvedRange | null>;
         gridStyle: import('vue').ComputedRef<{
             '--x-heatmap-cell-size': string;
@@ -219,6 +227,12 @@ export declare const Heatmap: {
             cancel(): void;
         };
         clearActive: () => void;
+        handleKeydown: (ev: KeyboardEvent) => void;
+        handleGridFocus: () => void;
+        activeDescendant: import('vue').ComputedRef<string | undefined>;
+        gridLabel: import('vue').ComputedRef<string>;
+        cellIdPrefix: string;
+        liveText: import('vue').ComputedRef<string>;
         isInRange: (cell: import('./interface').HeatmapCell) => boolean;
         colorPalette: import('vue').ComputedRef<string[]>;
         slots: Readonly<{
@@ -231,6 +245,10 @@ export declare const Heatmap: {
             'indicator-leading-text'?: (() => unknown) | undefined;
             'indicator-trailing-text'?: (() => unknown) | undefined;
         }>;
+        refs: {
+            tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        };
+        setTooltipElement: (el: HTMLDivElement | null) => void;
     }, {}, {}, {}, {
         loading: import('./interface').HeatmapLoadingProps;
         data: import('./interface').HeatmapData;
@@ -306,7 +324,6 @@ export declare const Heatmap: {
     };
     mergedSize: import('vue').ComputedRef<"mini" | "small" | "medium" | "large">;
     cells: import('vue').ComputedRef<import('./interface').HeatmapCell[]>;
-    rows: import('vue').ComputedRef<import('./interface').HeatmapCell[][]>;
     range: import('vue').ComputedRef<import('./interface').HeatmapResolvedRange | null>;
     gridStyle: import('vue').ComputedRef<{
         '--x-heatmap-cell-size': string;
@@ -334,6 +351,12 @@ export declare const Heatmap: {
         cancel(): void;
     };
     clearActive: () => void;
+    handleKeydown: (ev: KeyboardEvent) => void;
+    handleGridFocus: () => void;
+    activeDescendant: import('vue').ComputedRef<string | undefined>;
+    gridLabel: import('vue').ComputedRef<string>;
+    cellIdPrefix: string;
+    liveText: import('vue').ComputedRef<string>;
     isInRange: (cell: import('./interface').HeatmapCell) => boolean;
     colorPalette: import('vue').ComputedRef<string[]>;
     slots: Readonly<{
@@ -346,6 +369,10 @@ export declare const Heatmap: {
         'indicator-leading-text'?: (() => unknown) | undefined;
         'indicator-trailing-text'?: (() => unknown) | undefined;
     }>;
+    refs: {
+        tooltip: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    };
+    setTooltipElement: (el: HTMLDivElement | null) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     cellClick: (cell: import('./interface').HeatmapCell, ev: MouseEvent) => true;
 }, string, {

package/dist/components/index.d.ts

@@ -17,17 +17,20 @@ export * from './form-slider';
 export * from './form-switch';
 export * from './form-textarea';
 export * from './color-picker';
+export * from './bar-chart';
 export * from './draggable';
 export * from './grid';
 export * from './heatmap';
 export * from './image';
 export * from './layout';
+export * from './line-chart';
 export * from './link';
 export * from './menu';
 export * from './message';
 export * from './network';
 export * from './notification';
 export * from './pagination';
+export * from './pie-chart';
 export * from './popconfirm';
 export * from './popover';
 export * from './popup';

package/dist/components/line-chart/LineChart.d.ts

@@ -0,0 +1,295 @@
+import { SlotsType } from 'vue';
+import { LineChartActiveData, LineChartClickData, LineChartSeries, LineChartTooltipSlotProps } from './interface';
+import { LineChartPlot } from './helpers/layout';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    categories: {
+        type: import('vue').PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    series: {
+        required: boolean;
+        type: import('vue').PropType<LineChartSeries[]>;
+        default: () => never[];
+    };
+    stack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    area: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    smooth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPoints: {
+        type: import('vue').PropType<boolean | "auto">;
+        default: string;
+        validator: (value: boolean | "auto") => boolean;
+    };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    padding: {
+        default: string;
+        type: import('vue').PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    grid: {
+        default: null;
+        type: import('vue').PropType<import('./interface').LineChartGridOptions>;
+    };
+    labels: {
+        default: null;
+        type: import('vue').PropType<import('./interface').LineChartLabelsOptions>;
+    };
+    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;
+    };
+}>, {
+    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: LineChartTooltipSlotProps) => unknown) | undefined;
+        legend?: ((props: {
+            series: LineChartSeries[];
+            hiddenIndexes: number[];
+        }) => unknown) | undefined;
+        point?: ((props: {
+            seriesIndex: number;
+            index: number;
+            value: number;
+            x: number;
+            y: 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('../bar-chart/props').CSSColor>;
+    yVisible: import('vue').ComputedRef<boolean>;
+    xVisible: import('vue').ComputedRef<boolean>;
+    showHorizontalLines: import('vue').ComputedRef<boolean>;
+    seriesList: import('vue').ComputedRef<LineChartSeries[]>;
+    visibleSeriesIndexes: import('vue').ComputedRef<number[]>;
+    categoryCount: import('vue').ComputedRef<number>;
+    hasData: import('vue').ComputedRef<boolean>;
+    plot: import('vue').ComputedRef<LineChartPlot>;
+    domain: import('vue').ComputedRef<import('../../_utils/chart').NiceDomain>;
+    seriesPaths: import('vue').ComputedRef<import('./helpers/layout').LineChartSeriesPath[]>;
+    pointsAlwaysVisible: import('vue').ComputedRef<boolean>;
+    axisTicks: import('vue').ComputedRef<{
+        y: number;
+        label: string;
+        isBaseline: boolean;
+    }[]>;
+    axisXLabels: import('vue').ComputedRef<{
+        x: number;
+        text: string;
+    }[]>;
+    activeCategory: import('vue').ComputedRef<LineChartActiveData | null>;
+    tooltipSlotProps: import('vue').ComputedRef<LineChartTooltipSlotProps | 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>;
+    seriesColor: (index: 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, {
+    /**
+     * @zh 点击数据点或绘图区时触发
+     * @en Emitted when a data point or the plot area is clicked
+     */
+    'line-click': (data: LineChartClickData) => boolean;
+    /**
+     * @zh 图例切换后触发，参数为当前可见的系列下标
+     * @en Emitted after a legend toggle, with the visible series indexes
+     */
+    'legend-change': (visibleIndexes: number[]) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    categories: {
+        type: import('vue').PropType<Array<string | number>>;
+        default: () => never[];
+    };
+    series: {
+        required: boolean;
+        type: import('vue').PropType<LineChartSeries[]>;
+        default: () => never[];
+    };
+    stack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    area: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    smooth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPoints: {
+        type: import('vue').PropType<boolean | "auto">;
+        default: string;
+        validator: (value: boolean | "auto") => boolean;
+    };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    padding: {
+        default: string;
+        type: import('vue').PropType<string | number>;
+        validator(val: string | number): boolean;
+    };
+    grid: {
+        default: null;
+        type: import('vue').PropType<import('./interface').LineChartGridOptions>;
+    };
+    labels: {
+        default: null;
+        type: import('vue').PropType<import('./interface').LineChartLabelsOptions>;
+    };
+    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<{
+    "onLegend-change"?: ((visibleIndexes: number[]) => any) | undefined;
+    "onLine-click"?: ((data: LineChartClickData) => any) | undefined;
+}>, {
+    loading: boolean | Record<string, unknown>;
+    area: boolean;
+    legend: boolean;
+    height: string | number;
+    width: string | number;
+    grid: import('./interface').LineChartGridOptions;
+    padding: string | number;
+    smooth: boolean;
+    tooltip: boolean;
+    categories: (string | number)[];
+    series: LineChartSeries[];
+    stack: boolean;
+    labels: import('./interface').LineChartLabelsOptions;
+    valueFormatter: (value: number) => string;
+    connectNulls: boolean;
+    showPoints: boolean | "auto";
+}, SlotsType<{
+    tooltip?: (props: LineChartTooltipSlotProps) => unknown;
+    legend?: (props: {
+        series: LineChartSeries[];
+        hiddenIndexes: number[];
+    }) => unknown;
+    point?: (props: {
+        seriesIndex: number;
+        index: number;
+        value: number;
+        x: number;
+        y: number;
+        color: string;
+    }) => unknown;
+    empty?: () => unknown;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/line-chart/helpers/layout.d.ts

@@ -0,0 +1,74 @@
+export interface LineChartPlot {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface LineChartPointGeometry {
+    /** 类目下标 */
+    index: number;
+    /** 系列下标 */
+    seriesIndex: number;
+    /** 数据点的值 */
+    value: number;
+    x: number;
+    y: number;
+}
+export interface LineChartSeriesPath {
+    /** 系列下标 */
+    seriesIndex: number;
+    /** 折线路径（平滑时为三次贝塞尔）；缺测断点会切成多段 */
+    d: string;
+    /** 面积填充路径；未开启 area 时为空串 */
+    areaD: string;
+    /** 该系列的数据点，供数据点渲染与交互命中 */
+    points: LineChartPointGeometry[];
+}
+export interface BuildLineChartSeriesParams {
+    /** values[seriesIndex][categoryIndex]；缺测为 null */
+    values: Array<Array<number | null>>;
+    /**
+     * 面积填充的下边界（堆叠面积用）：
+     * 逐系列给出，形状与 values 相同；省略时填充到 baseline 水平线。
+     */
+    lower?: Array<Array<number | null>>;
+    plot: LineChartPlot;
+    /** 数值域下界（负值场景下为负数） */
+    domainMin: number;
+    /** 数值域上界 */
+    domainMax: number;
+    /** 是否平滑 */
+    smooth: boolean;
+    /** 缺测点是否跨过（连到下一个有效点） */
+    connectNulls: boolean;
+    /** 是否绘制面积填充 */
+    area: boolean;
+    /** 面积基线的 y（未给 lower 时使用） */
+    baseline: number;
+}
+/**
+ * 计算每个系列的折线 / 面积路径与数据点坐标。
+ *
+ * 类目排在带中心：n 个类目把绘图区均分为 n 段，第 i 个数据点落在第 i 段中心，
+ * 与柱状图的类目带一致，两个图表的类目轴可以对齐比较。
+ *
+ * 缺测（null / undefined）默认断线；`connectNulls` 为真时跨过缺测连到下一点，
+ * 但缺测处不产生数据点（不存在的点不应被鼠标命中）。
+ */
+export declare const buildLineChartSeries: (params: BuildLineChartSeriesParams) => LineChartSeriesPath[];
+export interface StackedLineChartLayer {
+    seriesIndex: number;
+    /** 本层的值（缺测为 0） */
+    values: number[];
+    /** 本层下界（下方所有层的累加） */
+    base: number[];
+    /** 本层上界（base + values） */
+    top: number[];
+}
+/**
+ * 堆叠分层：把每个系列的下界累加为上一层的上界。
+ * 缺测按 0 处理，保证各层类目数一致、堆叠带不出现空洞。
+ */
+export declare const buildStackedLayers: (values: Array<Array<number | null>>) => StackedLineChartLayer[];