Merge pull request #1458 from lowcoder-org/dev

Dev -> Main v2.6

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.5.3
+2.6.0

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "type": "module",
   "private": true,
   "workspaces": [

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.5.4",
+  "version": "2.6.1",
   "type": "module",
   "license": "MIT",
   "dependencies": {

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";
 
@@ -120,13 +120,16 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
   }, [onUIEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
+
+  const childrenProps = childrenToProps(echartsConfigChildren);
+
   const option = useMemo(() => {
     return getEchartsConfig(
-      childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
+      childrenProps as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
-  }, [chartSize, ...Object.values(echartsConfigChildren)]);
+  }, [childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
 
   useEffect(() => {
     comp.children.mapInstance.dispatch(changeValueAction(null, false))

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

@@ -16,7 +16,9 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultTextStyle,
+  EchartDefaultChartStyle,
+  toArray
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +34,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 +241,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"),
@@ -250,19 +254,31 @@ export const chartUiModeChildren = {
 };
 
 let chartJsonModeChildren: any = {
+  echartsData: jsonControl(toArray),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
   echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
   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,
@@ -27,9 +28,7 @@ export function chartPropertyView(
   const uiModePropertyView = (
     <>
       <Section name={trans("chart.data")}>
-        {children.data.propertyView({
-          label: trans("chart.data"),
-        })}
+        {children.echartsData.propertyView({ label: trans("chart.data") })}
         <Dropdown
           value={children.chartConfig.children.compType.getView()}
           options={ChartTypeOptions}
@@ -114,7 +113,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 +131,29 @@ 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.advanced}>
+        {children.data.propertyView({
+          label: trans("chart.data"),
+        })}
       </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,
@@ -227,9 +212,7 @@ export function getEchartsConfig(
     .map((s) => s.getView().columnName);
   // y-axis is category and time, data doesn't need to aggregate
   const transformedData =
-    yAxisConfig.type === "category" || yAxisConfig.type === "time"
-      ? props.data
-      : transformData(props.data, props.xAxisKey, seriesColumnNames);
+    yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
   config = {
     ...config,
     dataset: [
@@ -238,7 +221,16 @@ export function getEchartsConfig(
         sourceHeader: false,
       },
     ],
-    series: getSeriesConfig(props),
+    series: getSeriesConfig(props).map(series => ({
+      ...series,
+      itemStyle: {
+        ...series.itemStyle,
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      },
+      lineStyle: {
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+      }
+    })),
   };
   if (axisChart) {
     // pure chart's size except the margin around
@@ -266,9 +258,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);