Jan 22, 2025 · Dec 26, 2024 · Dec 26, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/client/VERSION b/client/VERSION
 2.5.3
 2.6.0
diff --git a/client/package.json b/client/package.json
 {
  "name": "lowcoder-frontend",
  "version": "2.5.0",
  "version": "2.6.0",
  "type": "module",
  "private": true,
  "workspaces": [
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
 {
  "name": "lowcoder-comps",
  "version": "2.5.4",
  "version": "2.6.1",
  "type": "module",
  "license": "MIT",
  "dependencies": {
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
  echartsConfigOmitChildren,
  getEchartsConfig,
  getSelectedPoints,
 } from "comps/chartComp/chartUtils";
 } from "./chartUtils";
 import 'echarts-extension-gmap';
 import log from "loglevel";

  }, [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))
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
  uiChildren,
  clickEvent,
  styleControl,
  EchartsStyle
  EchartDefaultTextStyle,
  EchartDefaultChartStyle,
  toArray
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
 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 = [
  {
 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"),
 };

 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'),
  }
 }

diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx
 } 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,
  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}
        </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({
            {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>
    </>
  );

diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
 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[],
  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 : {};
  // 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,
    .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: [
        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
    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);
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-frontend",
		"version": "2.5.0",
		"version": "2.6.0",
		"type": "module",
		"private": true,
		"workspaces": [
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-comps",
		"version": "2.5.4",
		"version": "2.6.1",
		"type": "module",
		"license": "MIT",
		"dependencies": {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,7 +33,7 @@ import {
		echartsConfigOmitChildren,
		getEchartsConfig,
		getSelectedPoints,
		} from "comps/chartComp/chartUtils";
		} from "./chartUtils";
		import 'echarts-extension-gmap';
		import log from "loglevel";

Expand DownExpand Up		@@ -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))
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand All		@@ -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 = [
		{
Expand DownExpand Up		@@ -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"),
Expand All		@@ -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'),
		}
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand All		@@ -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}
Expand DownExpand Up		@@ -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({
Expand All		@@ -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>
		</>
		);

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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[],
Expand DownExpand Up		@@ -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 : {};
Expand All		@@ -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,
Expand All		@@ -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: [
Expand All		@@ -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
Expand DownExpand Up		@@ -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);
Expand Down