Feature funnel chart

client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx

@@ -33,7 +33,7 @@ import {
   echartsConfigOmitChildren,
   getEchartsConfig,
   getSelectedPoints,
-} from "comps/chartComp/chartUtils";
+} from "./chartUtils";
 import 'echarts-extension-gmap';
 import log from "loglevel";
 
@@ -124,7 +124,7 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx

@@ -16,7 +16,8 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultTextStyle,
+  EchartDefaultChartStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +33,8 @@ import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
 import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -237,7 +240,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: StringControl,
+  title: withDefault(StringControl, trans("echarts.defaultTitle")),
   data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
@@ -255,14 +258,25 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+
+  left:withDefault(NumberControl,trans('chart.defaultLeft')),
+  right:withDefault(NumberControl,trans('chart.defaultRight')),
+  top:withDefault(NumberControl,trans('chart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
+
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
+    yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+    legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx

@@ -13,6 +13,7 @@ import {
 } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
 import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
+import {LegendConfig} from "./chartConfigs/legendConfig";
 
 export function chartPropertyView(
   children: ChartCompChildrenType,
@@ -114,7 +115,14 @@ export function chartPropertyView(
         </div>
       </Section>
       <Section name={sectionNames.layout}>
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.legendConfig.getPropertyView()}
         {children.title.propertyView({ label: trans("chart.title") })}
+        {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
         {children.chartConfig.children.compType.getView() !== "pie" && (
           <>
             {children.xAxisDirection.propertyView({
@@ -125,10 +133,24 @@ export function chartPropertyView(
             {children.yConfig.getPropertyView()}
           </>
         )}
-        {children.legendConfig.getPropertyView()}
         {hiddenPropertyView(children)}
+        {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+      </Section>
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.xAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.yAxisStyle}>
+        {children.yAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.legendStyle}>
+        {children.legendStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
     </>
   );
 

client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts

@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "./chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -134,52 +136,15 @@ export function getEchartsConfig(
   theme?: any,
 ): 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": "item",
-    "formatter": "{a} <br/>{b} : {c}%"
-  },
-  "legend":props.legendVisibility&& {
-    "data": props.echartsOption.data?.map(data=>data.name),
-    "top": props.echartsLegendConfig.top,
-  },
-  "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 : {};
-
+    return props.echartsOption ? props.echartsOption : {};
   }
-
   if(props.mode === "map") {
     const {
       mapZoomLevel,
       mapCenterLat,
       mapCenterLng,
-      mapOptions, 
-      showCharts, 
+      mapOptions,
+      showCharts,
     } = props;
 
     const echartsOption = mapOptions && showCharts ? mapOptions : {};
@@ -197,18 +162,38 @@ export function getEchartsConfig(
   // axisChart
   const axisChart = isAxisChart(props.chartConfig.type);
   const gridPos = {
-    left: 20,
-    right: props.legendConfig.left === "right" ? "10%" : 20,
-    top: 50,
-    bottom: 35,
+    left: `${props?.left}%`,
+    right: `${props?.right}%`,
+    bottom: `${props?.bottom}%`,
+    top: `${props?.top}%`,
   };
-  let config: EChartsOptionWithMap = {
-    title: { text: props.title, left: "center" },
-    tooltip: {
-      confine: true,
-      trigger: axisChart ? "axis" : "item",
+  let config: any = {
+    title: {
+      text: props.title,
+      top: props.echartsTitleVerticalConfig.top,
+      left:props.echartsTitleConfig.top,
+      textStyle: {
+        ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+      }
+    },
+    backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+    legend: {
+      ...props.legendConfig,
+      textStyle: {
+        ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
+      }
+    },
+    tooltip: props.tooltip && {
+      trigger: "axis",
+      axisPointer: {
+        type: "line",
+        lineStyle: {
+          color: "rgba(0,0,0,0.2)",
+          width: 2,
+          type: "solid"
+        }
+      }
     },
-    legend: props.legendConfig,
     grid: {
       ...gridPos,
       containLabel: true,
@@ -238,7 +223,13 @@ export function getEchartsConfig(
         sourceHeader: false,
       },
     ],
-    series: getSeriesConfig(props),
+    series: getSeriesConfig(props).map(series => ({
+      ...series,
+      itemStyle: {
+        ...series.itemStyle,
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      }
+    })),
   };
   if (axisChart) {
     // pure chart's size except the margin around
@@ -266,9 +257,19 @@ export function getEchartsConfig(
     config = {
       ...config,
       // @ts-ignore
-      xAxis: finalXyConfig.xConfig,
+      xAxis: {
+        ...finalXyConfig.xConfig,
+        axisLabel: {
+          ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
+        }
+      },
       // @ts-ignore
-      yAxis: finalXyConfig.yConfig,
+      yAxis: {
+        ...finalXyConfig.yConfig,
+        axisLabel: {
+          ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
+        }
+      },
     };
   }
   // log.log("Echarts transformedData and config", transformedData, config);

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

@@ -16,14 +16,14 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartDefaultChartStyle,
+  EchartCandleStickChartStyle,
   EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
 import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
 import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
-import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
 import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
@@ -252,7 +252,7 @@ export const chartUiModeChildren = {
 let chartJsonModeChildren: any = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
   echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
-  echartsLegendConfig: EchartsLegendConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
@@ -263,13 +263,13 @@ let chartJsonModeChildren: any = {
   dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
   dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
   tooltip: withDefault(BoolControl, true),
-  legendVisibility: withDefault(BoolControl, true),
   dataZoomVisibility: withDefault(BoolControl, true),
+  axisFlagVisibility: withDefault(BoolControl, true),
 }
-if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
+if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
     titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
     labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
     legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),

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

@@ -32,24 +32,20 @@ export function candleStickChartPropertyView(
           ),
         })}
         {children.echartsTitleConfig.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") })}
-        {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
-        {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
-        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+        {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight"), tooltip: trans("candleStickChart.dataZoomHeightTooltip") })}
+        {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom"), tooltip: trans("candleStickChart.dataZoomBottomTooltip") })}
+        {children.axisFlagVisibility.propertyView({label: trans("candleStickChart.axisFlagVisibility"), tooltip: trans("candleStickChart.axisFlagVisibilityTooltip") })}
+        {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility"), tooltip: trans("candleStickChart.dataZoomVisibilityTooltip") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-        {children.style?.getPropertyView()}
-      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}
       </Section>
 
@@ -59,15 +55,12 @@ export function candleStickChartPropertyView(
       <Section name={sectionNames.titleStyle}>
         {children.titleStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.labelStyle}>
+      <Section name={sectionNames.xAxisStyle}>
         {children.labelStyle?.getPropertyView()}
       </Section>
-      {
-        children.legendVisibility.getView() ?
-          <Section name={sectionNames.legendStyle}>
-            {children.legendStyle?.getPropertyView()}
-          </Section> : <></>
-      }
+      <Section name={sectionNames.yAxisStyle}>
+        {children.legendStyle?.getPropertyView()}
+      </Section>
     </>
   );