Merge pull request #888 from VisActor/docs/api-define

docs: update api type define

docs/assets/api/en/event/CellAddress.md

@@ -4,6 +4,15 @@ The type definition for CellAddress is:
 interface CellAddress {
   col: number;
   row: number;
+}
+```
+
+{{ target: CellAddressWithBound }}
+The type definition for CellAddressWithBound is:
+```
+interface CellAddressWithBound {
+  col: number;
+  row: number;
   rect?: RectProps;
   x?: number;
   y?: number;

docs/assets/api/en/methods.md

@@ -183,6 +183,8 @@ Get the selected cell information, and the returned result is a two-dimensional
   getSelectedCellInfos(): CellInfo[][] | null;
 ```
 
+{{ use: CellInfo() }}
+
 ## clearSelected(Function)
 
 Clear the selection of all cells.
@@ -716,6 +718,19 @@ Change the value of a cell:
   changeCellValue: (col: number, row: number, value: string | number | null) => void;
 ```
 
+## changeCellValues(Function)
+Change the value of cells in batches:
+
+```
+  /**
+   * Batch update data of multiple cells
+   * @param col The starting column number of pasted data
+   * @param row The starting row number of pasted data
+   * @param values Data array of multiple cells
+   */
+  changeCellValues(startCol: number, startRow: number, values: string[][])
+```
+
 ## getEditor(Function)
 
 Get the editor for the cell configuration

docs/assets/api/zh/event/CellAddress.md

@@ -4,6 +4,15 @@ CellAddress的类型定义为：
 interface CellAddress {
   col: number;
   row: number;
+}
+```
+
+{{ target: CellAddressWithBound }}
+CellAddressWithBound的类型定义为：
+```
+interface CellAddressWithBound {
+  col: number;
+  row: number;
   rect?: RectProps;
   x?: number;
   y?: number;

docs/assets/api/zh/methods.md

@@ -169,6 +169,8 @@ setRecords(records: Array<any>, sort?: SortState | SortState[]) //** 基本表
    */
   selectCells(cellRanges: CellRange[]): void
 ```
+其中：
+{{ use: CellRange() }}
 
 ## getSelectedCellInfos(Function)
 
@@ -178,6 +180,9 @@ setRecords(records: Array<any>, sort?: SortState | SortState[]) //** 基本表
   /**获取选中区域的每个单元格详情 */
   getSelectedCellInfos(): CellInfo[][] | null;
 ```
+
+{{ use: CellInfo() }}
+
 ## clearSelected(Function)
 
 清除所有单元格的选中状态。
@@ -709,6 +714,19 @@ use case: 点击图例项后 更新过滤规则 来更新图表
   changeCellValue: (col: number, row: number, value: string | number | null) => void;
 ```
 
+## changeCellValues(Function)
+批量更改单元格的value：
+
+```
+  /**
+   * 批量更新多个单元格的数据
+   * @param col 粘贴数据的起始列号
+   * @param row 粘贴数据的起始行号
+   * @param values 多个单元格的数据数组
+   */
+  changeCellValues(startCol: number, startRow: number, values: string[][]) 
+```
+
 ## getEditor(Function)
 
 获取单元格配置的编辑器

docs/assets/guide/en/data/data_format.md

@@ -303,7 +303,7 @@ Table data can be deleted using `deleteRecords`. Please check the api documentat
 ### change the data
 There is currently no dedicated interface for modifying data, but it can be achieved by combining the interfaces for deleting and adding data. First call `deleteRecords` and then `addRecords`.
 
-Or you can modify a certain data field using the `changeCellValue` interface.
+Or you can modify a certain data field using the `changeCellValue` or `changeCellValues` interface.
 
 ## summarize
 

docs/assets/guide/en/edit/edit_cell.md

@@ -218,6 +218,14 @@ Editing trigger timing support: double-click a cell to enter editing, click a ce
   /** Set the value of the cell. Note that it corresponds to the original value of the source data, and the vtable instance records will be modified accordingly */
   changeCellValue: (col: number, row: number, value: string | number | null) => void;
 
+  /**
+   * Batch update data of multiple cells
+   * @param col The starting column number of pasted data
+   * @param row The starting row number of pasted data
+   * @param values Data array of multiple cells
+   */
+  changeCellValues(startCol: number, startRow: number, values: string[][])
+
   /** Get the editor of cell configuration */
   getEditor: (col: number, row: number) => IEditor;
 

docs/assets/guide/en/table_type/Pivot_table/pivot_table_dataAnalysis.md

@@ -33,9 +33,9 @@ This configuration is the simplest configuration for multidimensional tables. As
 ## Data analysis related configuration:
 |Configuration item|Type|Description|
 |:----|:----|:----|
-|rows|string[] \| IDimension[]|Row dimension field array, used to parse out the corresponding dimension members|
-|columns|string[] \| IDimension[]|Column dimension field array, used to parse out the corresponding dimension members|
-|indicators|string[] \| IIndicator[]|Specific display indicators|
+|rows|(IRowDimension \| string)[]|Row dimension field array, used to parse out the corresponding dimension members|
+|columns|(IColumnDimension \| string)[]|Column dimension field array, used to parse out the corresponding dimension members|
+|indicators|(IIndicator \| string)[]|Specific display indicators|
 |dataConfig.aggregationRules|aggregationRule[]|Aggregation value calculation rules according to row and column dimensions|
 |dataConfig.derivedFieldRules|DerivedFieldRule[]|Derived fields|
 |dataConfig.sortRules|sortRule[]|Sort rules|

docs/assets/guide/en/table_type/pivot_chart.md

@@ -137,14 +137,27 @@ Corresponding to the schematic structure of the perspective combination diagram
 
 *   Rows configures the Dimension'Order Year 'and'Ship Mode' corresponding to the row header;
 *   Columns configures the Dimension'Region 'and'Category' corresponding to the list header;
-*   Indicators configure the Metirc data'Quantity ',' Sales', 'Profit' to be analyzed; Quantity corresponds to Metirc 1 in the figure above, and a histogram is used to show the trend; Sales and Profit correspond to Metirc 2 and Metirc 3 in the figure above, using a combined biaxial graph to show the data of the two Metircs.
+*   Indicators configure the Metirc data'Quantity ',' Sales', 'Profit' to be analyzed; Quantity corresponds to Metirc 1 in the figure above, and a histogram is used to show the trend; Sales and Profit correspond to Metirc 2 and Metirc 3 in the figure above, using a combined biaxial graph to show the data of the two Metircs. You need to set `cellType:'chart', chartModule:'vchart'` in the specific configuration of the indicator to indicate the chart rendering type to be configured, and specify that the registered chart library name is `vchart`.
 *   IndicatorAsCol configures Metirc in the row header or column header, it should be noted that:
     *   If true, that is, Metirc is in the column header, the display direction of the corresponding chart is'horizontal 'horizontal display;
     *   If it is false, that is, Metirc is at the head of the row, then the display direction of the corresponding chart is'vertical '.
 *   Legends configuration legend style;
     ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff07.png)
 *   Axes configures the global style of the axis. If axes have been configured in chartSpec in the Metirc configuration, the configuration in chartSpec will be used first.
 
+## changeCellValues(Function)
+Change the value of cells in batches:
+
+```
+  /**
+   * Batch update data of multiple cells
+   * @param col The starting column number of pasted data
+   * @param row The starting row number of pasted data
+   * @param values Data array of multiple cells
+   */
+  changeCellValues(startCol: number, startRow: number, values: string[][])
+```
+
 # Chart Events
 
 If you want to monitor chart events, you can use onVChartEvent. vtable has made a simple event proxy. The supported event types and callbacks are still consistent with vchart. For details, please refer to [VChart Event](https://visactor.io/ vchart/api/API/event)

docs/assets/guide/zh/data/data_format.md

@@ -294,7 +294,7 @@ const tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID
 ### 修改数据
 目前还没有专门的修改数据的接口 不过可以结合删除和添加数据的接口来实现，先调用`deleteRecords`再调用`addRecords`。
 
-或者可以修改某一个数据字段利用`changeCellValue`接口来实现。
+或者可以修改某一个数据字段利用`changeCellValue`或者`changeCellValues`接口来实现。
 
 ## 总结
 

docs/assets/guide/zh/edit/edit_cell.md

@@ -225,6 +225,14 @@ tableInstance.records;
   /** 设置单元格的value值，注意对应的是源数据的原始值，vtable实例records会做对应修改 */
   changeCellValue: (col: number, row: number, value: string | number | null) => void;
 
+  /**
+   * 批量更新多个单元格的数据
+   * @param col 粘贴数据的起始列号
+   * @param row 粘贴数据的起始行号
+   * @param values 多个单元格的数据数组
+   */
+  changeCellValues(startCol: number, startRow: number, values: string[][]) 
+
   /** 获取单元格配置的编辑器 */
   getEditor: (col: number, row: number) => IEditor;
 

docs/assets/guide/zh/table_type/Pivot_table/pivot_table_dataAnalysis.md

@@ -34,9 +34,9 @@ const option={
 ## 数据分析相关配置：
 |配置项|类型|描述|
 |:----|:----|:----|
-|rows|string[] \| IDimension[]|行维度字段数组，用于解析出对应的维度成员|
-|columns|string[] \| IDimension[]|列维度字段数组，用于解析出对应的维度成员|
-|indicators|string[] \| IIndicator[]|具体展示指标|
+|rows|(IRowDimension \| string)[]|行维度字段数组，用于解析出对应的维度成员|
+|columns|(IColumnDimension \| string)[]|列维度字段数组，用于解析出对应的维度成员|
+|indicators|(IIndicator \| string)[]|具体展示指标|
 |dataConfig.aggregationRules|aggregationRule[]|按照行列维度聚合值计算规则|
 |dataConfig.derivedFieldRules|DerivedFieldRule[]|派生字段|
 |dataConfig.sortRules|sortRule[]|排序规则|

docs/assets/guide/zh/table_type/pivot_chart.md

@@ -131,13 +131,22 @@
 对应上面透视组合图的示意图结构：
 - rows配置了行标头对应的维度'Order Year'和'Ship Mode'；
 - columns配置了列表头对应的维度'Region'和'Category'；
-- indicators配置了要分析的指标数据'Quantity', 'Sales', 'Profit'；Quantity对应上图中的指标1，用了柱状图表展示趋势；Sales和Profit对应上图中的指标2和指标3，用组合双轴图展示两个指标的数据情况。
+- indicators配置了要分析的指标数据'Quantity', 'Sales', 'Profit'；Quantity对应上图中的指标1，用了柱状图表展示趋势；Sales和Profit对应上图中的指标2和指标3，用组合双轴图展示两个指标的数据情况。需要在indicator的具体配置中设置`cellType:'chart', chartModule:'vchart'`，来指明要配置图表渲染类型，并指明注册的图表库名称为`vchart`。
 - indicatorAsCol配置指标在行头还是列头，需要注意的是：
   - 如果为true也就是指标在列头，则对应图表的展示方位direction为'horizontal'横向展示；
   - 如果为false也就是指标在行头，则对应图表的展示方位direction为'vertical'宗向展示；
 - legends配置图例样式；
 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/ffc3a9b5518762d274121ff07.png)
 - axes配置轴全局的样式，指标配置中chartSpec中如已配置axes则优先使用chartSpec中的配置。
+
+注意：
+
+在使用之前需要先注入使用的图表库组件：
+```
+import VChart from '@visactor/vchart';
+VTable.register.chartModule('vchart', VChart);
+```
+
 # 图表事件
 想要监听chart图表的事件，可以使用onVChartEvent实现，vtable做了简单的事件代理，支持的事件类型及回调还是都统一和vchart一致，具体可参考[VChart事件](https://visactor.io/vchart/api/API/event)
 ```    

packages/vtable/src/components/tooltip/TooltipHandler.ts

@@ -121,11 +121,11 @@ export class TooltipHandler {
         return;
       }
       const { col, row } = e;
-      if (e.related) {
-        if (this._isBindCell(col, row)) {
-          return;
-        }
-      }
+      // if (e.related) {
+      //   if (this._isBindCell(col, row)) {
+      //     return;
+      //   }
+      // }
       let tooltipOption;
       const headerDescription = table.getHeaderDescription(col, row);
       if (headerDescription) {
@@ -188,11 +188,11 @@ export class TooltipHandler {
       }
     });
     table.on(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, e => {
-      if (e.related) {
-        if (this._isBindCell(e.related.col, e.related.row)) {
-          return;
-        }
-      }
+      // if (e.related) {
+      //   if (this._isBindCell(e.related.col, e.related.row)) {
+      //     return;
+      //   }
+      // }
       this._unbindFromCell();
     });
     table.on(TABLE_EVENT_TYPE.SELECTED_CELL, e => {

packages/vtable/src/core/BaseTable.ts

@@ -37,7 +37,7 @@ import {
   type ITableThemeDefine,
   InteractionState
 } from '../ts-types';
-import type { AnyFunction, ColumnIconOption } from '../ts-types';
+import type { AnyFunction, CellAddressWithBound, ColumnIconOption } from '../ts-types';
 import { event, style as utilStyle } from '../tools/helper';
 
 import { TABLE_EVENT_TYPE } from './TABLE_EVENT_TYPE';
@@ -1512,7 +1512,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
    * @param absoluteY
    * @returns
    */
-  getCellAt(absoluteX: number, absoluteY: number): CellAddress {
+  getCellAt(absoluteX: number, absoluteY: number): CellAddressWithBound {
     const rowInfo = this.getRowAt(absoluteY);
     const { row, top, bottom, height } = rowInfo;
     const colInfo = this.getColAt(absoluteX);

packages/vtable/src/ts-types/events.ts

@@ -1,7 +1,7 @@
-import type { CellAddress, CellRange, CellLocation, FieldDef } from './table-engine';
+import type { CellAddress, CellRange, CellLocation, FieldDef, CellAddressWithBound } from './table-engine';
 import type { DropDownMenuEventArgs, MenuListItem, PivotInfo } from './menu';
 
-import type { AnyFunction, IDimensionInfo, RectProps, SortOrder } from './common';
+import type { IDimensionInfo, RectProps, SortOrder } from './common';
 import type { IconFuncTypeEnum, CellInfo, HierarchyState } from '.';
 import type { Icon } from '../scenegraph/graphic/icon';
 import type { FederatedPointerEvent, IEventTarget } from '@visactor/vrender';
@@ -37,9 +37,8 @@ export type KeydownEvent = {
   scaleRatio?: number;
 };
 
-export type MousePointerCellEvent = CellAddress &
+export type MousePointerCellEvent = CellAddressWithBound &
   CellInfo & {
-    related?: CellAddress;
     scaleRatio?: number;
     targetIcon?: { name: string; position: RectProps; funcType: string };
     event?: MouseEvent | PointerEvent | TouchEvent;

packages/vtable/src/ts-types/table-engine.ts

@@ -25,6 +25,10 @@ import type { EditManeger } from '../edit/edit-manager';
 export interface CellAddress {
   col: number;
   row: number;
+}
+export interface CellAddressWithBound {
+  col: number;
+  row: number;
   rect?: RectProps;
   x?: number;
   y?: number;