Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/117 expose chart event #140

Merged
merged 2 commits into from
Jul 17, 2023
Merged

Feat/117 expose chart event #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e486ed4
feat: add listenChart Event
fangsmile Jul 17, 2023
c63c47c
docs: update changlog of rush
fangsmile Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@visactor/vtable/feat-117-expose-chart-event_2023-07-17-08-49.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "feat: add listenChart Event\n\n",
"type": "patch",
"packageName": "@visactor/vtable"
}
],
"packageName": "@visactor/vtable",
"email": "[email protected]"
}
6 changes: 6 additions & 0 deletions packages/vtable/examples/pivot-chart/pivotChart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9301,5 +9301,11 @@ export function createTable() {
};

const tableInstance = new VTable.PivotChart(option);
tableInstance.listenChart('click', args => {
console.log('listenChart click', args);
});
tableInstance.listenChart('mouseover', args => {
console.log('listenChart mouseover', args);
});
window.tableInstance = tableInstance;
}
79 changes: 67 additions & 12 deletions packages/vtable/src/PivotChart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import type {
PivotChartConstructorOptions,
CollectValueBy,
AggregationRules,
AggregationRule
AggregationRule,
AnyFunction
} from './ts-types';
import { AggregationType } from './ts-types';
import { HierarchyState } from './ts-types';
Expand All @@ -30,6 +31,7 @@ import { _setDataSource } from './core/tableHelper';
import { BaseTable } from './core/BaseTable';
import type { PivotTableProtected } from './ts-types/base-table';
import type { IChartColumnIndicator } from './ts-types/pivot-table/indicator/chart-indicator';
import type { Chart } from './scenegraph/graphic/chart';

export class PivotChart extends BaseTable implements PivotTableAPI {
declare internalProps: PivotTableProtected;
Expand All @@ -39,6 +41,7 @@ export class PivotChart extends BaseTable implements PivotTableAPI {
dataset?: Dataset; //数据处理对象 开启数据透视分析的表

_selectedDataItemsInChart: any[] = [];
_chartEventMap: Record<string, AnyFunction> = {};
constructor(options: PivotChartConstructorOptions) {
super(options);
if ((options as any).layout) {
Expand Down Expand Up @@ -588,28 +591,35 @@ export class PivotChart extends BaseTable implements PivotTableAPI {
};
if ((indicatorDefine as IChartColumnIndicator).chartSpec.series) {
(indicatorDefine as IChartColumnIndicator).chartSpec.series.forEach((chartSeries: any) => {
const xfield = typeof chartSeries.xField === 'string' ? chartSeries.xField : chartSeries.xField[0];
collectValuesBy[xfield] = {
const xField = typeof chartSeries.xField === 'string' ? chartSeries.xField : chartSeries.xField[0];
collectValuesBy[xField] = {
by: columnKeys,
type: 'xField'
};

const yfield = chartSeries.yField;
collectValuesBy[yfield] = {
const yField = chartSeries.yField;
collectValuesBy[yField] = {
by: rowKeys,
range: true,
sumBy: chartSeries.stack !== false && columnKeys.concat(xfield)
sumBy: chartSeries.stack !== false && columnKeys.concat(xField)
};
});
} else {
const field =
const xField =
typeof (indicatorDefine as IChartColumnIndicator).chartSpec.xField === 'string'
? (indicatorDefine as IChartColumnIndicator).chartSpec.xField
: (indicatorDefine as IChartColumnIndicator).chartSpec.xField[0];
collectValuesBy[field] = {
collectValuesBy[xField] = {
by: columnKeys,
type: 'xField'
};
//下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同
const yField = (indicatorDefine as IChartColumnIndicator).chartSpec.yField;
collectValuesBy[yField] = {
by: rowKeys,
range: true,
sumBy: (indicatorDefine as IChartColumnIndicator).chartSpec.stack !== false && columnKeys.concat(xField)
};
}
}
}
Expand All @@ -636,22 +646,29 @@ export class PivotChart extends BaseTable implements PivotTableAPI {
type: 'yField'
};

const xfield = chartSeries.xField;
collectValuesBy[xfield] = {
const xField = chartSeries.xField;
collectValuesBy[xField] = {
by: columnKeys,
range: true,
sumBy: chartSeries.stack !== false && rowKeys.concat(yField)
};
});
} else {
const field =
const yField =
typeof (indicatorDefine as IChartColumnIndicator).chartSpec.yField === 'string'
? (indicatorDefine as IChartColumnIndicator).chartSpec.yField
: (indicatorDefine as IChartColumnIndicator).chartSpec.yField[0];
collectValuesBy[field] = {
collectValuesBy[yField] = {
by: rowKeys,
type: 'yField'
};
//下面这个收集的值 应该是和收集的 collectValuesBy[indicatorDefine.indicatorKey] 相同
const xField = (indicatorDefine as IChartColumnIndicator).chartSpec.xField;
collectValuesBy[xField] = {
by: columnKeys,
range: true,
sumBy: (indicatorDefine as IChartColumnIndicator).chartSpec.stack !== false && rowKeys.concat(yField)
};
}
}
}
Expand Down Expand Up @@ -745,4 +762,42 @@ export class PivotChart extends BaseTable implements PivotTableAPI {
}
});
}
/** 获取当前hover单元格的图表实例。这个方法hover实时获取有点缺陷：鼠标hover到单元格上触发了 chart.ts中的activate方法 但此时this.stateManeger.hover?.cellPos?.col还是-1 */
_getActiveChartInstance() {
// 根据hover的单元格位置 获取单元格实例 拿到chart图元
const cellGroup = this.scenegraph.getCell(
this.stateManeger.hover?.cellPos?.col,
this.stateManeger.hover?.cellPos?.row
);
return cellGroup?.getChildren()?.[0]?.type === 'chart'
? (cellGroup.getChildren()[0] as Chart).activeChartInstance
: null;
}
/**
* 监听vchart事件
* @param type vchart事件类型
* @param listener vchart事件监听器
* @returns 事件监听器id
*/
listenChart(type: string, listener: AnyFunction): void {
// this.internalProps.layoutMap.columnObjects.forEach((indicatorObj: IndicatorData) => {
// indicatorObj.chartInstance.on(type, listener);
// });
this._chartEventMap[type] = listener;
}

