Merge pull request #844 from VisActor/843-feature-add-api-onvcharteve…

…nt-for-pivottable 843 feature add api onvchartevent for pivottable
VisActor · Jan 3, 2024 · c0353d4 · c0353d4
2 parents ee7024f + f345121
commit c0353d4
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 46 deletions.
diff --git a/...s/@visactor/vtable/843-feature-add-api-onvchartevent-for-pivottable_2024-01-03-06-06.json b/...s/@visactor/vtable/843-feature-add-api-onvchartevent-for-pivottable_2024-01-03-06-06.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: add onVChartEvent for BaseTable #843\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/packages/vtable/examples/list/list-chart.ts b/packages/vtable/examples/list/list-chart.ts
@@ -606,4 +606,10 @@ export function createTable() {
 
   const tableInstance = new VTable.ListTable(option);
   window.tableInstance = tableInstance;
+  tableInstance.onVChartEvent('click', args => {
+    console.log('onVChartEvent click', args);
+  });
+  tableInstance.onVChartEvent('mouseover', args => {
+    console.log('onVChartEvent mouseover', args);
+  });
 }
diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts
@@ -965,50 +965,6 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
     });
   }
 
-  /**
-   * 监听vchart事件
-   * @param type vchart事件类型
-   * @param listener vchart事件监听器
-   * @returns 事件监听器id
-   */
-  onVChartEvent(type: string, callback: AnyFunction): void;
-  onVChartEvent(type: string, query: any, callback: AnyFunction): void;
-  onVChartEvent(type: string, query?: any, callback?: AnyFunction): void {
-    if (!this._chartEventMap[type]) {
-      this._chartEventMap[type] = [];
-    }
-    if (typeof query === 'function') {
-      this._chartEventMap[type].push({ callback: query });
-    } else {
-      this._chartEventMap[type].push({ callback, query });
-    }
-  }
-
-  offVChartEvent(type: string, callback?: AnyFunction): void {
-    // delete this._chartEventMap[type];
-    if (!this._chartEventMap[type]) {
-      return;
-    }
-    if (callback) {
-      this._chartEventMap[type] = this._chartEventMap[type].filter(e => e.callback !== callback);
-    } else {
-      this._chartEventMap[type] = [];
-    }
-  }
-  /** 给activeChartInstance逐个绑定chart用户监听事件 */
-  _bindChartEvent(activeChartInstance: any) {
-    if (activeChartInstance) {
-      for (const key in this._chartEventMap) {
-        (this._chartEventMap[key] || []).forEach(e => {
-          if (e.query) {
-            activeChartInstance.on(key, e.query, e.callback);
-          } else {
-            activeChartInstance.on(key, e.callback);
-          }
-        });
-      }
-    }
-  }
   /** 更新数据过滤规则，适用场景：点击图例项后 更新过滤规则 来更新图表 */
   updateFilterRules(filterRules: FilterRules) {
     this.internalProps.dataConfig.filterRules = filterRules;

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -37,7 +37,7 @@ import {
   type ITableThemeDefine,
   InteractionState
 } from '../ts-types';
-import type { ColumnIconOption } from '../ts-types';
+import type { AnyFunction, ColumnIconOption } from '../ts-types';
 import { event, style as utilStyle } from '../tools/helper';
 
 import { TABLE_EVENT_TYPE } from './TABLE_EVENT_TYPE';
@@ -152,7 +152,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   bodyBottomStyleCache: any;
   container: HTMLElement;
   isReleased: boolean = false;
-
+  _chartEventMap: Record<string, { query?: any; callback: AnyFunction }[]> = {};
   constructor(container: HTMLElement, options: BaseTableConstructorOptions = {}) {
     super();
     if (!container && options.mode !== 'node') {
@@ -3641,4 +3641,49 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
       row: row + this.columnHeaderLevelCount
     };
   }
+
+  /**
+   * 监听vchart事件
+   * @param type vchart事件类型
+   * @param listener vchart事件监听器
+   * @returns 事件监听器id
+   */
+  onVChartEvent(type: string, callback: AnyFunction): void;
+  onVChartEvent(type: string, query: any, callback: AnyFunction): void;
+  onVChartEvent(type: string, query?: any, callback?: AnyFunction): void {
+    if (!this._chartEventMap[type]) {
+      this._chartEventMap[type] = [];
+    }
+    if (typeof query === 'function') {
+      this._chartEventMap[type].push({ callback: query });
+    } else {
+      this._chartEventMap[type].push({ callback, query });
+    }
+  }
+
+  offVChartEvent(type: string, callback?: AnyFunction): void {
+    // delete this._chartEventMap[type];
+    if (!this._chartEventMap[type]) {
+      return;
+    }
+    if (callback) {
+      this._chartEventMap[type] = this._chartEventMap[type].filter(e => e.callback !== callback);
+    } else {
+      this._chartEventMap[type] = [];
+    }
+  }
+  /** 给activeChartInstance逐个绑定chart用户监听事件 */
+  _bindChartEvent(activeChartInstance: any) {
+    if (activeChartInstance) {
+      for (const key in this._chartEventMap) {
+        (this._chartEventMap[key] || []).forEach(e => {
+          if (e.query) {
+            activeChartInstance.on(key, e.query, e.callback);
+          } else {
+            activeChartInstance.on(key, e.callback);
+          }
+        });
+      }
+    }
+  }
 }