Added funnel Align in Funnel Chart.

Imiss-U1025 · Imiss-U1025 · commit 0b84762af96d · 2024-12-19T11:14:39.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx
@@ -0,0 +1,48 @@
+import {
+  AlignClose,
+  AlignRight,
+  AlignLeft,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import {FunnelSeriesOption, LegendComponentOption} from "echarts";
+import { trans } from "i18n/comps";
+
+const FunnelAlignOptions = [
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+] as const;
+
+export const EchartsFunnelAlignConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(FunnelAlignOptions, "center"),
+    },
+    (props): FunnelSeriesOption => {
+      const config: FunnelSeriesOption = {
+        top: "center",
+      };
+      config.top = props.position
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("echarts.funnelAlign"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -24,6 +24,7 @@ import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxi
 import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
 import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
 import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
+import { EchartsFunnelAlignConfig } from "../chartComp/chartConfigs/echartsFunnelAlignConfig";
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
 import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
 import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
@@ -253,6 +254,7 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
   echartsConfig: EchartsOptionComp,
   echartsTitleConfig:EchartsTitleConfig,
   // style: styleControl(EchartsStyle, 'style'),
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
@@ -33,6 +33,7 @@ export function funnelChartPropertyView(
         })}
         {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
+        {children.echartsFunnelAlignConfig.getPropertyView()}
         {children.echartsTitleConfig.getPropertyView()}
         {children.left.propertyView({ label: trans("funnelChart.left") })}
         {children.top.propertyView({ label: trans("funnelChart.top") })}
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -161,6 +161,7 @@ export function getEchartsConfig(
       "min": props.min,
       "max": props.max,
       "gap": props.gap,
+      "funnelAlign": props.echartsFunnelAlignConfig.top,
       "itemStyle": {
         "opacity": props.opacity
       },
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -110,6 +110,7 @@ export const en = {
     legendPosition: "Legend Position",
     labelPosition: "Label Position",
     titlePosition: "Title Position",
+    funnelAlign: "Funnel Align"
   },
   chart: {
     delete: "Delete",
