race chart

Imiss-U1025 · Imiss-U1025 · commit 0580fe416575 · 2025-02-11T03:27:07.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts b/client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts
@@ -191,6 +191,16 @@ export function getEchartsConfig(
       containLabel: true,
     },
   };
+  if(props.chartConfig.race) {
+    config = {
+      ...config,
+      // Disable init animation.
+      animationDuration: 0,
+      animationDurationUpdate: 2000,
+      animationEasing: 'linear',
+      animationEasingUpdate: 'linear',
+    }
+  }
   if (props.data.length <= 0) {
     // no data
     return {
@@ -307,6 +317,22 @@ export function getEchartsConfig(
         }
       },
     };
+    
+    if(props.chartConfig.race) {
+      config = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          animationDuration: 300,
+          animationDurationUpdate: 300
+        },
+        yAxis: {
+          ...config.yAxis,
+          animationDuration: 300,
+          animationDurationUpdate: 300
+        },
+      }
+    }
   }
 
   //Waterfall x-label initialization
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx
@@ -48,15 +48,19 @@ export const BarChartConfig = (function () {
       polarStartAngle: withDefault(NumberControl, 90),
       polarEndAngle: withDefault(NumberControl, -180),
       polarIsTangent: withDefault(BoolControl, false),
+      race: withDefault(BoolControl, false),
       labelData: jsonControl(toArray, []),
     },
     (props): BarSeriesOption => {
       const config: BarSeriesOption = {
         type: "bar",
         subtype: props.type,
+        realtimeSort: props.race,
+        seriesLayoutBy: props.race?'column':undefined,
         label: {
           show: props.showLabel,
           position: "top",
+          valueAnimation: props.race,
         },
         barWidth: `${props.barWidth}%`,
         showBackground: props.showBackground,
@@ -71,8 +75,8 @@ export const BarChartConfig = (function () {
           polarEndAngle: props.polarEndAngle,
           labelData: props.labelData,
           polarIsTangent: props.polarIsTangent,
-        }
-
+        },
+        race: props.race,
       };
       if (props.type === "stackedBar") {
         config.stack = "stackValue";
@@ -101,6 +105,9 @@ export const BarChartConfig = (function () {
         {children.barWidth.propertyView({
           label: trans("barChart.barWidth"),
         })}
+        {children.race.propertyView({
+          label: trans("barChart.race"),
+        })}
         {children.showBackground.propertyView({
           label: trans("barChart.showBg"),
         })}
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -315,6 +315,7 @@ export const en = {
   barChart: {
     title: 'Title',
     barWidth: 'Bar Width(%)',
+    race: 'Race',
     showBg: 'Show Bar Background',
     bgColor: 'Background Color',
     polarIsTangent: 'Tangential Chart',
