Commit 1094c43

authored

Merge pull request #1927 from iamfaran/fix/1836-barchart

[Fix]: #1836 race condition barchart

2 parents aecdd0d + a6c5cf3 commit 1094c43Copy full SHA for 1094c43

File tree

3 files changed

+40

-3

lines changed

client/packages/lowcoder-comps/src/comps
- barChartComp
  - barChartComp.tsx
  - barChartUtils.ts
- basicChartComp/chartConfigs
  - barChartConfig.tsx

3 files changed

+40

-3

lines changed

`‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx`

Lines changed: 15 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {`
`61`	`61`	`const [chartSize, setChartSize] = useState<ChartSize>();`
`62`	`62`	`const firstResize = useRef(true);`
`63`	`63`	`const theme = useContext(ThemeContext);`
	`64`	`+ const [chartKey, setChartKey] = useState(0);`
	`65`	`+ const prevRaceMode = useRef<boolean>();`
`64`	`66`	`const defaultChartTheme = {`
`65`	`67`	`color: chartColorPalette,`
`66`	`68`	`backgroundColor: "#fff",`
`@@ -73,6 +75,16 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {`
`73`	`75`	`log.error('theme chart error: ', error);`
`74`	`76`	`}`
`75`	`77`
	`78`	`+ // Detect race mode changes and force chart recreation`
	`79`	`+ const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();`
	`80`	`+ useEffect(() => {`
	`81`	`+ if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) {`
	`82`	`+ // Force chart recreation when race mode changes`
	`83`	`+ setChartKey(prev => prev + 1);`
	`84`	`+ }`
	`85`	`+ prevRaceMode.current = currentRaceMode;`
	`86`	`+ }, [currentRaceMode]);`
	`87`	`+`
`76`	`88`	`const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {`
`77`	`89`	`await getPromiseAfterDispatch(`
`78`	`90`	`dispatch,`
`@@ -176,10 +188,11 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {`
`176`	`188`	`return (`
`177`	`189`	`<div ref={containerRef} style={{height: '100%'}}>`
`178`	`190`	`<ReactECharts`
	`191`	`+ key={chartKey}`
`179`	`192`	`ref={(e) => (echartsCompRef.current = e)}`
`180`	`193`	`style={{ height: "100%" }}`
`181`		`- notMerge`
`182`		`- lazyUpdate`
	`194`	`+ notMerge={!currentRaceMode}`
	`195`	`+ lazyUpdate={!currentRaceMode}`
`183`	`196`	`opts={{ locale: getEchartsLocale() }}`
`184`	`197`	`option={option}`
`185`	`198`	`mode={mode}`

`‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts`

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -201,6 +201,15 @@ export function getEchartsConfig(`
`201`	`201`	`animationEasing: 'linear',`
`202`	`202`	`animationEasingUpdate: 'linear',`
`203`	`203`	`}`
	`204`	`+ } else {`
	`205`	`+ // Ensure proper animation settings when race is disabled`
	`206`	`+ config = {`
	`207`	`+ ...config,`
	`208`	`+ animationDuration: 1000,`
	`209`	`+ animationDurationUpdate: 1000,`
	`210`	`+ animationEasing: 'cubicOut',`
	`211`	`+ animationEasingUpdate: 'cubicOut',`
	`212`	`+ }`
`204`	`213`	`}`
`205`	`214`	`if (props.data.length <= 0) {`
`206`	`215`	`// no data`
`@@ -333,6 +342,21 @@ export function getEchartsConfig(`
`333`	`342`	`animationDurationUpdate: 300`
`334`	`343`	`},`
`335`	`344`	`}`
	`345`	`+ } else {`
	`346`	`+ // Reset axis animations when race is disabled`
	`347`	`+ config = {`
	`348`	`+ ...config,`
	`349`	`+ xAxis: {`
	`350`	`+ ...config.xAxis,`
	`351`	`+ animationDuration: undefined,`
	`352`	`+ animationDurationUpdate: undefined`
	`353`	`+ },`
	`354`	`+ yAxis: {`
	`355`	`+ ...config.yAxis,`
	`356`	`+ animationDuration: undefined,`
	`357`	`+ animationDurationUpdate: undefined`
	`358`	`+ },`
	`359`	`+ }`
`336`	`360`	`}`
`337`	`361`	`}`
`338`	`362`	`// console.log("Echarts transformedData and config", transformedData, config);`

`‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ export const BarChartConfig = (function () {`
`53`	`53`	`type: "bar",`
`54`	`54`	`subtype: props.type,`
`55`	`55`	`realtimeSort: props.race,`
`56`		`- seriesLayoutBy: props.race?'column':undefined,`
	`56`	`+ seriesLayoutBy: props.race?'column':'row',`
`57`	`57`	`label: {`
`58`	`58`	`show: props.showLabel,`
`59`	`59`	`position: "top",`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 1094c43

File tree

3 files changed

3 files changed

`‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx`

`‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts`

`‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx`

0 commit comments