Added an ability that legend of funnel can be on the left or right.

Imiss-U1025 · Imiss-U1025 · commit 4098b68ebb1e · 2024-12-19T11:14:56.000-05:00
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
@@ -32,11 +32,11 @@ export function candleStickChartPropertyView(
           ),
         })}
         {children.echartsTitleConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
         {children.left.propertyView({ label: trans("candleStickChart.left") })}
         {children.right.propertyView({ label: trans("candleStickChart.right") })}
         {children.top.propertyView({ label: trans("candleStickChart.top") })}
         {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
-        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
         {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
         {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })}
         {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })}
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.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 FunnelLegnedAlignOptions = [
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+] as const;
+
+export const EchartsLegendAlignConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"),
+    },
+    (props): FunnelSeriesOption => {
+      const config: FunnelSeriesOption = {
+        left: "center",
+      };
+      config.left = props.legendAlign
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.legendAlign.propertyView({
+          label: trans("echarts.legendAlign"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx
@@ -0,0 +1,43 @@
+import {
+  HorizontoalIcon,
+  VerticalIcon,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const LegendLayoutOptions = [
+  {
+    label: <HorizontoalIcon />,
+    value: "horizontal",
+  },
+  {
+    label: <VerticalIcon />,
+    value: "vertical",
+  },
+] as const;
+
+export const EchartsLegendLayoutConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      legendLayout: dropdownControl(LegendLayoutOptions, "bottom"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        orient: "horizontal",
+      };
+      config.orient = props.legendLayout
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.legendLayout.propertyView({
+          label: trans("echarts.legendLayout"),
+          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
@@ -36,6 +36,8 @@ import { i18nObjs, trans } from "i18n/comps";
 import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig";
 import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig";
+import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig";
+import { EchartsLegendLayoutConfig } from "../chartComp/chartConfigs/echartsLegendLayoutConfig";
 
 export const ChartTypeOptions = [
   {
@@ -259,6 +261,8 @@ let chartJsonModeChildren: any = {
   echartsSortingConfig: EchartsSortingConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
+  echartsLegendLayoutConfig: EchartsLegendLayoutConfig,
+  echartsLegendAlignConfig: EchartsLegendAlignConfig,
   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
@@ -34,7 +34,9 @@ export function funnelChartPropertyView(
         {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
         {children.echartsSortingConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
-        {children.echartsFunnelAlignConfig.getPropertyView()}
+        {children.echartsLegendLayoutConfig.getPropertyView()}
+        {children.echartsLegendAlignConfig.getPropertyView()}
+        {children.echartsConfig.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
@@ -174,6 +174,8 @@ export function getEchartsConfig(
       "legend":props.legendVisibility&& {
         "data": props.echartsOption.data?.map(data=>data.name),
         "top": props.echartsLegendConfig.top,
+        "left": props.echartsLegendAlignConfig.left,
+        "orient": props.echartsLegendAlignConfig.orient,
         "textStyle": {
           "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
           "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -145,7 +145,9 @@ export const en = {
     labelPosition: "Label Position",
     titlePosition: "Title Position",
     funnelAlign: "Funnel Align",
-    sort: "Sort"
+    sort: "Sort",
+    legendLayout: "Chart Legend Layout",
+    legendAlign: "Chart Legend Align"
   },
   chart: {
     delete: "Delete",
diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/client/packages/lowcoder-design/src/icons/index.tsx
@@ -250,6 +250,8 @@ export { ReactComponent as MarketplaceIcon } from "./v1/icon-application-marketp
 export { ReactComponent as FavoritesIcon } from "./v1/icon-application-favorites.svg";
 export { ReactComponent as HomeSettingIcon } from "./remix/settings-4-line.svg";
 export { ReactComponent as EnterpriseIcon } from "./remix/earth-line.svg";
+export { ReactComponent as VerticalIcon } from "./remix/vertical.svg";
+export { ReactComponent as HorizontalIcon } from "./remix/horizontal.svg";
 
 
 // components
