Fixed icon colors and changed order.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx

@@ -26,20 +26,20 @@ const FunnelLegnedAlignOptions = [
 export const EchartsLegendAlignConfig = (function () {
   return new MultiCompBuilder(
     {
-      legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"),
+      left: dropdownControl(FunnelLegnedAlignOptions, "center"),
     },
     (props): LegendComponentOption => {
       const config: LegendComponentOption = {
-        left: "right",
+        left: "center",
         type: "scroll",
       };
-      config.left = props.legendAlign
+      config.left = props.left
       return config;
     }
   )
     .setPropertyViewFn((children) => (
       <>
-        {children.legendAlign.propertyView({
+        {children.left.propertyView({
           label: trans("echarts.legendAlign"),
           radioButton: true,
         })}

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx renamed to client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx

@@ -7,7 +7,7 @@ import {
 import { LegendComponentOption } from "echarts";
 import { trans } from "i18n/comps";
 
-const LegendLayoutOptions = [
+const LegendOrientOptions = [
   {
     label: <HorizontoalIcon />,
     value: "horizontal",
@@ -18,24 +18,24 @@ const LegendLayoutOptions = [
   },
 ] as const;
 
-export const EchartsLegendLayoutConfig = (function () {
+export const EchartsLegendOrientConfig = (function () {
   return new MultiCompBuilder(
     {
-      legendLayout: dropdownControl(LegendLayoutOptions, "bottom"),
+      orient: dropdownControl(LegendOrientOptions, "horizontal"),
     },
     (props): LegendComponentOption => {
       const config: LegendComponentOption = {
-        orient: "vertical",
+        orient: "horizontal",
         type: "scroll"
       };
-      config.orient = props.legendLayout
+      config.orient = props.orient
       return config;
     }
   )
     .setPropertyViewFn((children) => (
       <>
-        {children.legendLayout.propertyView({
-          label: trans("echarts.legendLayout"),
+        {children.orient.propertyView({
+          label: trans("echarts.legendOrient"),
           radioButton: true,
         })}
       </>

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx

@@ -0,0 +1,44 @@
+import {
+  AlignBottom,
+  AlignTop,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const LegendPositionOptions = [
+  {
+    label: <AlignBottom />,
+    value: "bottom",
+  },
+  {
+    label: <AlignTop />,
+    value: "top",
+  },
+] as const;
+
+export const EchartsTitleVerticalConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(LegendPositionOptions, "top"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "top",
+        type: "scroll",
+      };
+      config.top = props.position
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("echarts.titlePositionVertical"),
+          radioButton: true,
+        })}
+      </>
+    ))
+    .build();
+})();

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

@@ -37,7 +37,8 @@ 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";
+import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 
 export const ChartTypeOptions = [
   {
@@ -261,10 +262,11 @@ let chartJsonModeChildren: any = {
   echartsSortingConfig: EchartsSortingConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
-  echartsLegendLayoutConfig: EchartsLegendLayoutConfig,
+  echartsLegendOrientConfig: EchartsLegendOrientConfig,
   echartsLegendAlignConfig: EchartsLegendAlignConfig,
   echartsConfig: EchartsOptionComp,
   echartsTitleConfig:EchartsTitleConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
   // style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   label: withDefault(BoolControl, true),

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx

@@ -31,13 +31,14 @@ export function funnelChartPropertyView(
             </div>
           ),
         })}
-        {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
         {children.echartsSortingConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
         {children.echartsFunnelAlignConfig.getPropertyView()}
-        {children.legendVisibility.getView() && children.echartsLegendLayoutConfig.getPropertyView()}
-        {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
-        {children.echartsTitleConfig.getPropertyView()}
         {children.left.propertyView({ label: trans("funnelChart.left") })}
         {children.top.propertyView({ label: trans("funnelChart.top") })}
         {children.bottom.propertyView({ label: trans("funnelChart.bottom") })}

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

@@ -141,13 +141,14 @@ export const en = {
   },
   echarts: {
     defaultTitle: "Data Display",
-    legendPosition: "Legend Position",
-    labelPosition: "Label Position",
-    titlePosition: "Title Position",
+    legendPosition: "Legend-X",
+    legendOrient: "Legend Orient",
+    legendAlign: "Legend-Y",
+    labelPosition: "Label-X",
+    titlePosition: "Title-X",
+    titlePositionVertical: "Title-Y",
     funnelAlign: "Funnel Align",
     sort: "Sort",
-    legendLayout: "Chart Legend Layout",
-    legendAlign: "Chart Legend Align"
   },
   chart: {
     delete: "Delete",