x-next 1.7.0 → 1.8.1

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

@@ -0,0 +1,173 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { LineChartGridOptions, LineChartLabelsOptions, LineChartSeries } from './interface';
+export declare const lineChartProps: {
+    /**
+     * @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 a plain line, multiple series can
+     * overlap or stack
+     */
+    series: {
+        required: boolean;
+        type: PropType<LineChartSeries[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 堆叠多系列；折线按值累加，面积按下界与上界填充（堆叠面积）
+     * @en Stack multiple series; lines accumulate and areas fill between the
+     * lower and upper bounds
+     * @defaultValue false
+     */
+    stack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否绘制面积填充
+     * @en Whether to fill the area under the line
+     * @defaultValue false
+     */
+    area: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 平滑曲线
+     * @en Smooth curve
+     * @defaultValue true
+     */
+    smooth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 缺测点（null）是否跨过连接；默认断开，避免「没有数据」被画成跌到 0
+     * @en Whether null points are connected; by default the line breaks so that
+     * missing data is not drawn as a drop to zero
+     * @defaultValue false
+     */
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 数据点显示策略：true 常显、false 不显示、auto 时点数少时常显
+     * @en Data point strategy: true always, false never, auto shows points when
+     * there are few of them
+     * @defaultValue 'auto'
+     */
+    showPoints: {
+        type: PropType<boolean | "auto">;
+        default: string;
+        validator: (value: boolean | "auto") => boolean;
+    };
+    /**
+     * @zh 图表高度，数字按 px 处理
+     * @en Chart height; numbers are treated as px
+     * @defaultValue 280
+     */
+    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
+     */
+    max: {
+        type: NumberConstructor;
+    };
+    /**
+     * @zh 数值轴下界；数据含负值时自动扩展，也可手动锁定
+     * @en Lower bound of the value axis; expands automatically for negative data
+     */
+    min: {
+        type: NumberConstructor;
+    };
+    /**
+     * @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<LineChartGridOptions>;
+    };
+    /**
+     * @zh 坐标轴标签配置
+     * @en Axis label options
+     */
+    labels: {
+        default: null;
+        type: PropType<LineChartLabelsOptions>;
+    };
+    /**
+     * @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 canvas when set
+     */
+    ariaLabel: {
+        type: StringConstructor;
+    };
+};
+export type LineChartProps = ExtractPropTypes<typeof lineChartProps>;

package/dist/components/pie-chart/PieChart.d.ts

@@ -0,0 +1,219 @@
+import { SlotsType } from 'vue';
+import { PieChartActiveData, PieChartClickData, PieChartItem, PieChartSegment } from './interface';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        required: boolean;
+        type: import('vue').PropType<PieChartItem[]>;
+        default: () => never[];
+    };
+    innerRadius: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
+    labels: {
+        type: import('vue').PropType<boolean | {
+            fontSize?: number;
+            color?: string;
+        }>;
+        default: boolean;
+    };
+    center: {
+        type: import('vue').PropType<boolean | {
+            fontSize?: number;
+        }>;
+        default: boolean;
+    };
+    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;
+        hiddenIndexes: number[];
+        keyboardActive: boolean;
+        pointer: {
+            x: number;
+            y: 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<{
+        center?: ((props: {
+            total: number;
+            formatValue: (value: number) => string;
+        }) => unknown) | undefined;
+        tooltip?: ((props: PieChartActiveData) => unknown) | undefined;
+        label?: ((props: PieChartActiveData) => unknown) | undefined;
+        legend?: ((props: {
+            items: PieChartItem[];
+            hiddenIndexes: number[];
+        }) => unknown) | undefined;
+        empty?: (() => unknown) | undefined;
+    }>;
+    t: (key: import('../..').LocaleKey | (string & {}), params?: Record<string, string | number>) => string;
+    items: import('vue').ComputedRef<PieChartItem[]>;
+    visibleIndexes: import('vue').ComputedRef<number[]>;
+    total: import('vue').ComputedRef<number>;
+    hasData: import('vue').ComputedRef<boolean>;
+    geometry: import('vue').ComputedRef<{
+        cx: number;
+        cy: number;
+        radius: number;
+        inner: number;
+    }>;
+    segments: import('vue').ComputedRef<PieChartSegment[]>;
+    activeData: import('vue').ComputedRef<PieChartActiveData | null>;
+    legendItems: import('vue').ComputedRef<{
+        key: number;
+        name: string;
+        color: string;
+        hidden: boolean;
+        value: string;
+    }[]>;
+    centerVisible: import('vue').ComputedRef<boolean>;
+    labelFontSize: import('vue').ComputedRef<number>;
+    labelColor: import('vue').ComputedRef<string>;
+    centerFontSize: import('vue').ComputedRef<number>;
+    formatValue: import('vue').ComputedRef<(value: number) => string>;
+    tooltipStyle: import('vue').ComputedRef<Record<string, string>>;
+    handleSegmentEnter: (index: number) => void;
+    handleClick: (index: number, ev: MouseEvent) => void;
+    handleKeydown: (ev: KeyboardEvent) => void;
+    clearActive: () => void;
+    toggleItem: (index: number) => void;
+    liveText: import('vue').ComputedRef<string>;
+    setTooltipElement: (el: HTMLDivElement | null) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /**
+     * @zh 点击分片时触发
+     * @en Emitted when a slice is clicked
+     */
+    'item-click': (data: PieChartClickData) => boolean;
+    /**
+     * @zh 图例切换后触发，参数为当前可见的分片下标
+     * @en Emitted after a legend toggle, with the visible item indexes
+     */
+    'legend-change': (visibleIndexes: number[]) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        required: boolean;
+        type: import('vue').PropType<PieChartItem[]>;
+        default: () => never[];
+    };
+    innerRadius: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    height: {
+        type: import('vue').PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import('vue').PropType<number | string>;
+        default: string;
+    };
+    labels: {
+        type: import('vue').PropType<boolean | {
+            fontSize?: number;
+            color?: string;
+        }>;
+        default: boolean;
+    };
+    center: {
+        type: import('vue').PropType<boolean | {
+            fontSize?: number;
+        }>;
+        default: boolean;
+    };
+    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;
+    "onItem-click"?: ((data: PieChartClickData) => any) | undefined;
+}>, {
+    center: boolean | {
+        fontSize?: number;
+    };
+    loading: boolean | Record<string, unknown>;
+    data: PieChartItem[];
+    legend: boolean;
+    height: string | number;
+    width: string | number;
+    tooltip: boolean;
+    labels: boolean | {
+        fontSize?: number;
+        color?: string;
+    };
+    valueFormatter: (value: number) => string;
+    innerRadius: string | number;
+}, SlotsType<{
+    /** 圆环中心内容；默认展示合计 */
+    center?: (props: {
+        total: number;
+        formatValue: (value: number) => string;
+    }) => unknown;
+    tooltip?: (props: PieChartActiveData) => unknown;
+    label?: (props: PieChartActiveData) => unknown;
+    legend?: (props: {
+        items: PieChartItem[];
+        hiddenIndexes: number[];
+    }) => unknown;
+    empty?: () => unknown;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;