Merge pull request #1400 from lowcoder-org/feature-charts-release

Update funnel and gauge chart.

Author: FalkWolsky

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx

@@ -168,15 +168,15 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
       }}
     >
       <ReactECharts
-          ref={(e) => (echartsCompRef.current = e)}
-          style={{ height: "100%" }}
-          notMerge
-          lazyUpdate
-          opts={{ locale: getEchartsLocale() }}
-          option={option}
-          theme={mode !== 'map' ? themeConfig : undefined}
-          mode={mode}
-        />
+        ref={(e) => (echartsCompRef.current = e)}
+        style={{ height: "100%" }}
+        notMerge
+        lazyUpdate
+        opts={{ locale: getEchartsLocale() }}
+        option={option}
+        theme={mode !== 'map' ? themeConfig : undefined}
+        mode={mode}
+      />
     </ReactResizeDetector>
   );
 });

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx

@@ -38,12 +38,12 @@ export function candleStickChartPropertyView(
         {children.onEvent.propertyView()}
       </Section>
       <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+        {children.style?.getPropertyView()}
       </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );
-  
+
   const getChatConfigByMode = (mode: string) => {
     switch(mode) {
       case "json":

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts

@@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
 import { useContext } from "react";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -136,62 +137,62 @@ export function getEchartsConfig(
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
-  "title": {
-    "text": props.echartsTitle,
-    'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-    "left":"center"
-  },
-  "backgroundColor": props?.style?.background || theme?.style?.background,
-  "color": props.echartsOption.data?.map(data => data.color),
-   "tooltip": props.tooltip&&{
-    "trigger": "axis",
-    "axisPointer": {
-      "type": "cross"
-    }
-  },
-  "grid": {
-    "left": "10%",
-    "right": "10%",
-    "bottom": "10%",
-  },
-  "xAxis": {
-    "type": "category",
-    "data": props.echartsOption.xAxis.data
-  },
-  "yAxis": {
-    "type": "value",
-    "scale": true
-  },
-  "series": [
-    {
-      "name": props.echartsConfig.type,
-      "type": props.echartsConfig.type,
-      "left": "10%",
-      "top": 60,
-      "bottom": 60,
-      "width": "80%",
-      "min": 0,
-      "max": 100,
-      "gap": 2,
-      "label": {
-        "show": true,
-        "position": props.echartsLabelConfig.top
+      "title": {
+        "text": props.echartsTitle,
+        'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
+        "left":"center"
+      },
+      "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
+      "color": props.echartsOption.data?.map(data => data.color),
+      "tooltip": props.tooltip&&{
+        "trigger": "axis",
+        "axisPointer": {
+          "type": "cross"
+        }
+      },
+      "grid": {
+        "left": "10%",
+        "right": "10%",
+        "bottom": "10%",
+      },
+      "xAxis": {
+        "type": "category",
+        "data": props.echartsOption.xAxis.data
+      },
+      "yAxis": {
+        "type": "value",
+        "scale": true
       },
-      "data": props.echartsOption.data,
+      "series": [
+        {
+          "name": props.echartsConfig.type,
+          "type": props.echartsConfig.type,
+          "left": "10%",
+          "top": 60,
+          "bottom": 60,
+          "width": "80%",
+          "min": 0,
+          "max": 100,
+          "gap": 2,
+          "label": {
+            "show": true,
+            "position": props.echartsLabelConfig.top
+          },
+          "data": props.echartsOption.data,
+        }
+      ]
     }
-  ]
-}
     return props.echartsOption ? opt : {};
-    
+
   }
-  
+
   if(props.mode === "map") {
     const {
       mapZoomLevel,
       mapCenterLat,
       mapCenterLng,
-      mapOptions, 
-      showCharts, 
+      mapOptions,
+      showCharts,
     } = props;
 
     const echartsOption = mapOptions && showCharts ? mapOptions : {};

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

@@ -0,0 +1,49 @@
+import {
+  AlignClose,
+  AlignRight,
+  AlignLeft,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import {FunnelSeriesOption, LegendComponentOption} from "echarts";
+import { trans } from "i18n/comps";
+
+const FunnelAlignOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  }
+] as const;
+
+export const EchartsFunnelAlignConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      funnelAlign: dropdownControl(FunnelAlignOptions, "center"),
+    },
+    (props): FunnelSeriesOption => {
+      const config: FunnelSeriesOption = {
+        funnelAlign: "center",
+      };
+      config.funnelAlign = props.funnelAlign
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.funnelAlign.propertyView({
+          label: trans("echarts.funnelAlign"),
+          radioButton: true,
+          tooltip: trans("echarts.changingAlignTooltip")
+        })}
+      </>
+    ))
+    .build();
+})();

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

@@ -9,18 +9,18 @@ import { LegendComponentOption } from "echarts";
 import { trans } from "i18n/comps";
 
 const LabelPositionOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
   {
     label: <AlignClose />,
     value: "inside",
   },
   {
     label: <AlignRight />,
     value: "right",
-  },
-  {
-    label: <AlignLeft />,
-    value: "left",
-  },
+  }
 ] as const;
 
 export const EchartsLabelConfig = (function () {
@@ -42,6 +42,7 @@ export const EchartsLabelConfig = (function () {
         {children.position.propertyView({
           label: trans("echarts.labelPosition"),
           radioButton: true,
+          tooltip: trans("echarts.changingLabelTooltip")
         })}
       </>
     ))

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

@@ -0,0 +1,50 @@
+import {
+  AlignClose,
+  AlignRight,
+  AlignLeft,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const FunnelLegnedAlignOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "center",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  }
+] as const;
+
+export const EchartsLegendAlignConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      left: dropdownControl(FunnelLegnedAlignOptions, "center"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        left: "center",
+        type: "scroll",
+      };
+      config.left = props.left
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.left.propertyView({
+          label: trans("echarts.legendAlign"),
+          radioButton: true,
+          tooltip: trans("echarts.changingLegend_y_Tooltip")
+        })}
+      </>
+    ))
+    .build();
+})();

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

@@ -37,6 +37,7 @@ export const EchartsLegendConfig = (function () {
         {children.position.propertyView({
           label: trans("echarts.legendPosition"),
           radioButton: true,
+          tooltip: trans("echarts.changingLegend_x_Tooltip")
         })}
       </>
     ))

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

@@ -0,0 +1,45 @@
+import {
+  HorizontalIcon,
+  VerticalIcon,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const LegendOrientOptions = [
+  {
+    label: <HorizontalIcon />,
+    value: "horizontal",
+  },
+  {
+    label: <VerticalIcon />,
+    value: "vertical",
+  },
+] as const;
+
+export const EchartsLegendOrientConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      orient: dropdownControl(LegendOrientOptions, "horizontal"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        orient: "horizontal",
+        type: "scroll"
+      };
+      config.orient = props.orient
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.orient.propertyView({
+          label: trans("echarts.legendOrient"),
+          radioButton: true,
+          tooltip: trans("echarts.changingLegend_orient_Tooltip")
+        })}
+      </>
+    ))
+    .build();
+})();

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

@@ -0,0 +1,44 @@
+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,
+          tooltip: trans("echarts.changingSortTooltip")
+        })}
+      </>
+    ))
+    .build();
+})();