unlistenChart(type: string): void {
// this.internalProps.layoutMap.columnObjects.forEach((indicatorObj: IndicatorData) => {
// indicatorObj.chartInstance.off(type);
// });
delete this._chartEventMap[type];
}
/** 给activeChartInstance逐个绑定chart用户监听事件 */
_bindChartEvent(activeChartInstance: any) {
if (activeChartInstance) {
for (const key in this._chartEventMap) {
activeChartInstance.on(key, this._chartEventMap[key]);
}
}
}
}
45 changes: 45 additions & 0 deletions packages/vtable/src/layout/pivot-layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -985,7 +985,12 @@ export class PivoLayoutMap implements LayoutMapAPI {
return indicatorObj?.chartInstance;
}

//#region pivot chart 区别于 pivot table 的特有方法
/** 将_selectedDataItemsInChart保存的数据状态同步到各个图表实例中 */
updateDataStateToChartInstance(activeChartInstance?: any): void {
if (!activeChartInstance) {
activeChartInstance = (this._table as PivotChart)._getActiveChartInstance();
}
const state = {
vtable_selected: {
filter: (datum: any) => {
Expand Down Expand Up @@ -1045,4 +1050,44 @@ export class PivoLayoutMap implements LayoutMapAPI {
}
return (collectedValues?.size ?? 0) * 50;
}
/**
* 获取图表对应的指标值
* */
getIndicatorKeyInChartSpec(_col: number, _row: number) {
const paths = this.getCellHeaderPaths(_col, _row);
let indicatorObj;
if (this.indicatorsAsCol) {
const indicatorKey = paths.colHeaderPaths.find(colPath => colPath.indicatorKey)?.indicatorKey;
indicatorObj = this._indicatorObjects.find(indicator => indicator.indicatorKey === indicatorKey);
} else {
const indicatorKey = paths.rowHeaderPaths.find(rowPath => rowPath.indicatorKey)?.indicatorKey;
indicatorObj = this._indicatorObjects.find(indicator => indicator.indicatorKey === indicatorKey);
}
const indicatorKeys: string[] = [];
const chartSpec = indicatorObj?.chartSpec;
if (chartSpec) {
if (this.indicatorsAsCol === false) {
if (chartSpec.series) {
chartSpec.series.forEach((chartSeries: any) => {
const yField = chartSeries.yField;
indicatorKeys.push[yField];
});
} else {
indicatorKeys.push(chartSpec.yField);
}
} else {
if (chartSpec.series) {
chartSpec.series.forEach((chartSeries: any) => {
const xField = chartSeries.xField;
indicatorKeys.push[xField];
});
} else {
indicatorKeys.push(chartSpec.xField);
}
}
return indicatorKeys;
}
return null;
}
//#endregion
}
17 changes: 9 additions & 8 deletions packages/vtable/src/scenegraph/graphic/chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,15 @@ export class Chart extends Group {
table.scenegraph.updateChartState(params?.datum);
}
});
// this.activeChartInstance.on('brushEnd', (params: any) => {
// console.log('brushEnd captured', params);
// table.scenegraph.updateChartState(params?.value?.inBrushData);
// Chart.temp = 0;
// setTimeout(() => {
// Chart.temp = 1;
// }, 0);
// });
this.activeChartInstance.on('brushEnd', (params: any) => {
console.log('brushEnd captured', params);
table.scenegraph.updateChartState(params?.value?.inBrushData);
Chart.temp = 0;
setTimeout(() => {
Chart.temp = 1;
}, 0);
});
(table as PivotChart)?._bindChartEvent(this.activeChartInstance);
console.log('active');
}
static temp: number = 1;
Expand Down
11 changes: 2 additions & 9 deletions packages/vtable/src/scenegraph/refresh-node/update-chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export function clearChartCacheImage(scenegraph: Scenegraph) {
});
}
}
/** 更新选中的图表图元状态 */
/** 组织图表数据状态_selectedDataItemsInChart 更新选中的图表图元状态 */
export function updateChartState(scenegraph: Scenegraph, datum: any) {
const table = scenegraph.table;
if (table.isPivotChart()) {
Expand Down Expand Up @@ -111,15 +111,8 @@ export function updateChartState(scenegraph: Scenegraph, datum: any) {
if ((table as PivotChart)._selectedDataItemsInChart.length === 0 && preSelectItemsCount === 0) {
return;
}
// 根据hover的单元格位置 获取单元格实例 拿到chart图元
const cellGroup = scenegraph.getCell(
table.stateManeger.hover?.cellPos?.col,
table.stateManeger.hover?.cellPos?.row
);

(table.internalProps.layoutMap as PivoLayoutMap).updateDataStateToChartInstance(
cellGroup?.getChildren()?.[0]?.type === 'chart' ? (cellGroup.getChildren()[0] as Chart).activeChartInstance : null
);
(table.internalProps.layoutMap as PivoLayoutMap).updateDataStateToChartInstance();
// 清楚chart缓存图片
clearChartCacheImage(scenegraph);
}
Expand Down
1 change: 1 addition & 0 deletions packages/vtable/src/ts-types/new-data-set.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ export type CollectValueBy = {
by: string[];
/** 是否计算一个range范围 true的话对应的收集数据的结果为{max:number,min:number} */
range?: boolean;
/** 收集是按照sumBy字段相同的进行分组聚合 聚合结果求最大最小值；如果不设置该值 则按单条数据求最大最小值 */
sumBy?: string[];
/** 帮助计算列宽使用 如果是chart图表 收集的是xFiled的维度值 可以根据维度值的个数乘于图元宽度计算一个最优列宽*/
type?: 'xField' | 'yField' | undefined;
Expand Down
Loading