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

[Fix]: #1836 race condition barchart

Author: raheeliftikhar5

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

@@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   const [chartSize, setChartSize] = useState<ChartSize>();
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
+  const [chartKey, setChartKey] = useState(0);
+  const prevRaceMode = useRef<boolean>();
   const defaultChartTheme = {
     color: chartColorPalette,
     backgroundColor: "#fff",
@@ -73,6 +75,16 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  // Detect race mode changes and force chart recreation
+  const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();
+  useEffect(() => {
+    if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) {
+      // Force chart recreation when race mode changes
+      setChartKey(prev => prev + 1);
+    }
+    prevRaceMode.current = currentRaceMode;
+  }, [currentRaceMode]);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
@@ -176,10 +188,11 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   return (
     <div ref={containerRef} style={{height: '100%'}}>
       <ReactECharts
+        key={chartKey}
         ref={(e) => (echartsCompRef.current = e)}
         style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
+        notMerge={!currentRaceMode}
+        lazyUpdate={!currentRaceMode}
         opts={{ locale: getEchartsLocale() }}
         option={option}
         mode={mode}

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

@@ -201,6 +201,15 @@ export function getEchartsConfig(
       animationEasing: 'linear',
       animationEasingUpdate: 'linear',
     }
+  } else {
+    // Ensure proper animation settings when race is disabled
+    config = {
+      ...config,
+      animationDuration: 1000,
+      animationDurationUpdate: 1000,
+      animationEasing: 'cubicOut',
+      animationEasingUpdate: 'cubicOut',
+    }
   }
   if (props.data.length <= 0) {
     // no data
@@ -333,6 +342,21 @@ export function getEchartsConfig(
           animationDurationUpdate: 300
         },
       }
+    } else {
+      // Reset axis animations when race is disabled
+      config = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+        yAxis: {
+          ...config.yAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+      }
     }
   }
   // console.log("Echarts transformedData and config", transformedData, config);

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

@@ -53,7 +53,7 @@ export const BarChartConfig = (function () {
         type: "bar",
         subtype: props.type,
         realtimeSort: props.race,
-        seriesLayoutBy: props.race?'column':undefined,
+        seriesLayoutBy: props.race?'column':'row',
         label: {
           show: props.showLabel,
           position: "top",