punch card

Author: Imiss-U1025

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

@@ -40,9 +40,10 @@ export const ScatterChartConfig = (function () {
   return new MultiCompBuilder(
     {
       showLabel: BoolControl,
+      labelIndex: withDefault(NumberControl, 2),
       shape: dropdownControl(ScatterShapeOptions, "circle"),
       singleAxis: BoolControl,
-      divider: withDefault(NumberControl, 1000),
+      boundaryGap: withDefault(BoolControl, true),
     },
     (props): ScatterSeriesOption => {
       return {
@@ -52,7 +53,7 @@ export const ScatterChartConfig = (function () {
           show: props.showLabel,
           position: 'right',
           formatter: function (param) {
-            return param.data[2];
+            return param.data[props.labelIndex];
           },
         },
         labelLayout: function () {
@@ -69,22 +70,25 @@ export const ScatterChartConfig = (function () {
           }
         },
         singleAxis: props.singleAxis,
-        divider: props.divider,
+        boundaryGap: props.boundaryGap,
       };
     }
   )
     .setPropertyViewFn((children) => (
       <>
         {showLabelPropertyView(children)}
+        {children.showLabel.getView() && children.labelIndex.propertyView({
+          label: trans("scatterChart.labelIndex"),
+        })}
+        {children.boundaryGap.propertyView({
+          label: trans("scatterChart.boundaryGap"),
+        })}
         {children.shape.propertyView({
           label: trans("chart.scatterShape"),
         })}
         {children.singleAxis.propertyView({
           label: trans("scatterChart.singleAxis"),
         })}
-        {children.singleAxis.getView() && children.divider.propertyView({
-          label: trans("scatterChart.divider"),
-        })}
       </>
     ))
     .build();

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts

@@ -118,12 +118,12 @@ export function getSeriesConfig(props: EchartsConfigProps) {
       config.coordinateSystem = 'singleAxis';
       config.singleAxisIndex = index;
       config.data = [];
-      config.symbolSize = function(dataItem) {
-        return dataItem[1] / props.chartConfig.divider;
-      }
     }
     if(s.effect) config.type = "effectScatter";
     if(s.symbolSize) config.symbolSize = s.symbolSize;
+    if(s.dynamicSize) config.symbolSize = function(dataItem) {
+        return dataItem[s.dynamicIndex] / s.divider;
+      }
     return config;
   });
 }
@@ -172,8 +172,19 @@ export function getEchartsConfig(
       ...gridPos,
       containLabel: true,
     },
-    xAxis: {},
-    yAxis: {},
+    xAxis: {
+      type: "category",
+      boundaryGap: props.chartConfig.boundaryGap,
+      splitLine: {
+        show: !props.chartConfig.boundaryGap,
+      },
+      axisLine: {
+        show: props.chartConfig.boundaryGap,
+      }
+    },
+    yAxis: {
+      type: "category",
+    },
   };
 
   if (props.data.length <= 0) {

client/packages/lowcoder-comps/src/comps/scatterChartComp/seriesComp.tsx

@@ -39,7 +39,10 @@ export function newSeries(name: string, columnName: string): SeriesDataType {
 const seriesChildrenMap = {
   columnName: StringControl,
   seriesName: StringControl,
+  dynamicSize: BoolControl,
   symbolSize: NumberControl,
+  dynamicIndex: withDefault(NumberControl, "1"),
+  divider: withDefault(NumberControl, 1000),
   effect: BoolControl,
   showMarkLine: BoolControl,
   markLineFrom: withDefault(StringControl, "[0,0]"),
@@ -76,7 +79,16 @@ class SeriesComp extends SeriesTmpComp {
         {this.children.effect.propertyView({
           label: trans("scatterChart.effect"),
         })}
-        {this.children.symbolSize.propertyView({
+        {this.children.dynamicSize.propertyView({
+          label: trans("scatterChart.dynamicSize"),
+        })}
+        {this.children.dynamicSize.getView() && this.children.dynamicIndex.propertyView({
+          label: trans("scatterChart.dynamicIndex"),
+        })}
+        {this.children.dynamicSize.getView() && this.children.divider.propertyView({
+          label: trans("scatterChart.divider"),
+        })}
+        {!this.children.dynamicSize.getView() && this.children.symbolSize.propertyView({
           label: trans("scatterChart.symbolSize"),
         })}
         {this.children.showMarkLine.propertyView({

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

@@ -379,6 +379,10 @@ export const en = {
     labelLineLength2: "Label Line Length2",
   },
   scatterChart: {
+    boundaryGap: "Boundary Gap",
+    labelIndex: "Label Column Index",
+    dynamicSize: "Dynamic Size",
+    dynamicIndex: "Size Column Index",
     divider: "Divider",
     singleAxis: "Single Axis",
     effect: "Effect",