singleAxis chart

Author: Imiss-U1025

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

@@ -2,6 +2,8 @@ import {
   MultiCompBuilder,
   dropdownControl,
   BoolControl,
+  NumberControl,
+  withDefault,
   showLabelPropertyView,
 } from "lowcoder-sdk";
 import { ScatterSeriesOption } from "echarts";
@@ -39,6 +41,8 @@ export const ScatterChartConfig = (function () {
     {
       showLabel: BoolControl,
       shape: dropdownControl(ScatterShapeOptions, "circle"),
+      singleAxis: BoolControl,
+      divider: withDefault(NumberControl, 1000),
     },
     (props): ScatterSeriesOption => {
       return {
@@ -47,6 +51,8 @@ export const ScatterChartConfig = (function () {
         label: {
           show: props.showLabel,
         },
+        singleAxis: props.singleAxis,
+        divider: props.divider,
       };
     }
   )
@@ -56,6 +62,12 @@ export const ScatterChartConfig = (function () {
         {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

@@ -117,6 +117,14 @@ export function getSeriesConfig(props: EchartsConfigProps) {
         ]
       };
     }
+    if(props.chartConfig.singleAxis) {
+      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;
     return config;
@@ -184,10 +192,18 @@ export function getEchartsConfig(
     .map((s) => s.getView().columnName);
   // y-axis is category and time, data doesn't need to aggregate
   let transformedData = props.data;
-
+  const seriesConfig = getSeriesConfig(props);
+  const singleAxis = seriesConfig.map((series, idx) => ({
+    left: 100,
+    type: 'category',
+    boundaryGap: false,
+    top: (idx * 100) / seriesConfig.length + (100/seriesConfig.length/2) + '%',
+    height: - 100 / seriesConfig.length / 4 + '%',
+  }));
+  
   config = {
     ...config,
-    series: getSeriesConfig(props).map(series => ({
+    series: seriesConfig.map(series => ({
       ...series,
       itemStyle: {
         ...series.itemStyle,
@@ -200,6 +216,18 @@ export function getEchartsConfig(
     })),
   };
 
+  if(props.chartConfig.singleAxis) {
+    config.singleAxis = singleAxis;
+    delete config.xAxis;
+    delete config.yAxis;
+    
+    config.title = seriesConfig.map((series, idx) => ({
+      textBaseline: 'middle',
+      top: ((idx + 0.5) * 100) / seriesConfig.length + '%',
+      text: series.name,
+    }));
+  }
+
   console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }

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

@@ -379,6 +379,8 @@ export const en = {
     labelLineLength2: "Label Line Length2",
   },
   scatterChart: {
+    divider: "Divider",
+    singleAxis: "Single Axis",
     effect: "Effect",
     symbolSize: "Symbol Size",
     from: "From",