@zerodep-dev/vue-tsx-pro-ui 0.3.3 → 0.4.1

package/dist/charts/XYChart.d.ts

@@ -1,25 +1,12 @@
-/**
- * 直角坐标图表（柱状图、折线图、面积图）的公共部分：坐标轴、十字线与提示框、数值范围；外层结构（图例、单位、
- * 空与加载状态、给读屏的数据表）交给 ChartFrame。
- * 绘图交给 Unovis 的 XYContainer：组件实例只建一次，数据与配置变化时 update，卸载时 destroy；
- * 绘图区换了元素（加载、空状态之后重新出现）时容器连同全部实例一起重建。
- * 各种图只决定画什么（kind.components），坐标轴、十字线、提示框、配色都在这里统一。
- * 目标线（targets）用 Unovis 的 Plotline。点了下钻（onItemClick）：有图形可点的图（柱子）按图形的点击事件
- * （kind.itemSelector），折线、面积图按十字线所在的那一行，散点图按悬停的点。
- *
- * 标注（annotations）：类目上的事件画成竖线（Plotline），圈出某个系列的值画成空心圈带文字（Scatter）；
- * 区间（bands）画成浅色的带（Plotband）。百分比堆叠（kind.percent）按每个类目里各系列的占比画。
- * 第二数值轴（kind.secondary，组合图）：刻度与主轴对齐（alignedTicks），第二轴的系列换算到主轴的坐标里画，
- * 右侧的刻度文字是不裁剪的 Plotline 标签。
- */
-import { type XYComponentCore } from '@unovis/ts';
 import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
-import { type VNodeChild } from 'vue';
+import type { VNodeChild } from 'vue';
 import { type NumericFormat } from '../config/lang/format';
 import { type NumericValue } from '../utils/data/numeric';
 import type { PartProps } from '../utils/props';
 import { type ChartFrameParts, type ChartTable, type ChartTooltipItem } from './frame';
+import { type PlotRect } from './plot';
 import { type ChartColor, type ChartSeries, type ResolvedSeries } from './series';
+import { type StackSegment } from './stack';
 /** 目标线（参考线）：数值轴上的一条虚线 */
 export interface ChartTarget {
     /** 位置：数值轴上的值 */
@@ -130,26 +117,42 @@ export interface XYChartProps<T extends object> extends PartProps<'div', 'role'
     /** 缩放的区间 [起, 止]：类目的位置，含两端；父级可以写 _zoomRange={range}，null 是全部 */
     _zoomRange?: [number, number] | null;
 }
-/** 交给各种图的绘制上下文 */
+/** 交给各种图的绘制上下文：坐标都是 SVG 里的 px */
 export interface XYChartContext<T extends object> {
     /** 显示中的系列（去掉了图例里隐藏的），颜色已定 */
     series: ResolvedSeries<T>[];
-    /** 类目的位置：第几行 */
-    x: (row: T, index: number) => number;
-    /** 系列的取值函数，空值返回 undefined（Unovis 跳过） */
-    y: (series: ResolvedSeries<T>) => (row: T) => number | undefined;
-    /** 取一个跨渲染保留的组件实例：第一次调用时创建；Unovis 组件保留实例，更新时才有过渡动画 */
-    instance: <C>(key: string, create: () => C) => C;
-    /** 点图形下钻的事件（写了 itemSelector 时）：并进组件的 events；没有 onItemClick 时是空的。参数同 Unovis：图形的数据、事件、位置 */
-    events: Record<string, Record<string, (row: T, event: Event, index: number) => void>>;
+    /** 画的行（缩放时是选中的一段） */
+    rows: readonly T[];
+    /** 横向：类目在纵轴、数值在横轴 */
+    horizontal: boolean;
+    /** 绘图区（坐标轴以内） */
+    plot: PlotRect;
+    /** 一个类目在类目轴上占的长度：柱按它定宽 */
+    step: number;
+    /** 数值轴的范围 */
+    domain: readonly [number, number];
+    /** 第 index 行在类目轴上的坐标（格子的中心）；散点图是横轴数值的位置 */
+    category: (row: T, index: number) => number;
+    /** 数值 → 数值轴上的坐标 */
+    value: (value: number) => number;
+    /** 系列在一行上画的值：百分比堆叠时是占比，第二数值轴上的换算到主轴；空值 undefined */
+    valueOf: (series: ResolvedSeries<T>, row: T) => number | undefined;
+    /** 堆叠（kind.stacked）后各系列每一行的一段：系列的 key → 每行一段 */
+    stacks: ReadonlyMap<string, readonly StackSegment[]>;
+    /** 类目坐标、数值坐标 → SVG 的 [x, y]（横向时对调） */
+    point: (category: number, value: number) => [number, number];
+    /** 指针所在的那一行（在 rows 里的位置），没有时为 null */
+    hovered: number | null;
 }
