From c7d4c9cdfafdb05fe48b351ea272c9bb6d099dca Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 15 Jan 2025 06:54:06 -0500 Subject: [PATCH 1/9] Fixed a Hook Function issue. --- .../src/comps/candleStickChartComp/candleStickChartComp.tsx | 5 +++-- .../lowcoder-comps/src/comps/chartComp/chartComp.tsx | 5 +++-- .../src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx | 4 ++-- .../src/comps/funnelChartComp/funnelChartComp.tsx | 5 +++-- .../src/comps/gaugeChartComp/gaugeChartComp.tsx | 5 +++-- .../src/comps/graphChartComp/graphChartComp.tsx | 5 +++-- .../src/comps/heatmapChartComp/heatmapChartComp.tsx | 5 +++-- .../src/comps/radarChartComp/radarChartComp.tsx | 5 +++-- .../src/comps/sankeyChartComp/sankeyChartComp.tsx | 5 +++-- .../src/comps/sunburstChartComp/sunburstChartComp.tsx | 5 +++-- .../src/comps/themeriverChartComp/themeriverChartComp.tsx | 5 +++-- .../lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx | 5 +++-- .../src/comps/treemapChartComp/treemapChartComp.tsx | 5 +++-- 13 files changed, 38 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index ff33cc260..86ab265cb 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -140,13 +140,14 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, theme?.theme?.components?.candleStickChart || {}, ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx index 29cd82349..581a75e92 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -156,13 +156,14 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { }, [mode, onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); const isMapScriptLoaded = useMemo(() => { return mapScriptLoaded || window?.google; diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx index 96bd52f0b..a3b83cb5c 100644 --- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx @@ -118,11 +118,11 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => { const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, theme?.theme?.components?.candleStickChart || {}, ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); const isMapScriptLoaded = useMemo(() => { return mapScriptLoaded || window?.google; diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index 339f4e717..091ff9d67 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -141,13 +141,14 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { }, [onUIEvent]); let echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren), theme]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx index b8237b584..57ed97efb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -142,13 +142,14 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren), theme]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx index b574db7d2..a87d9d1ee 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx @@ -142,13 +142,14 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx index bb632f98c..a5bc421cd 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx @@ -141,13 +141,14 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx index bedfd861f..edb3e6312 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx @@ -141,13 +141,14 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx index 309498579..0fedd251c 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx @@ -141,13 +141,14 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx index b3b9ffaa9..aaa6ff799 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx @@ -141,13 +141,14 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx index f2b3e237c..7724fe72a 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx @@ -141,13 +141,14 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx index 13242a3df..53fd9c8bb 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx @@ -141,13 +141,14 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx index 09515afdc..c67ea8875 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx @@ -141,13 +141,14 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => { }, [onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( - childrenToProps(echartsConfigChildren) as ToViewReturn, + childrenProps as ToViewReturn, chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) From 451a0f6b77d902ea37355dcac13dec45c389884c Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 15 Jan 2025 10:39:20 -0500 Subject: [PATCH 2/9] Fixed an issue that the theme is not applied because some properties are not defined --- .../comps/funnelChartComp/funnelChartUtils.ts | 40 +++---------------- .../comps/gaugeChartComp/gaugeChartUtils.ts | 11 +---- .../lowcoder-comps/src/util/styleWrapper.tsx | 18 ++++----- .../src/comps/comps/remoteComp/loaders.tsx | 4 +- 4 files changed, 18 insertions(+), 55 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 827a510b5..f77a9e575 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -14,6 +14,7 @@ import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; import parseBackground from "../../util/gradientBackgroundColor"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; export function transformData( originData: JSONObject[], @@ -143,15 +144,7 @@ export function getEchartsConfig( "top": props.echartsTitleVerticalConfig.top, "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18', - "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, - "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000", - "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle, - "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor, - "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.titleStyle, theme?.titleStyle) } }, "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), @@ -166,15 +159,7 @@ export function getEchartsConfig( "left": props.echartsLegendAlignConfig.left, "orient": props.echartsLegendOrientConfig.orient, "textStyle": { - "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, - "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000", - "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, - "textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.legendStyle, theme?.legendStyle) } }, "series": [ @@ -192,27 +177,12 @@ export function getEchartsConfig( "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity, - "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, - "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, - "borderRadius": Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius), - "shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, - "shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - "shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, - "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, - "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000", - "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor, - "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.labelStyle,theme?.labelStyle), }, "data": props.echartsOption.data } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index d838eeb80..52288b0eb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -15,7 +15,7 @@ import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; import parseBackground from "../../util/gradientBackgroundColor"; import {ba} from "@fullcalendar/core/internal-common"; -import {styleWrapper} from "../../util/styleWrapper"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; export function transformData( originData: JSONObject[], @@ -195,14 +195,7 @@ export function getEchartsConfig( }, "itemStyle": { "opacity": props?.opacity, - "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, - "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, - "borderRadius": Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius), - "shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, - "shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - "shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), }, "progress": { "roundCap": props.roundCap, diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx index 25349c5b9..b8648df29 100644 --- a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -7,17 +7,17 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor, "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle, "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, - "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], - "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], - "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2], + "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[0], + "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[1], + "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[2], "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor, - "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0], - "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1], - "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0] + "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize && themeContainer?.detailSize.split('px')[0], + "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize && themeContainer?.detailSize.split('px')[1], + "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding && themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0] } } @@ -25,9 +25,9 @@ export const chartStyleWrapper = (styleContainer: any, themeContainer: any, deta return { "shadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, - "shadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], - "shadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], - "shadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2], + "shadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[0], + "shadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[1], + "shadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow && themeContainer?.boxShadow?.split('px')[2], "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx index 812842910..af44f380d 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx @@ -26,8 +26,8 @@ async function npmLoader( const applicationId = (!appId || appId && appId === PUBLIC_APP_ID) ? 'none' : appId; - const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`; - + // const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`; + const entry = '../../../../../public/package/index.js'; try { const module = await import( /* @vite-ignore */ From 00e61a223734b698e5c09635bd3f6b4e8bf98562 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 15 Jan 2025 11:19:04 -0500 Subject: [PATCH 3/9] Fixed candlestick and gauge chart to apply theme. --- .../candleStickChartComp.tsx | 2 +- .../candleStickChartConstants.tsx | 4 +- .../candleStickChartPropertyView.tsx | 4 +- .../candleStickChartUtils.ts | 4 +- .../comps/gaugeChartComp/gaugeChartUtils.ts | 42 +++++++++---------- .../src/comps/comps/remoteComp/loaders.tsx | 4 +- 6 files changed, 30 insertions(+), 30 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index 86ab265cb..c07bcb62d 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -145,7 +145,7 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { return getEchartsConfig( childrenProps as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 243f16bea..88fdf6d69 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -271,8 +271,8 @@ if (EchartCandleStickChartStyle && EchartDefaultTextStyle) { ...chartJsonModeChildren, chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'), titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), - labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), - legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'), + yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index 234aaf38a..962adafbf 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -56,10 +56,10 @@ export function candleStickChartPropertyView( {children.titleStyle?.getPropertyView()}
- {children.labelStyle?.getPropertyView()} + {children.xAxisStyle?.getPropertyView()}
- {children.legendStyle?.getPropertyView()} + {children.yAxisStyle?.getPropertyView()}
); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 98f208063..e0d3be29e 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -182,7 +182,7 @@ export function getEchartsConfig( } }, axisLabel: { - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13), + ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13), } }, xAxis: props?.echartsOption && { @@ -196,7 +196,7 @@ export function getEchartsConfig( }, }, axisLabel: { - ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13), + ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13), }, boundaryGap: true, // Turn off x-axis split lines if desired, so you only see colored areas diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 52288b0eb..3330f1db1 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -709,9 +709,9 @@ export function getEchartsConfig( width: props.progressBarWidth, color: [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, axisTick: { @@ -720,9 +720,9 @@ export function getEchartsConfig( width: props.axisTickWidth, color: props.axisTickColor, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, splitLine: { @@ -731,9 +731,9 @@ export function getEchartsConfig( width: Number(props.axisTickWidth) * 1.5, color: props.axisTickColor, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, axisLabel: { @@ -754,9 +754,9 @@ export function getEchartsConfig( itemStyle: { color: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, detail: { @@ -799,9 +799,9 @@ export function getEchartsConfig( itemStyle: { color: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, detail: { @@ -845,9 +845,9 @@ export function getEchartsConfig( itemStyle: { color: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, anchor: { @@ -857,9 +857,9 @@ export function getEchartsConfig( itemStyle: { color: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", - shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], - shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], - shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[2] } }, detail: { diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx index af44f380d..812842910 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx @@ -26,8 +26,8 @@ async function npmLoader( const applicationId = (!appId || appId && appId === PUBLIC_APP_ID) ? 'none' : appId; - // const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`; - const entry = '../../../../../public/package/index.js'; + const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`; + try { const module = await import( /* @vite-ignore */ From cf5ff040e63afdbd2970f5061113d0f89b9255d2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 15 Jan 2025 14:44:52 -0500 Subject: [PATCH 4/9] Fixed basic, legancy, gauge charts to apply theme correctly. --- .../lowcoder-comps/src/comps/basicChartComp/chartUtils.ts | 3 +++ .../lowcoder-comps/src/comps/chartComp/chartUtils.ts | 5 ++++- .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 8 ++++---- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts index 435a1ead1..e5df8147b 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts @@ -228,6 +228,9 @@ export function getEchartsConfig( itemStyle: { ...series.itemStyle, ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) } })), }; diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index aa042be7a..f4d98e66b 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -181,7 +181,7 @@ export function getEchartsConfig( ...props.legendConfig, textStyle: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15) - } + }, }, tooltip: props.tooltip&&{ trigger: "axis", @@ -228,6 +228,9 @@ export function getEchartsConfig( itemStyle: { ...series.itemStyle, ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) } })), }; diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 3330f1db1..302bcb3c6 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -394,8 +394,8 @@ export function getEchartsConfig( }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), - "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize.split('px')[0] || 40, - "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize.split('px')[1] || 20, + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 40, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } @@ -554,8 +554,8 @@ export function getEchartsConfig( }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), - "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize.split('px')[0] || 50, - "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize.split('px')[1] || 20, + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 50, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, formatter: props?.ringGaugeOption?.data?.map(data => data.formatter)[0], } } From 712dae0202f6bb27f5ef51430e8b6df213f9c2b4 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 16 Jan 2025 11:46:18 -0500 Subject: [PATCH 5/9] Added additional data input and moved options to Advanced. --- .../comps/basicChartComp/chartConstants.tsx | 1 + .../basicChartComp/chartPropertyView.tsx | 9 +- .../candleStickChartConstants.tsx | 1 + .../candleStickChartPropertyView.tsx | 33 ++-- .../src/comps/chartComp/chartConstants.tsx | 1 + .../src/comps/chartComp/chartPropertyView.tsx | 9 +- .../funnelChartComp/funnelChartConstants.tsx | 1 + .../funnelChartPropertyView.tsx | 34 ++-- .../comps/funnelChartComp/funnelChartUtils.ts | 4 +- .../gaugeChartComp/gaugeChartConstants.tsx | 9 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 169 ++++++++++-------- .../graphChartComp/graphChartConstants.tsx | 1 + .../graphChartComp/graphChartPropertyView.tsx | 33 ++-- .../heatmapChartConstants.tsx | 1 + .../heatmapChartPropertyView.tsx | 33 ++-- .../radarChartComp/radarChartConstants.tsx | 1 + .../radarChartComp/radarChartPropertyView.tsx | 33 ++-- .../sankeyChartComp/sankeyChartConstants.tsx | 1 + .../sankeyChartPropertyView.tsx | 33 ++-- .../sunburstChartConstants.tsx | 1 + .../sunburstChartPropertyView.tsx | 34 ++-- .../themeriverChartConstants.tsx | 1 + .../themeriverChartPropertyView.tsx | 33 ++-- .../treeChartComp/treeChartConstants.tsx | 1 + .../treeChartComp/treeChartPropertyView.tsx | 33 ++-- .../treemapChartConstants.tsx | 1 + .../treemapChartPropertyView.tsx | 33 ++-- 27 files changed, 314 insertions(+), 230 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index aa8deb31b..6034f7172 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx @@ -253,6 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx index 405fecff2..44eda032b 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx @@ -28,9 +28,7 @@ export function chartPropertyView( const uiModePropertyView = ( <>
- {children.data.propertyView({ - label: trans("chart.data"), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.legendStyle?.getPropertyView()}
+
+ {children.data.propertyView({ + label: trans("chart.data"), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 88fdf6d69..5033f8a68 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -250,6 +250,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption), echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsTitleVerticalConfig: EchartsTitleVerticalConfig, diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index 962adafbf..163172677 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -16,21 +16,7 @@ export function candleStickChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -61,6 +47,23 @@ export function candleStickChartPropertyView(
{children.yAxisStyle?.getPropertyView()}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 7678e9d50..af8c51d5f 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -263,6 +263,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("echarts.defaultTitle")), echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index 4bc621273..754bab376 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -27,9 +27,7 @@ export function chartPropertyView( const uiModePropertyView = ( <>
- {children.data.propertyView({ - label: trans("chart.data"), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.legendStyle?.getPropertyView()}
+
+ {children.data.propertyView({ + label: trans("chart.data"), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index e31151adf..dbc860fd9 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -255,6 +255,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption), echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsTitleVerticalConfig: EchartsTitleVerticalConfig, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 55b3dc9af..b3b0f61aa 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -16,21 +16,8 @@ export function funnelChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} @@ -74,6 +61,23 @@ export function funnelChartPropertyView(
: <> }
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index f77a9e575..78b5728a9 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -159,7 +159,7 @@ export function getEchartsConfig( "left": props.echartsLegendAlignConfig.left, "orient": props.echartsLegendOrientConfig.orient, "textStyle": { - ...styleWrapper(props?.legendStyle, theme?.legendStyle) + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) } }, "series": [ @@ -182,7 +182,7 @@ export function getEchartsConfig( "label": { "show": props.label, "position": props.echartsLabelConfig.top, - ...styleWrapper(props?.labelStyle,theme?.labelStyle), + ...styleWrapper(props?.labelStyle,theme?.labelStyle, 13), }, "data": props.echartsOption.data } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 792262ac9..ef1eb073d 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -268,6 +268,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption), gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption), @@ -277,6 +278,14 @@ let chartJsonModeChildren: any = { clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption), barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption), + stageGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + gradeGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + temperatureGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + multiTitleGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + ringGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + clockGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + barometerGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 52348520b..5fd2462be 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -16,21 +16,7 @@ export function gaugeChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -74,13 +60,8 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
- - ); - - const stageGaugePropertyView = ( - <> -
- {children.stageGaugeOption.propertyView({ +
+ {children.echartsOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -95,6 +76,14 @@ export function gaugeChartPropertyView( ), })} +
+ + ); + + const stageGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -138,27 +127,30 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.stageGaugeOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); const gradeGaugePropertyView = ( <>
- {children.gradeGaugeOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -202,13 +194,8 @@ export function gaugeChartPropertyView( {/* {children.axisLabelStyle?.getPropertyView()}*/} {/*
*/}
{hiddenPropertyView(children)}
- - ); - - const temperatureGaugePropertyView = ( - <> -
- {children.temperatureGaugeOption.propertyView({ +
+ {children.gradeGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -223,6 +210,14 @@ export function gaugeChartPropertyView( ), })} +
+ + ); + + const temperatureGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -266,13 +261,8 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
- - ); - - const multiGaugePropertyView = ( - <> -
- {children.multiTitleGaugeOption.propertyView({ +
+ {children.temperatureGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -287,6 +277,15 @@ export function gaugeChartPropertyView( ), })} + +
+ + ); + + const multiGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -328,13 +327,8 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
- - ); - - const ringGaugePropertyView = ( - <> -
- {children.ringGaugeOption.propertyView({ +
+ {children.multiTitleGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -349,6 +343,14 @@ export function gaugeChartPropertyView( ), })} +
+ + ); + + const ringGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -380,13 +382,8 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
- - ); - - const barometerGaugePropertyView = ( - <> -
- {children.barometerGaugeOption.propertyView({ +
+ {children.ringGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -401,6 +398,14 @@ export function gaugeChartPropertyView( ), })} +
+ + ); + + const barometerGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -436,13 +441,8 @@ export function gaugeChartPropertyView( {children.axisLabelStyleOutline?.getPropertyView()}
{hiddenPropertyView(children)}
- - ); - - const clockGaugePropertyView = ( - <> -
- {children.clockGaugeOption.propertyView({ +
+ {children.barometerGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -457,6 +457,14 @@ export function gaugeChartPropertyView( ), })} +
+ + ); + + const clockGaugePropertyView = ( + <> +
+ {children.echartsData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -487,6 +495,23 @@ export function gaugeChartPropertyView( {children.axisLabelStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.clockGaugeOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx index 78ae01da4..6ebabad33 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx @@ -253,6 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("graphChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultGraphChartOption), echartsTitle: withDefault(StringControl, trans("graphChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx index 7ace3ab69..0a52ccfa2 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx @@ -16,21 +16,7 @@ export function graphChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitle.propertyView({ label: trans("graphChart.title"), tooltip: trans("echarts.titleTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -56,6 +42,23 @@ export function graphChartPropertyView( {children.titleStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx index 9c93f0890..d02ddb834 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx @@ -253,6 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("heatmapChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultHeatmapChartOption), echartsTitle: withDefault(StringControl, trans("heatmapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx index 6884b038b..a73837038 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx @@ -16,21 +16,7 @@ export function heatmapChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsLegendAlignConfig.getPropertyView()} @@ -71,6 +57,23 @@ export function heatmapChartPropertyView( {children.visualMapStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx index 55537d21c..64418c2c4 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx @@ -254,6 +254,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("radarChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultRadarChartOption), echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx index bfa20dc57..43cebc8c5 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx @@ -16,21 +16,7 @@ export function radarChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -70,6 +56,23 @@ export function radarChartPropertyView(
: <> }
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index e4f7538e6..5e940a604 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx @@ -253,6 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("sankeyChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultSankeyChartOption), echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx index a25b6b751..fccae4fea 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx @@ -16,21 +16,7 @@ export function sankeyChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -69,6 +55,23 @@ export function sankeyChartPropertyView(
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx index 8efb79309..043876c90 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx @@ -252,6 +252,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("sunburstChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultSunburstChartOption), echartsTitle: withDefault(StringControl, trans("sunburstChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx index 442b31da6..5ea3c1ee3 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx @@ -16,21 +16,8 @@ export function sunburstChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -61,6 +48,23 @@ export function sunburstChartPropertyView( }
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx index 6339c07d8..d28935cf7 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx @@ -253,6 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("themeriverChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultThemeriverChartOption), echartsTitle: withDefault(StringControl, trans("themeriverChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx index b96d6afb6..efa347a0d 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx @@ -16,21 +16,7 @@ export function themeriverChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -69,6 +55,23 @@ export function themeriverChartPropertyView( }
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index a982ec80a..ab7ca503d 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -250,6 +250,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("treeChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultTreeChartOption), echartsTitle: withDefault(StringControl, trans("treeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx index c87ff561c..56d851028 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx @@ -16,21 +16,7 @@ export function treeChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("treeChart.title") })} @@ -60,6 +46,23 @@ export function treeChartPropertyView(
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx index 006d8dc14..4e5676503 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx @@ -252,6 +252,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { + echartsData: withDefault(StringControl, trans("treemapChart.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultTreemapChartOption), echartsTitle: withDefault(StringControl, trans("treemapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx index 2abce3257..2632f4349 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx @@ -16,21 +16,7 @@ export function treeChartPropertyView( const jsonModePropertyView = ( <>
- {children.echartsOption.propertyView({ - label: trans("chart.echartsOptionLabel"), - styleName: "higher", - tooltip: ( - - ), - })} + {children.echartsData.propertyView({ label: trans("chart.data") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} @@ -58,6 +44,23 @@ export function treeChartPropertyView( {children.detailStyle?.getPropertyView()}
{hiddenPropertyView(children)}
+
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( + + ), + })} +
); From ad00227d5439b47ef5af062b4fc59f84dbd33246 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 16 Jan 2025 16:30:45 -0500 Subject: [PATCH 6/9] Completed the ability to input static/dynamic data via data fields added to all charts. --- .../comps/basicChartComp/chartConstants.tsx | 2 +- .../src/comps/basicChartComp/chartUtils.ts | 6 +- .../candleStickChartConstants.tsx | 2 +- .../candleStickChartUtils.ts | 4 +- .../src/comps/chartComp/chartConstants.tsx | 2 +- .../src/comps/chartComp/chartUtils.ts | 8 +- .../funnelChartComp/funnelChartConstants.tsx | 2 +- .../comps/funnelChartComp/funnelChartUtils.ts | 4 +- .../gaugeChartComp/gaugeChartConstants.tsx | 16 +- .../comps/gaugeChartComp/gaugeChartUtils.ts | 254 +++++++++++++++--- .../graphChartComp/graphChartConstants.tsx | 2 +- .../comps/graphChartComp/graphChartUtils.ts | 8 +- .../heatmapChartConstants.tsx | 2 +- .../heatmapChartComp/heatmapChartUtils.ts | 6 +- .../radarChartComp/radarChartConstants.tsx | 2 +- .../comps/radarChartComp/radarChartUtils.ts | 33 ++- .../sankeyChartComp/sankeyChartConstants.tsx | 2 +- .../comps/sankeyChartComp/sankeyChartUtils.ts | 9 +- .../sunburstChartConstants.tsx | 2 +- .../sunburstChartComp/sunburstChartUtils.ts | 8 +- .../themeriverChartConstants.tsx | 2 +- .../themeriverChartUtils.ts | 8 +- .../treeChartComp/treeChartConstants.tsx | 2 +- .../src/comps/treeChartComp/treeChartUtils.ts | 10 +- .../treemapChartConstants.tsx | 2 +- .../treemapChartComp/treemapChartUtils.ts | 6 +- 26 files changed, 302 insertions(+), 102 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index 6034f7172..ab2845f52 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx @@ -253,7 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("echarts.defaultTitle")), + echartsData: jsonControl(toJSONObjectArray), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts index e5df8147b..88b77415f 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts @@ -212,9 +212,9 @@ 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 : transformData(props.echartsData, props.xAxisKey, seriesColumnNames) + || + yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames); config = { ...config, dataset: [ diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 5033f8a68..c745dc09a 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -250,7 +250,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("candleStickChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption), echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsTitleVerticalConfig: EchartsTitleVerticalConfig, diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index e0d3be29e..2dbfab931 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -213,7 +213,7 @@ export function getEchartsConfig( show: true, position: props?.echartsLabelConfig.top }, - data: props?.echartsOption.data, + data: props?.echartsData?.data || props?.echartsOption.data, itemStyle: { ...props?.echartsOption.itemStyle, borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, @@ -227,7 +227,7 @@ export function getEchartsConfig( }, ], } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index af8c51d5f..fb715820b 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -263,7 +263,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("echarts.defaultTitle")), + echartsData: jsonControl(toJSONObjectArray), echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index f4d98e66b..b1d0aa23e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -136,7 +136,7 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - return props.echartsOption ? props.echartsOption : {}; + return props.echartsOption || props.echartsOption ? props.echartsOption : {}; } if(props.mode === "map") { const { @@ -212,9 +212,9 @@ 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 : transformData(props.echartsData, props.xAxisKey, seriesColumnNames) + || + yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames); config = { ...config, dataset: [ diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index dbc860fd9..025d792c3 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -255,7 +255,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("funnelChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption), echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsTitleVerticalConfig: EchartsTitleVerticalConfig, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 78b5728a9..0ed6d7ee2 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -184,11 +184,11 @@ export function getEchartsConfig( "position": props.echartsLabelConfig.top, ...styleWrapper(props?.labelStyle,theme?.labelStyle, 13), }, - "data": props.echartsOption.data + "data": props?.echartsData?.data || props.echartsOption.data } ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index ef1eb073d..db349bf09 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -268,7 +268,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("funnelChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption), gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption), @@ -278,13 +278,13 @@ let chartJsonModeChildren: any = { clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption), barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption), - stageGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - gradeGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - temperatureGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - multiTitleGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - ringGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - clockGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), - barometerGaugeData:withDefault(StringControl, trans("gaugeChart.defaultTitle")), + stageGaugeData:jsonControl(toObject), + gradeGaugeData:jsonControl(toObject), + temperatureGaugeData:jsonControl(toObject), + multiTitleGaugeData:jsonControl(toObject), + ringGaugeData:jsonControl(toObject), + clockGaugeData:jsonControl(toObject), + barometerGaugeData:jsonControl(toObject), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 302bcb3c6..ece1a77dc 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -156,7 +156,7 @@ export function getEchartsConfig( "trigger": "item", "formatter": "{a}
{b} : {c}%" }, - "color": props?.echartsOption?.data?.map(data => data.color), + "color": props?.echartsData?.data?.map(data => data.color) || props?.echartsOption?.data?.map(data => data.color), "series": [ { "name": props.echartsConfig.type, @@ -213,20 +213,27 @@ export function getEchartsConfig( ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 12, "#000000"), }, 'detail': { - formatter: props?.echartsOption?.data?.map(data => data.formatter)[0], + formatter: props?.echartsData?.data?.map(data => data.formatter)[0] || props?.echartsOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, "#000000"), }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, }, - "data": props.echartsOption.data?.map(item => ({ + "data": + props.echartsData.data?.map(item => ({ "value": item.value, "name": item.name, title: { ...styleWrapper(props?.labelStyle, theme?.labelStyle, 18, "#000000"), - } - })) + }})) + || + props.echartsOption.data?.map(item => ({ + "value": item.value, + "name": item.name, + title: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 18, "#000000"), + }})) } ] } @@ -242,7 +249,7 @@ export function getEchartsConfig( axisLine: { lineStyle: { width: props.stageProgressBarWidth, - color:props?.stageGaugeOption?.data?.map(data => data.color)[0] + color: props?.stageGaugeData?.data?.map(data => data.color)[0] || props?.stageGaugeOption?.data?.map(data => data.color)[0] } }, pointer: { @@ -273,12 +280,12 @@ export function getEchartsConfig( }, detail: { valueAnimation: true, - formatter: props?.stageGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.stageGaugeData?.data?.map(data => data.formatter)[0] || props?.stageGaugeOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, "inherit"), }, data: [ { - value: props?.stageGaugeOption?.data?.map(data => data.value) + value: props?.stageGaugeData?.data?.map(data => data.value) || props?.stageGaugeOption?.data?.map(data => data.value) } ] } @@ -294,7 +301,7 @@ export function getEchartsConfig( axisLine: { lineStyle: { width: props.progressBarWidth, - color:props?.gradeGaugeOption?.data?.map(data => data.color)[0] + color:props?.gradeGaugeData?.data?.map(data => data.color)[0] || props?.gradeGaugeOption?.data?.map(data => data.color)[0] } }, progress: { @@ -333,13 +340,13 @@ export function getEchartsConfig( detail: { offsetCenter: [0, '25%'], valueAnimation: true, - formatter: props?.gradeGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.gradeGaugeData?.data?.map(data => data.formatter)[0] || props?.gradeGaugeOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, 'inherit'), }, data: [ { - value: props?.gradeGaugeOption?.data?.map(data => data.value), - name: props?.gradeGaugeOption?.data?.map(data => data.name)[0], + value: props?.gradeGaugeData?.data?.map(data => data.value) || props?.gradeGaugeOption?.data?.map(data => data.value), + name: props?.gradeGaugeData?.data?.map(data => data.name)[0] || props?.gradeGaugeOption?.data?.map(data => data.name)[0], } ] } @@ -357,7 +364,7 @@ export function getEchartsConfig( showAbove: true, size: Number(props?.pointerWidth) * 1.5, itemStyle: { - color: props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] + color: props?.multiTitleGaugeData?.data && props?.multiTitleGaugeData?.data[0]["value"].slice(-1)[0] || props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] } }, progress: { @@ -365,7 +372,8 @@ export function getEchartsConfig( ...progress }, - data: props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]?.value?.map(item => ({ + data: + props?.multiTitleGaugeData?.data && props?.multiTitleGaugeData?.data[0]?.value?.map(item => ({ value: item.value, name: item.title, title: { @@ -383,7 +391,27 @@ export function getEchartsConfig( color: item.color } } - })), + })) + || + props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]?.value?.map(item => ({ + value: item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition + }, + detail: { + offsetCenter: item.valuePosition, + + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), title: { ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), @@ -396,7 +424,7 @@ export function getEchartsConfig( ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 40, "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, - formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.multiTitleGaugeData?.data?.map(data => data.formatter)[0] || props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } ] @@ -409,7 +437,7 @@ export function getEchartsConfig( ...basicSeries, radius: `${props.temperatureRadius}%`, itemStyle: { - color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0] + color: props?.temperatureGaugeData?.data?.map(data => data.color)[0] || props?.temperatureGaugeOption?.data?.map(data => data.color)[0] }, progress: { show: true, @@ -446,12 +474,12 @@ export function getEchartsConfig( detail: { valueAnimation: true, offsetCenter: [0, '-15%'], - formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.temperatureGaugeData?.data?.map(data => data.formatter)[0] || props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 30, 'inherit'), }, data: [ { - value: props?.temperatureGaugeOption?.data?.map(data => data.value) + value: props?.temperatureGaugeData?.data?.map(data => data.value) || props?.temperatureGaugeOption?.data?.map(data => data.value) } ] }, @@ -465,7 +493,7 @@ export function getEchartsConfig( max: props?.max, radius: `${props.temperatureRadius}%`, itemStyle: { - color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] + color: props?.temperatureGaugeData?.data?.map(data => data.borderColor)[0] || props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] }, progress: { show: true, @@ -491,7 +519,7 @@ export function getEchartsConfig( }, data: [ { - value: props?.temperatureGaugeOption?.data?.map(data => data.value) + value: props?.temperatureGaugeData?.data?.map(data => data.value) || props?.temperatureGaugeOption?.data?.map(data => data.value) } ] } @@ -531,7 +559,8 @@ export function getEchartsConfig( axisLabel: { show: false }, - data: props?.ringGaugeOption?.data && props?.ringGaugeOption?.data[0]?.value.map(item => ({ + data: + props?.ringGaugeData?.data && props?.ringGaugeData?.data[0]?.value.map(item => ({ value: item.value, name: item.title, title: { @@ -548,7 +577,26 @@ export function getEchartsConfig( color: item.color } } - })), + })) + || + props?.ringGaugeOption?.data && props?.ringGaugeOption?.data[0]?.value.map(item => ({ + value: item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition + }, + detail: { + offsetCenter: item.valuePosition + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), title: { ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, @@ -556,7 +604,7 @@ export function getEchartsConfig( ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[0] || 50, "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize && theme?.legendStyle?.detailSize.split('px')[1] || 20, - formatter: props?.ringGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.ringGaugeData?.data?.map(data => data.formatter)[0] || props?.ringGaugeOption?.data?.map(data => data.formatter)[0], } } ] @@ -564,7 +612,8 @@ export function getEchartsConfig( let barometerGaugeOpt = { ...basic, - series: props?.barometerGaugeOption?.data && [ + series: + props?.barometerGaugeOption?.data && [ { ...basicSeries, type: 'gauge', @@ -687,6 +736,131 @@ export function getEchartsConfig( } } ] + || + props?.barometerGaugeData?.data && [ + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeData?.data[0]?.outline?.period[0], + max: props?.barometerGaugeData?.data[0]?.outline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeData?.data[0]?.outline?.splitNumber, + radius: props?.barometerGaugeData?.data[0]?.outline?.radius, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeData?.data[0]?.outline?.color]], + width: props?.barometerGaugeData?.data[0]?.outline?.progressBarWidth + } + }, + splitLine: { + distance: -Number(props?.barometerGaugeData?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeData?.data[0]?.outline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeData?.data[0]?.outline?.color, + width: Number(props?.barometerGaugeData?.data[0]?.outline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: -Number(props?.barometerGaugeData?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeData?.data[0]?.outline?.axisTickLength), + lineStyle: { + color: props?.barometerGaugeData?.data[0]?.outline?.color, + width: props?.barometerGaugeData?.data[0]?.outline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeData?.data[0]?.outline?.progressBarWidth) - 20, + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, '#c80707') + }, + pointer: { + ...basicSeries.pointer, + icon: props?.barometerPointerIcon, + length: `${props?.barometerPointerLength}%`, + width: props?.barometerPointerWidth, + offsetCenter: [0, `${-Number(props.barometerPointer_Y)}%`], + itemStyle: { + color: props?.barometerGaugeData?.data[0]?.inline?.color + } + }, + anchor: { + show: true, + size: 10, + itemStyle: { + borderColor: '#000', + borderWidth: 1 + } + }, + detail: { + valueAnimation: true, + precision: 2, // Increase precision or keep as is + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), + offsetCenter: [0, '40%'], + formatter: props?.barometerGaugeData?.data?.map(data => data.formatter)[0], + }, + title: { + offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) + }, + data: [ + { + value: props?.barometerGaugeData?.data[0]?.value, + name: props?.barometerGaugeData?.data[0]?.name, + } + ] + }, + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeData?.data[0]?.inline?.period[0], + max: props?.barometerGaugeData?.data[0]?.inline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeData?.data[0]?.inline?.splitNumber, + radius: props?.barometerGaugeData?.data[0]?.inline?.radius, + anchor: { + show: true, + size: 6, + itemStyle: { + color: '#000' + } + }, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeData?.data[0]?.inline?.color]], + width: props?.barometerGaugeData?.data[0]?.inline?.progressBarWidth + } + }, + splitLine: { + distance: -2, // Adjust spacing + length: Number(props?.barometerGaugeData?.data[0]?.inline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeData?.data[0]?.inline?.color, + width: Number(props?.barometerGaugeData?.data[0]?.inline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: 0, + length: props?.barometerGaugeData?.data[0]?.inline?.axisTickLength, + lineStyle: { + color: props?.barometerGaugeData?.data[0]?.inline?.color, + width: props?.barometerGaugeData?.data[0]?.inline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeData?.data[0]?.inline?.progressBarWidth) + 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), + }, + pointer: { + show: false + }, + title: { + show: false + }, + detail: { + show: false + } + } + ] + } let clockGaugeOpt = { @@ -707,7 +881,7 @@ export function getEchartsConfig( axisLine: { lineStyle: { width: props.progressBarWidth, - color: [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], + color: [[1, props?.clockGaugeData?.data?.map(data => data.outlineColor)[0]]] || [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], @@ -748,11 +922,11 @@ export function getEchartsConfig( }, pointer: { icon: props?.clockPointerIcon, - width: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width, - length: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length, + width: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color, + color: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], @@ -767,7 +941,7 @@ export function getEchartsConfig( }, data: [ { - value: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value + value: props?.clockGaugeData?.data?.map(data => data.hour)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value } ] }, @@ -793,11 +967,11 @@ export function getEchartsConfig( }, pointer: { icon: props?.clockPointerIcon, - width: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width, - length: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length, + width: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color, + color: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], @@ -812,7 +986,7 @@ export function getEchartsConfig( }, data: [ { - value: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value + value: props?.clockGaugeData?.data?.map(data => data.minute)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value } ] }, @@ -839,11 +1013,11 @@ export function getEchartsConfig( }, pointer: { icon: props?.clockPointerIcon, - width: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width, - length: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length, + width: props?.clockGaugeData?.data?.map(data => data.second)[0]?.width || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width, + length: props?.clockGaugeData?.data?.map(data => data.second)[0]?.length || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color, + color: props?.clockGaugeData?.data?.map(data => data.second)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], @@ -852,10 +1026,10 @@ export function getEchartsConfig( }, anchor: { show: true, - size: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size, + size: props?.clockGaugeData?.data?.map(data => data.anchor)[0]?.size || props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size, showAbove: true, itemStyle: { - color: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color, + color: props?.clockGaugeData?.data?.map(data => data.anchor)[0]?.color || props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color, shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], @@ -870,7 +1044,7 @@ export function getEchartsConfig( }, data: [ { - value: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value + value: props?.clockGaugeData?.data?.map(data => data.second)[0]?.value || props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value } ] } diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx index 6ebabad33..80c5878cf 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx @@ -253,7 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("graphChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultGraphChartOption), echartsTitle: withDefault(StringControl, trans("graphChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts index a352b59fd..a7dbe29fb 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts @@ -154,8 +154,8 @@ export function getEchartsConfig( "type": "graph", "layout": "force", - 'categories': props.echartsOption.categories, - 'links': props.echartsOption.links, + 'categories': props?.echartsData?.categories || props.echartsOption.categories, + 'links': props?.echartsData?.links || props.echartsOption.links, "force": { "repulsion": props.repulsion, "gravity": props?.gravity, @@ -170,7 +170,7 @@ export function getEchartsConfig( width: props?.lineWidth || 1, curveness: props?.curveness }, - 'nodes': props.echartsOption.nodes, + 'nodes': props?.echartsData?.nodes || props.echartsOption.nodes, itemStyle: { "color": props.echartsOption?.color?.pointColor || "#0000ff", ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), @@ -178,7 +178,7 @@ export function getEchartsConfig( } ], } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx index d02ddb834..dd680ac30 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx @@ -253,7 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("heatmapChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultHeatmapChartOption), echartsTitle: withDefault(StringControl, trans("heatmapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts index b15388b57..6478c9bd2 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts @@ -171,7 +171,7 @@ export function getEchartsConfig( }, xAxis: { type: "category", - data: props?.echartsOption && props?.echartsOption.xAxis, + data: props?.echartsData?.xAxis || props?.echartsOption && props?.echartsOption.xAxis, axisLabel: { ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13), }, @@ -181,7 +181,7 @@ export function getEchartsConfig( }, yAxis: { type: "category", - data: props?.echartsOption && props?.echartsOption.yAxis, + data: props?.echartsData?.yAxis || props?.echartsOption && props?.echartsOption.yAxis, axisLabel: { ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13), }, @@ -193,7 +193,7 @@ export function getEchartsConfig( { name: 'Heatmap', type: 'heatmap', - data: props?.echartsOption && props?.echartsOption.data, + data: props?.echartsData?.data || props?.echartsOption && props?.echartsOption.data, label: { show: props?.labelVisibility, ...styleWrapper(props?.labelStyle, theme?.labelStyle, 12), diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx index 64418c2c4..52b0e3891 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx @@ -254,7 +254,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("radarChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultRadarChartOption), echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index f3d15b7ec..36370b7e8 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -156,7 +156,7 @@ export function getEchartsConfig( backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" ), - color: props.echartsOption.data?.map(data => data.color), + color: props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), tooltip: { trigger: "axis", formatter: function (params) { @@ -169,7 +169,7 @@ export function getEchartsConfig( }, radar: [ { - indicator: props.echartsOption.indicator, + indicator: props.echartsData.indicator || props.echartsOption.indicator, center: [`${props?.position_x}%`, `${props?.position_y}%`], startAngle: props?.startAngle, endAngle: props?.endAngle, @@ -182,13 +182,36 @@ export function getEchartsConfig( }, splitArea: { areaStyle: { - color: props?.echartsOption?.color, + color: props?.echartsData?.color || props?.echartsOption?.color, ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), } }, } ], - series: props?.echartsOption && { + series: + props?.echartsData && { + data: props?.echartsData?.series && [ + ...props?.echartsData?.series.map(item => ({ + ...item, + areaStyle: item.areaColor && { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.areaColor + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.lineColor, + width: item.lineWidth, + }, + symbolSize: item.pointSize, + itemStyle: { + color: item.pointColor + } + })) + ], + type: "radar" + } + || + props?.echartsOption && { data: props?.echartsOption?.series && [ ...props?.echartsOption?.series.map(item => ({ ...item, @@ -210,7 +233,7 @@ export function getEchartsConfig( type: "radar" } } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index 5e940a604..95e5c152b 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx @@ -253,7 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("sankeyChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultSankeyChartOption), echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index df98dca5d..57e34e0c3 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -166,11 +166,14 @@ export function getEchartsConfig( position: props.echartsLabelConfig.top, ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) }, - data: props?.echartsOption?.data && props?.echartsOption?.data?.map(item => ({ + data: props?.echartsData?.data && props?.echartsData?.data?.map(item => ({ name: item.name, itemStyle: isColorString(item.color) && {color: item.color} + })) || props?.echartsOption?.data && props?.echartsOption?.data?.map(item => ({ + name: item.name, + itemStyle: isColorString(item.color) && {color: item.color} })), - links: props.echartsOption.links, + links: props.echartsData.links || props.echartsOption.links, emphasis: { focus: props?.focus ? 'adjacency' : undefined, }, @@ -189,7 +192,7 @@ export function getEchartsConfig( } ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx index 043876c90..686d838a9 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx @@ -252,7 +252,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("sunburstChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultSunburstChartOption), echartsTitle: withDefault(StringControl, trans("sunburstChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts index 5ee63e3d2..e2fce383b 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts @@ -149,7 +149,7 @@ export function getEchartsConfig( backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" ), - color: props.echartsOption.data?.map(data => data.color), + color: props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), tooltip: props.tooltip&&{ trigger: "item", formatter: "{b}: {c}" @@ -160,8 +160,8 @@ export function getEchartsConfig( radius: [`${props?.radiusInline}%`, `${props?.radiusOutline}%`], center: [`${props?.position_x}%`, `${props?.position_y}%`], symbolSize: 7, - data: props.echartsOption.data, - levels: props.echartsOption.levels, + data: props?.echartsData?.data || props.echartsOption.data, + levels: props.echartsData.levels || props.echartsOption.levels, itemStyle: { ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) }, @@ -173,7 +173,7 @@ export function getEchartsConfig( } ], } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx index d28935cf7..7afc3bdcc 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx @@ -253,7 +253,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("themeriverChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultThemeriverChartOption), echartsTitle: withDefault(StringControl, trans("themeriverChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index 76ccc2397..e19225ca1 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts @@ -161,7 +161,7 @@ export function getEchartsConfig( top: props.echartsLegendConfig.top, left: props.echartsLegendAlignConfig.left, orient: props.echartsLegendOrientConfig.orient, - data: props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))), + data: props?.echartsData?.data && Array.from(new Set((props.echartsData.data).map(item => item[2]))) || props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))), textStyle: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) } @@ -189,7 +189,7 @@ export function getEchartsConfig( series: [ { type: props.echartsConfig.type, - data: props.echartsOption.data, + data: props?.echartsData?.data || props.echartsOption.data, label: { show: true, position: "top", @@ -204,12 +204,12 @@ export function getEchartsConfig( shadowColor: "rgba(0, 0, 0, 0.8)" } }, - color: props.echartsOption?.color && props.echartsOption.color + color: props.echartsData?.color && props.echartsData.color || props.echartsOption?.color && props.echartsOption.color }, ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index ab7ca503d..0060cd871 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -250,7 +250,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("treeChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultTreeChartOption), echartsTitle: withDefault(StringControl, trans("treeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts index 45fe69360..8d9eaeaf1 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts @@ -146,7 +146,7 @@ export function getEchartsConfig( } }, backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - color: props.echartsOption.data?.map(data => data.color), // Node colors from data + color: props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), tooltip: props.tooltip && { trigger: "item", triggerOn: "mousemove" @@ -161,7 +161,7 @@ export function getEchartsConfig( top: `${props?.top}%`, symbol: "circle", // Define the shape of the nodes (e.g., 'circle', 'rect', etc.) symbolSize: props?.pointSize || 20, // Control the size of the nodes - data: props.echartsOption.data, + data: props?.echartsData?.data || props.echartsOption.data, label: { position: "top", verticalAlign: "middle", @@ -177,17 +177,17 @@ export function getEchartsConfig( }, itemStyle: { ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), - color: props.echartsOption.pointColor, + color: props.echartsData.pointColor || props.echartsOption.pointColor, }, lineStyle: { width: props?.lineWidth || 2, // Control the line thickness - color: props.echartsOption.lineColor, + color: props.echartsData.lineColor || props.echartsOption.lineColor, ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) } } ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx index 4e5676503..2893b2093 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx @@ -252,7 +252,7 @@ export const chartUiModeChildren = { }; let chartJsonModeChildren: any = { - echartsData: withDefault(StringControl, trans("treemapChart.defaultTitle")), + echartsData: jsonControl(toObject), echartsOption: jsonControl(toObject, i18nObjs.defaultTreemapChartOption), echartsTitle: withDefault(StringControl, trans("treemapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts index 0147bc5a8..6674bd333 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts @@ -162,11 +162,11 @@ export function getEchartsConfig( right: `${props?.right}%`, bottom: `${props?.bottom}%`, top: `${props?.top}%`, - data: props.echartsOption.data, + data: props?.echartsData?.data || props.echartsOption.data, breadcrumb: { show: true }, - color: props.echartsOption.color, + color: props.echartsData.color || props.echartsOption.color, itemStyle: { ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) }, @@ -176,7 +176,7 @@ export function getEchartsConfig( } ] } - return props.echartsOption ? opt : {}; + return props.echartsData || props.echartsOption ? opt : {}; } From 3af9b0265f02b5978d8ed56fc4099ed710fbf43e Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 17 Jan 2025 04:13:13 -0500 Subject: [PATCH 7/9] Fixed the ability to input static/dynamic data via data fields added. --- .../src/comps/basicChartComp/chartUtils.ts | 4 +- .../candleStickChartUtils.ts | 21 +- .../src/comps/chartComp/chartUtils.ts | 4 +- .../comps/funnelChartComp/funnelChartUtils.ts | 4 +- .../gaugeChartComp/gaugeChartPropertyView.tsx | 14 +- .../comps/gaugeChartComp/gaugeChartUtils.ts | 253 +++++++++--------- .../comps/graphChartComp/graphChartUtils.ts | 4 +- .../comps/radarChartComp/radarChartUtils.ts | 3 +- 8 files changed, 155 insertions(+), 152 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts index 88b77415f..e82889616 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts @@ -212,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.echartsData : transformData(props.echartsData, props.xAxisKey, seriesColumnNames) - || - 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: [ diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 2dbfab931..634e7a97d 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -149,7 +149,7 @@ export function getEchartsConfig( } }, backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - color: props?.echartsOption.data?.map(data => data.color), + color: props?.echartsData.data?.map(data => data.color) || props?.echartsOption.data?.map(data => data.color), tooltip: props?.tooltip && { trigger: "axis", axisPointer: { @@ -178,7 +178,7 @@ export function getEchartsConfig( splitArea: props?.axisFlagVisibility && { show: true, areaStyle: { - color: props?.echartsOption?.axisColor + color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor } }, axisLabel: { @@ -187,12 +187,12 @@ export function getEchartsConfig( }, xAxis: props?.echartsOption && { type: 'category', - data: props?.echartsOption.xAxis && props?.echartsOption.xAxis.data, + data: props?.echartsData.xAxis && props?.echartsOption.xAxis.data, splitArea: !props?.axisFlagVisibility && { show: true, areaStyle: { // Provide multiple colors to alternate through - color: props?.echartsOption?.axisColor + color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor }, }, axisLabel: { @@ -205,7 +205,7 @@ export function getEchartsConfig( }, // Show split areas, each day with a different background color }, - series: props?.echartsOption && [ + series: props?.echartsData || props?.echartsOption && [ { name: props?.echartsConfig.type, type: props?.echartsConfig.type, @@ -214,7 +214,16 @@ export function getEchartsConfig( position: props?.echartsLabelConfig.top }, data: props?.echartsData?.data || props?.echartsOption.data, - itemStyle: { + itemStyle: props?.echartsData.itemStyle ? { + ...props?.echartsData.itemStyle, + borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, + borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, + borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius), + shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + } : { ...props?.echartsOption.itemStyle, borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index b1d0aa23e..292f5047c 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -212,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.echartsData : transformData(props.echartsData, props.xAxisKey, seriesColumnNames) - || - 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: [ diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 0ed6d7ee2..3e5e46f33 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -148,13 +148,13 @@ export function getEchartsConfig( } }, "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - "color": props.echartsOption.data?.map(data => data.color), + "color": props.echartsData.data?.map(data => data.color) || props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", "formatter": "{a}
{b} : {c}%" }, "legend":props.legendVisibility&& { - "data": props.echartsOption.data?.map(data=>data.name), + "data": props.echartsData.data?.map(data=>data.name) || props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "left": props.echartsLegendAlignConfig.left, "orient": props.echartsLegendOrientConfig.orient, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 5fd2462be..498d39eb0 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -83,7 +83,7 @@ export function gaugeChartPropertyView( const stageGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.gradeGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -150,7 +150,7 @@ export function gaugeChartPropertyView( const gradeGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.gradeGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -217,7 +217,7 @@ export function gaugeChartPropertyView( const temperatureGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.temperatureGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -285,7 +285,7 @@ export function gaugeChartPropertyView( const multiGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.multiTitleGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -350,7 +350,7 @@ export function gaugeChartPropertyView( const ringGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.ringGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -405,7 +405,7 @@ export function gaugeChartPropertyView( const barometerGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.barometerGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} @@ -464,7 +464,7 @@ export function gaugeChartPropertyView( const clockGaugePropertyView = ( <>
- {children.echartsData.propertyView({ label: trans("chart.data") })} + {children.clockGaugeData.propertyView({ label: trans("chart.data") })} {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index ece1a77dc..6dfc28720 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -137,9 +137,6 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - - - if (props.mode === "json") { const basic={ @@ -613,130 +610,6 @@ export function getEchartsConfig( let barometerGaugeOpt = { ...basic, series: - props?.barometerGaugeOption?.data && [ - { - ...basicSeries, - type: 'gauge', - min: props?.barometerGaugeOption?.data[0]?.outline?.period[0], - max: props?.barometerGaugeOption?.data[0]?.outline?.period[1], - center: [`${props?.position_x}%`, `${props?.position_y}%`], - splitNumber: props?.barometerGaugeOption?.data[0]?.outline?.splitNumber, - radius: props?.barometerGaugeOption?.data[0]?.outline?.radius, - axisLine: { - lineStyle: { - color: [[1, props?.barometerGaugeOption?.data[0]?.outline?.color]], - width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth - } - }, - splitLine: { - distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), - length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, - lineStyle: { - color: props?.barometerGaugeOption?.data[0]?.outline?.color, - width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5 - } - }, - axisTick: { - distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), - length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength), - lineStyle: { - color: props?.barometerGaugeOption?.data[0]?.outline?.color, - width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth - } - }, - axisLabel: { - distance: Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth) - 20, - ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, '#c80707') - }, - pointer: { - ...basicSeries.pointer, - icon: props?.barometerPointerIcon, - length: `${props?.barometerPointerLength}%`, - width: props?.barometerPointerWidth, - offsetCenter: [0, `${-Number(props.barometerPointer_Y)}%`], - itemStyle: { - color: props?.barometerGaugeOption?.data[0]?.inline?.color - } - }, - anchor: { - show: true, - size: 10, - itemStyle: { - borderColor: '#000', - borderWidth: 1 - } - }, - detail: { - valueAnimation: true, - precision: 2, // Increase precision or keep as is - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), - offsetCenter: [0, '40%'], - formatter: props?.barometerGaugeOption?.data?.map(data => data.formatter)[0], - }, - title: { - offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart - ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) - }, - data: [ - { - value: props?.barometerGaugeOption?.data[0]?.value, - name: props?.barometerGaugeOption?.data[0]?.name, - } - ] - }, - { - ...basicSeries, - type: 'gauge', - min: props?.barometerGaugeOption?.data[0]?.inline?.period[0], - max: props?.barometerGaugeOption?.data[0]?.inline?.period[1], - center: [`${props?.position_x}%`, `${props?.position_y}%`], - splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber, - radius: props?.barometerGaugeOption?.data[0]?.inline?.radius, - anchor: { - show: true, - size: 6, - itemStyle: { - color: '#000' - } - }, - axisLine: { - lineStyle: { - color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], - width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth - } - }, - splitLine: { - distance: -2, // Adjust spacing - length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2, - lineStyle: { - color: props?.barometerGaugeOption?.data[0]?.inline?.color, - width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5 - } - }, - axisTick: { - distance: 0, - length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength, - lineStyle: { - color: props?.barometerGaugeOption?.data[0]?.inline?.color, - width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth - } - }, - axisLabel: { - distance: Number(props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth) + 6, - ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), - }, - pointer: { - show: false - }, - title: { - show: false - }, - detail: { - show: false - } - } - ] - || props?.barometerGaugeData?.data && [ { ...basicSeries, @@ -860,6 +733,130 @@ export function getEchartsConfig( } } ] + || + props?.barometerGaugeOption?.data && [ + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeOption?.data[0]?.outline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.outline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.outline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.outline?.radius, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeOption?.data[0]?.outline?.color]], + width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth + } + }, + splitLine: { + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength), + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth) - 20, + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, '#c80707') + }, + pointer: { + ...basicSeries.pointer, + icon: props?.barometerPointerIcon, + length: `${props?.barometerPointerLength}%`, + width: props?.barometerPointerWidth, + offsetCenter: [0, `${-Number(props.barometerPointer_Y)}%`], + itemStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color + } + }, + anchor: { + show: true, + size: 10, + itemStyle: { + borderColor: '#000', + borderWidth: 1 + } + }, + detail: { + valueAnimation: true, + precision: 2, // Increase precision or keep as is + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), + offsetCenter: [0, '40%'], + formatter: props?.barometerGaugeOption?.data?.map(data => data.formatter)[0], + }, + title: { + offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) + }, + data: [ + { + value: props?.barometerGaugeOption?.data[0]?.value, + name: props?.barometerGaugeOption?.data[0]?.name, + } + ] + }, + { + ...basicSeries, + type: 'gauge', + min: props?.barometerGaugeOption?.data[0]?.inline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.inline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.inline?.radius, + anchor: { + show: true, + size: 6, + itemStyle: { + color: '#000' + } + }, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], + width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth + } + }, + splitLine: { + distance: -2, // Adjust spacing + length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: 0, + length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth) + 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), + }, + pointer: { + show: false + }, + title: { + show: false + }, + detail: { + show: false + } + } + ] } @@ -881,7 +878,7 @@ export function getEchartsConfig( axisLine: { lineStyle: { width: props.progressBarWidth, - color: [[1, props?.clockGaugeData?.data?.map(data => data.outlineColor)[0]]] || [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], + color: props?.clockGaugeData?.data?.map(data => data.outlineColor)[0] ? [[1, props?.clockGaugeData?.data?.map(data => data.outlineColor)[0]]] : [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[0], shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow && theme?.chartStyle?.boxShadow?.split('px')[1], diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts index a7dbe29fb..7db850fec 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts @@ -165,14 +165,14 @@ export function getEchartsConfig( edgeSymbolSize: [0, props?.arrowSize], symbolSize: props?.pointSize, lineStyle: { - color: props.echartsOption?.color?.lineColor || "#00000033", + color: props.echartsData?.color?.lineColor || props.echartsOption?.color?.lineColor || "#00000033", ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), width: props?.lineWidth || 1, curveness: props?.curveness }, 'nodes': props?.echartsData?.nodes || props.echartsOption.nodes, itemStyle: { - "color": props.echartsOption?.color?.pointColor || "#0000ff", + "color": props.echartsData?.color?.pointColor || props.echartsOption?.color?.pointColor || "#0000ff", ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), }, } diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index 36370b7e8..df55ca2f8 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -189,6 +189,7 @@ export function getEchartsConfig( } ], series: + props?.echartsData?.series ? props?.echartsData && { data: props?.echartsData?.series && [ ...props?.echartsData?.series.map(item => ({ @@ -210,7 +211,7 @@ export function getEchartsConfig( ], type: "radar" } - || + : props?.echartsOption && { data: props?.echartsOption?.series && [ ...props?.echartsOption?.series.map(item => ({ From c2bd0240ba9fa8c23967c1c316e9f7e35bfa2be9 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 17 Jan 2025 12:03:57 -0500 Subject: [PATCH 8/9] Fixed an issue where there are less than 10 workspaces displayed when logging in. --- client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx index 7e083f5cf..aced446bd 100644 --- a/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx +++ b/client/packages/lowcoder/src/pages/userAuth/formLoginSteps.tsx @@ -258,7 +258,7 @@ export default function FormLoginSteps(props: FormLoginProps) { {org.orgName} ))} - {orgList.length > 10 ? + {elements.total > 10 ? Date: Fri, 17 Jan 2025 12:09:16 -0500 Subject: [PATCH 9/9] Fixed some issues from candlestick charts and GeoMap. --- .../src/comps/candleStickChartComp/candleStickChartUtils.ts | 4 ++-- .../src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 634e7a97d..60fa0c10d 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -187,7 +187,7 @@ export function getEchartsConfig( }, xAxis: props?.echartsOption && { type: 'category', - data: props?.echartsData.xAxis && props?.echartsOption.xAxis.data, + data: props?.echartsData.xAxis && props?.echartsData.xAxis.data || props?.echartsOption.xAxis && props?.echartsOption.xAxis.data, splitArea: !props?.axisFlagVisibility && { show: true, areaStyle: { @@ -205,7 +205,7 @@ export function getEchartsConfig( }, // Show split areas, each day with a different background color }, - series: props?.echartsData || props?.echartsOption && [ + series: props?.echartsOption && [ { name: props?.echartsConfig.type, type: props?.echartsConfig.type, diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx index a3b83cb5c..0f13a6d4e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx @@ -116,6 +116,7 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => { }, [mapScriptLoaded]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + const childrenProps = childrenToProps(echartsConfigChildren); const option = useMemo(() => { return getEchartsConfig( childrenProps as ToViewReturn,