animation duration & symbol

Author: Imiss-U1025

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

@@ -11,6 +11,8 @@ import {
   withContext,
   RedButton,
   StringControl,
+  NumberControl,
+  withDefault,
   ColorOrBoolCodeControl,
 } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
@@ -28,6 +30,45 @@ export const ItemColorComp = withContext(
   ["seriesName", "value"] as const
 );
 
+export const SymbolOptions = [
+  {
+    label: trans("chart.rect"),
+    value: "rect",
+  },
+  {
+    label: trans("chart.circle"),
+    value: "circle",
+  },
+  {
+    label: trans("chart.roundRect"),
+    value: "roundRect",
+  },
+  {
+    label: trans("chart.triangle"),
+    value: "triangle",
+  },
+  {
+    label: trans("chart.diamond"),
+    value: "diamond",
+  },
+  {
+    label: trans("chart.pin"),
+    value: "pin",
+  },
+  {
+    label: trans("chart.arrow"),
+    value: "arrow",
+  },
+  {
+    label: trans("chart.none"),
+    value: "none",
+  },
+  {
+    label: trans("chart.emptyCircle"),
+    value: "emptyCircle",
+  },
+] as const;
+
 export const LineChartConfig = (function () {
   return new MultiCompBuilder(
     {
@@ -37,13 +78,17 @@ export const LineChartConfig = (function () {
       area: BoolControl,
       smooth: BoolControl,
       itemColor: ItemColorComp,
+      symbol: dropdownControl(SymbolOptions, "emptyCircle"),
+      symbolSize: withDefault(NumberControl, 4),
     },
     (props): LineSeriesOption => {
       const config: LineSeriesOption = {
         type: "line",
         label: {
           show: props.showLabel,
         },
+        symbol: props.symbol,
+        symbolSize: props.symbolSize,
         itemStyle: {
           color: (params) => {
             if (!params.encode || !params.dimensionNames) {
@@ -94,6 +139,12 @@ export const LineChartConfig = (function () {
         {children.showEndLabel.propertyView({
           label: trans("lineChart.showEndLabel"),
         })}
+        {children.symbol.propertyView({
+          label: trans("lineChart.symbol"),
+        })}
+        {children.symbolSize.propertyView({
+          label: trans("lineChart.symbolSize"),
+        })}
         {children.smooth.propertyView({ label: trans("chart.smooth") })}
         {children.itemColor.getPropertyView()}
       </>

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx

@@ -254,6 +254,7 @@ export const chartUiModeChildren = {
   legendConfig: LegendConfig,
   chartConfig: ChartOptionComp,
   areaPieces: list(AreaPiecesTmpComp),
+  animationDuration: withDefault(NumberControl, 1000),
   onUIEvent: eventHandlerControl(UIEventOptions),
 };
 

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx

@@ -27,6 +27,7 @@ export function lineChartPropertyView(
     <>
       <Section name={trans("chart.data")}>
         {children.chartConfig.getPropertyView()}
+        {children.animationDuration.propertyView({label: "lineChart.animationDuration"})}
         <Dropdown
           value={children.xAxisKey.getView()}
           options={columnOptions}

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts

@@ -203,6 +203,7 @@ export function getEchartsConfig(
       ...gridPos,
       containLabel: true,
     },
+    animationDuration: props.animationDuration,
   };
   if (props.areaPieces.length > 0) {
     config.visualMap = {
@@ -219,7 +220,6 @@ export function getEchartsConfig(
       ))
     }
   }
-  console.log("config", config)
   if(props.chartConfig.race) {
     config = {
       ...config,

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -329,6 +329,8 @@ export const en = {
     areaPieces: "Area Pieces",
     areaPiece: "Area Piece",
     showEndLabel: "End Label",
+    symbol: "Symbol",
+    symbolSize: "Symbol Size",
   },
   barChart: {
     title: 'Title',
@@ -555,6 +557,9 @@ export const en = {
     diamond: "Diamond",
     pin: "Pin",
     arrow: "Arrow",
+    emptyCircle: "Empty Circle",
+    none: "None",
+    roundRect: "Round Rectangle",
     pointColorLabel: "Point Color",
     pointColorTooltip:
       'Set point color based on series name and value. Variables: seriesName, value. Example: \'{{value < 25000 ? "red" : "green"}}\'',