-/** 一种图：画哪些组件，以及与坐标轴、十字线有关的差别 */
+/** 一种图：画什么，以及与坐标轴、十字线有关的差别 */
 export interface XYChartKind<T extends object> {
-    /** 配置并返回要画的 Unovis 组件（每次数据或属性变化都会调用） */
-    components: (context: XYChartContext<T>) => XYComponentCore<T>[];
+    /** 画出图形（坐标轴、网格、目标线、标注、十字线由 XYChart 画）；每次数据、属性、悬停变化都会调用 */
+    render: (context: XYChartContext<T>) => VNodeChild;
+    /** 类目占一格（柱）：图形画在格子中间、两端各留半格；不写时第一个、最后一个类目贴着两端（折线、面积） */
+    band?: boolean;
     /** 横向：类目在纵轴、数值在横轴 */
     horizontal?: boolean;
-    /** 十字线上给每个系列画圆点（折线图、面积图）；柱状图不画 */
+    /** 十字线上给每个系列画圆点（折线图、面积图）；柱状图不画，悬停的类目铺一层浅底 */
     crosshairDots?: boolean;
     /** 加载中的骨架，默认 block */
     skeleton?: keyof ChartSkeletons;
@@ -162,6 +165,8 @@ export interface XYChartKind<T extends object> {
     };
     /** 数值范围按堆叠后的总和算（堆叠的柱子、面积） */
     stacked?: boolean;
+    /** 参与堆叠的系列（组合图只叠柱）；不写时是全部显示中的系列 */
+    stackSeries?: (series: ResolvedSeries<T>) => boolean;
     /** 百分比堆叠：各系列按它在这个类目里的占比画（加起来 100%），数值轴是百分比，提示框带上占比 */
     percent?: boolean;
     /** 第二数值轴（组合图）：这些系列画在右侧的轴上，刻度与主轴对齐 */
@@ -177,20 +182,18 @@ export interface XYChartKind<T extends object> {
     };
     /** 数值轴默认从 0 起（数据有负数时取负数）；false 时按数据自动取（散点图） */
     zeroBaseline?: boolean;
-    /** 提示框跟着数据点（散点图），没有十字线：按选择器触发，悬停的数据是这一行 */
-    pointTooltip?: string;
+    /** 提示框跟着离指针最近的数据点（散点图），没有十字线 */
+    pointTooltip?: boolean;
     /** 提示框里列的项；不写时每个显示中的系列一行（瀑布图列变动与累计） */
     tooltipItems?: (row: T) => ChartTooltipItem[];
     /** 数值轴（主轴）的范围要包含的值；shown 是显示中的系列（第二数值轴的已去掉）。不写时按系列的值（stacked 时按正负各自的总和） */
     domainValues?: (rows: readonly T[], shown: readonly ResolvedSeries<T>[]) => number[];
     /** 给读屏的数据表；不写时类目一列加每个系列一列 */
     table?: (rows: readonly T[]) => ChartTable;
-    /** 点哪种图形算点了这一行（柱子的选择器，图形绑定的数据是这一行）；不写时按十字线所在的那一行 */
-    itemSelector?: string;
 }
-/** XYChart 的样式：hideCrosshairLine 与加载中的骨架（外层结构的样式见 chartStyles） */
+/** XYChart 的样式：缩放的滑块、加载中的骨架、标注（外层结构的样式见 chartStyles） */
 export declare const xyChartStyles: Readonly<{
-    readonly hideCrosshairLine: css.CompiledStyles;
+    readonly svg: css.CompiledStyles;
     readonly skeleton: css.CompiledStyles;
     readonly zoom: css.CompiledStyles;
     readonly zoomSlider: css.CompiledStyles;
@@ -199,6 +202,12 @@ export declare const xyChartStyles: Readonly<{
     readonly skeletonBar: css.CompiledStyles;
     readonly skeletonBarSize: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
     readonly skeletonBarSizeHorizontal: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly targetLine: css.CompiledStyles;
+    readonly eventLine: css.CompiledStyles;
+    readonly mark: css.CompiledStyles;
+    readonly crosshairDot: css.CompiledStyles;
+    readonly bandFill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly textFill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
 }>;
 /** 直角坐标图表的公共实现（组件库内部用，见 BarChart、LineChart、AreaChart） */
 export declare const XYChart: <T extends object>(props: XYChartProps<T> & {