Added sort in Funnel Chart

Imiss-U1025 · Imiss-U1025 · commit f006f89b4cb4 · 2024-12-19T11:14:41.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
@@ -26,19 +26,19 @@ const FunnelAlignOptions = [
 export const EchartsFunnelAlignConfig = (function () {
   return new MultiCompBuilder(
     {
-      position: dropdownControl(FunnelAlignOptions, "center"),
+      funnelAlign: dropdownControl(FunnelAlignOptions, "center"),
     },
     (props): FunnelSeriesOption => {
       const config: FunnelSeriesOption = {
-        top: "center",
+        funnelAlign: "center",
       };
-      config.top = props.position
+      config.funnelAlign = props.funnelAlign
       return config;
     }
   )
     .setPropertyViewFn((children) => (
       <>
-        {children.position.propertyView({
+        {children.funnelAlign.propertyView({
           label: trans("echarts.funnelAlign"),
           radioButton: true,
         })}
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx
@@ -0,0 +1,43 @@
+import {
+  AlignBottom,
+  AlignTop,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import {FunnelSeriesOption, LegendComponentOption} from "echarts";
+import { trans } from "i18n/comps";
+
+const SortingOptions = [
+  {
+    label: <AlignBottom />,
+    value: "descending",
+  },
+  {
+    label: <AlignTop />,
+    value: "ascending",
+  },
+] as const;
+
+export const EchartsSortingConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      sort: dropdownControl(SortingOptions, "descending"),
+    },
+    (props): FunnelSeriesOption => {
+      const config: FunnelSeriesOption = {
+        sort: "descending"
+      };
+      config.sort = props.sort
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.sort.propertyView({
+          label: trans("echarts.sort"),
+          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
@@ -33,6 +33,7 @@ import { EChartsOption } from "echarts";
 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";
 
 export const ChartTypeOptions = [
   {
@@ -253,6 +254,7 @@ let chartJsonModeChildren: any = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption),
   echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
+  echartsSortingConfig: EchartsSortingConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
   echartsConfig: EchartsOptionComp,
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
@@ -32,6 +32,7 @@ export function funnelChartPropertyView(
           ),
         })}
         {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
+        {children.echartsSortingConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}
         {children.echartsFunnelAlignConfig.getPropertyView()}
         {children.echartsTitleConfig.getPropertyView()}
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -161,7 +161,8 @@ export function getEchartsConfig(
       "min": props.min,
       "max": props.max,
       "gap": props.gap,
-      "funnelAlign": props.echartsFunnelAlignConfig.top,
+      "funnelAlign": props.echartsFunnelAlignConfig.funnelAlign,
+      "sort": props.echartsSortingConfig.sort,
       "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,7 +110,8 @@ export const en = {
     legendPosition: "Legend Position",
     labelPosition: "Label Position",
     titlePosition: "Title Position",
-    funnelAlign: "Funnel Align"
+    funnelAlign: "Funnel Align",
+    sort: "Sort"
   },
   chart: {
     delete: "Delete",
