x-next 1.7.0 → 1.8.0

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

@@ -0,0 +1,278 @@
+import { SlotsType } from 'vue';
+import { BarChartActiveData, BarChartClickData, BarChartSeries, BarChartTooltipSlotProps } from './interface';
+import { BarChartLayout, BarChartPlot } 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<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;
+    };
+}>, {
+    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: BarChartTooltipSlotProps) => unknown) | undefined;
+        legend?: ((props: {
+            series: 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<BarChartSeries[]>;
+    visibleSeriesIndexes: import('vue').ComputedRef<number[]>;
+    categoryCount: import('vue').ComputedRef<number>;
+    hasData: import('vue').ComputedRef<boolean>;
+    plot: import('vue').ComputedRef<BarChartPlot>;
+    layout: import('vue').ComputedRef<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<BarChartActiveData | null>;
+    tooltipSlotProps: import('vue').ComputedRef<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, {
+    /**
+     * @zh 点击柱体或绘图区时触发
+     * @en Emitted when a bar or the plot area is clicked
+     */
+    'bar-click': (data: BarChartClickData) => 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<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: BarChartClickData) => any) | undefined;
+    "onLegend-change"?: ((visibleIndexes: number[]) => any) | undefined;
+}>, {
+    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: BarChartSeries[];
+    stack: boolean;
+    barRadius: number;
+    labels: import('./interface').BarChartLabelsOptions;
+    valueFormatter: (value: number) => string;
+}, SlotsType<{
+    tooltip?: (props: BarChartTooltipSlotProps) => unknown;
+    legend?: (props: {
+        series: 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;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,55 @@
+import { roundedTopRectPath } from '../../../_utils/chart';
+export { roundedTopRectPath };
+export interface BarChartPlot {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface BarChartBarGeometry {
+    /** 类目下标 */
+    index: number;
+    /** 系列下标 */
+    seriesIndex: number;
+    /** 该柱体代表的值 */
+    value: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** path 绘制指令（仅顶部圆角） */
+    path: string;
+}
+export interface ComputeBarLayoutParams {
+    count: number;
+    /** values[seriesIndex][categoryIndex]，调用方需已把 null / 负数归一化为 0 */
+    values: number[][];
+    stack: boolean;
+    plot: BarChartPlot;
+    domainMax: number;
+    barWidth?: number;
+    barRadius: number;
+    /** 堆叠分段之间的间隙，默认 1px */
+    stackGap?: number;
+}
+export interface BarChartLayout {
+    band: number;
+    barWidth: number;
+    bars: BarChartBarGeometry[];
+    /** 每个类目中心 x，供标签、激活线与悬浮锚点使用 */
+    categoryCenters: number[];
+    /** 每个类目最高柱体顶部的 y；无数据时为绘图区底部 */
+    categoryTops: number[];
+}
+/** 单个柱体允许的最大宽度，避免稀疏数据下柱体过宽 */
+export declare const MAX_BAR_WIDTH = 32;
+/**
+ * 计算全部柱体几何。
+ *
+ * - 非堆叠：同组柱体在类目带内并排排列；
+ * - 堆叠：自下而上累加，分段之间留 1px 缝隙，基线不缩，避免柱体「浮起」；
+ * - 负数与缺测由调用方归一化为 0，超过 domainMax 的值在绘图区内截断。
+ */
+export declare const computeBarLayout: (params: ComputeBarLayoutParams) => BarChartLayout;