Skip to content

Commit

Permalink
Merge pull request #1752 from Cuiyansong/master
Browse files Browse the repository at this point in the history 
refactor chart selection model to manager
  • Loading branch information
@Cuiyansong
Cuiyansong authored Jul 28, 2022
2 parents 73506c8 + eae4861 commit c6d0c6e
Show file tree
Hide file tree
Showing 28 changed files with 1,094 additions and 724 deletions.
90 changes: 27 additions & 63 deletions frontend/src/app/components/ChartEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ import {
import { IChart } from 'app/types/Chart';
import { IChartDrillOption } from 'app/types/ChartDrillOption';
import { ChartDTO } from 'app/types/ChartDTO';
import {
chartSelectionEventListener,
drillDownEventListener,
pivotTableDrillEventListener,
richTextContextEventListener,
tablePagingAndSortEventListener,
} from 'app/utils/ChartEventListenerHelper';
import {
clearRuntimeDateLevelFieldsInChartConfig,
filterCurrentUsedComputedFields,
Expand Down Expand Up @@ -233,69 +240,26 @@ export const ChartEditor: FC<ChartEditorProps> = ({
{
name: 'click',
callback: param => {
if (
drillOptionRef.current?.isSelectedDrill &&
!drillOptionRef.current.isBottomLevel
) {
const option = drillOptionRef.current;
option.drillDown(param.data.rowData);
drillOptionRef.current = option;
handleDrillOptionChange?.(option);
return;
}
if (
param.chartType === 'table' &&
param.interactionType === 'paging-sort-filter'
) {
dispatch(
refreshDatasetAction({
sorter: {
column: param?.seriesName!,
operator: param?.value?.direction,
aggOperator: param?.value?.aggOperator,
},
pageInfo: {
pageNo: param?.value?.pageNo,
},
}),
);
return;
}
if (
param.chartType === 'rich-text' &&
param.interactionType === 'rich-text-change-context'
) {
dispatch(
updateChartConfigAndRefreshDatasetAction({
type: ChartConfigReducerActionType.STYLE,
payload: {
ancestors: [1, 0],
value: {
...chart.config.styles[1].rows[0],
value: param.value,
},
},
needRefresh: false,
updateDrillOption: config => {
return undefined;
},
}),
);
return;
}
// NOTE 透视表树形结构展开下钻特殊处理方法
if (
param.chartType === 'pivotSheet' &&
param.interactionType === 'drilled'
) {
handleDrillOptionChange?.(param.drillOption);
return;
}

// NOTE 直接修改selectedItems结果集处理方法
if (param.interactionType === 'select') {
dispatch(actions.changeSelectedItems(param.selectedItems));
}
drillDownEventListener(drillOptionRef?.current, param, p => {
drillOptionRef.current = p;
handleDrillOptionChange?.(p);
});
tablePagingAndSortEventListener(param, p => {
dispatch(refreshDatasetAction(p));
});
richTextContextEventListener(
chart.config.styles[1].rows[0] || {},
param,
p => {
dispatch(updateChartConfigAndRefreshDatasetAction(p));
},
);
pivotTableDrillEventListener(param, p => {
handleDrillOptionChange(p);
});
chartSelectionEventListener(param, p => {
dispatch(actions.changeSelectedItems(p));
});
},
},
]);
Expand Down
47 changes: 13 additions & 34 deletions frontend/src/app/components/ChartGraph/BasicBarChart/BasicBarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import { ChartDataSectionType } from 'app/constants';
import { ChartDrillOption } from 'app/models/ChartDrillOption';
import { ChartSelection } from 'app/models/ChartSelection';
import { ChartSelectionManager } from 'app/models/ChartSelectionManager';
import { IChartLifecycle } from 'app/types/Chart';
import {
ChartConfig,
Expand All @@ -35,7 +35,6 @@ import {
import ChartDataSetDTO, { IChartDataSet } from 'app/types/ChartDataSet';
import { BrokerContext, BrokerOption } from 'app/types/ChartLifecycleBroker';
import {
getChartSelection,
getColorizeGroupSeriesColumns,
getColumnRenderName,
getDrillableRows,
Expand Down Expand Up @@ -63,11 +62,11 @@ import { BarBorderStyle, BarSeriesImpl, Series } from './types';
class BasicBarChart extends Chart implements IChartLifecycle {
config = Config;
chart: any = null;
selectionManager?: ChartSelectionManager;

protected isHorizonDisplay = false;
protected isStackMode = false;
protected isPercentageYAxis = false;
private selection: null | ChartSelection = null;
protected dataZoomConfig: {
setConfig: any;
showConfig: any;
Expand Down Expand Up @@ -108,36 +107,19 @@ class BasicBarChart extends Chart implements IChartLifecycle {
context.document.getElementById(options.containerId)!,
'default',
);
this.selection = getChartSelection(context.window, {
chart: this.chart,
mouseEvents: this.mouseEvents,
});

this.selectionManager = new ChartSelectionManager(this.mouseEvents);
this.selectionManager.attachWindowListeners(context.window);
this.selectionManager.attachZRenderListeners(this.chart);
this.selectionManager.attachEChartsListeners(this.chart);

// TODO(Stephen): refactor to chart data zoom manager model
this.chart.on('datazoom', ({ end, start }) => {
this.dataZoomConfig.showConfig = {
end,
start,
};
});
this.mouseEvents?.forEach(event => {
switch (event.name) {
case 'click':
this.chart.on(event.name, params => {
this.selection?.doSelect({
index: params.componentIndex + ',' + params.dataIndex,
data: params.data,
});
event.callback({
...params,
interactionType: 'select',
selectedItems: this.selection?.selectedItems,
});
});
break;
default:
this.chart.on(event.name, event.callback);
break;
}
});
}

onUpdated(options: BrokerOption, context: BrokerContext) {
Expand All @@ -149,12 +131,8 @@ class BasicBarChart extends Chart implements IChartLifecycle {
this.chart?.clear();
return;
}
if (
this.selection?.selectedItems.length &&
!options.selectedItems?.length
) {
this.selection?.clearAll();
}

this.selectionManager?.updateSelectedItems(options?.selectedItems);
const newOptions = this.getOptions(
options.dataset,
options.config,
Expand All @@ -165,7 +143,8 @@ class BasicBarChart extends Chart implements IChartLifecycle {
}

onUnMount(options: BrokerOption, context: BrokerContext) {
this.selection?.removeEvent();
this.selectionManager?.removeWindowListeners(context.window);
this.selectionManager?.removeZRenderListeners(this.chart);
this.chart?.dispose();
}

Expand Down
44 changes: 9 additions & 35 deletions frontend/src/app/components/ChartGraph/BasicFunnelChart/BasicFunnelChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import { ChartDataSectionType } from 'app/constants';
import Chart from 'app/models/Chart';
import { ChartDrillOption } from 'app/models/ChartDrillOption';
import { ChartSelection } from 'app/models/ChartSelection';
import { ChartSelectionManager } from 'app/models/ChartSelectionManager';
import {
ChartConfig,
ChartDataSectionField,
Expand All @@ -35,7 +35,6 @@ import ChartDataSetDTO, {
import { BrokerContext, BrokerOption } from 'app/types/ChartLifecycleBroker';
import {
getAutoFunnelTopPosition,
getChartSelection,
getColumnRenderName,
getDrillableRows,
getExtraSeriesDataFormat,
Expand All @@ -55,8 +54,7 @@ import { Series, SeriesData } from './types';
class BasicFunnelChart extends Chart {
config = Config;
chart: any = null;

private selection: null | ChartSelection = null;
selectionManager?: ChartSelectionManager;

constructor() {
super(
Expand Down Expand Up @@ -85,30 +83,10 @@ class BasicFunnelChart extends Chart {
context.document.getElementById(options.containerId)!,
'default',
);
this.selection = getChartSelection(context.window, {
chart: this.chart,
mouseEvents: this.mouseEvents,
});
this.mouseEvents?.forEach(event => {
switch (event.name) {
case 'click':
this.chart.on(event.name, params => {
this.selection?.doSelect({
index: params.componentIndex + ',' + params.dataIndex,
data: params.data,
});
event.callback({
...params,
interactionType: 'select',
selectedItems: this.selection?.selectedItems,
});
});
break;
default:
this.chart.on(event.name, event.callback);
break;
}
});
this.selectionManager = new ChartSelectionManager(this.mouseEvents);
this.selectionManager.attachWindowListeners(context.window);
this.selectionManager.attachZRenderListeners(this.chart);
this.selectionManager.attachEChartsListeners(this.chart);
}

onUpdated(options: BrokerOption, context: BrokerContext) {
Expand All @@ -120,12 +98,7 @@ class BasicFunnelChart extends Chart {
if (!this.isMatchRequirement(options.config)) {
return;
}
if (
this.selection?.selectedItems.length &&
!options.selectedItems?.length
) {
this.selection?.clearAll();
}
this.selectionManager?.updateSelectedItems(options?.selectedItems);
const newOptions = this.getOptions(
options.dataset,
options.config,
Expand All @@ -136,7 +109,8 @@ class BasicFunnelChart extends Chart {
}

onUnMount(options: BrokerOption, context: BrokerContext) {
this.selection?.removeEvent();
this.selectionManager?.removeWindowListeners(context.window);
this.selectionManager?.removeZRenderListeners(this.chart);
this.chart?.dispose();
}

Expand Down
44 changes: 9 additions & 35 deletions frontend/src/app/components/ChartGraph/BasicLineChart/BasicLineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

import { ChartDataSectionType } from 'app/constants';
import { ChartDrillOption } from 'app/models/ChartDrillOption';
import { ChartSelection } from 'app/models/ChartSelection';
import { ChartSelectionManager } from 'app/models/ChartSelectionManager';
import {
ChartConfig,
ChartDataSectionField,
Expand All @@ -37,7 +37,6 @@ import {
getAxisLabel,
getAxisLine,
getAxisTick,
getChartSelection,
getColorizeGroupSeriesColumns,
getColumnRenderName,
getDrillableRows,
Expand All @@ -64,8 +63,7 @@ import { Series } from './types';
class BasicLineChart extends Chart {
config = Config;
chart: any = null;

private selection: null | ChartSelection = null;
selectionManager?: ChartSelectionManager;

protected isArea = false;
protected isStack = false;
Expand Down Expand Up @@ -104,36 +102,16 @@ class BasicLineChart extends Chart {
context.document.getElementById(options.containerId)!,
'default',
);
this.selection = getChartSelection(context.window, {
chart: this.chart,
mouseEvents: this.mouseEvents,
});
this.selectionManager = new ChartSelectionManager(this.mouseEvents);
this.selectionManager.attachWindowListeners(context.window);
this.selectionManager.attachZRenderListeners(this.chart);
this.selectionManager.attachEChartsListeners(this.chart);
this.chart.on('datazoom', ({ end, start }) => {
this.dataZoomConfig.showConfig = {
end,
start,
};
});
this.mouseEvents?.forEach(event => {
switch (event.name) {
case 'click':
this.chart.on(event.name, params => {
this.selection?.doSelect({
index: params.componentIndex + ',' + params.dataIndex,
data: params.data,
});
event.callback({
...params,
interactionType: 'select',
selectedItems: this.selection?.selectedItems,
});
});
break;
default:
this.chart.on(event.name, event.callback);
break;
}
});
}

onUpdated(options: BrokerOption, context: BrokerContext) {
Expand All @@ -144,12 +122,7 @@ class BasicLineChart extends Chart {
this.chart?.clear();
return;
}
if (
this.selection?.selectedItems.length &&
!options.selectedItems?.length
) {
this.selection?.clearAll();
}
this.selectionManager?.updateSelectedItems(options?.selectedItems);
const newOptions = this.getOptions(
options.dataset,
options.config,
Expand All @@ -166,7 +139,8 @@ class BasicLineChart extends Chart {
}

onUnMount(options: BrokerOption, context: BrokerContext) {
this.selection?.removeEvent();
this.selectionManager?.removeWindowListeners(context.window);
this.selectionManager?.removeZRenderListeners(this.chart);
this.chart?.dispose();
}

Expand Down
Loading

0 comments on commit c6d0c6e

Please sign in to comment.