From 996e89fb141703510eb7f1f6ffc437ea831eecf4 Mon Sep 17 00:00:00 2001 From: YANG QIA <2013xile@gmail.com> Date: Wed, 27 Mar 2024 15:43:11 +0800 Subject: [PATCH] fix(data-vi): charts flickers (#3836) --- .../src/client/__tests__/chart-api.test.ts | 26 +++++++------- .../src/client/chart/antd/statistic.ts | 2 +- .../src/client/chart/antd/table.ts | 2 +- .../src/client/chart/chart.ts | 19 ++++------ .../src/client/chart/g2plot/bar.ts | 2 +- .../src/client/chart/g2plot/dualAxes.ts | 2 +- .../src/client/chart/g2plot/g2plot.ts | 4 +-- .../src/client/chart/g2plot/index.ts | 10 +++--- .../src/client/chart/g2plot/pie.ts | 2 +- .../src/client/renderer/ChartRenderer.tsx | 35 +++++++++---------- 10 files changed, 48 insertions(+), 56 deletions(-) diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/__tests__/chart-api.test.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/__tests__/chart-api.test.ts index 476716103..907ba76ae 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/__tests__/chart-api.test.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/__tests__/chart-api.test.ts @@ -11,38 +11,38 @@ describe('api', () => { }); test('setGroup', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group', charts1); expect(plugin.charts.charts.get('group')).toEqual(charts1); - const charts2 = [new Chart({ name: 'test2', title: 'Test2', component: null })]; + const charts2 = [new Chart({ name: 'test2', title: 'Test2', Component: null })]; plugin.charts.setGroup('group', charts2); expect(plugin.charts.charts.get('group')).toEqual(charts2); }); test('addGroup', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group1', charts1); - const charts2 = [new Chart({ name: 'test2', title: 'Test2', component: null })]; + const charts2 = [new Chart({ name: 'test2', title: 'Test2', Component: null })]; plugin.charts.addGroup('group2', charts2); expect(plugin.charts.charts.get('group1')).toEqual(charts1); expect(plugin.charts.charts.get('group2')).toEqual(charts2); }); test('add', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group', charts1); - const chart = new Chart({ name: 'test2', title: 'Test2', component: null }); + const chart = new Chart({ name: 'test2', title: 'Test2', Component: null }); plugin.charts.add('group', chart); expect(plugin.charts.charts.get('group').length).toEqual(2); expect(plugin.charts.charts.get('group')[1].name).toEqual('test2'); }); test('getChartTypes', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group1', charts1); - const charts2 = [new Chart({ name: 'test2', title: 'Test2', component: null })]; + const charts2 = [new Chart({ name: 'test2', title: 'Test2', Component: null })]; plugin.charts.setGroup('group2', charts2); expect(plugin.charts.getChartTypes()).toEqual([ { @@ -69,9 +69,9 @@ describe('api', () => { }); test('getCharts', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group1', charts1); - const charts2 = [new Chart({ name: 'test2', title: 'Test2', component: null })]; + const charts2 = [new Chart({ name: 'test2', title: 'Test2', Component: null })]; plugin.charts.setGroup('group2', charts2); expect(plugin.charts.getCharts()).toEqual({ 'group1.test1': charts1[0], @@ -80,9 +80,9 @@ describe('api', () => { }); test('getChart', () => { - const charts1 = [new Chart({ name: 'test1', title: 'Test1', component: null })]; + const charts1 = [new Chart({ name: 'test1', title: 'Test1', Component: null })]; plugin.charts.setGroup('group1', charts1); - const charts2 = [new Chart({ name: 'test2', title: 'Test2', component: null })]; + const charts2 = [new Chart({ name: 'test2', title: 'Test2', Component: null })]; plugin.charts.setGroup('group2', charts2); expect(plugin.charts.getChart('group1.test1')).toEqual(charts1[0]); expect(plugin.charts.getChart('group2.test2')).toEqual(charts2[0]); @@ -90,7 +90,7 @@ describe('api', () => { }); describe('auto infer', () => { - const chart = new Chart({ name: 'test', title: 'Test', component: null }); + const chart = new Chart({ name: 'test', title: 'Test', Component: null }); const fields = [ { name: 'price', diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/statistic.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/statistic.ts index 3d7298970..144409a9a 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/statistic.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/statistic.ts @@ -8,7 +8,7 @@ export class Statistic extends AntdChart { super({ name: 'statistic', title: 'Statistic', - component: AntdStatistic, + Component: AntdStatistic, config: [ { property: 'field', diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/table.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/table.ts index ba0763916..f0ad9ff03 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/table.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/table.ts @@ -4,7 +4,7 @@ import { Table as AntdTable } from 'antd'; export class Table extends AntdChart { constructor() { - super({ name: 'table', title: 'Table', component: AntdTable }); + super({ name: 'table', title: 'Table', Component: AntdTable }); } getProps({ data, fieldProps, general, advanced }: RenderProps) { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/chart.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/chart.ts index c6f0227b6..4f8f05492 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/chart.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/chart.ts @@ -22,7 +22,7 @@ export type RenderProps = { export interface ChartType { name: string; title: string; - component: React.FC; + Component: React.FC; schema: ISchema; init?: ( fields: FieldOption[], @@ -34,7 +34,7 @@ export interface ChartType { general?: any; advanced?: any; }; - render: (props: RenderProps) => React.FC; + getProps(props: RenderProps): any; getReference?: () => { title: string; link: string; @@ -44,21 +44,21 @@ export interface ChartType { export type ChartProps = { name: string; title: string; - component: React.FC; + Component: React.FC; config?: Config[]; }; export class Chart implements ChartType { name: string; title: string; - component: React.FC; + Component: React.FC; config: Config[]; configs = new Map(); - constructor({ name, title, component, config }: ChartProps) { + constructor({ name, title, Component, config }: ChartProps) { this.name = name; this.title = title; - this.component = component; + this.Component = Component; this.config = config; this.addConfigs(configs); } @@ -170,11 +170,4 @@ export class Chart implements ChartType { getProps(props: RenderProps): any { return props; } - - render({ data, general, advanced, fieldProps }: RenderProps) { - return () => - React.createElement(this.component, { - ...this.getProps({ data, general, advanced, fieldProps }), - }); - } } diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/bar.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/bar.ts index 211bb1976..20018cedd 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/bar.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/bar.ts @@ -4,7 +4,7 @@ import { ChartType } from '../chart'; export class Bar extends G2PlotChart { constructor() { - super({ name: 'bar', title: 'Bar Chart', component: G2PlotBar, config: ['isGroup', 'isStack', 'isPercent'] }); + super({ name: 'bar', title: 'Bar Chart', Component: G2PlotBar, config: ['isGroup', 'isStack', 'isPercent'] }); } init: ChartType['init'] = (fields, { measures, dimensions }) => { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/dualAxes.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/dualAxes.ts index 256948667..656c98c46 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/dualAxes.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/dualAxes.ts @@ -6,7 +6,7 @@ import lodash from 'lodash'; export class DualAxes extends G2PlotChart { constructor() { - super({ name: 'dualAxes', title: 'Dual Axes Chart', component: G2DualAxes }); + super({ name: 'dualAxes', title: 'Dual Axes Chart', Component: G2DualAxes }); this.config = [ 'xField', { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts index e4efec4bb..e28dd2231 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts @@ -2,11 +2,11 @@ import { Chart, ChartProps, ChartType, RenderProps } from '../chart'; import configs from './configs'; export class G2PlotChart extends Chart { - constructor({ name, title, component, config }: ChartProps) { + constructor({ name, title, Component, config }: ChartProps) { super({ name, title, - component, + Component, config: ['xField', 'yField', 'seriesField', ...(config || [])], }); this.addConfigs(configs); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/index.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/index.ts index d19deda50..653ea9148 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/index.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/index.ts @@ -7,13 +7,13 @@ export default [ new G2PlotChart({ name: 'line', title: 'Line Chart', - component: Line, + Component: Line, config: ['smooth', 'isStack'], }), new G2PlotChart({ name: 'area', title: 'Area Chart', - component: Area, + Component: Area, config: [ 'smooth', { @@ -26,16 +26,16 @@ export default [ new G2PlotChart({ name: 'column', title: 'Column Chart', - component: Column, + Component: Column, config: ['isGroup', 'isStack', 'isPercent'], }), new G2PlotChart({ name: 'bar', title: 'Bar Chart', - component: Bar, + Component: Bar, config: ['isGroup', 'isStack', 'isPercent'], }), new Pie(), new DualAxes(), - new G2PlotChart({ name: 'scatter', title: 'Scatter Chart', component: Scatter }), + new G2PlotChart({ name: 'scatter', title: 'Scatter Chart', Component: Scatter }), ]; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/pie.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/pie.ts index 588a33f10..02d77769d 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/pie.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/pie.ts @@ -4,7 +4,7 @@ import { ChartType, RenderProps } from '../chart'; export class Pie extends G2PlotChart { constructor() { - super({ name: 'pie', title: 'Pie Chart', component: G2Pie }); + super({ name: 'pie', title: 'Pie Chart', Component: G2Pie }); this.config = [ { property: 'field', diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx index f95dcc296..d7e38183c 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx @@ -12,7 +12,7 @@ import { useDesignable, } from '@nocobase/client'; import { Empty, Result, Spin, Typography } from 'antd'; -import React, { useContext } from 'react'; +import React, { memo, useContext } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { ChartConfigContext } from '../configure'; import { useData, useFieldTransformer, useFieldsWithAssociation } from '../hooks'; @@ -22,6 +22,8 @@ import { ChartRendererContext } from './ChartRendererProvider'; import { useChart } from '../chart/group'; import { ChartDataContext } from '../block/ChartDataProvider'; const { Paragraph, Text } = Typography; +import lodash from 'lodash'; +import { Line } from '@ant-design/plots'; export const ChartRenderer: React.FC & { Designer: React.FC; @@ -38,7 +40,7 @@ export const ChartRenderer: React.FC & { const chart = useChart(config?.chartType); const locale = api.auth.getLocale(); const transformers = useFieldTransformer(transform, locale); - const Component = chart?.render({ + const chartProps = chart?.getProps({ data, general, advanced, @@ -51,30 +53,27 @@ export const ChartRenderer: React.FC & { return props; }, {}), }); + const C = chart?.Component; - const C = () => - chart ? ( + if (!chart) { + return ; + } + if (!(data && data.length) && !service.loading) { + return ; + } + + return ( + { console.error(error); }} FallbackComponent={ErrorFallback} > - + - ) : ( - - ); - - if (service.loading) { - return ; - } - - if (!(data && data.length)) { - return ; - } - - return ; + + ); }; ChartRenderer.Designer = function Designer() {