From 0bd9122bd0427dcec9186a2b40829f7a75691f16 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 6 Dec 2024 03:12:13 -0500 Subject: [PATCH 01/42] Added opacity in Funnel Chart. --- .../src/comps/funnelChartComp/funnelChartConstants.tsx | 5 +++-- .../src/comps/funnelChartComp/funnelChartPropertyView.tsx | 1 + .../src/comps/funnelChartComp/funnelChartUtils.ts | 3 +++ client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts | 3 +++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 0475493b0..fa30ded9a 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -30,7 +30,7 @@ import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; -import { FunnelChartConfig } from "../chartComp/chartConfigs/funnelChartConfig"; +import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ @@ -265,7 +265,8 @@ let chartJsonModeChildren: any = { width:withDefault(NumberControl,trans('funnelChart.defaultWidth')), min:withDefault(NumberControl,trans('funnelChart.defaultMin')), max:withDefault(NumberControl,trans('funnelChart.defaultMax')), - gap:withDefault(NumberControl,trans('funnelChart.defaultGap')) + gap:withDefault(NumberControl,trans('funnelChart.defaultGap')), + opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity')) } if (EchartsStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 38171e34e..a99314977 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -41,6 +41,7 @@ export function funnelChartPropertyView( {children.min.propertyView({ label: trans("funnelChart.min") })} {children.max.propertyView({ label: trans("funnelChart.max") })} {children.gap.propertyView({ label: trans("funnelChart.gap") })} + {children.opacity.propertyView({ label: trans("funnelChart.opacity") })} {children.echartsTitle.propertyView({ label: trans("funnelChart.title") })} {children.tooltip.propertyView({label: trans("funnelChart.tooltip")})} {children.label.propertyView({label: trans("funnelChart.label")})} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 2f2b814cc..238871956 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -161,6 +161,9 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, + "itemStyle": { + "opacity": props.opacity + }, "label": { "show": props.label, "position": props.echartsLabelConfig.top diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index f8d5f77f7..94a8168db 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -80,6 +80,9 @@ export const en = { gap: 'Gap', defaultGap: '2', label:'Label', + opacity: 'Opacity', + defaultOpacity: '1', + }, gaugeChart: { title: 'Title', From 0b84762af96d09160d38b858f567ac48e3395204 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 6 Dec 2024 09:45:31 -0500 Subject: [PATCH 02/42] Added funnel Align in Funnel Chart. --- .../chartConfigs/echartsFunnelAlignConfig.tsx | 48 +++++++++++++++++++ .../funnelChartComp/funnelChartConstants.tsx | 2 + .../funnelChartPropertyView.tsx | 1 + .../comps/funnelChartComp/funnelChartUtils.ts | 1 + .../src/i18n/comps/locales/en.ts | 1 + 5 files changed, 53 insertions(+) create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx new file mode 100644 index 000000000..d50733ef8 --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx @@ -0,0 +1,48 @@ +import { + AlignClose, + AlignRight, + AlignLeft, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import {FunnelSeriesOption, LegendComponentOption} from "echarts"; +import { trans } from "i18n/comps"; + +const FunnelAlignOptions = [ + { + label: , + value: "center", + }, + { + label: , + value: "right", + }, + { + label: , + value: "left", + }, +] as const; + +export const EchartsFunnelAlignConfig = (function () { + return new MultiCompBuilder( + { + position: dropdownControl(FunnelAlignOptions, "center"), + }, + (props): FunnelSeriesOption => { + const config: FunnelSeriesOption = { + top: "center", + }; + config.top = props.position + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.position.propertyView({ + label: trans("echarts.funnelAlign"), + radioButton: true, + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index fa30ded9a..3f524330a 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -24,6 +24,7 @@ import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxi import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; +import { EchartsFunnelAlignConfig } from "../chartComp/chartConfigs/echartsFunnelAlignConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; @@ -253,6 +254,7 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsFunnelAlignConfig: EchartsFunnelAlignConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, // style: styleControl(EchartsStyle, 'style'), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index a99314977..0cd9b1c75 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -33,6 +33,7 @@ export function funnelChartPropertyView( })} {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} + {children.echartsFunnelAlignConfig.getPropertyView()} {children.echartsTitleConfig.getPropertyView()} {children.left.propertyView({ label: trans("funnelChart.left") })} {children.top.propertyView({ label: trans("funnelChart.top") })} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 238871956..b4b60d0ab 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -161,6 +161,7 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, + "funnelAlign": props.echartsFunnelAlignConfig.top, "itemStyle": { "opacity": props.opacity }, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 94a8168db..f0968a260 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -110,6 +110,7 @@ export const en = { legendPosition: "Legend Position", labelPosition: "Label Position", titlePosition: "Title Position", + funnelAlign: "Funnel Align" }, chart: { delete: "Delete", From f006f89b4cb48921174fd79e0f06edfcb9e62c04 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 6 Dec 2024 10:20:21 -0500 Subject: [PATCH 03/42] Added sort in Funnel Chart --- .../chartConfigs/echartsFunnelAlignConfig.tsx | 8 ++-- .../chartConfigs/echartsSortingConfig.tsx | 43 +++++++++++++++++++ .../funnelChartComp/funnelChartConstants.tsx | 2 + .../funnelChartPropertyView.tsx | 1 + .../comps/funnelChartComp/funnelChartUtils.ts | 3 +- .../src/i18n/comps/locales/en.ts | 3 +- 6 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx index d50733ef8..c10d38907 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx @@ -26,19 +26,19 @@ const FunnelAlignOptions = [ export const EchartsFunnelAlignConfig = (function () { return new MultiCompBuilder( { - position: dropdownControl(FunnelAlignOptions, "center"), + funnelAlign: dropdownControl(FunnelAlignOptions, "center"), }, (props): FunnelSeriesOption => { const config: FunnelSeriesOption = { - top: "center", + funnelAlign: "center", }; - config.top = props.position + config.funnelAlign = props.funnelAlign return config; } ) .setPropertyViewFn((children) => ( <> - {children.position.propertyView({ + {children.funnelAlign.propertyView({ label: trans("echarts.funnelAlign"), radioButton: true, })} diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx new file mode 100644 index 000000000..8f53e7d8a --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx @@ -0,0 +1,43 @@ +import { + AlignBottom, + AlignTop, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import {FunnelSeriesOption, LegendComponentOption} from "echarts"; +import { trans } from "i18n/comps"; + +const SortingOptions = [ + { + label: , + value: "descending", + }, + { + label: , + value: "ascending", + }, +] as const; + +export const EchartsSortingConfig = (function () { + return new MultiCompBuilder( + { + sort: dropdownControl(SortingOptions, "descending"), + }, + (props): FunnelSeriesOption => { + const config: FunnelSeriesOption = { + sort: "descending" + }; + config.sort = props.sort + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.sort.propertyView({ + label: trans("echarts.sort"), + radioButton: true, + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 3f524330a..527af85ac 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -33,6 +33,7 @@ import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; +import {EchartsSortingConfig} from "../chartComp/chartConfigs/echartsSortingConfig"; export const ChartTypeOptions = [ { @@ -253,6 +254,7 @@ let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption), echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, + echartsSortingConfig: EchartsSortingConfig, echartsLabelConfig: EchartsLabelConfig, echartsFunnelAlignConfig: EchartsFunnelAlignConfig, echartsConfig: EchartsOptionComp, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 0cd9b1c75..6e7ab2a2c 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -32,6 +32,7 @@ export function funnelChartPropertyView( ), })} {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} + {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} {children.echartsFunnelAlignConfig.getPropertyView()} {children.echartsTitleConfig.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index b4b60d0ab..e04ffd3ba 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -161,7 +161,8 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, - "funnelAlign": props.echartsFunnelAlignConfig.top, + "funnelAlign": props.echartsFunnelAlignConfig.funnelAlign, + "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity }, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index f0968a260..7eabffb39 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -110,7 +110,8 @@ export const en = { legendPosition: "Legend Position", labelPosition: "Label Position", titlePosition: "Title Position", - funnelAlign: "Funnel Align" + funnelAlign: "Funnel Align", + sort: "Sort" }, chart: { delete: "Delete", From ee0161bb04f5e5911a0e42a2a69bd34fb3858cbf Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 9 Dec 2024 10:44:14 -0500 Subject: [PATCH 04/42] Added font settings. --- .../funnelChartComp/funnelChartConstants.tsx | 13 ++++++++++--- .../comps/funnelChartComp/funnelChartUtils.ts | 11 ++++++++++- .../comps/controls/styleControlConstants.tsx | 19 +++++++++++++++++++ 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 527af85ac..bda065715 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -16,7 +16,10 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, + TextStyle, + FunnelStyle, + FunnelChartStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -33,7 +36,7 @@ import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; -import {EchartsSortingConfig} from "../chartComp/chartConfigs/echartsSortingConfig"; +import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig"; export const ChartTypeOptions = [ { @@ -272,13 +275,17 @@ let chartJsonModeChildren: any = { gap:withDefault(NumberControl,trans('funnelChart.defaultGap')), opacity:withDefault(NumberControl,trans('funnelChart.defaultOpacity')) } + if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + style: styleControl(FunnelStyle, 'style'), + chartStyle: styleControl(FunnelChartStyle, 'style') } } +console.log(FunnelStyle) + const chartMapModeChildren = { mapInstance: stateComp(), getMapInstance: FunctionControl, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index e04ffd3ba..e221c61c3 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -168,7 +168,16 @@ export function getEchartsConfig( }, "label": { "show": props.label, - "position": props.echartsLabelConfig.top + "position": props.echartsLabelConfig.top, + "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily, + "fontSize": props?.style?.textSize || theme?.style?.textSize, + "fontWeight": props?.style?.textWeight || theme?.style?.textWeight, + "color": props?.style?.text || theme?.style?.text, + "fontStyle": props?.style?.fontStyle || theme?.style?.fontStyle, + "textShadowColor": props?.style?.boxShadowColor || theme?.style?.boxShadowColor, + "textShadowBlur": props?.style?.boxShadow?.split(' ')[0], + "textShadowOffsetX": props?.style?.boxShadow?.split(' ')[1], + "textShadowOffsetY": props?.style?.boxShadow?.split(' ')[2] }, "data": props.echartsOption.data } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index fca765ca3..03f5ce752 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1793,6 +1793,25 @@ export const JsonEditorStyle = [LABEL] as const; export const EchartsStyle = [getBackground("primarySurface")] as const; +export const FunnelStyle = [ + getBackground("primarySurface"), + TEXT, + TEXT_SIZE, + TEXT_WEIGHT, + FONT_FAMILY, + FONT_STYLE, + BOXSHADOWCOLOR, + BOXSHADOW, +] as const; + +export const FunnelChartStyle = [ + OPACITY, + BORDER, + BORDER_STYLE, + RADIUS, + BORDER_WIDTH, +] as const; + export const CalendarStyle = [ getBackground("primarySurface"), { From 4f9b41100d2aa52c4d7fd1d5ae6f908add2ba244 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 9 Dec 2024 12:38:14 -0500 Subject: [PATCH 05/42] Added label, Chart style. --- .../funnelChartComp/funnelChartConstants.tsx | 5 ++-- .../funnelChartPropertyView.tsx | 10 +++++-- .../comps/funnelChartComp/funnelChartUtils.ts | 28 +++++++++++++++++-- .../lowcoder-comps/src/util/opacityToHex.tsx | 6 ++++ .../src/components/Section.tsx | 2 ++ .../src/i18n/design/locales/en.ts | 2 ++ .../comps/controls/styleControlConstants.tsx | 4 ++- 7 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/util/opacityToHex.tsx diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index bda065715..06a10f517 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -280,11 +280,12 @@ if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, style: styleControl(FunnelStyle, 'style'), - chartStyle: styleControl(FunnelChartStyle, 'style') + titleStyle: styleControl(FunnelStyle, 'titleStyle'), + chartStyle: styleControl(FunnelChartStyle, 'chartStyle') } } -console.log(FunnelStyle) +console.log(FunnelChartStyle) const chartMapModeChildren = { mapInstance: stateComp(), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 6e7ab2a2c..b9a3e09d2 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -52,8 +52,14 @@ export function funnelChartPropertyView(
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.style?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index e221c61c3..697179aee 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import opacityToHex from "../../util/opacityToHex"; export function transformData( originData: JSONObject[], @@ -133,14 +134,27 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + console.log("props?.titleStyle",props.echartsOption.data?.map(data=>data.color)); if (props.mode === "json") { let opt={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":props.echartsTitleConfig.top + "left":props.echartsTitleConfig.top, + "textStyle": { + "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily, + "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize, + "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight, + "color": props?.titleStyle?.text || theme?.style?.text, + "fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle, + "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0], + "textShadowOffsetX": props?.titleStyle?.boxShadow?.split(' ')[1], + "textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2] + } }, - "backgroundColor": props?.style?.background || theme?.style?.background, + "backgroundColor": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) || theme?.style?.background : props?.chartStyle?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", @@ -164,7 +178,15 @@ export function getEchartsConfig( "funnelAlign": props.echartsFunnelAlignConfig.funnelAlign, "sort": props.echartsSortingConfig.sort, "itemStyle": { - "opacity": props.opacity + "opacity": props.opacity, + "borderColor": props?.chartStyle?.border || theme?.style?.border, + "borderWidth": props?.chartStyle?.borderWidth, + "borderType": props?.chartStyle?.borderStyle, + "borderRadius": props?.chartStyle?.radius, + "shadowColor": props?.chartStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "shadowBlur": props?.chartStyle?.boxShadow?.split(' ')[0], + "shadowOffsetX": props?.chartStyle?.boxShadow?.split(' ')[0], + "shadowOffsetY": props?.chartStyle?.boxShadow?.split(' ')[0] }, "label": { "show": props.label, diff --git a/client/packages/lowcoder-comps/src/util/opacityToHex.tsx b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx new file mode 100644 index 000000000..d058b4abb --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx @@ -0,0 +1,6 @@ +export default function opacityToHex(opacity) { + opacity = Math.max(0, Math.min(1, opacity)); + const decimalValue = Math.round(opacity * 255); + const hexValue = decimalValue.toString(16).toUpperCase(); + return hexValue.padStart(2, '0'); +} diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 2f02497d0..9f5aacf46 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -187,4 +187,6 @@ export const sectionNames = { badgeStyle:trans("prop.badgeStyle"), columnStyle:trans("prop.columnStyle"), modalStyle:trans("prop.modalStyle"), + chartStyle:trans("prop.chartStyle"), + titleStyle:trans("prop.titleStyle"), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 6ebd73d92..b069609c7 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -40,6 +40,8 @@ export const en = { badgeStyle: 'Badge Style', columnStyle: 'Column Style', modalStyle: 'Modal Style', + chartStyle: "Chart Style", + titleStyle: "Title Style" }, passwordInput: { label: "Password:", diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 03f5ce752..cc7ccd2b2 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1794,7 +1794,6 @@ export const JsonEditorStyle = [LABEL] as const; export const EchartsStyle = [getBackground("primarySurface")] as const; export const FunnelStyle = [ - getBackground("primarySurface"), TEXT, TEXT_SIZE, TEXT_WEIGHT, @@ -1805,7 +1804,10 @@ export const FunnelStyle = [ ] as const; export const FunnelChartStyle = [ + getBackground("primarySurface"), OPACITY, + BOXSHADOWCOLOR, + BOXSHADOW, BORDER, BORDER_STYLE, RADIUS, From 1d062e0c7e152fefb115e0c5052645c869ced613 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 9 Dec 2024 13:51:18 -0500 Subject: [PATCH 06/42] Added legend font settings. --- .../funnelChartComp/funnelChartConstants.tsx | 1 + .../funnelChartPropertyView.tsx | 13 ++++++++++-- .../comps/funnelChartComp/funnelChartUtils.ts | 21 ++++++++++++++----- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 3 ++- 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 06a10f517..91945ff96 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -281,6 +281,7 @@ if (EchartsStyle) { ...chartJsonModeChildren, style: styleControl(FunnelStyle, 'style'), titleStyle: styleControl(FunnelStyle, 'titleStyle'), + legendStyle: styleControl(FunnelStyle, 'legendStyle'), chartStyle: styleControl(FunnelChartStyle, 'chartStyle') } } diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index b9a3e09d2..07fda545c 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -58,9 +58,18 @@ export function funnelChartPropertyView(
{children.titleStyle?.getPropertyView()}
-
+ { + children.label.getView() ? +
{children.style?.getPropertyView()} -
+
: <> + } + { + children.legendVisibility.getView() ? +
+ {children.legendStyle?.getPropertyView()} +
: <> + }
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 697179aee..19e17651d 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -143,10 +143,10 @@ export function getEchartsConfig( 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily, - "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize, - "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight, - "color": props?.titleStyle?.text || theme?.style?.text, + "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily || "Arial", + "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize || 18, + "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight || "bold", + "color": props?.titleStyle?.text || theme?.style?.text || "#333", "fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle, "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor, "textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0], @@ -163,6 +163,17 @@ export function getEchartsConfig( "legend":props.legendVisibility&& { "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, + "textStyle": { + "fontFamily": props?.legendStyle?.fontFamily || theme?.style?.fontFamily || "Arial", + "fontSize": props?.legendStyle?.textSize || theme?.style?.textSize, + "fontWeight": props?.legendStyle?.textWeight || theme?.style?.textWeight, + "color": props?.legendStyle?.text || theme?.style?.text || "#000000", + "fontStyle": props?.legendStyle?.fontStyle || theme?.style?.fontStyle, + "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "textShadowBlur": props?.legendStyle?.boxShadow?.split(' ')[0], + "textShadowOffsetX": props?.legendStyle?.boxShadow?.split(' ')[1], + "textShadowOffsetY": props?.legendStyle?.boxShadow?.split(' ')[2] + } }, "series": [ { @@ -191,7 +202,7 @@ export function getEchartsConfig( "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily, + "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily || "Arial", "fontSize": props?.style?.textSize || theme?.style?.textSize, "fontWeight": props?.style?.textWeight || theme?.style?.textWeight, "color": props?.style?.text || theme?.style?.text, diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 9f5aacf46..c86374f6d 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -189,4 +189,5 @@ export const sectionNames = { modalStyle:trans("prop.modalStyle"), chartStyle:trans("prop.chartStyle"), titleStyle:trans("prop.titleStyle"), + legendStyle:trans("prop.legendStyle"), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index b069609c7..f7a1f4ac9 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -41,7 +41,8 @@ export const en = { columnStyle: 'Column Style', modalStyle: 'Modal Style', chartStyle: "Chart Style", - titleStyle: "Title Style" + titleStyle: "Title Style", + legendStyle: "Legend Style", }, passwordInput: { label: "Password:", From 4058b81fec5483516817d52e618492bed67f2dbd Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 9 Dec 2024 16:08:09 -0500 Subject: [PATCH 07/42] Added gradient background. --- .../funnelChartComp/funnelChartConstants.tsx | 11 +++----- .../comps/funnelChartComp/funnelChartUtils.ts | 17 +++++++++--- .../src/comps/controls/styleControl.tsx | 26 ++++++++++++++++++- .../comps/controls/styleControlConstants.tsx | 25 +++++++++++++++++- .../packages/lowcoder/src/i18n/locales/en.ts | 3 ++- 5 files changed, 68 insertions(+), 14 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 91945ff96..d4f7d306b 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -17,8 +17,7 @@ import { clickEvent, styleControl, EchartsStyle, - TextStyle, - FunnelStyle, + FunnelTextStyle, FunnelChartStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; @@ -279,15 +278,13 @@ let chartJsonModeChildren: any = { if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(FunnelStyle, 'style'), - titleStyle: styleControl(FunnelStyle, 'titleStyle'), - legendStyle: styleControl(FunnelStyle, 'legendStyle'), + style: styleControl(FunnelTextStyle, 'style'), + titleStyle: styleControl(FunnelTextStyle, 'titleStyle'), + legendStyle: styleControl(FunnelTextStyle, 'legendStyle'), chartStyle: styleControl(FunnelChartStyle, 'chartStyle') } } -console.log(FunnelChartStyle) - const chartMapModeChildren = { mapInstance: stateComp(), getMapInstance: FunctionControl, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 19e17651d..dd865a733 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -134,8 +134,6 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - - console.log("props?.titleStyle",props.echartsOption.data?.map(data=>data.color)); if (props.mode === "json") { let opt={ "title": { @@ -145,7 +143,7 @@ export function getEchartsConfig( "textStyle": { "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily || "Arial", "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize || 18, - "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight || "bold", + "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight, "color": props?.titleStyle?.text || theme?.style?.text || "#333", "fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle, "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor, @@ -154,7 +152,18 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2] } }, - "backgroundColor": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) || theme?.style?.background : props?.chartStyle?.background || theme?.style?.background, + "backgroundColor": props?.chartStyle?.gradientBackground && props?.chartStyle?.background + ? { + "x": props?.chartStyle?.direction?.split(' ')[0], + "y": props?.chartStyle?.direction?.split(' ')[1], + "x2": props?.chartStyle?.direction?.split(' ')[2], + "y2": props?.chartStyle?.direction?.split(' ')[3], + "colorStops": [ + { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || "#FFFFFF" }, + { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground || "#FFFFFF" } + ] + } + : props?.chartStyle?.opacity ? (props?.chartStyle?.background || theme?.style?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || theme?.style?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index a9f8372b7..1ae8d1153 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -43,6 +43,7 @@ import { SimpleColorConfig, SingleColorConfig, MarginConfig, + DirectionConfig, PaddingConfig, TextSizeConfig, TextWeightConfig, @@ -187,7 +188,11 @@ function isBorderStyleConfig(config: SingleColorConfig): config is borderStyleCo } function isMarginConfig(config: SingleColorConfig): config is MarginConfig { - return config.hasOwnProperty("margin"); + return config.hasOwnProperty("direction"); +} + +function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig { + return config.hasOwnProperty("direction"); } function isBoxShadowConfig( @@ -326,6 +331,9 @@ function isEmptyBorderStyle(borderStyle: string) { function isEmptyMargin(margin: string) { return _.isEmpty(margin); } +function isEmptyDirection(direction: string) { + return _.isEmpty(direction); +} function isEmptyPadding(padding: string) { return _.isEmpty(padding); } @@ -493,6 +501,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyDirection(props[name]) && isDirectionConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { res[name] = props[name]; return; @@ -767,6 +779,7 @@ const LineHeightPropIcon = styled(LineHeightIcon)` `; const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; +const DirectionIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`; const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`; const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; @@ -913,6 +926,7 @@ export function styleControl( name === 'footerBackgroundImagePosition' || name === 'footerBackgroundImageOrigin' || name === 'margin' || + name === 'direction' || name === 'padding' || name === 'containerHeaderPadding' || name === 'containerSiderPadding' || @@ -1096,6 +1110,16 @@ export function styleControl( preInputNode: , placeholder: props[name], }) + : name === 'direction' + ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) : name === 'animationIterationCount' ? ( children[name] as InstanceType< diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index cc7ccd2b2..4a7e5bf74 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -165,6 +165,10 @@ export type MarginConfig = CommonColorConfig & { readonly margin: string; }; +export type DirectionConfig = CommonColorConfig & { + readonly direction: string; +}; + export type PaddingConfig = CommonColorConfig & { readonly padding: string; }; @@ -203,6 +207,7 @@ export type SingleColorConfig = | FontFamilyConfig | FontStyleConfig | MarginConfig + | DirectionConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig @@ -548,6 +553,12 @@ const MARGIN = { margin: "margin", } as const; +const DIRECTION = { + name: "direction", + label: trans("style.direction"), + position: "direction", +} as const; + const PADDING = { name: "padding", label: trans("style.padding"), @@ -742,6 +753,16 @@ function getBackground(depTheme: keyof ThemeDetail = "primarySurface") { } as const; } +function getGradientBackground(depTheme: keyof ThemeDetail = "primarySurface") { + return { + name: "gradientBackground", + label: trans("style.gradientBackground"), + depTheme: depTheme, + depType: DEP_TYPE.SELF, + transformer: toSelf, + } as const; +} + function getStaticBackground(color: string) { return { name: "background", @@ -1793,7 +1814,7 @@ export const JsonEditorStyle = [LABEL] as const; export const EchartsStyle = [getBackground("primarySurface")] as const; -export const FunnelStyle = [ +export const FunnelTextStyle = [ TEXT, TEXT_SIZE, TEXT_WEIGHT, @@ -1805,6 +1826,8 @@ export const FunnelStyle = [ export const FunnelChartStyle = [ getBackground("primarySurface"), + getGradientBackground(), + DIRECTION, OPACITY, BOXSHADOWCOLOR, BOXSHADOW, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 59e9a4809..4612627a8 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -568,7 +568,8 @@ export const en = { "siderBackgroundImageOrigin": "Sider Background Image Origin", "activeBackground": "Active Background Color", "labelBackground": "Label Background Color", - + "gradientBackground": "Gradient Background Color", + "direction": "Direction" }, "export": { "hiddenDesc": "If true, the component is hidden", From fb58dfa9265babbd5528c77df687ffee30a71579 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 11 Dec 2024 02:05:33 -0500 Subject: [PATCH 08/42] Fixed an issue that style order would appear different in theme settings and right panel. --- .../funnelChartComp/funnelChartConstants.tsx | 4 +- .../funnelChartPropertyView.tsx | 2 +- .../comps/funnelChartComp/funnelChartUtils.ts | 46 +++++++++---------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index d4f7d306b..2b58bf292 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -278,10 +278,10 @@ let chartJsonModeChildren: any = { if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(FunnelTextStyle, 'style'), + chartStyle: styleControl(FunnelChartStyle, 'chartStyle'), titleStyle: styleControl(FunnelTextStyle, 'titleStyle'), + labelStyle: styleControl(FunnelTextStyle, 'labelStyle'), legendStyle: styleControl(FunnelTextStyle, 'legendStyle'), - chartStyle: styleControl(FunnelChartStyle, 'chartStyle') } } diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 07fda545c..5de94d5e5 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -61,7 +61,7 @@ export function funnelChartPropertyView( { children.label.getView() ?
- {children.style?.getPropertyView()} + {children.labelStyle?.getPropertyView()}
: <> } { diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index dd865a733..e01fc96db 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -141,12 +141,12 @@ export function getEchartsConfig( 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily || "Arial", - "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize || 18, - "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight, - "color": props?.titleStyle?.text || theme?.style?.text || "#333", - "fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle, - "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "fontFamily": props?.titleStyle?.fontFamily, + "fontSize": props?.titleStyle?.textSize, + "fontWeight": props?.titleStyle?.textWeight, + "color": props?.titleStyle?.text, + "fontStyle": props?.titleStyle?.fontStyle, + "textShadowColor": props?.titleStyle?.boxShadowColor, "textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0], "textShadowOffsetX": props?.titleStyle?.boxShadow?.split(' ')[1], "textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2] @@ -159,11 +159,11 @@ export function getEchartsConfig( "x2": props?.chartStyle?.direction?.split(' ')[2], "y2": props?.chartStyle?.direction?.split(' ')[3], "colorStops": [ - { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || "#FFFFFF" }, - { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground || "#FFFFFF" } + { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background}, + { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground} ] } - : props?.chartStyle?.opacity ? (props?.chartStyle?.background || theme?.style?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || theme?.style?.background, + : props?.chartStyle?.opacity ? (props?.chartStyle?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", @@ -173,12 +173,12 @@ export function getEchartsConfig( "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "textStyle": { - "fontFamily": props?.legendStyle?.fontFamily || theme?.style?.fontFamily || "Arial", - "fontSize": props?.legendStyle?.textSize || theme?.style?.textSize, - "fontWeight": props?.legendStyle?.textWeight || theme?.style?.textWeight, - "color": props?.legendStyle?.text || theme?.style?.text || "#000000", - "fontStyle": props?.legendStyle?.fontStyle || theme?.style?.fontStyle, - "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "fontFamily": props?.legendStyle?.fontFamily, + "fontSize": props?.legendStyle?.textSize, + "fontWeight": props?.legendStyle?.textWeight, + "color": props?.legendStyle?.text, + "fontStyle": props?.legendStyle?.fontStyle, + "textShadowColor": props?.legendStyle?.boxShadowColor, "textShadowBlur": props?.legendStyle?.boxShadow?.split(' ')[0], "textShadowOffsetX": props?.legendStyle?.boxShadow?.split(' ')[1], "textShadowOffsetY": props?.legendStyle?.boxShadow?.split(' ')[2] @@ -199,11 +199,11 @@ export function getEchartsConfig( "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity, - "borderColor": props?.chartStyle?.border || theme?.style?.border, + "borderColor": props?.chartStyle?.border, "borderWidth": props?.chartStyle?.borderWidth, "borderType": props?.chartStyle?.borderStyle, "borderRadius": props?.chartStyle?.radius, - "shadowColor": props?.chartStyle?.boxShadowColor || theme?.style?.boxShadowColor, + "shadowColor": props?.chartStyle?.boxShadowColor, "shadowBlur": props?.chartStyle?.boxShadow?.split(' ')[0], "shadowOffsetX": props?.chartStyle?.boxShadow?.split(' ')[0], "shadowOffsetY": props?.chartStyle?.boxShadow?.split(' ')[0] @@ -211,12 +211,12 @@ export function getEchartsConfig( "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily || "Arial", - "fontSize": props?.style?.textSize || theme?.style?.textSize, - "fontWeight": props?.style?.textWeight || theme?.style?.textWeight, - "color": props?.style?.text || theme?.style?.text, - "fontStyle": props?.style?.fontStyle || theme?.style?.fontStyle, - "textShadowColor": props?.style?.boxShadowColor || theme?.style?.boxShadowColor, + "fontFamily": props?.style?.fontFamily, + "fontSize": props?.style?.textSize, + "fontWeight": props?.style?.textWeight, + "color": props?.style?.text, + "fontStyle": props?.style?.fontStyle, + "textShadowColor": props?.style?.boxShadowColor, "textShadowBlur": props?.style?.boxShadow?.split(' ')[0], "textShadowOffsetX": props?.style?.boxShadow?.split(' ')[1], "textShadowOffsetY": props?.style?.boxShadow?.split(' ')[2] From b2ee7513126b03e399b7d88c97328de139b18d1e Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 11 Dec 2024 03:03:20 -0500 Subject: [PATCH 09/42] Fixed direction and label style. --- .../comps/funnelChartComp/funnelChartUtils.ts | 18 +++++++++--------- .../src/comps/controls/styleControl.tsx | 6 +++++- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index e01fc96db..e098c708b 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -211,15 +211,15 @@ export function getEchartsConfig( "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.style?.fontFamily, - "fontSize": props?.style?.textSize, - "fontWeight": props?.style?.textWeight, - "color": props?.style?.text, - "fontStyle": props?.style?.fontStyle, - "textShadowColor": props?.style?.boxShadowColor, - "textShadowBlur": props?.style?.boxShadow?.split(' ')[0], - "textShadowOffsetX": props?.style?.boxShadow?.split(' ')[1], - "textShadowOffsetY": props?.style?.boxShadow?.split(' ')[2] + "fontFamily": props?.labelStyle?.fontFamily, + "fontSize": props?.labelStyle?.textSize, + "fontWeight": props?.labelStyle?.textWeight, + "color": props?.labelStyle?.text, + "fontStyle": props?.labelStyle?.fontStyle, + "textShadowColor": props?.labelStyle?.boxShadowColor, + "textShadowBlur": props?.labelStyle?.boxShadow?.split(' ')[0], + "textShadowOffsetX": props?.labelStyle?.boxShadow?.split(' ')[1], + "textShadowOffsetY": props?.labelStyle?.boxShadow?.split(' ')[2] }, "data": props.echartsOption.data } diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 1ae8d1153..02d572f05 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -188,7 +188,7 @@ function isBorderStyleConfig(config: SingleColorConfig): config is borderStyleCo } function isMarginConfig(config: SingleColorConfig): config is MarginConfig { - return config.hasOwnProperty("direction"); + return config.hasOwnProperty("margin"); } function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig { @@ -634,6 +634,9 @@ function calcColors>( if (isMarginConfig(config)) { res[name] = themeWithDefault[config.margin]; } + if (isDirectionConfig(config)) { + res[name] = themeWithDefault[config.direction] || '0 0 1 1'; + } if (isPaddingConfig(config)) { res[name] = themeWithDefault[config.padding]; } @@ -998,6 +1001,7 @@ export function styleControl( if ( name === 'radius' || name === 'margin' || + name === 'direction' || name === 'padding' || name === 'containerHeaderPadding' || name === 'containerSiderPadding' || From 84871364029da73863c0ddb9334d9ad1ec370ef6 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 11 Dec 2024 16:56:01 -0500 Subject: [PATCH 10/42] Added direction's default value. --- client/packages/lowcoder/src/api/commonSettingApi.ts | 7 +++++-- .../lowcoder/src/comps/controls/styleControlConstants.tsx | 2 +- client/packages/lowcoder/src/constants/themeConstants.ts | 1 + 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 510e67026..22ae54229 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -52,6 +52,7 @@ export interface ThemeDetail { borderStyle?: string; chart?: string; margin?: string; + direction?: string; padding?: string; gridPaddingX?: number; gridPaddingY?: number; @@ -91,7 +92,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) { case "borderWidth": return trans("themeDetail.borderWidth"); case "borderStyle": return trans("themeDetail.borderStyle"); case "fontFamily": return trans("themeDetail.fontFamily"); - case "margin": return trans("style.margin"); + case "margin": return trans("style.margin"); + case "direction": return trans("style.direction"); case "padding": return trans("style.padding"); case "gridColumns": return trans("themeDetail.gridColumns"); case "textSize": return trans("style.textSize"); @@ -114,7 +116,8 @@ export function isThemeColorKey(key: string) { case "borderWidth": case "borderStyle": case "fontFamily": - case "margin": + case "margin": + case "direction": case "padding": case "gridColumns": case "textSize": diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 4a7e5bf74..da2bd087c 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -556,7 +556,7 @@ const MARGIN = { const DIRECTION = { name: "direction", label: trans("style.direction"), - position: "direction", + direction: "direction", } as const; const PADDING = { diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 144486380..40eaad32d 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -12,6 +12,7 @@ const theme = { borderWidth: "1px", borderStyle: "solid", margin: "3px", + direction: "0 0 1 1", padding: "3px", lineHeight: "18px", gridColumns: String(DEFAULT_GRID_COLUMNS), From 006ab19ec0752091cfc8f01e71c5ee0e4355cd66 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 02:01:37 -0500 Subject: [PATCH 11/42] Implemented settings of theme as default. --- .../comps/funnelChartComp/funnelChartComp.tsx | 6 +- .../comps/funnelChartComp/funnelChartUtils.ts | 98 ++++++++++--------- 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index 0c95ed8ff..b8c49955d 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -145,9 +145,9 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [chartSize, ...Object.values(echartsConfigChildren), theme]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) @@ -175,7 +175,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={mode !== 'map' ? themeConfig : undefined} + theme={themeConfig} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index e098c708b..a255e7864 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -134,6 +134,10 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + console.log("props", props); + console.log("theme", theme); + if (props.mode === "json") { let opt={ "title": { @@ -141,29 +145,29 @@ export function getEchartsConfig( 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.textSize, - "fontWeight": props?.titleStyle?.textWeight, - "color": props?.titleStyle?.text, - "fontStyle": props?.titleStyle?.fontStyle, - "textShadowColor": props?.titleStyle?.boxShadowColor, - "textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0], - "textShadowOffsetX": props?.titleStyle?.boxShadow?.split(' ')[1], - "textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2] + "fontFamily": props?.titleStyle?.fontFamily || theme?.titleStyle?.fontFamily, + "fontSize": props?.titleStyle?.textSize || theme?.titleStyle?.fontSize, + "fontWeight": props?.titleStyle?.textWeight || theme?.titleStyle?.fontWeight, + "color": props?.titleStyle?.text || theme?.titleStyle?.fontColor, + "fontStyle": props?.titleStyle?.fontStyle || theme?.titleStyle?.fontStyle, + "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor, + "textShadowBlur": props?.titleStyle?.boxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0], + "textShadowOffsetX": props?.titleStyle?.boxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1], + "textShadowOffsetY": props?.titleStyle?.boxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2] } }, - "backgroundColor": props?.chartStyle?.gradientBackground && props?.chartStyle?.background - ? { - "x": props?.chartStyle?.direction?.split(' ')[0], - "y": props?.chartStyle?.direction?.split(' ')[1], - "x2": props?.chartStyle?.direction?.split(' ')[2], - "y2": props?.chartStyle?.direction?.split(' ')[3], - "colorStops": [ - { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background}, - { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground} - ] - } - : props?.chartStyle?.opacity ? (props?.chartStyle?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background, + "backgroundColor": props?.chartStyle?.background || theme?.chartStyle?.backgroundColor, + // ? { + // "x": props?.chartStyle?.direction?.split(' ')[0], + // "y": props?.chartStyle?.direction?.split(' ')[1], + // "x2": props?.chartStyle?.direction?.split(' ')[2], + // "y2": props?.chartStyle?.direction?.split(' ')[3], + // "colorStops": [ + // { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background}, + // { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground} + // ] + // } + // : props?.chartStyle?.opacity ? (props?.chartStyle?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background, "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", @@ -173,15 +177,15 @@ export function getEchartsConfig( "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "textStyle": { - "fontFamily": props?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.textSize, - "fontWeight": props?.legendStyle?.textWeight, - "color": props?.legendStyle?.text, - "fontStyle": props?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.boxShadowColor, - "textShadowBlur": props?.legendStyle?.boxShadow?.split(' ')[0], - "textShadowOffsetX": props?.legendStyle?.boxShadow?.split(' ')[1], - "textShadowOffsetY": props?.legendStyle?.boxShadow?.split(' ')[2] + "fontFamily": props?.legendStyle?.fontFamily || theme?.legendStyle?.fontFamily, + "fontSize": props?.legendStyle?.textSize || theme?.legendStyle?.fontSize, + "fontWeight": props?.legendStyle?.textWeight || theme?.legendStyle?.fontWeight, + "color": props?.legendStyle?.text || theme?.legendStyle?.fontColor, + "fontStyle": props?.legendStyle?.fontStyle || theme?.legendStyle?.fontStyle, + "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor, + "textShadowBlur": props?.legendStyle?.boxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0], + "textShadowOffsetX": props?.legendStyle?.boxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1], + "textShadowOffsetY": props?.legendStyle?.boxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2] } }, "series": [ @@ -199,27 +203,27 @@ export function getEchartsConfig( "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity, - "borderColor": props?.chartStyle?.border, - "borderWidth": props?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.borderStyle, - "borderRadius": props?.chartStyle?.radius, - "shadowColor": props?.chartStyle?.boxShadowColor, - "shadowBlur": props?.chartStyle?.boxShadow?.split(' ')[0], - "shadowOffsetX": props?.chartStyle?.boxShadow?.split(' ')[0], - "shadowOffsetY": props?.chartStyle?.boxShadow?.split(' ')[0] + "borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor, + "borderWidth": props?.chartStyle?.borderWidth || theme?.chartStyle?.borderWidth, + "borderType": props?.chartStyle?.borderStyle || theme?.chartStyle?.borderType, + "borderRadius": props?.chartStyle?.radius || theme?.chartStyle?.borderRadius, + "shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor, + "shadowBlur": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0], + "shadowOffsetX": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1], + "shadowOffsetY": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2] }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.textSize, - "fontWeight": props?.labelStyle?.textWeight, - "color": props?.labelStyle?.text, - "fontStyle": props?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.boxShadowColor, - "textShadowBlur": props?.labelStyle?.boxShadow?.split(' ')[0], - "textShadowOffsetX": props?.labelStyle?.boxShadow?.split(' ')[1], - "textShadowOffsetY": props?.labelStyle?.boxShadow?.split(' ')[2] + "fontFamily": props?.labelStyle?.fontFamily || theme?.labelStyle?.fontFamily, + "fontSize": props?.labelStyle?.textSize || theme?.labelStyle?.fontSize, + "fontWeight": props?.labelStyle?.textWeight || theme?.labelStyle?.fontWeight, + "color": props?.labelStyle?.text || theme?.labelStyle?.fontColor, + "fontStyle": props?.labelStyle?.fontStyle || theme?.labelStyle?.fontStyle, + "textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor, + "textShadowBlur": props?.labelStyle?.boxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0], + "textShadowOffsetX": props?.labelStyle?.boxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1], + "textShadowOffsetY": props?.labelStyle?.boxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2] }, "data": props.echartsOption.data } From 1ddd13902d26217efa4a7558c5baaca3311c91c2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 10:05:07 -0500 Subject: [PATCH 12/42] Implemented gradient background color again. --- .../comps/funnelChartComp/funnelChartUtils.ts | 28 +++++++++++-------- .../lowcoder-comps/src/util/opacityToHex.tsx | 20 +++++++++---- 2 files changed, 30 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index a255e7864..b7bfaaaaa 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -134,6 +134,10 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor; + const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor; + const opacity = props?.chartStyle?.opacity || theme?.chartStyle?.opacity; + const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; console.log("props", props); console.log("theme", theme); @@ -156,18 +160,18 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.boxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2] } }, - "backgroundColor": props?.chartStyle?.background || theme?.chartStyle?.backgroundColor, - // ? { - // "x": props?.chartStyle?.direction?.split(' ')[0], - // "y": props?.chartStyle?.direction?.split(' ')[1], - // "x2": props?.chartStyle?.direction?.split(' ')[2], - // "y2": props?.chartStyle?.direction?.split(' ')[3], - // "colorStops": [ - // { "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background}, - // { "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground} - // ] - // } - // : props?.chartStyle?.opacity ? (props?.chartStyle?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background, + "backgroundColor": gradientColor && backgroundColor + ? { + "x": direction?.split(' ')[0], + "y": direction?.split(' ')[1], + "x2": direction?.split(' ')[2], + "y2": direction?.split(' ')[3], + "colorStops": [ + { "offset": 0, "color": opacity ? backgroundColor + opacityToHex(opacity) : backgroundColor || "#FFFFFF" }, + { "offset": 1, "color": opacity ? gradientColor + opacityToHex(opacity) : gradientColor || "#FFFFFF" } + ] + } + : backgroundColor + opacityToHex(opacity), "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/util/opacityToHex.tsx b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx index d058b4abb..ec6f7774e 100644 --- a/client/packages/lowcoder-comps/src/util/opacityToHex.tsx +++ b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx @@ -1,6 +1,14 @@ -export default function opacityToHex(opacity) { - opacity = Math.max(0, Math.min(1, opacity)); - const decimalValue = Math.round(opacity * 255); - const hexValue = decimalValue.toString(16).toUpperCase(); - return hexValue.padStart(2, '0'); -} +export default function opacityToHex(opacity: any) { + if (opacity === undefined) + return 'FF' + try { + // Ensure opacity is clamped between 0 and 1 + opacity = Math.max(0, Math.min(1, opacity)); + const decimalValue = Math.round(opacity * 255); + const hexValue = decimalValue.toString(16).toUpperCase(); + return hexValue.padStart(2, '0'); + } catch (error) { + // Return 'FF' if an exception occurs + return 'FF'; + } +} \ No newline at end of file From 20458230c39d46183c7ddc8eebe2c116e5900c8a Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 13:00:24 -0500 Subject: [PATCH 13/42] Fixed an issue that update-on-action when activating /deactivating prevent overwriting styles. --- .../src/comps/funnelChartComp/funnelChartComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index b8c49955d..57ae6adad 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -140,14 +140,14 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { }; }, [onUIEvent]); - const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); + let echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren), theme]); + }, [chartSize, ...Object.values(echartsConfigChildren), theme, childrenToProps(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) From b77d3e047084c62d2a161fb8b8022627ba6990c0 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 13:00:51 -0500 Subject: [PATCH 14/42] Fixed direction on theme setting. --- .../src/components/ThemeSettingsCompStyles.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index c34f5e5c8..a3d0d232f 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -25,7 +25,7 @@ import { TextStyleIcon, ImageCompIconSmall, RotationIcon, - LineHeightIcon + LineHeightIcon, } from "lowcoder-design/src/icons"; import { trans } from "i18n"; import { debounce } from "lodash"; @@ -101,7 +101,8 @@ const isColorStyle = (styleKey: string) => { styleKey !== 'containerHeaderPadding' && styleKey !== 'containerSiderPadding' && styleKey !== 'containerFooterPadding' && - styleKey !== 'containerBodyPadding'; + styleKey !== 'containerBodyPadding' && + styleKey !== 'direction'; } @@ -275,6 +276,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { placeholder = '0deg'; break; } + case 'direction': { + placeholder = '0 0 1 1'; + break; + } } return placeholder; } @@ -380,6 +385,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'direction': { + icon = ; + break; + } } return icon; } From 216b75373b33c9a9c5def17afb8b2f93d0f7f867 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 14:27:09 -0500 Subject: [PATCH 15/42] Added chartOpacity, chartBoxShadow, chartBorderStyle, chartBorderRadius, chartBorderWidth, chartTextSize, chartTextWeight, chartFontFamily, chartFontStyle as StringControl. --- .../comps/funnelChartComp/funnelChartUtils.ts | 60 +- .../components/ThemeSettingsCompStyles.tsx | 85 ++- .../src/comps/controls/styleControl.tsx | 586 +++++++++++++----- .../comps/controls/styleControlConstants.tsx | 119 +++- .../lowcoder/src/constants/themeConstants.ts | 1 - 5 files changed, 644 insertions(+), 207 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index b7bfaaaaa..2cdd7a6c0 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -134,9 +134,13 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + console.log("props", props); + console.log("theme", theme); + const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor; const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor; - const opacity = props?.chartStyle?.opacity || theme?.chartStyle?.opacity; + const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; console.log("props", props); @@ -149,15 +153,15 @@ export function getEchartsConfig( 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.fontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.textSize || theme?.titleStyle?.fontSize, - "fontWeight": props?.titleStyle?.textWeight || theme?.titleStyle?.fontWeight, + "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, + "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize, + "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, "color": props?.titleStyle?.text || theme?.titleStyle?.fontColor, - "fontStyle": props?.titleStyle?.fontStyle || theme?.titleStyle?.fontStyle, + "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle, "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor, - "textShadowBlur": props?.titleStyle?.boxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0], - "textShadowOffsetX": props?.titleStyle?.boxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1], - "textShadowOffsetY": props?.titleStyle?.boxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2] + "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] } }, "backgroundColor": gradientColor && backgroundColor @@ -181,15 +185,15 @@ export function getEchartsConfig( "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "textStyle": { - "fontFamily": props?.legendStyle?.fontFamily || theme?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.textSize || theme?.legendStyle?.fontSize, - "fontWeight": props?.legendStyle?.textWeight || theme?.legendStyle?.fontWeight, + "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, + "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, + "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, "color": props?.legendStyle?.text || theme?.legendStyle?.fontColor, - "fontStyle": props?.legendStyle?.fontStyle || theme?.legendStyle?.fontStyle, + "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor, - "textShadowBlur": props?.legendStyle?.boxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0], - "textShadowOffsetX": props?.legendStyle?.boxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1], - "textShadowOffsetY": props?.legendStyle?.boxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2] + "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] } }, "series": [ @@ -208,26 +212,26 @@ export function getEchartsConfig( "itemStyle": { "opacity": props.opacity, "borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor, - "borderWidth": props?.chartStyle?.borderWidth || theme?.chartStyle?.borderWidth, - "borderType": props?.chartStyle?.borderStyle || theme?.chartStyle?.borderType, - "borderRadius": props?.chartStyle?.radius || theme?.chartStyle?.borderRadius, + "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, + "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, + "borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius, "shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor, - "shadowBlur": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0], - "shadowOffsetX": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1], - "shadowOffsetY": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2] + "shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0], + "shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1], + "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2] }, "label": { "show": props.label, "position": props.echartsLabelConfig.top, - "fontFamily": props?.labelStyle?.fontFamily || theme?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.textSize || theme?.labelStyle?.fontSize, - "fontWeight": props?.labelStyle?.textWeight || theme?.labelStyle?.fontWeight, + "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, + "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, + "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, "color": props?.labelStyle?.text || theme?.labelStyle?.fontColor, - "fontStyle": props?.labelStyle?.fontStyle || theme?.labelStyle?.fontStyle, + "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, "textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor, - "textShadowBlur": props?.labelStyle?.boxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0], - "textShadowOffsetX": props?.labelStyle?.boxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1], - "textShadowOffsetY": props?.labelStyle?.boxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2] + "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] }, "data": props.echartsOption.data } diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index a3d0d232f..302a3fffc 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -102,7 +102,16 @@ const isColorStyle = (styleKey: string) => { styleKey !== 'containerSiderPadding' && styleKey !== 'containerFooterPadding' && styleKey !== 'containerBodyPadding' && - styleKey !== 'direction'; + styleKey !== 'direction' && + styleKey !== 'chartOpacity' && + styleKey !== 'chartBoxShadow' && + styleKey !== 'chartBorderStyle' && + styleKey !== 'chartBorderRadius' && + styleKey !== 'chartBorderWidth' && + styleKey !== 'chartTextSize' && + styleKey !== 'chartTextWeight' && + styleKey !== 'chartFontFamily' && + styleKey !== 'chartFontStyle'; } @@ -280,6 +289,43 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { placeholder = '0 0 1 1'; break; } + case 'chartOpacity': { + placeholder = '1'; + break; + } + case 'chartBoxShadow': { + placeholder = '1px 1px 1px'; + break; + } + case 'chartBorderStyle': { + placeholder = 'solid'; + break; + } + case 'chartBorderRadius': { + placeholder = '1px'; + break; + } + case 'chartBorderWidth': { + placeholder = '1px'; + break; + } + case 'chartTextSize': { + placeholder = '14px'; + break; + } + case 'chartTextWeight': { + placeholder = 'normal'; + break; + } + case 'chartFontFamily': { + placeholder = 'Arial'; + break; + } + case 'chartFontStyle': { + placeholder = 'normal'; + break; + } + } return placeholder; } @@ -389,6 +435,43 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'chartOpacity': { + icon = ; + break; + } + case 'chartBoxShadow': { + icon = ; + break; + } + case 'chartBorderStyle': { + icon = ; + break; + } + case 'chartBorderRadius': { + icon = ; + break; + } + case 'chartBorderWidth': { + icon = ; + break; + } + case 'chartTextSize': { + icon = ; + break; + } + case 'chartTextWeight': { + icon = ; + break; + } + case 'chartFontFamily': { + icon = ; + break; + } + case 'chartFontStyle': { + icon = ; + break; + } + } return icon; } diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 02d572f05..5b5d52f0e 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -44,6 +44,15 @@ import { SingleColorConfig, MarginConfig, DirectionConfig, + ChartOpacityConfig, + ChartBoxShadowConfig, + ChartBorderStyleConfig, + ChartBorderRadiusConfig, + ChartBorderWidthConfig, + ChartTextSizeConfig, + ChartTextWeightConfig, + ChartFontFamilyConfig, + ChartFontStyleConfig, PaddingConfig, TextSizeConfig, TextWeightConfig, @@ -195,6 +204,42 @@ function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig return config.hasOwnProperty("direction"); } +function isChartOpacityConfig(config: SingleColorConfig): config is ChartOpacityConfig { + return config.hasOwnProperty("chartOpacity"); +} + +function isChartBoxShadowConfig(config: SingleColorConfig): config is ChartBoxShadowConfig { + return config.hasOwnProperty("chartBoxShadow"); +} + +function isChartBorderStyleConfig(config: SingleColorConfig): config is ChartBorderStyleConfig { + return config.hasOwnProperty("chartBorderStyle"); +} + +function isChartBorderRadiusConfig(config: SingleColorConfig): config is ChartBorderRadiusConfig { + return config.hasOwnProperty("chartBorderRadius"); +} + +function isChartBorderWidthConfig(config: SingleColorConfig): config is ChartBorderWidthConfig { + return config.hasOwnProperty("chartBorderWidth"); +} + +function isChartTextSizeConfig(config: SingleColorConfig): config is ChartTextSizeConfig { + return config.hasOwnProperty("chartTextSize"); +} + +function isChartTextWeightConfig(config: SingleColorConfig): config is ChartTextWeightConfig { + return config.hasOwnProperty("chartTextWeight"); +} + +function isChartFontFamilyConfig(config: SingleColorConfig): config is ChartFontFamilyConfig { + return config.hasOwnProperty("chartFontFamily"); +} + +function isChartFontStyleConfig(config: SingleColorConfig): config is ChartFontStyleConfig { + return config.hasOwnProperty("chartFontStyle"); +} + function isBoxShadowConfig( config: SingleColorConfig ): config is BoxShadowConfig { @@ -334,6 +379,33 @@ function isEmptyMargin(margin: string) { function isEmptyDirection(direction: string) { return _.isEmpty(direction); } +function isEmptyChartOpacity(chartOpacity: string) { + return _.isEmpty(chartOpacity); +} +function isEmptyChartBoxShadow(chartBoxShadow: string) { + return _.isEmpty(chartBoxShadow); +} +function isEmptyChartBorderStyle(chartBorderStyle: string) { + return _.isEmpty(chartBorderStyle); +} +function isEmptyChartBorderRadius(chartBorderRadius: string) { + return _.isEmpty(chartBorderRadius); +} +function isEmptyChartBorderWidth(chartBorderWidth: string) { + return _.isEmpty(chartBorderWidth); +} +function isEmptyChartTextSize(chartTextSize: string) { + return _.isEmpty(chartTextSize); +} +function isEmptyChartTextWeight(chartTextWeight: string) { + return _.isEmpty(chartTextWeight); +} +function isEmptyChartFontFamily(chartFontFamily: string) { + return _.isEmpty(chartFontFamily); +} +function isEmptyChartFontStyle(chartFontStyle: string) { + return _.isEmpty(chartFontStyle); +} function isEmptyPadding(padding: string) { return _.isEmpty(padding); } @@ -505,6 +577,42 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyChartOpacity(props[name]) && isChartOpacityConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartBoxShadow(props[name]) && isChartBoxShadowConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartBorderStyle(props[name]) && isChartBorderStyleConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartBorderRadius(props[name]) && isChartBorderRadiusConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartBorderWidth(props[name]) && isChartBorderWidthConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartTextSize(props[name]) && isChartTextSizeConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartTextWeight(props[name]) && isChartTextWeightConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartFontFamily(props[name]) && isChartFontFamilyConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartFontStyle(props[name]) && isChartFontStyleConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) { res[name] = props[name]; return; @@ -637,6 +745,33 @@ function calcColors>( if (isDirectionConfig(config)) { res[name] = themeWithDefault[config.direction] || '0 0 1 1'; } + if (isChartOpacityConfig(config)) { + res[name] = themeWithDefault[config.chartOpacity] || '1'; + } + if (isChartBoxShadowConfig(config)) { + res[name] = themeWithDefault[config.chartBoxShadow] || '1px 1px 1px'; + } + if (isChartBorderStyleConfig(config)) { + res[name] = themeWithDefault[config.chartBorderStyle] || 'solid'; + } + if (isChartBorderRadiusConfig(config)) { + res[name] = themeWithDefault[config.chartBorderRadius] || '1px'; + } + if (isChartBorderWidthConfig(config)) { + res[name] = themeWithDefault[config.chartBorderWidth] || '1px'; + } + if (isChartTextSizeConfig(config)) { + res[name] = themeWithDefault[config.chartTextSize] || '14px'; + } + if (isChartTextWeightConfig(config)) { + res[name] = themeWithDefault[config.chartTextWeight] || 'normal'; + } + if (isChartFontFamilyConfig(config)) { + res[name] = themeWithDefault[config.chartFontFamily] || 'Arial'; + } + if (isChartFontStyleConfig(config)) { + res[name] = themeWithDefault[config.chartFontStyle] || 'normal'; + } if (isPaddingConfig(config)) { res[name] = themeWithDefault[config.padding]; } @@ -783,6 +918,15 @@ const LineHeightPropIcon = styled(LineHeightIcon)` const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; const DirectionIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartOpacity = styled(OpacityIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartBoxShadow = styled(ShadowIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartBorderStyle = styled(BorderStyleIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartBorderRadius = styled(BorderRadiusIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartBorderWidth = styled(BorderWidthIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartTextSize = styled(TextSizeIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartTextWeight = styled(TextWeightIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartFontFamily = styled(FontFamilyIcon)` margin: 0 8px 0 2px; color: #888`; +const ChartFontStyle = styled(TextStyleIcon)` margin: 0 8px 0 2px; color: #888`; const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`; const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`; const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; @@ -930,6 +1074,15 @@ export function styleControl( name === 'footerBackgroundImageOrigin' || name === 'margin' || name === 'direction' || + name === 'chartOpacity' || + name === 'chartBoxShadow' || + name === 'chartBorderStyle' || + name === 'chartBorderRadius' || + name === 'chartBorderWidth' || + name === 'chartTextSize' || + name === 'chartTextWeight' || + name === 'chartFontFamily' || + name === 'chartFontStyle' || name === 'padding' || name === 'containerHeaderPadding' || name === 'containerSiderPadding' || @@ -1002,6 +1155,15 @@ export function styleControl( name === 'radius' || name === 'margin' || name === 'direction' || + name === 'chartOpacity' || + name === 'chartBoxShadow' || + name === 'chartBorderStyle' || + name === 'chartBorderRadius' || + name === 'chartBorderWidth' || + name === 'chartTextSize' || + name === 'chartTextWeight' || + name === 'chartFontFamily' || + name === 'chartFontStyle' || name === 'padding' || name === 'containerHeaderPadding' || name === 'containerSiderPadding' || @@ -1124,277 +1286,367 @@ export function styleControl( preInputNode: , placeholder: props[name], }) - : name === 'animationIterationCount' - ? ( + : name === 'chartOpacity' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'opacity' - ? ( + : name === 'chartBoxShadow' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'boxShadowColor' - ? ( - children[name] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: config.label, - preInputNode: ( - - ), - placeholder: props[name], - }) - : name === 'boxShadow' - ? ( + : name === 'chartBorderStyle' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'animation' - ? ( + : name === 'chartBorderRadius' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'animationDelay' - ? ( + : name === 'chartBorderWidth' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'animationDuration' - ? ( + : name === 'chartTextSize' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'padding' || - name === - 'containerHeaderPadding' || - name === - 'containerSiderPadding' || - name === - 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'chartTextWeight' ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : name === 'chartFontFamily' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'textSize' - ? ( - children[ - name - ] as InstanceType< + : name === 'chartFontStyle' + ? ( + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, - preInputNode: ( - - ), + preInputNode: , placeholder: props[name], }) - : name === 'textWeight' - ? ( - children[ - name - ] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: config.label, - preInputNode: ( - - ), - placeholder: props[name], - }) - : name === 'fontFamily' + : name === 'animationIterationCount' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'opacity' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === 'textTransform' + : name === 'boxShadowColor' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === 'fontStyle' + : name === 'boxShadow' + ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'animation' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === - 'backgroundImage' || - name === - 'headerBackgroundImage' || - name === - 'footerBackgroundImage' + : name === 'animationDelay' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ - label: - config.label, + label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === - 'backgroundImageRepeat' || - name === - 'headerBackgroundImageRepeat' || - name === - 'footerBackgroundImageRepeat' + : name === 'animationDuration' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ - label: - config.label, + label: config.label, preInputNode: ( - + ), - placeholder: - props[name], - }) - : name === - 'rotation' - ? ( - children[ - name - ] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: - config.label, - preInputNode: - ( - - ), - placeholder: - props[name], - }) - : name === 'lineHeight' // Added lineHeight here - ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , placeholder: props[name], }) - : children[ - name - ].propertyView({ - label: - config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: - depMsg, - allowGradient: config.name.includes('background'), - })} + : name === 'padding' || + name === + 'containerHeaderPadding' || + name === + 'containerSiderPadding' || + name === + 'containerFooterPadding' || + name === 'containerBodyPadding' + ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'textSize' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'textWeight' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'fontFamily' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'textDecoration' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === 'textTransform' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === 'fontStyle' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'backgroundImage' || + name === + 'headerBackgroundImage' || + name === + 'footerBackgroundImage' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: + ( + + ), + placeholder: + props[name], + }) + : name === 'lineHeight' // Added lineHeight here + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: + depMsg, + allowGradient: config.name.includes('background'), + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index da2bd087c..a2193b3a8 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -169,6 +169,42 @@ export type DirectionConfig = CommonColorConfig & { readonly direction: string; }; +export type ChartOpacityConfig = CommonColorConfig & { + readonly chartOpacity: string; +}; + +export type ChartBoxShadowConfig = CommonColorConfig & { + readonly chartBoxShadow: string; +}; + +export type ChartBorderStyleConfig = CommonColorConfig & { + readonly chartBorderStyle: string; +}; + +export type ChartBorderRadiusConfig = CommonColorConfig & { + readonly chartBorderRadius: string; +}; + +export type ChartBorderWidthConfig = CommonColorConfig & { + readonly chartBorderWidth: string; +}; + +export type ChartTextSizeConfig = CommonColorConfig & { + readonly chartTextSize: string; +}; + +export type ChartTextWeightConfig = CommonColorConfig & { + readonly chartTextWeight: string; +}; + +export type ChartFontFamilyConfig = CommonColorConfig & { + readonly chartFontFamily: string; +}; + +export type ChartFontStyleConfig = CommonColorConfig & { + readonly chartFontStyle: string; +}; + export type PaddingConfig = CommonColorConfig & { readonly padding: string; }; @@ -208,6 +244,15 @@ export type SingleColorConfig = | FontStyleConfig | MarginConfig | DirectionConfig + | ChartOpacityConfig + | ChartBoxShadowConfig + | ChartBorderStyleConfig + | ChartBorderRadiusConfig + | ChartBorderWidthConfig + | ChartTextSizeConfig + | ChartTextWeightConfig + | ChartFontFamilyConfig + | ChartFontStyleConfig | PaddingConfig | ContainerHeaderPaddingConfig | ContainerSiderPaddingConfig @@ -559,6 +604,60 @@ const DIRECTION = { direction: "direction", } as const; +const CHARTOPACITY = { + name: "chartOpacity", + label: trans("style.opacity"), + chartOpacity: "chartOpacity", +} as const; + +const CHARTBOXSHADOW = { + name: "chartBoxShadow", + label: trans("style.boxShadow"), + chartBoxShadow: "chartBoxShadow", +} as const; + +const CHARTBORDERSTYLE = { + name: "chartBorderStyle", + label: trans("style.borderStyle"), + chartBorderStyle: "chartBorderStyle", +} as const; + +const CHARTBORDERRADIUS = { + name: "chartBorderRadius", + label: trans("style.borderRadius"), + chartBorderRadius: "chartBorderRadius", +} as const; + +const CHARTBORDERWIDTH = { + name: "chartBorderWidth", + label: trans("style.borderWidth"), + chartBorderWidth: "chartBorderWidth", +} as const; + +const CHARTTEXTSIZE = { + name: "chartTextSize", + label: trans("style.textSize"), + chartTextSize: "chartTextSize", +} as const; + +const CHARTTEXTWEIGHT = { + name: "chartTextWeight", + label: trans("style.textWeight"), + chartTextWeight: "chartTextWeight", +} as const; + +const CHARTFONTFAMILY = { + name: "chartFontFamily", + label: trans("style.fontFamily"), + chartFontFamily: "chartFontFamily", +} as const; + +const CHARTFONTSTYLE = { + name: "chartFontStyle", + label: trans("style.fontStyle"), + chartFontStyle: "chartFontStyle", +} as const; + const PADDING = { name: "padding", label: trans("style.padding"), @@ -1816,25 +1915,25 @@ export const EchartsStyle = [getBackground("primarySurface")] as const; export const FunnelTextStyle = [ TEXT, - TEXT_SIZE, - TEXT_WEIGHT, - FONT_FAMILY, - FONT_STYLE, + CHARTTEXTSIZE, + CHARTTEXTWEIGHT, + CHARTFONTFAMILY, + CHARTFONTSTYLE, BOXSHADOWCOLOR, - BOXSHADOW, + CHARTBOXSHADOW, ] as const; export const FunnelChartStyle = [ getBackground("primarySurface"), getGradientBackground(), DIRECTION, - OPACITY, + CHARTOPACITY, BOXSHADOWCOLOR, - BOXSHADOW, + CHARTBOXSHADOW, BORDER, - BORDER_STYLE, - RADIUS, - BORDER_WIDTH, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, ] as const; export const CalendarStyle = [ diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 40eaad32d..144486380 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -12,7 +12,6 @@ const theme = { borderWidth: "1px", borderStyle: "solid", margin: "3px", - direction: "0 0 1 1", padding: "3px", lineHeight: "18px", gridColumns: String(DEFAULT_GRID_COLUMNS), From 4de98353c726596d811b15e5e721b297c2a57db9 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 16:15:40 -0500 Subject: [PATCH 16/42] Added ChartBackgroundColor, ChartGradientColor, ChartShadowColor, ChartBorderColor, ChartTextColor as ColorControl. --- .../comps/funnelChartComp/funnelChartUtils.ts | 20 +- .../components/ThemeSettingsCompStyles.tsx | 40 ++ .../src/comps/controls/styleControl.tsx | 447 ++++++++++++------ .../comps/controls/styleControlConstants.tsx | 63 ++- .../packages/lowcoder/src/i18n/locales/en.ts | 16 +- 5 files changed, 432 insertions(+), 154 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 2cdd7a6c0..7be5fdf98 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -138,8 +138,8 @@ export function getEchartsConfig( console.log("props", props); console.log("theme", theme); - const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor; - const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor; + const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor; + const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; @@ -156,9 +156,9 @@ export function getEchartsConfig( "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize, "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, - "color": props?.titleStyle?.text || theme?.titleStyle?.fontColor, + "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor, "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle, - "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor, + "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] @@ -188,9 +188,9 @@ export function getEchartsConfig( "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - "color": props?.legendStyle?.text || theme?.legendStyle?.fontColor, + "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor, "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor, + "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] @@ -211,11 +211,11 @@ export function getEchartsConfig( "sort": props.echartsSortingConfig.sort, "itemStyle": { "opacity": props.opacity, - "borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor, + "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, "borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius, - "shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor, + "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')[0] || theme?.chartStyle?.boxShadow.split('px')[1], "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2] @@ -226,9 +226,9 @@ export function getEchartsConfig( "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, - "color": props?.labelStyle?.text || theme?.labelStyle?.fontColor, + "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor, "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor, + "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] diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index 302a3fffc..2b90440d5 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -225,6 +225,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { placeholder = '#FFFFFF'; break; } + case 'chartBackgroundColor': { + placeholder = '#FFFFFF'; + break; + } + case 'chartGradientColor': { + placeholder = '#FFFFFF'; + break; + } + case 'chartShadowColor': { + placeholder = '#FFFFFF'; + break; + } + case 'chartBorderColor': { + placeholder = '#FFFFFF'; + break; + } + case 'chartTextColor': { + placeholder = '#FFFFFF'; + break; + } case 'boxShadow': { placeholder = '0px 0px 0px'; break; @@ -367,6 +387,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'chartBackgroundColor': { + icon = ; + break; + } + case 'chartGradientColor': { + icon = ; + break; + } + case 'chartShadowColor': { + icon = ; + break; + } + case 'chartBorderColor': { + icon = ; + break; + } + case 'chartTextColor': { + icon = ; + break; + } case 'boxShadow': { icon = ; break; diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 5b5d52f0e..a33295d08 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -80,6 +80,11 @@ import { borderStyleConfig, BoxShadowConfig, BoxShadowColorConfig, + ChartBackgroundColorConfig, + ChartGradientColorConfig, + ChartShadowColorConfig, + ChartBorderColorConfig, + ChartTextColorConfig, AnimationIterationCountConfig, OpacityConfig, AnimationConfig, @@ -252,6 +257,32 @@ function isBoxShadowColorConfig( return config.hasOwnProperty('boxShadowColor'); } +function isChartBackgroundColorConfig( + config: SingleColorConfig +): config is ChartBackgroundColorConfig { + return config.hasOwnProperty('chartBackgroundColor'); +} +function isChartGradientColorConfig( + config: SingleColorConfig +): config is ChartGradientColorConfig { + return config.hasOwnProperty('chartGradientColor'); +} +function isChartShadowColorConfig( + config: SingleColorConfig +): config is ChartShadowColorConfig { + return config.hasOwnProperty('chartShadowColor'); +} +function isChartBorderColorConfig( + config: SingleColorConfig +): config is ChartBorderColorConfig { + return config.hasOwnProperty('chartBorderColor'); +} +function isChartTextColorConfig( + config: SingleColorConfig +): config is ChartTextColorConfig { + return config.hasOwnProperty('chartTextColor'); +} + function isAnimationIterationCountConfig( config: SingleColorConfig ): config is AnimationIterationCountConfig { @@ -425,6 +456,22 @@ function isEmptyBoxShadowColor(boxShadowColor: string) { return _.isEmpty(boxShadowColor); } +function isEmptyChartBackgroundColor(chartBackgroundColor: string) { + return _.isEmpty(chartBackgroundColor); +} +function isEmptyChartGradientColor(chartGradientColor: string) { + return _.isEmpty(chartGradientColor); +} +function isEmptyChartShadowColor(chartShadowColor: string) { + return _.isEmpty(chartShadowColor); +} +function isEmptyChartBorderColor(chartBorderColor: string) { + return _.isEmpty(chartBorderColor); +} +function isEmptyChartTextColor(chartTextColor: string) { + return _.isEmpty(chartTextColor); +} + function isEmptyAnimation(animation: string) { return _.isEmpty(animation); } @@ -625,6 +672,26 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyChartBackgroundColor(props[name]) && isChartBackgroundColorConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartGradientColor(props[name]) && isChartGradientColorConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartShadowColor(props[name]) && isChartShadowColorConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartBorderColor(props[name]) && isChartBorderColorConfig(config)) { + res[name] = props[name]; + return; + } + if (!isEmptyChartTextColor(props[name]) && isChartTextColorConfig(config)) { + res[name] = props[name]; + return; + } if ( !isEmptyAnimationIterationCount(props[name]) && isAnimationIterationCountConfig(config) @@ -779,7 +846,22 @@ function calcColors>( res[name] = themeWithDefault[config.boxShadow] || '0px 0px 0px'; } if (isBoxShadowColorConfig(config)) { - res[name] = themeWithDefault[config.boxShadowColor] || '0px 0px 0px'; + res[name] = themeWithDefault[config.boxShadowColor]; + } + if (isChartBackgroundColorConfig(config)) { + res[name] = themeWithDefault[config.chartBackgroundColor]; + } + if (isChartGradientColorConfig(config)) { + res[name] = themeWithDefault[config.chartGradientColor]; + } + if (isChartShadowColorConfig(config)) { + res[name] = themeWithDefault[config.chartShadowColor]; + } + if (isChartBorderColorConfig(config)) { + res[name] = themeWithDefault[config.chartBorderColor]; + } + if (isChartTextColorConfig(config)) { + res[name] = themeWithDefault[config.chartTextColor]; } if (isAnimationIterationCountConfig(config)) { res[name] = themeWithDefault[config.animationIterationCount] || '0'; @@ -951,6 +1033,32 @@ const BoxShadowColorPropIcon = styled(BorderWidthIcon)` color: #888; `; +const ChartBackgroundColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const ChartGradientColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const ChartShadowColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const ChartBorderColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; +const ChartTextColorPropIcon = styled(BorderWidthIcon)` + margin: 0 8px 0 -3px; + padding: 3px; + color: #888; +`; + const BoxShadowPropIcon = styled(ShadowIcon)` margin: 0 8px 0 -3px; padding: 3px; @@ -1173,6 +1281,11 @@ export function styleControl( name === 'animationIterationCount' || name === 'opacity' || name === 'boxShadowColor' || + name === 'chartBackgroundColor' || + name === 'chartGradientColor' || + name === 'chartShadowColor' || + name === 'chartBorderColor' || + name === 'chartTextColor' || name === 'boxShadow' || name === 'animation' || name === 'animationDelay' || @@ -1412,187 +1525,134 @@ export function styleControl( ), placeholder: props[name], }) - : name === 'boxShadow' - ? ( + : name === 'chartBackgroundColor' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animation' - ? ( + : name === 'chartGradientColor' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDelay' - ? ( + : name === 'chartShadowColor' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'animationDuration' - ? ( + : name === 'chartBorderColor' + ? ( children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'padding' || - name === - 'containerHeaderPadding' || - name === - 'containerSiderPadding' || - name === - 'containerFooterPadding' || - name === 'containerBodyPadding' + : name === 'chartTextColor' ? ( - children[name] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: config.label, - preInputNode: ( - - ), - placeholder: props[name], - }) - : name === 'textSize' - ? ( - children[ - name - ] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: config.label, - preInputNode: ( - - ), - placeholder: props[name], - }) - : name === 'textWeight' + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'boxShadow' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'fontFamily' + : name === 'animation' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), placeholder: props[name], }) - : name === 'textDecoration' + : name === 'animationDelay' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === 'textTransform' + : name === 'animationDuration' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === 'fontStyle' - ? ( - children[ - name - ] as InstanceType< - typeof StringControl - > - ).propertyView({ - label: config.label, - preInputNode: ( - - ), - placeholder: - props[name], - }) - : name === - 'backgroundImage' || + : name === 'padding' || + name === + 'containerHeaderPadding' || name === - 'headerBackgroundImage' || + 'containerSiderPadding' || name === - 'footerBackgroundImage' + 'containerFooterPadding' || + name === 'containerBodyPadding' ? ( - children[ - name - ] as InstanceType< + children[name] as InstanceType< typeof StringControl > ).propertyView({ - label: - config.label, + label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === - 'backgroundImageRepeat' || - name === - 'headerBackgroundImageRepeat' || - name === - 'footerBackgroundImageRepeat' + : name === 'textSize' ? ( children[ name @@ -1600,16 +1660,13 @@ export function styleControl( typeof StringControl > ).propertyView({ - label: - config.label, + label: config.label, preInputNode: ( - + ), - placeholder: - props[name], + placeholder: props[name], }) - : name === - 'rotation' + : name === 'textWeight' ? ( children[ name @@ -1617,36 +1674,152 @@ export function styleControl( typeof StringControl > ).propertyView({ - label: - config.label, - preInputNode: - ( - - ), - placeholder: - props[name], + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], }) - : name === 'lineHeight' // Added lineHeight here + : name === 'fontFamily' ? ( - children[name] as InstanceType - ).propertyView({ - label: config.label, - preInputNode: , - placeholder: props[name], - }) - : children[ - name - ].propertyView({ - label: - config.label, - panelDefaultColor: - props[name], - // isDep: isDepColorConfig(config), - isDep: true, - depMsg: - depMsg, - allowGradient: config.name.includes('background'), - })} + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: props[name], + }) + : name === 'textDecoration' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === 'textTransform' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === 'fontStyle' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'backgroundImage' || + name === + 'headerBackgroundImage' || + name === + 'footerBackgroundImage' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'backgroundImageRepeat' || + name === + 'headerBackgroundImageRepeat' || + name === + 'footerBackgroundImageRepeat' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: ( + + ), + placeholder: + props[name], + }) + : name === + 'rotation' + ? ( + children[ + name + ] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: + config.label, + preInputNode: + ( + + ), + placeholder: + props[name], + }) + : name === 'lineHeight' // Added lineHeight here + ? ( + children[name] as InstanceType + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) + : children[ + name + ].propertyView({ + label: + config.label, + panelDefaultColor: + props[name], + // isDep: isDepColorConfig(config), + isDep: true, + depMsg: + depMsg, + allowGradient: config.name.includes('background'), + })} ); })} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index a2193b3a8..e79685bed 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -41,6 +41,22 @@ export type BoxShadowColorConfig = CommonColorConfig & { readonly boxShadowColor: string; }; +export type ChartBackgroundColorConfig = CommonColorConfig & { + readonly chartBackgroundColor: string; +}; +export type ChartGradientColorConfig = CommonColorConfig & { + readonly chartGradientColor: string; +}; +export type ChartShadowColorConfig = CommonColorConfig & { + readonly chartShadowColor: string; +}; +export type ChartBorderColorConfig = CommonColorConfig & { + readonly chartBorderColor: string; +}; +export type ChartTextColorConfig = CommonColorConfig & { + readonly chartTextColor: string; +}; + export type AnimationIterationCountConfig = CommonColorConfig & { readonly animationIterationCount: string; }; @@ -281,6 +297,11 @@ export type SingleColorConfig = | BoxShadowColorConfig | AnimationIterationCountConfig | LineHeightConfig + | ChartBackgroundColorConfig + | ChartGradientColorConfig + | ChartShadowColorConfig + | ChartBorderColorConfig + | ChartTextColorConfig @@ -507,6 +528,36 @@ const BOXSHADOWCOLOR = { boxShadowColor: "boxShadowColor", } as const; +const CHARTBACKGROUNDCOLOR = { + name: "chartBackgroundColor", + label: trans("style.chartBackgroundColor"), + chartBackgroundColor: "chartBackgroundColor", +} as const; + +const CHARTGRADIENTCOLOR = { + name: "chartGradientColor", + label: trans("style.chartGradientColor"), + chartGradientColor: "chartGradientColor", +} as const; + +const CHARTSHADOWCOLOR = { + name: "chartShadowColor", + label: trans("style.chartShadowColor"), + chartShadowColor: "chartShadowColor", +} as const; + +const CHARTBORDERCOLOR = { + name: "chartBorderColor", + label: trans("style.chartBorderColor"), + chartBorderColor: "chartBorderColor", +} as const; + +const CHARTTEXTCOLOR = { + name: "chartTextColor", + label: trans("style.chartTextColor"), + chartTextColor: "chartTextColor", +} as const; + const OPACITY = { name: "opacity", label: trans("style.opacity"), @@ -1914,23 +1965,23 @@ export const JsonEditorStyle = [LABEL] as const; export const EchartsStyle = [getBackground("primarySurface")] as const; export const FunnelTextStyle = [ - TEXT, + CHARTTEXTCOLOR, CHARTTEXTSIZE, CHARTTEXTWEIGHT, CHARTFONTFAMILY, CHARTFONTSTYLE, - BOXSHADOWCOLOR, + CHARTSHADOWCOLOR, CHARTBOXSHADOW, ] as const; export const FunnelChartStyle = [ - getBackground("primarySurface"), - getGradientBackground(), + CHARTBACKGROUNDCOLOR, + CHARTGRADIENTCOLOR, DIRECTION, CHARTOPACITY, - BOXSHADOWCOLOR, + CHARTSHADOWCOLOR, CHARTBOXSHADOW, - BORDER, + CHARTBORDERCOLOR, CHARTBORDERSTYLE, CHARTBORDERRADIUS, CHARTBORDERWIDTH, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 4612627a8..222157aff 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -569,7 +569,21 @@ export const en = { "activeBackground": "Active Background Color", "labelBackground": "Label Background Color", "gradientBackground": "Gradient Background Color", - "direction": "Direction" + "direction": "Direction", + "chartOpacity": "Opacity", + "chartBoxShadow": "Box Shadow", + "chartBorderStyle": "Border Style", + "chartBorderRadius": "Border Radius", + "chartBorderWidth": "Border Width", + "chartTextSize": "Text Size", + "chartTextWeight": "Text Weight", + "chartFontFamily": "Font Family", + "chartFontStyle": "Font Style", + "chartBackgroundColor": "Background Color", + "chartGradientColor": "Gradient Color", + "chartShadowColor": "Shadow Color", + "chartBorderColor": "Border Color", + "chartTextColor": "Text Color" }, "export": { "hiddenDesc": "If true, the component is hidden", From bc5936a5a0fa28463f8db9f1865d8bdc62927fd5 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 12 Dec 2024 17:07:07 -0500 Subject: [PATCH 17/42] Added initial value of funnelChartUtils. --- .../src/comps/funnelChartComp/funnelChartUtils.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 7be5fdf98..f65a62446 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -138,7 +138,7 @@ export function getEchartsConfig( console.log("props", props); console.log("theme", theme); - const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor; + const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; @@ -154,9 +154,9 @@ export function getEchartsConfig( "left":props.echartsTitleConfig.top, "textStyle": { "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize, + "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18', "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, - "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor, + "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], @@ -171,8 +171,8 @@ export function getEchartsConfig( "x2": direction?.split(' ')[2], "y2": direction?.split(' ')[3], "colorStops": [ - { "offset": 0, "color": opacity ? backgroundColor + opacityToHex(opacity) : backgroundColor || "#FFFFFF" }, - { "offset": 1, "color": opacity ? gradientColor + opacityToHex(opacity) : gradientColor || "#FFFFFF" } + { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, + { "offset": 1, "color": gradientColor + opacityToHex(opacity)} ] } : backgroundColor + opacityToHex(opacity), @@ -188,7 +188,7 @@ export function getEchartsConfig( "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, + "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], @@ -226,7 +226,7 @@ export function getEchartsConfig( "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, + "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], From 10cb9eb345561a7e4c2dedebfd35168f3b6cf7c5 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 13 Dec 2024 01:09:04 -0500 Subject: [PATCH 18/42] Fixed a direction split issue. --- .../comps/funnelChartComp/funnelChartUtils.ts | 172 +++++++++--------- 1 file changed, 86 insertions(+), 86 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index f65a62446..7500ffb8d 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -148,95 +148,95 @@ export function getEchartsConfig( if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "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] - } - }, - "backgroundColor": gradientColor && backgroundColor - ? { - "x": direction?.split(' ')[0], - "y": direction?.split(' ')[1], - "x2": direction?.split(' ')[2], - "y2": direction?.split(' ')[3], - "colorStops": [ - { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, - { "offset": 1, "color": gradientColor + opacityToHex(opacity)} - ] - } - : backgroundColor + opacityToHex(opacity), - "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), - "top": props.echartsLegendConfig.top, - "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] - } - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "left": `${props.left}%`, - "top": props.top, - "bottom": props.bottom, - "width": `${props.left}%`, - "min": props.min, - "max": props.max, - "gap": props.gap, - "funnelAlign": props.echartsFunnelAlignConfig.funnelAlign, - "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": 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')[0] || theme?.chartStyle?.boxShadow.split('px')[1], - "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2] + "title": { + "text": props.echartsTitle, + 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', + "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] + } }, - "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] + "backgroundColor": gradientColor && backgroundColor + ? { + "x": direction?.split(' ')[0], + "y": direction?.split(' ')[1], + "x2": direction?.split(' ')[2], + "y2": direction?.split(' ')[3], + "colorStops": [ + { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, + { "offset": 1, "color": gradientColor + opacityToHex(opacity)} + ] + } + : backgroundColor + opacityToHex(opacity), + "color": props.echartsOption.data?.map(data => data.color), + "tooltip": props.tooltip&&{ + "trigger": "item", + "formatter": "{a}
{b} : {c}%" }, - "data": props.echartsOption.data + "legend":props.legendVisibility&& { + "data": props.echartsOption.data?.map(data=>data.name), + "top": props.echartsLegendConfig.top, + "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] + } + }, + "series": [ + { + "name": props.echartsConfig.type, + "type": props.echartsConfig.type, + "left": `${props.left}%`, + "top": props.top, + "bottom": props.bottom, + "width": `${props.left}%`, + "min": props.min, + "max": props.max, + "gap": props.gap, + "funnelAlign": props.echartsFunnelAlignConfig.funnelAlign, + "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": 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] + }, + "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] + }, + "data": props.echartsOption.data + } + ] } - ] -} return props.echartsOption ? opt : {}; } From dad3997e2d70b2b047c60e4139ffe1a145d2b6df Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 13 Dec 2024 09:56:03 -0500 Subject: [PATCH 19/42] Fixed Chart styles UI of right panel. --- .../src/comps/controls/styleControl.tsx | 31 +++++++------------ 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index a33295d08..c87007c87 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -999,16 +999,7 @@ const LineHeightPropIcon = styled(LineHeightIcon)` `; const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; -const DirectionIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartOpacity = styled(OpacityIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartBoxShadow = styled(ShadowIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartBorderStyle = styled(BorderStyleIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartBorderRadius = styled(BorderRadiusIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartBorderWidth = styled(BorderWidthIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartTextSize = styled(TextSizeIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartTextWeight = styled(TextWeightIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartFontFamily = styled(FontFamilyIcon)` margin: 0 8px 0 2px; color: #888`; -const ChartFontStyle = styled(TextStyleIcon)` margin: 0 8px 0 2px; color: #888`; +const DirectionIcon = styled(ExpandIcon)` margin: 0 13px 0 2px; color: #888`; const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`; const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`; const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; @@ -1035,7 +1026,7 @@ const BoxShadowColorPropIcon = styled(BorderWidthIcon)` const ChartBackgroundColorPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; - padding: 3px; + padding: 13px; color: #888; `; const ChartGradientColorPropIcon = styled(BorderWidthIcon)` @@ -1406,7 +1397,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartBoxShadow' @@ -1416,7 +1407,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartBorderStyle' @@ -1426,7 +1417,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartBorderRadius' @@ -1436,7 +1427,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartBorderWidth' @@ -1446,7 +1437,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartTextSize' @@ -1456,7 +1447,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartTextWeight' @@ -1466,7 +1457,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartFontFamily' @@ -1476,7 +1467,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'chartFontStyle' @@ -1486,7 +1477,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'animationIterationCount' From ca9bbcfdfa3baf4d6cebbc69a932cf028e4d3bde Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 14 Dec 2024 10:55:51 -0500 Subject: [PATCH 20/42] Updated guage chart. --- .../comps/funnelChartComp/funnelChartComp.tsx | 3 +-- .../funnelChartComp/funnelChartConstants.tsx | 12 ++++++------ .../comps/gaugeChartComp/gaugeChartConstants.tsx | 14 +++++++++++--- .../gaugeChartComp/gaugeChartPropertyView.tsx | 16 ++++++++++++++-- .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 16 ++++++++++++++-- .../lowcoder-comps/src/i18n/comps/locales/en.ts | 7 +++++++ .../src/comps/controls/styleControlConstants.tsx | 4 ++-- 7 files changed, 55 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index 57ae6adad..b26a67182 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -147,7 +147,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { chartSize, themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren), theme, childrenToProps(echartsConfigChildren)]); + }, [chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) @@ -175,7 +175,6 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={themeConfig} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 2b58bf292..4fe1db61c 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -17,8 +17,8 @@ import { clickEvent, styleControl, EchartsStyle, - FunnelTextStyle, - FunnelChartStyle + EchartDefaultChartStyle, + EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -278,10 +278,10 @@ let chartJsonModeChildren: any = { if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - chartStyle: styleControl(FunnelChartStyle, 'chartStyle'), - titleStyle: styleControl(FunnelTextStyle, 'titleStyle'), - labelStyle: styleControl(FunnelTextStyle, 'labelStyle'), - legendStyle: styleControl(FunnelTextStyle, 'legendStyle'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 89571a5bd..b09470678 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -265,12 +267,18 @@ let chartJsonModeChildren: any = { width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')), min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), - gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')) + gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), + startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')), + endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), + splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), } if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 026006072..f329dbfbb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -39,14 +39,26 @@ export function gaugeChartPropertyView( {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.min.propertyView({ label: trans("gaugeChart.min") })} {children.max.propertyView({ label: trans("gaugeChart.max") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index eb16f1a86..ce9ffb510 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -157,13 +157,25 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, + "startAngle": props.startAngle, + "endAngle": props.endAngle, + "splitNumber": props.splitNumber, 'detail': { "backgroundColor": props?.style?.background, "formatter": "{value}%" }, "label": { "show": props.label, - "position": props.echartsLabelConfig.top - }, + "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] + }, /*"detail": { "formatter": "{value}%" }, */ diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 7eabffb39..3c425623e 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -103,7 +103,14 @@ export const en = { defaultMax:'100', gap: 'Gap', defaultGap: '2', + defaultStartAngle: '180', + startAngle: 'Start Angle', + defaultEndAngle: '0', + endAngle: 'End Angle', + defaultSplitNumber: '10', + splitNumber: 'Split Number', label:'Label', + }, echarts: { defaultTitle: "Data Display", diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index e79685bed..884ab36a7 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1964,7 +1964,7 @@ export const JsonEditorStyle = [LABEL] as const; export const EchartsStyle = [getBackground("primarySurface")] as const; -export const FunnelTextStyle = [ +export const EchartDefaultTextStyle = [ CHARTTEXTCOLOR, CHARTTEXTSIZE, CHARTTEXTWEIGHT, @@ -1974,7 +1974,7 @@ export const FunnelTextStyle = [ CHARTBOXSHADOW, ] as const; -export const FunnelChartStyle = [ +export const EchartDefaultChartStyle = [ CHARTBACKGROUNDCOLOR, CHARTGRADIENTCOLOR, DIRECTION, From 901036795f3fde63b5b365b1dba18cc7094d05b0 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 14 Dec 2024 13:56:10 -0500 Subject: [PATCH 21/42] Added styles to gaugeChart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 2 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 1 + .../comps/gaugeChartComp/gaugeChartUtils.ts | 102 +++++++++++++----- .../src/i18n/comps/locales/en.ts | 2 + 4 files changed, 81 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index b09470678..3f3d6b66c 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -265,12 +265,14 @@ let chartJsonModeChildren: any = { top:withDefault(NumberControl,trans('gaugeChart.defaultTop')), bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')), + radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')), min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')), endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), + } if (EchartsStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index f329dbfbb..32099e134 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -37,6 +37,7 @@ export function gaugeChartPropertyView( {children.top.propertyView({ label: trans("gaugeChart.top") })} {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius") })} {children.min.propertyView({ label: trans("gaugeChart.min") })} {children.max.propertyView({ label: trans("gaugeChart.max") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index ce9ffb510..76b6c887b 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import opacityToHex from "../../util/opacityToHex"; export function transformData( originData: JSONObject[], @@ -133,23 +134,51 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; + const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; + const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; + const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; + if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":props.echartsTitleConfig.top - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{a}
{b} : {c}%" - }, - "series": [ + "title": { + "text": props.echartsTitle, + 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', + "left":props.echartsTitleConfig.top, + "textStyle": { + "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, + "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize, + "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] + }, + }, + "backgroundColor": gradientColor && backgroundColor + ? { + "x": direction?.split(' ')[0], + "y": direction?.split(' ')[1], + "x2": direction?.split(' ')[2], + "y2": direction?.split(' ')[3], + "colorStops": [ + { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, + { "offset": 1, "color": gradientColor + opacityToHex(opacity)} + ] + } + : backgroundColor + opacityToHex(opacity), + "tooltip": props.tooltip&&{ + "trigger": "item", + "formatter": "{a}
{b} : {c}%" + }, + "series": [ { "name": props.echartsConfig.type, "type": props.echartsConfig.type, + "radius": `${props.radius}%`, "left": `${props.left}%`, "top": props.top, "bottom": props.bottom, @@ -160,26 +189,47 @@ export function getEchartsConfig( "startAngle": props.startAngle, "endAngle": props.endAngle, "splitNumber": props.splitNumber, + "itemStyle": { + "color": props.echartsOption.data?.map(data => data.color), + "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": 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] + }, 'detail': { - "backgroundColor": props?.style?.background, "formatter": "{value}%" + "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] }, "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] }, - /*"detail": { - "formatter": "{value}%" - }, */ - "data": props.echartsOption.data + "data": props.echartsOption.data?.map(item => ({ + ...item, + title: { + "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] + } + })) } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 3c425623e..57a1097d9 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -109,6 +109,8 @@ export const en = { endAngle: 'End Angle', defaultSplitNumber: '10', splitNumber: 'Split Number', + radius: 'Radius', + defaultRadius: '60%', label:'Label', }, From fe9e50550258dd324e0b35c35fec2570eeefcc5f Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 14 Dec 2024 14:56:36 -0500 Subject: [PATCH 22/42] Added Pointer and Fixed default values --- .../gaugeChartComp/gaugeChartConstants.tsx | 2 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 2 + .../comps/gaugeChartComp/gaugeChartUtils.ts | 126 +++++++++--------- .../src/i18n/comps/locales/en.ts | 10 +- 4 files changed, 76 insertions(+), 64 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 3f3d6b66c..a8873e61e 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -272,6 +272,8 @@ let chartJsonModeChildren: any = { startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')), endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), + pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), + pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), } if (EchartsStyle) { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 32099e134..11a28a1b7 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -43,6 +43,8 @@ export function gaugeChartPropertyView( {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 76b6c887b..39d4ee959 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -148,7 +148,7 @@ export function getEchartsConfig( "left":props.echartsTitleConfig.top, "textStyle": { "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize, + "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, @@ -175,75 +175,79 @@ export function getEchartsConfig( "formatter": "{a}
{b} : {c}%" }, "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "radius": `${props.radius}%`, - "left": `${props.left}%`, - "top": props.top, - "bottom": props.bottom, - "width": `${props.left}%`, - "min": props.min, - "max": props.max, - "gap": props.gap, - "startAngle": props.startAngle, - "endAngle": props.endAngle, - "splitNumber": props.splitNumber, - "itemStyle": { - "color": props.echartsOption.data?.map(data => data.color), - "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": 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] - }, - 'detail': { - "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] - }, - "label": { - "show": props.label, - "position": props.echartsLabelConfig.top, - }, - "data": props.echartsOption.data?.map(item => ({ - ...item, - title: { - "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] + { + "name": props.echartsConfig.type, + "type": props.echartsConfig.type, + "radius": `${props.radius}%`, + "left": `${props.left}%`, + "top": props.top, + "bottom": props.bottom, + "width": `${props.left}%`, + "min": props.min, + "max": props.max, + "gap": props.gap, + "startAngle": props.startAngle, + "endAngle": props.endAngle, + "splitNumber": props.splitNumber, + "pointer": { + "length": `${props.pointerLength}%`, + "width": props.pointerWidth, + }, + "itemStyle": { + "color": props.echartsOption.data?.map(data => data.color), + "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": 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] + }, + 'detail': { + "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, + "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16, + "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] + }, + "label": { + "show": props.label, + "position": props.echartsLabelConfig.top, + }, + "data": props.echartsOption.data?.map(item => ({ + ...item, + title: { + "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] + } + })) } - })) + ] } - ] -} return props.echartsOption ? opt : {}; - + } - + if(props.mode === "map") { const { mapZoomLevel, mapCenterLat, mapCenterLng, - mapOptions, - showCharts, + mapOptions, + showCharts, } = props; const echartsOption = mapOptions && showCharts ? mapOptions : {}; diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 57a1097d9..3e77ed0e7 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -103,14 +103,18 @@ export const en = { defaultMax:'100', gap: 'Gap', defaultGap: '2', - defaultStartAngle: '180', + defaultStartAngle: '210', startAngle: 'Start Angle', - defaultEndAngle: '0', + defaultEndAngle: '-30', endAngle: 'End Angle', defaultSplitNumber: '10', splitNumber: 'Split Number', radius: 'Radius', - defaultRadius: '60%', + defaultRadius: '60', + defaultPointerLength: '75', + pointerLength: 'Pointer Length', + pointerWidth: 'Pointer Width', + defaultPointerWidth: '25', label:'Label', }, From c14a22d0e7550c5a27ad4a8c25fa706072cfaf8c Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 01:55:00 -0500 Subject: [PATCH 23/42] Updated Gauge Chart. --- .../src/comps/gaugeChartComp/gaugeChartConstants.tsx | 2 ++ .../comps/gaugeChartComp/gaugeChartPropertyView.tsx | 2 ++ .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 1 + .../lowcoder-comps/src/i18n/comps/locales/en.ts | 10 +++++++--- .../lowcoder/src/comps/controls/styleControl.tsx | 3 ++- 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index a8873e61e..b6193089f 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -269,6 +269,8 @@ let chartJsonModeChildren: any = { min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), + positin_x:withDefault(NumberControl,trans('gaugeChart.position_x')), + positin_y:withDefault(NumberControl,trans('gaugeChart.position_y')), startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')), endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 11a28a1b7..a296e666a 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -40,6 +40,8 @@ export function gaugeChartPropertyView( {children.radius.propertyView({ label: trans("gaugeChart.radius") })} {children.min.propertyView({ label: trans("gaugeChart.min") })} {children.max.propertyView({ label: trans("gaugeChart.max") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 39d4ee959..63b379c67 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -186,6 +186,7 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, + "center": [`${props.position_x}%`, `${props.position_y}%`], "startAngle": props.startAngle, "endAngle": props.endAngle, "splitNumber": props.splitNumber, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 3e77ed0e7..208542ed0 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -110,12 +110,16 @@ export const en = { defaultSplitNumber: '10', splitNumber: 'Split Number', radius: 'Radius', - defaultRadius: '60', - defaultPointerLength: '75', + defaultRadius: '80', + defaultPointerLength: '50', pointerLength: 'Pointer Length', pointerWidth: 'Pointer Width', - defaultPointerWidth: '25', + defaultPointerWidth: '5', label:'Label', + position_x: 'Position-X', + defaultPosition_X: '50', + position_y: 'Position-Y', + defaultPosition_Y: '60', }, echarts: { diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index c87007c87..c4eb8546f 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -1077,6 +1077,7 @@ const RotationPropIcon = styled(RotationIcon)` margin: 0 8px 0 -3px; padding: 3p const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const StyledTextTransformIcon = styled(TextTransformationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; +const StyledFontStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const StyledTextStyleIcon = styled(TextStyleIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; const StyledTextDecorationPropIcon = styled(TextDecorationIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`; @@ -1477,7 +1478,7 @@ export function styleControl( > ).propertyView({ label: config.label, - preInputNode: , + preInputNode: , placeholder: props[name], }) : name === 'animationIterationCount' From 94c0f92b07a75dbdf5cc7f3de9ee3ce39257b82c Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 02:41:44 -0500 Subject: [PATCH 24/42] Updated Gauge Chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 6 +++-- .../gaugeChartComp/gaugeChartPropertyView.tsx | 4 +++- .../comps/gaugeChartComp/gaugeChartUtils.ts | 23 ++++++++++++++----- .../src/i18n/comps/locales/en.ts | 4 +++- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 1 + 6 files changed, 29 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index b6193089f..e803aa346 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -261,6 +261,7 @@ let chartJsonModeChildren: any = { tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), label: withDefault(BoolControl, true), + progressBar: withDefault(BoolControl, true), left:withDefault(NumberControl,trans('gaugeChart.defaultLeft')), top:withDefault(NumberControl,trans('gaugeChart.defaultTop')), bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), @@ -269,13 +270,14 @@ let chartJsonModeChildren: any = { min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), - positin_x:withDefault(NumberControl,trans('gaugeChart.position_x')), - positin_y:withDefault(NumberControl,trans('gaugeChart.position_y')), + position_x:withDefault(NumberControl,trans('gaugeChart.defaultPosition_X')), + position_y:withDefault(NumberControl,trans('gaugeChart.defaultPosition_Y')), startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')), endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), + progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), } if (EchartsStyle) { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index a296e666a..42e8e44f8 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -47,8 +47,10 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar") })}
{children.onEvent.propertyView()} @@ -62,7 +64,7 @@ export function gaugeChartPropertyView(
{children.labelStyle?.getPropertyView()}
-
+
{children.legendStyle?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 63b379c67..07c612665 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -186,13 +186,13 @@ export function getEchartsConfig( "min": props.min, "max": props.max, "gap": props.gap, - "center": [`${props.position_x}%`, `${props.position_y}%`], - "startAngle": props.startAngle, - "endAngle": props.endAngle, - "splitNumber": props.splitNumber, + "center": [`${props?.position_x}%`, `${props?.position_y}%`], + "startAngle": props?.startAngle, + "endAngle": props?.endAngle, + "splitNumber": props?.splitNumber, "pointer": { - "length": `${props.pointerLength}%`, - "width": props.pointerWidth, + "length": `${props?.pointerLength}%`, + "width": props?.pointerWidth, }, "itemStyle": { "color": props.echartsOption.data?.map(data => data.color), @@ -206,6 +206,17 @@ export function getEchartsConfig( "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] }, + "progress": { + "roundCap": true, + "show": props?.progressBar, + "width": props?.progressBarWidth + }, + "axisLine": { + "roundCap": true, + "lineStyle": { + "width": props?.progressBarWidth + } + }, 'detail': { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 208542ed0..71e84a73c 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -120,7 +120,9 @@ export const en = { defaultPosition_X: '50', position_y: 'Position-Y', defaultPosition_Y: '60', - + progressBarWidth: 'Progress Bar Width', + defaultProgressBarWidth: '10', + progressBar: 'Progress Bar', }, echarts: { defaultTitle: "Data Display", diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index c86374f6d..9a18116c5 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -190,4 +190,5 @@ export const sectionNames = { chartStyle:trans("prop.chartStyle"), titleStyle:trans("prop.titleStyle"), legendStyle:trans("prop.legendStyle"), + detailStyle:trans("prop.detailStyle"), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index f7a1f4ac9..16c0258bb 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -43,6 +43,7 @@ export const en = { chartStyle: "Chart Style", titleStyle: "Title Style", legendStyle: "Legend Style", + detailStyle: "Detail Style", }, passwordInput: { label: "Password:", From 4e9422b6b6b83b1571acd5236d73b78f3e703412 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 03:22:18 -0500 Subject: [PATCH 25/42] Added axis style to Gauge chart. --- .../src/comps/gaugeChartComp/gaugeChartConstants.tsx | 1 + .../comps/gaugeChartComp/gaugeChartPropertyView.tsx | 3 +++ .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 12 ++++++++++++ .../lowcoder-design/src/components/Section.tsx | 1 + .../lowcoder-design/src/i18n/design/locales/en.ts | 1 + 5 files changed, 18 insertions(+) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index e803aa346..4fad59599 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -287,6 +287,7 @@ if (EchartsStyle) { titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'), } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 42e8e44f8..90ac83f47 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -67,6 +67,9 @@ export function gaugeChartPropertyView(
{children.legendStyle?.getPropertyView()}
+
+ {children.axisLabelStyle?.getPropertyView()} +
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 07c612665..b0dc5d297 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -217,6 +217,18 @@ export function getEchartsConfig( "width": props?.progressBarWidth } }, + "axisLabel": { + "distance": props?.progressBarWidth + "10", // Distance of the labels from the axis + "fontFamily": props?.axixLabelStyle?.chartFontFamily || theme?.axixLabelStyle?.fontFamily, + "fontSize": props?.axixLabelStyle?.chartTextSize || theme?.axixLabelStyle?.fontSize || 12, + "fontWeight": props?.axixLabelStyle?.chartTextWeight || theme?.axixLabelStyle?.fontWeight, + "color": props?.axixLabelStyle?.chartTextColor || theme?.axixLabelStyle?.fontColor || "#000000", + "fontStyle": props?.axixLabelStyle?.chartFontStyle || theme?.axixLabelStyle?.fontStyle, + "textShadowColor": props?.axixLabelStyle?.chartShadowColor || theme?.axixLabelStyle?.shadowColor, + "textShadowBlur": props?.axixLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axixLabelStyle?.boxShadow?.split('px')[0], + "textShadowOffsetX": props?.axixLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axixLabelStyle?.boxShadow?.split('px')[1], + "textShadowOffsetY": props?.axixLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axixLabelStyle?.boxShadow?.split('px')[2] + }, 'detail': { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16, diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 9a18116c5..a476395d2 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -191,4 +191,5 @@ export const sectionNames = { titleStyle:trans("prop.titleStyle"), legendStyle:trans("prop.legendStyle"), detailStyle:trans("prop.detailStyle"), + axisLabelStyle:trans("prop.axisLabelStyle"), }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index 16c0258bb..c3f38d07d 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -44,6 +44,7 @@ export const en = { titleStyle: "Title Style", legendStyle: "Legend Style", detailStyle: "Detail Style", + axisLabelStyle: "Axis Label Style" }, passwordInput: { label: "Password:", From 76474f7b3f5628043975446321ba77340fbd5d47 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 10:50:23 -0500 Subject: [PATCH 26/42] Added roundCap, theme setting to Gauge chart. --- .../comps/gaugeChartComp/gaugeChartComp.tsx | 3 +- .../gaugeChartComp/gaugeChartConstants.tsx | 1 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 1 + .../comps/gaugeChartComp/gaugeChartUtils.ts | 33 ++++++++++--------- .../src/i18n/comps/locales/en.ts | 1 + 5 files changed, 21 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx index 7e2574c04..82d1f5dff 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -146,7 +146,7 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); @@ -176,7 +176,6 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={mode !== 'map' ? themeConfig : undefined} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 4fad59599..f9f6210b5 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -262,6 +262,7 @@ let chartJsonModeChildren: any = { legendVisibility: withDefault(BoolControl, true), label: withDefault(BoolControl, true), progressBar: withDefault(BoolControl, true), + roundCap: withDefault(BoolControl, true), left:withDefault(NumberControl,trans('gaugeChart.defaultLeft')), top:withDefault(NumberControl,trans('gaugeChart.defaultTop')), bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 90ac83f47..0cb5ca5ab 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -51,6 +51,7 @@ export function gaugeChartPropertyView( {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })} {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap") })}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index b0dc5d297..bde12f550 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -174,6 +174,7 @@ export function getEchartsConfig( "trigger": "item", "formatter": "{a}
{b} : {c}%" }, + "color": props?.echartsOption?.data?.map(data => data.color), "series": [ { "name": props.echartsConfig.type, @@ -182,7 +183,7 @@ export function getEchartsConfig( "left": `${props.left}%`, "top": props.top, "bottom": props.bottom, - "width": `${props.left}%`, + "width":`${props.left}%`, "min": props.min, "max": props.max, "gap": props.gap, @@ -195,8 +196,7 @@ export function getEchartsConfig( "width": props?.pointerWidth, }, "itemStyle": { - "color": props.echartsOption.data?.map(data => data.color), - "opacity": props.opacity, + "opacity": props?.opacity, "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, @@ -207,27 +207,27 @@ export function getEchartsConfig( "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] }, "progress": { - "roundCap": true, + "roundCap": props.roundCap, "show": props?.progressBar, "width": props?.progressBarWidth }, "axisLine": { - "roundCap": true, + "roundCap": props.roundCap, "lineStyle": { "width": props?.progressBarWidth } }, "axisLabel": { - "distance": props?.progressBarWidth + "10", // Distance of the labels from the axis - "fontFamily": props?.axixLabelStyle?.chartFontFamily || theme?.axixLabelStyle?.fontFamily, - "fontSize": props?.axixLabelStyle?.chartTextSize || theme?.axixLabelStyle?.fontSize || 12, - "fontWeight": props?.axixLabelStyle?.chartTextWeight || theme?.axixLabelStyle?.fontWeight, - "color": props?.axixLabelStyle?.chartTextColor || theme?.axixLabelStyle?.fontColor || "#000000", - "fontStyle": props?.axixLabelStyle?.chartFontStyle || theme?.axixLabelStyle?.fontStyle, - "textShadowColor": props?.axixLabelStyle?.chartShadowColor || theme?.axixLabelStyle?.shadowColor, - "textShadowBlur": props?.axixLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axixLabelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.axixLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axixLabelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.axixLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axixLabelStyle?.boxShadow?.split('px')[2] + "distance": Number(props?.progressBarWidth) + 10, + "fontFamily": props?.axisLabelStyle?.chartFontFamily || theme?.axisLabelStyle?.fontFamily, + "fontSize": props?.axisLabelStyle?.chartTextSize || theme?.axisLabelStyle?.fontSize || 12, + "fontWeight": props?.axisLabelStyle?.chartTextWeight || theme?.axisLabelStyle?.fontWeight, + "color": props?.axisLabelStyle?.chartTextColor || theme?.axisLabelStyle?.fontColor || "#000000", + "fontStyle": props?.axisLabelStyle?.chartFontStyle || theme?.axisLabelStyle?.fontStyle, + "textShadowColor": props?.axisLabelStyle?.chartShadowColor || theme?.axisLabelStyle?.shadowColor, + "textShadowBlur": props?.axisLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axisLabelStyle?.boxShadow?.split('px')[0], + "textShadowOffsetX": props?.axisLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axisLabelStyle?.boxShadow?.split('px')[1], + "textShadowOffsetY": props?.axisLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axisLabelStyle?.boxShadow?.split('px')[2] }, 'detail': { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, @@ -245,7 +245,8 @@ export function getEchartsConfig( "position": props.echartsLabelConfig.top, }, "data": props.echartsOption.data?.map(item => ({ - ...item, + "value": item.value, + "name": item.name, title: { "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 71e84a73c..1d540209c 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -123,6 +123,7 @@ export const en = { progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', progressBar: 'Progress Bar', + roundCap: 'Round Cap', }, echarts: { defaultTitle: "Data Display", From e27f7ca0dec8b3beabc49ce1bdb9a24da9eed0f2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 11:03:37 -0500 Subject: [PATCH 27/42] update-on-action when selecting theme. --- .../src/comps/funnelChartComp/funnelChartComp.tsx | 2 +- .../lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx index b26a67182..339f4e717 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx @@ -147,7 +147,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => { chartSize, themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [chartSize, ...Object.values(echartsConfigChildren), theme]); 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 82d1f5dff..b8237b584 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx @@ -148,7 +148,7 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => { chartSize, themeConfig ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [chartSize, ...Object.values(echartsConfigChildren), theme]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) From 03bc7bdb4bac44cdce5e00487489ff66ccfe5a66 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 16 Dec 2024 15:06:30 -0500 Subject: [PATCH 28/42] Added radical gradient and many fields to Candlestick chart. --- .../candleStickChartComp.tsx | 5 +- .../candleStickChartConstants.tsx | 11 +- .../candleStickChartPropertyView.tsx | 19 ++- .../candleStickChartUtils.ts | 113 ++++++++++-------- .../comps/funnelChartComp/funnelChartUtils.ts | 14 +-- .../comps/gaugeChartComp/gaugeChartUtils.ts | 14 +-- .../src/util/gradientBackgroundColor.tsx | 38 ++++++ .../lowcoder-comps/src/util/opacityToHex.tsx | 3 +- 8 files changed, 139 insertions(+), 78 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index 3f22b5c45..54f2007ed 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -144,9 +144,9 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig, ); - }, [chartSize, ...Object.values(echartsConfigChildren)]); + }, [chartSize, ...Object.values(echartsConfigChildren), theme]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) @@ -174,7 +174,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={mode !== 'map' ? themeConfig : undefined} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 35852214d..4501193df 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -24,6 +26,7 @@ import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxi import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; +import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; @@ -252,6 +255,7 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, // style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), @@ -260,7 +264,10 @@ let chartJsonModeChildren: any = { if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index f0eea1e15..dee14e3e5 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -31,8 +31,11 @@ export function candleStickChartPropertyView( ), })} + {children.echartsTitleConfig.getPropertyView()} + {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })} {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})} + {children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility")})}
{children.onEvent.propertyView()} @@ -40,7 +43,21 @@ export function candleStickChartPropertyView(
{children.style?.getPropertyView()}
-
{hiddenPropertyView(children)}
+
{hiddenPropertyView(children)} +
+ +
//chart's style + {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 8d94c105f..5ce196ae4 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import { useContext } from "react"; +import getBackgroundColor from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -134,64 +135,82 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; + const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; + const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; + const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; + + if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "trigger": "axis", - "axisPointer": { - "type": "cross" - } - }, - "grid": { - "left": "10%", - "right": "10%", - "bottom": "10%", - }, - "xAxis": { - "type": "category", - "data": props.echartsOption.xAxis.data - }, - "yAxis": { - "type": "value", - "scale": true - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "left": "10%", - "top": 60, - "bottom": 60, - "width": "80%", - "min": 0, - "max": 100, - "gap": 2, - "label": { - "show": true, - "position": props.echartsLabelConfig.top + "title": { + "text": props.echartsTitle, + 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', + "left":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] + } + }, + "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), + "color": props.echartsOption.data?.map(data => data.color), + "tooltip": props.tooltip&&{ + "trigger": "axis", + "axisPointer": { + "type": "cross" + } + }, + "grid": { + "left": "10%", + "right": "10%", + "bottom": "10%", }, - "data": props.echartsOption.data, + "xAxis": { + "type": "category", + "data": props.echartsOption.xAxis.data + }, + "yAxis": { + "type": "value", + "scale": true + }, + "series": [ + { + "name": props.echartsConfig.type, + "type": props.echartsConfig.type, + "left": "10%", + "top": 60, + "bottom": 60, + "width": "80%", + "min": 0, + "max": 100, + "gap": 2, + "label": { + "show": true, + "position": props.echartsLabelConfig.top + }, + "data": props.echartsOption.data, + } + ] } - ] -} return props.echartsOption ? opt : {}; - + } - + if(props.mode === "map") { const { mapZoomLevel, mapCenterLat, mapCenterLng, - mapOptions, - showCharts, + mapOptions, + showCharts, } = props; const echartsOption = mapOptions && showCharts ? mapOptions : {}; diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 7500ffb8d..0b468d693 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; +import getBackgroundColor from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -164,18 +165,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] } }, - "backgroundColor": gradientColor && backgroundColor - ? { - "x": direction?.split(' ')[0], - "y": direction?.split(' ')[1], - "x2": direction?.split(' ')[2], - "y2": direction?.split(' ')[3], - "colorStops": [ - { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, - { "offset": 1, "color": gradientColor + opacityToHex(opacity)} - ] - } - : backgroundColor + opacityToHex(opacity), + "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index bde12f550..f36644c00 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; +import getBackgroundColor from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -158,18 +159,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] }, }, - "backgroundColor": gradientColor && backgroundColor - ? { - "x": direction?.split(' ')[0], - "y": direction?.split(' ')[1], - "x2": direction?.split(' ')[2], - "y2": direction?.split(' ')[3], - "colorStops": [ - { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, - { "offset": 1, "color": gradientColor + opacityToHex(opacity)} - ] - } - : backgroundColor + opacityToHex(opacity), + "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), "tooltip": props.tooltip&&{ "trigger": "item", "formatter": "{a}
{b} : {c}%" diff --git a/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx new file mode 100644 index 000000000..206246b3f --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx @@ -0,0 +1,38 @@ +import opacityToHex from "./opacityToHex"; + +const getBackgroundColor = ( + backgroundColor = '', + gradientColor = '', + opacity = '', + direction = '', +) => { + if (direction?.split(' ').length < 4) + return gradientColor && backgroundColor + ? { + "type": 'radical', + "x": direction?.split(' ')[0], + "y": direction?.split(' ')[1], + "r": direction?.split(' ')[2], + "colorStops": [ + { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, + { "offset": 1, "color": gradientColor + opacityToHex(opacity)} + ] + } + : backgroundColor + opacityToHex(opacity) + else + return gradientColor && backgroundColor + ? { + "type": 'linear', + "x": direction?.split(' ')[0], + "y": direction?.split(' ')[1], + "x2": direction?.split(' ')[2], + "y2": direction?.split(' ')[3], + "colorStops": [ + { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, + { "offset": 1, "color": gradientColor + opacityToHex(opacity)} + ] + } + : backgroundColor + opacityToHex(opacity) +} + +export default getBackgroundColor; \ No newline at end of file diff --git a/client/packages/lowcoder-comps/src/util/opacityToHex.tsx b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx index ec6f7774e..ddb71adae 100644 --- a/client/packages/lowcoder-comps/src/util/opacityToHex.tsx +++ b/client/packages/lowcoder-comps/src/util/opacityToHex.tsx @@ -11,4 +11,5 @@ export default function opacityToHex(opacity: any) { // Return 'FF' if an exception occurs return 'FF'; } -} \ No newline at end of file +} + From 6384363c59731d64f5bd713f2db2970610a784d8 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 17 Dec 2024 04:34:55 -0500 Subject: [PATCH 29/42] Added datazoom, grid to candleStick chart. --- .../candleStickChartConstants.tsx | 8 ++++- .../candleStickChartPropertyView.tsx | 22 +++++++++---- .../candleStickChartUtils.ts | 31 +++++++++++++------ .../src/i18n/comps/locales/en.ts | 16 +++++++++- .../src/util/gradientBackgroundColor.tsx | 10 +++--- 5 files changed, 64 insertions(+), 23 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 4501193df..78f761344 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -257,9 +257,15 @@ let chartJsonModeChildren: any = { echartsLabelConfig: EchartsLabelConfig, echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), + right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), + top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), + bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')), + dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), + dataZoomVisibility: withDefault(BoolControl, true), } if (EchartsStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index dee14e3e5..f68ed5977 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -32,10 +32,17 @@ export function candleStickChartPropertyView( ), })} {children.echartsTitleConfig.getPropertyView()} - {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} + {children.left.propertyView({ label: trans("candleStickChart.left") })} + {children.right.propertyView({ label: trans("candleStickChart.right") })} + {children.top.propertyView({ label: trans("candleStickChart.top") })} + {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })} + {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })} + {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })} {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})} - {children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility")})} + {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})} + {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
{children.onEvent.propertyView()} @@ -46,7 +53,7 @@ export function candleStickChartPropertyView(
{hiddenPropertyView(children)}
-
//chart's style +
{children.chartStyle?.getPropertyView()}
@@ -55,9 +62,12 @@ export function candleStickChartPropertyView(
{children.labelStyle?.getPropertyView()}
-
- {children.legendStyle?.getPropertyView()} -
+ { + children.legendVisibility.getView() ? +
+ {children.legendStyle?.getPropertyView()} +
: <> + } ); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 5ce196ae4..371c2db43 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -161,21 +161,32 @@ export function getEchartsConfig( } }, "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ + "color": props?.echartsOption.data?.map(data => data.color), + "tooltip": props?.tooltip&&{ "trigger": "axis", "axisPointer": { "type": "cross" } }, "grid": { - "left": "10%", - "right": "10%", - "bottom": "10%", + "left": `${props?.left}%`, + "right": `${props?.right}%`, + "bottom": `${props?.bottom}%`, + "top": `${props?.top}%`, }, + "dataZoom": [ + { + "show": props?.dataZoomVisibility, + "type": 'slider', + "start": 0, + "end": 100, + "bottom": props?.dataZoomBottom, + 'height': props?.dataZoomHeight + } + ], "xAxis": { "type": "category", - "data": props.echartsOption.xAxis.data + "data": props?.echartsOption.xAxis.data }, "yAxis": { "type": "value", @@ -183,8 +194,8 @@ export function getEchartsConfig( }, "series": [ { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, + "name": props?.echartsConfig.type, + "type": props?.echartsConfig.type, "left": "10%", "top": 60, "bottom": 60, @@ -194,9 +205,9 @@ export function getEchartsConfig( "gap": 2, "label": { "show": true, - "position": props.echartsLabelConfig.top + "position": props?.echartsLabelConfig.top }, - "data": props.echartsOption.data, + "data": props?.echartsOption.data, } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 1d540209c..bb181e66b 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -52,6 +52,20 @@ export const en = { title: 'Title', defaultTitle: 'CandleStick Chart', tooltip: 'Tooltip', + legendVisibility: 'Legend Visibility', + dataZoomVisibility: 'Data Zoom Visibility', + left: 'Left', + defaultLeft:'10', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'20', + bottom: 'Bottom', + defaultBottom:'20', + defaultDataZoomBottom: '20', + dataZoomBottom: 'Data Zoom Bottom', + defaultDataZoomHeight: '15', + dataZoomHeight: 'Data Zoom Height' }, sankeyChart: { sankeyType: 'Sankey Chart Type', @@ -79,7 +93,7 @@ export const en = { defaultMax:'100', gap: 'Gap', defaultGap: '2', - label:'Label', + label:'Label Visibility', opacity: 'Opacity', defaultOpacity: '1', diff --git a/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx index 206246b3f..b5aab38a0 100644 --- a/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx +++ b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx @@ -1,15 +1,15 @@ import opacityToHex from "./opacityToHex"; const getBackgroundColor = ( - backgroundColor = '', - gradientColor = '', - opacity = '', - direction = '', + backgroundColor: any, + gradientColor: any, + opacity: any, + direction: any, ) => { if (direction?.split(' ').length < 4) return gradientColor && backgroundColor ? { - "type": 'radical', + "type": 'radial', "x": direction?.split(' ')[0], "y": direction?.split(' ')[1], "r": direction?.split(' ')[2], From 4098b68ebb1ecb78d9ea5faf3c1e3e9faefbf7df Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 17 Dec 2024 13:39:00 -0500 Subject: [PATCH 30/42] Added an ability that legend of funnel can be on the left or right. --- .../candleStickChartPropertyView.tsx | 2 +- .../chartConfigs/echartsLegendAlignConfig.tsx | 48 +++++++++++++++++++ .../echartsLegendLayoutConfig.tsx | 43 +++++++++++++++++ .../funnelChartComp/funnelChartConstants.tsx | 4 ++ .../funnelChartPropertyView.tsx | 4 +- .../comps/funnelChartComp/funnelChartUtils.ts | 2 + .../src/i18n/comps/locales/en.ts | 4 +- .../lowcoder-design/src/icons/index.tsx | 2 + 8 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index f68ed5977..124ae89f6 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -32,11 +32,11 @@ export function candleStickChartPropertyView( ), })} {children.echartsTitleConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.left.propertyView({ label: trans("candleStickChart.left") })} {children.right.propertyView({ label: trans("candleStickChart.right") })} {children.top.propertyView({ label: trans("candleStickChart.top") })} {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })} - {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })} {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })} {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })} diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx new file mode 100644 index 000000000..20a78cedc --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx @@ -0,0 +1,48 @@ +import { + AlignClose, + AlignRight, + AlignLeft, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import {FunnelSeriesOption, LegendComponentOption} from "echarts"; +import { trans } from "i18n/comps"; + +const FunnelLegnedAlignOptions = [ + { + label: , + value: "center", + }, + { + label: , + value: "right", + }, + { + label: , + value: "left", + }, +] as const; + +export const EchartsLegendAlignConfig = (function () { + return new MultiCompBuilder( + { + legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"), + }, + (props): FunnelSeriesOption => { + const config: FunnelSeriesOption = { + left: "center", + }; + config.left = props.legendAlign + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.legendAlign.propertyView({ + label: trans("echarts.legendAlign"), + radioButton: true, + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx new file mode 100644 index 000000000..84f81d8d2 --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx @@ -0,0 +1,43 @@ +import { + HorizontoalIcon, + VerticalIcon, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import { LegendComponentOption } from "echarts"; +import { trans } from "i18n/comps"; + +const LegendLayoutOptions = [ + { + label: , + value: "horizontal", + }, + { + label: , + value: "vertical", + }, +] as const; + +export const EchartsLegendLayoutConfig = (function () { + return new MultiCompBuilder( + { + legendLayout: dropdownControl(LegendLayoutOptions, "bottom"), + }, + (props): LegendComponentOption => { + const config: LegendComponentOption = { + orient: "horizontal", + }; + config.orient = props.legendLayout + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.legendLayout.propertyView({ + label: trans("echarts.legendLayout"), + radioButton: true, + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 4fe1db61c..ced9a43b5 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -36,6 +36,8 @@ import { i18nObjs, trans } from "i18n/comps"; import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig"; +import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig"; +import { EchartsLegendLayoutConfig } from "../chartComp/chartConfigs/echartsLegendLayoutConfig"; export const ChartTypeOptions = [ { @@ -259,6 +261,8 @@ let chartJsonModeChildren: any = { echartsSortingConfig: EchartsSortingConfig, echartsLabelConfig: EchartsLabelConfig, echartsFunnelAlignConfig: EchartsFunnelAlignConfig, + echartsLegendLayoutConfig: EchartsLegendLayoutConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, // style: styleControl(EchartsStyle, 'style'), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 5de94d5e5..0e482cd1e 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -34,7 +34,9 @@ export function funnelChartPropertyView( {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} - {children.echartsFunnelAlignConfig.getPropertyView()} + {children.echartsLegendLayoutConfig.getPropertyView()} + {children.echartsLegendAlignConfig.getPropertyView()} + {children.echartsConfig.getPropertyView()} {children.echartsTitleConfig.getPropertyView()} {children.left.propertyView({ label: trans("funnelChart.left") })} {children.top.propertyView({ label: trans("funnelChart.top") })} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 0b468d693..7d3f34b71 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -174,6 +174,8 @@ export function getEchartsConfig( "legend":props.legendVisibility&& { "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, + "left": props.echartsLegendAlignConfig.left, + "orient": props.echartsLegendAlignConfig.orient, "textStyle": { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index bb181e66b..c401336b8 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -145,7 +145,9 @@ export const en = { labelPosition: "Label Position", titlePosition: "Title Position", funnelAlign: "Funnel Align", - sort: "Sort" + sort: "Sort", + legendLayout: "Chart Legend Layout", + legendAlign: "Chart Legend Align" }, chart: { delete: "Delete", diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/client/packages/lowcoder-design/src/icons/index.tsx index a538cb9bb..d08e290d8 100644 --- a/client/packages/lowcoder-design/src/icons/index.tsx +++ b/client/packages/lowcoder-design/src/icons/index.tsx @@ -250,6 +250,8 @@ export { ReactComponent as MarketplaceIcon } from "./v1/icon-application-marketp export { ReactComponent as FavoritesIcon } from "./v1/icon-application-favorites.svg"; export { ReactComponent as HomeSettingIcon } from "./remix/settings-4-line.svg"; export { ReactComponent as EnterpriseIcon } from "./remix/earth-line.svg"; +export { ReactComponent as VerticalIcon } from "./remix/vertical.svg"; +export { ReactComponent as HorizontalIcon } from "./remix/horizontal.svg"; // components From 584908131eb67ccf5929e5fc9a6628d94d5abfe9 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 17 Dec 2024 13:40:56 -0500 Subject: [PATCH 31/42] Added horizontal, vertical icons --- .../lowcoder-design/src/icons/remix/horizontal.svg | 14 ++++++++++++++ .../lowcoder-design/src/icons/remix/vertical.svg | 14 ++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 client/packages/lowcoder-design/src/icons/remix/horizontal.svg create mode 100644 client/packages/lowcoder-design/src/icons/remix/vertical.svg diff --git a/client/packages/lowcoder-design/src/icons/remix/horizontal.svg b/client/packages/lowcoder-design/src/icons/remix/horizontal.svg new file mode 100644 index 000000000..762219159 --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/remix/horizontal.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/icons/remix/vertical.svg b/client/packages/lowcoder-design/src/icons/remix/vertical.svg new file mode 100644 index 000000000..07d4f5f7b --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/remix/vertical.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file From 4ae442740628a726bb748f9a99c3d2e664aa1297 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 17 Dec 2024 14:54:20 -0500 Subject: [PATCH 32/42] Fixed legend option of funnel charts --- .../chartComp/chartConfigs/echartsLegendAlignConfig.tsx | 9 +++++---- .../chartComp/chartConfigs/echartsLegendLayoutConfig.tsx | 3 ++- .../comps/funnelChartComp/funnelChartPropertyView.tsx | 6 +++--- .../src/comps/funnelChartComp/funnelChartUtils.ts | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx index 20a78cedc..a9b512c6e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx @@ -5,7 +5,7 @@ import { dropdownControl, MultiCompBuilder, } from "lowcoder-sdk"; -import {FunnelSeriesOption, LegendComponentOption} from "echarts"; +import { LegendComponentOption } from "echarts"; import { trans } from "i18n/comps"; const FunnelLegnedAlignOptions = [ @@ -28,9 +28,10 @@ export const EchartsLegendAlignConfig = (function () { { legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"), }, - (props): FunnelSeriesOption => { - const config: FunnelSeriesOption = { - left: "center", + (props): LegendComponentOption => { + const config: LegendComponentOption = { + left: "right", + type: "scroll", }; config.left = props.legendAlign return config; diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx index 84f81d8d2..94493fea9 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx @@ -25,7 +25,8 @@ export const EchartsLegendLayoutConfig = (function () { }, (props): LegendComponentOption => { const config: LegendComponentOption = { - orient: "horizontal", + orient: "vertical", + type: "scroll" }; config.orient = props.legendLayout return config; diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 0e482cd1e..1e933c8ad 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -34,9 +34,9 @@ export function funnelChartPropertyView( {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} - {children.echartsLegendLayoutConfig.getPropertyView()} - {children.echartsLegendAlignConfig.getPropertyView()} - {children.echartsConfig.getPropertyView()} + {children.echartsFunnelAlignConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendLayoutConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} {children.echartsTitleConfig.getPropertyView()} {children.left.propertyView({ label: trans("funnelChart.left") })} {children.top.propertyView({ label: trans("funnelChart.top") })} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 7d3f34b71..dc6365e05 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -175,7 +175,7 @@ export function getEchartsConfig( "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "left": props.echartsLegendAlignConfig.left, - "orient": props.echartsLegendAlignConfig.orient, + "orient": props.echartsLegendLayoutConfig.orient, "textStyle": { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, From cd45364eae0ea80dffb03687eef6f7ac4093d83d Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 17 Dec 2024 18:44:02 -0500 Subject: [PATCH 33/42] Fixed icon colors and changed order. --- .../chartConfigs/echartsLegendAlignConfig.tsx | 8 ++-- ...nfig.tsx => echartsLegendOrientConfig.tsx} | 14 +++--- .../echartsTitleVerticalConfig.tsx | 44 +++++++++++++++++++ .../funnelChartComp/funnelChartConstants.tsx | 6 ++- .../funnelChartPropertyView.tsx | 9 ++-- .../src/i18n/comps/locales/en.ts | 11 ++--- .../src/icons/remix/horizontal.svg | 4 +- .../src/icons/remix/vertical.svg | 2 +- 8 files changed, 73 insertions(+), 25 deletions(-) rename client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/{echartsLegendLayoutConfig.tsx => echartsLegendOrientConfig.tsx} (67%) create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx index a9b512c6e..193f35198 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx @@ -26,20 +26,20 @@ const FunnelLegnedAlignOptions = [ export const EchartsLegendAlignConfig = (function () { return new MultiCompBuilder( { - legendAlign: dropdownControl(FunnelLegnedAlignOptions, "center"), + left: dropdownControl(FunnelLegnedAlignOptions, "center"), }, (props): LegendComponentOption => { const config: LegendComponentOption = { - left: "right", + left: "center", type: "scroll", }; - config.left = props.legendAlign + config.left = props.left return config; } ) .setPropertyViewFn((children) => ( <> - {children.legendAlign.propertyView({ + {children.left.propertyView({ label: trans("echarts.legendAlign"), radioButton: true, })} diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx similarity index 67% rename from client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx rename to client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx index 94493fea9..97f457cf6 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendLayoutConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx @@ -7,7 +7,7 @@ import { import { LegendComponentOption } from "echarts"; import { trans } from "i18n/comps"; -const LegendLayoutOptions = [ +const LegendOrientOptions = [ { label: , value: "horizontal", @@ -18,24 +18,24 @@ const LegendLayoutOptions = [ }, ] as const; -export const EchartsLegendLayoutConfig = (function () { +export const EchartsLegendOrientConfig = (function () { return new MultiCompBuilder( { - legendLayout: dropdownControl(LegendLayoutOptions, "bottom"), + orient: dropdownControl(LegendOrientOptions, "horizontal"), }, (props): LegendComponentOption => { const config: LegendComponentOption = { - orient: "vertical", + orient: "horizontal", type: "scroll" }; - config.orient = props.legendLayout + config.orient = props.orient return config; } ) .setPropertyViewFn((children) => ( <> - {children.legendLayout.propertyView({ - label: trans("echarts.legendLayout"), + {children.orient.propertyView({ + label: trans("echarts.legendOrient"), radioButton: true, })} diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx new file mode 100644 index 000000000..c3b32c97b --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx @@ -0,0 +1,44 @@ +import { + AlignBottom, + AlignTop, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import { LegendComponentOption } from "echarts"; +import { trans } from "i18n/comps"; + +const LegendPositionOptions = [ + { + label: , + value: "bottom", + }, + { + label: , + value: "top", + }, +] as const; + +export const EchartsTitleVerticalConfig = (function () { + return new MultiCompBuilder( + { + position: dropdownControl(LegendPositionOptions, "top"), + }, + (props): LegendComponentOption => { + const config: LegendComponentOption = { + top: "top", + type: "scroll", + }; + config.top = props.position + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.position.propertyView({ + label: trans("echarts.titlePositionVertical"), + radioButton: true, + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index ced9a43b5..9b1b04a82 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -37,7 +37,8 @@ import { FunnelChartConfig} from "../chartComp/chartConfigs/funnelChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig"; import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig"; -import { EchartsLegendLayoutConfig } from "../chartComp/chartConfigs/echartsLegendLayoutConfig"; +import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig"; +import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; export const ChartTypeOptions = [ { @@ -261,10 +262,11 @@ let chartJsonModeChildren: any = { echartsSortingConfig: EchartsSortingConfig, echartsLabelConfig: EchartsLabelConfig, echartsFunnelAlignConfig: EchartsFunnelAlignConfig, - echartsLegendLayoutConfig: EchartsLegendLayoutConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, echartsLegendAlignConfig: EchartsLegendAlignConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, // style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), label: withDefault(BoolControl, true), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 1e933c8ad..e05dd97b0 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -31,13 +31,14 @@ export function funnelChartPropertyView( ), })} - {children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.echartsTitleConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} {children.echartsFunnelAlignConfig.getPropertyView()} - {children.legendVisibility.getView() && children.echartsLegendLayoutConfig.getPropertyView()} - {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} - {children.echartsTitleConfig.getPropertyView()} {children.left.propertyView({ label: trans("funnelChart.left") })} {children.top.propertyView({ label: trans("funnelChart.top") })} {children.bottom.propertyView({ label: trans("funnelChart.bottom") })} diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index c401336b8..0ef061ffd 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -141,13 +141,14 @@ export const en = { }, echarts: { defaultTitle: "Data Display", - legendPosition: "Legend Position", - labelPosition: "Label Position", - titlePosition: "Title Position", + legendPosition: "Legend-X", + legendOrient: "Legend Orient", + legendAlign: "Legend-Y", + labelPosition: "Label-X", + titlePosition: "Title-X", + titlePositionVertical: "Title-Y", funnelAlign: "Funnel Align", sort: "Sort", - legendLayout: "Chart Legend Layout", - legendAlign: "Chart Legend Align" }, chart: { delete: "Delete", diff --git a/client/packages/lowcoder-design/src/icons/remix/horizontal.svg b/client/packages/lowcoder-design/src/icons/remix/horizontal.svg index 762219159..a534c5534 100644 --- a/client/packages/lowcoder-design/src/icons/remix/horizontal.svg +++ b/client/packages/lowcoder-design/src/icons/remix/horizontal.svg @@ -1,9 +1,9 @@ - - - { const config: LegendComponentOption = { top: "top", type: "scroll", }; - config.top = props.position + config.top = props.top return config; } ) .setPropertyViewFn((children) => ( <> - {children.position.propertyView({ + {children.top.propertyView({ label: trans("echarts.titlePositionVertical"), radioButton: true, })} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index dc6365e05..fc76f323c 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -151,7 +151,7 @@ export function getEchartsConfig( let opt={ "title": { "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', + 'top': props.echartsTitleVerticalConfig.top, "left":props.echartsTitleConfig.top, "textStyle": { "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, From 76bd5ff3211c273ed021f1da990495002c6f442a Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 18 Dec 2024 10:15:08 -0500 Subject: [PATCH 35/42] Changed Align order on Funnel chart --- .../chartConfigs/echartsFunnelAlignConfig.tsx | 10 ++--- .../chartConfigs/echartsLabelConfig.tsx | 10 ++--- .../chartConfigs/echartsLegendAlignConfig.tsx | 10 ++--- .../echartsLegendOrientConfig.tsx | 4 +- .../chartConfigs/echartsTitleConfig.tsx | 10 ++--- .../echartsTitleVerticalConfig.tsx | 44 ------------------- .../funnelChartComp/funnelChartConstants.tsx | 2 - .../funnelChartPropertyView.tsx | 1 - .../comps/funnelChartComp/funnelChartUtils.ts | 11 +---- 9 files changed, 24 insertions(+), 78 deletions(-) delete mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx index c10d38907..786099d0e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx @@ -9,6 +9,10 @@ import {FunnelSeriesOption, LegendComponentOption} from "echarts"; import { trans } from "i18n/comps"; const FunnelAlignOptions = [ + { + label: , + value: "left", + }, { label: , value: "center", @@ -16,11 +20,7 @@ const FunnelAlignOptions = [ { label: , value: "right", - }, - { - label: , - value: "left", - }, + } ] as const; export const EchartsFunnelAlignConfig = (function () { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx index 64b808e01..039280209 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx @@ -9,6 +9,10 @@ import { LegendComponentOption } from "echarts"; import { trans } from "i18n/comps"; const LabelPositionOptions = [ + { + label: , + value: "left", + }, { label: , value: "inside", @@ -16,11 +20,7 @@ const LabelPositionOptions = [ { label: , value: "right", - }, - { - label: , - value: "left", - }, + } ] as const; export const EchartsLabelConfig = (function () { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx index 193f35198..812d82a3d 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx @@ -9,6 +9,10 @@ import { LegendComponentOption } from "echarts"; import { trans } from "i18n/comps"; const FunnelLegnedAlignOptions = [ + { + label: , + value: "left", + }, { label: , value: "center", @@ -16,11 +20,7 @@ const FunnelLegnedAlignOptions = [ { label: , value: "right", - }, - { - label: , - value: "left", - }, + } ] as const; export const EchartsLegendAlignConfig = (function () { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx index 97f457cf6..5f60632b2 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx @@ -1,5 +1,5 @@ import { - HorizontoalIcon, + HorizontalIcon, VerticalIcon, dropdownControl, MultiCompBuilder, @@ -9,7 +9,7 @@ import { trans } from "i18n/comps"; const LegendOrientOptions = [ { - label: , + label: , value: "horizontal", }, { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx index a9305de25..280fad6ae 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx @@ -9,6 +9,10 @@ import { LegendComponentOption } from "echarts"; import { trans } from "i18n/comps"; const TitlePositionOptions = [ + { + label: , + value: "left", + }, { label: , value: "center", @@ -16,11 +20,7 @@ const TitlePositionOptions = [ { label: , value: "right", - }, - { - label: , - value: "left", - }, + } ] as const; export const EchartsTitleConfig = (function () { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx deleted file mode 100644 index b14841180..000000000 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { - AlignBottom, - AlignTop, - dropdownControl, - MultiCompBuilder, -} from "lowcoder-sdk"; -import { LegendComponentOption } from "echarts"; -import { trans } from "i18n/comps"; - -const LegendPositionOptions = [ - { - label: , - value: "bottom", - }, - { - label: , - value: "top", - }, -] as const; - -export const EchartsTitleVerticalConfig = (function () { - return new MultiCompBuilder( - { - top: dropdownControl(LegendPositionOptions, "top"), - }, - (props): LegendComponentOption => { - const config: LegendComponentOption = { - top: "top", - type: "scroll", - }; - config.top = props.top - return config; - } - ) - .setPropertyViewFn((children) => ( - <> - {children.top.propertyView({ - label: trans("echarts.titlePositionVertical"), - radioButton: true, - })} - - )) - .build(); -})(); diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index 9b1b04a82..d6a140865 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -38,7 +38,6 @@ import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleCon import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig"; import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig"; import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig"; -import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; export const ChartTypeOptions = [ { @@ -266,7 +265,6 @@ let chartJsonModeChildren: any = { echartsLegendAlignConfig: EchartsLegendAlignConfig, echartsConfig: EchartsOptionComp, echartsTitleConfig:EchartsTitleConfig, - echartsTitleVerticalConfig: EchartsTitleVerticalConfig, // style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), label: withDefault(BoolControl, true), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index e05dd97b0..92b110c2d 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -31,7 +31,6 @@ export function funnelChartPropertyView( ), })} - {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsTitleConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index fc76f323c..6f800df8c 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -135,23 +135,16 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - - console.log("props", props); - console.log("theme", theme); - const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; - console.log("props", props); - console.log("theme", theme); - if (props.mode === "json") { let opt={ "title": { "text": props.echartsTitle, - 'top': props.echartsTitleVerticalConfig.top, + 'top': "top", "left":props.echartsTitleConfig.top, "textStyle": { "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, @@ -175,7 +168,7 @@ export function getEchartsConfig( "data": props.echartsOption.data?.map(data=>data.name), "top": props.echartsLegendConfig.top, "left": props.echartsLegendAlignConfig.left, - "orient": props.echartsLegendLayoutConfig.orient, + "orient": props.echartsLegendOrientConfig.orient, "textStyle": { "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize, From 03f51ac757c593a2f9736f7b84aed56da8195296 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 18 Dec 2024 11:04:36 -0500 Subject: [PATCH 36/42] Added descriptions to properties of funnel chart. --- .../chartConfigs/echartsFunnelAlignConfig.tsx | 1 + .../chartConfigs/echartsLabelConfig.tsx | 1 + .../chartConfigs/echartsLegendAlignConfig.tsx | 1 + .../chartConfigs/echartsLegendConfig.tsx | 1 + .../chartConfigs/echartsLegendOrientConfig.tsx | 1 + .../chartConfigs/echartsSortingConfig.tsx | 1 + .../chartConfigs/echartsTitleConfig.tsx | 1 + .../funnelChartComp/funnelChartPropertyView.tsx | 8 ++++---- .../lowcoder-comps/src/i18n/comps/locales/en.ts | 17 ++++++++++++++--- 9 files changed, 25 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx index 786099d0e..812666b17 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsFunnelAlignConfig.tsx @@ -41,6 +41,7 @@ export const EchartsFunnelAlignConfig = (function () { {children.funnelAlign.propertyView({ label: trans("echarts.funnelAlign"), radioButton: true, + tooltip: trans("echarts.changingAlignTooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx index 039280209..d522dcec2 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx @@ -42,6 +42,7 @@ export const EchartsLabelConfig = (function () { {children.position.propertyView({ label: trans("echarts.labelPosition"), radioButton: true, + tooltip: trans("echarts.changingLabelTooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx index 812d82a3d..e29611463 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendAlignConfig.tsx @@ -42,6 +42,7 @@ export const EchartsLegendAlignConfig = (function () { {children.left.propertyView({ label: trans("echarts.legendAlign"), radioButton: true, + tooltip: trans("echarts.changingLegend_y_Tooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx index 41fb166fb..21dea46f3 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx @@ -37,6 +37,7 @@ export const EchartsLegendConfig = (function () { {children.position.propertyView({ label: trans("echarts.legendPosition"), radioButton: true, + tooltip: trans("echarts.changingLegend_x_Tooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx index 5f60632b2..82ebb79ec 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendOrientConfig.tsx @@ -37,6 +37,7 @@ export const EchartsLegendOrientConfig = (function () { {children.orient.propertyView({ label: trans("echarts.legendOrient"), radioButton: true, + tooltip: trans("echarts.changingLegend_orient_Tooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx index 8f53e7d8a..0d0e28482 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsSortingConfig.tsx @@ -36,6 +36,7 @@ export const EchartsSortingConfig = (function () { {children.sort.propertyView({ label: trans("echarts.sort"), radioButton: true, + tooltip: trans("echarts.changingSortTooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx index 280fad6ae..05b1871fe 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleConfig.tsx @@ -42,6 +42,7 @@ export const EchartsTitleConfig = (function () { {children.position.propertyView({ label: trans("echarts.titlePosition"), radioButton: true, + tooltip: trans("echarts.changingTitle_x_Tooltip") })} )) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 92b110c2d..1551e909e 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -33,8 +33,8 @@ export function funnelChartPropertyView( })} {children.echartsTitleConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} - {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} {children.echartsFunnelAlignConfig.getPropertyView()} @@ -47,9 +47,9 @@ export function funnelChartPropertyView( {children.gap.propertyView({ label: trans("funnelChart.gap") })} {children.opacity.propertyView({ label: trans("funnelChart.opacity") })} {children.echartsTitle.propertyView({ label: trans("funnelChart.title") })} - {children.tooltip.propertyView({label: trans("funnelChart.tooltip")})} - {children.label.propertyView({label: trans("funnelChart.label")})} - {children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility")})} + {children.tooltip.propertyView({label: trans("funnelChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip")})} + {children.label.propertyView({label: trans("funnelChart.label"), tooltip: trans("echarts.labelVisibilityTooltip")})} + {children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 0ef061ffd..b36f8eaa0 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -141,14 +141,25 @@ export const en = { }, echarts: { defaultTitle: "Data Display", - legendPosition: "Legend-X", + legendPosition: "Legend-Y", legendOrient: "Legend Orient", - legendAlign: "Legend-Y", - labelPosition: "Label-X", + legendAlign: "Legend-X", + labelPosition: "Label Position", titlePosition: "Title-X", titlePositionVertical: "Title-Y", funnelAlign: "Funnel Align", sort: "Sort", + changingTitle_x_Tooltip: "Change the Horizontal position of the Title.", + changingLegend_x_Tooltip: "Change the Horizontal position of the Legend.", + changingLegend_y_Tooltip: "Change the Vertical position of the Legend.", + changingLegend_orient_Tooltip: "Change the Orientation of the Legend.", + changingSortTooltip: "Change the Sorting direction.", + changingLabelTooltip: "Change the Position of the Label.", + changingAlignTooltip: "Change the Alignment of the Chart.", + tooltipVisibilityTooltip: "Show or hide the ToolTips of the chart.", + labelVisibilityTooltip: "Show or hide the Labels of the chart.", + legendVisibilityTooltip: "Show or hide the Legend of the chart.", + }, chart: { delete: "Delete", From e5fbd9258b9cd06d602163a5bfebba0ccf295ee2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 18 Dec 2024 14:38:54 -0500 Subject: [PATCH 37/42] Added descriptions to properties of gauge chart. --- .../funnelChartPropertyView.tsx | 18 +++++------ .../gaugeChartComp/gaugeChartPropertyView.tsx | 30 ++++++++--------- .../src/i18n/comps/locales/en.ts | 32 +++++++++++++++---- 3 files changed, 50 insertions(+), 30 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 1551e909e..346a48260 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -38,15 +38,15 @@ export function funnelChartPropertyView( {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} {children.echartsFunnelAlignConfig.getPropertyView()} - {children.left.propertyView({ label: trans("funnelChart.left") })} - {children.top.propertyView({ label: trans("funnelChart.top") })} - {children.bottom.propertyView({ label: trans("funnelChart.bottom") })} - {children.width.propertyView({ label: trans("funnelChart.width") })} - {children.min.propertyView({ label: trans("funnelChart.min") })} - {children.max.propertyView({ label: trans("funnelChart.max") })} - {children.gap.propertyView({ label: trans("funnelChart.gap") })} - {children.opacity.propertyView({ label: trans("funnelChart.opacity") })} - {children.echartsTitle.propertyView({ label: trans("funnelChart.title") })} + {children.echartsTitle.propertyView({ label: trans("funnelChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.left.propertyView({ label: trans("funnelChart.left"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.top.propertyView({ label: trans("funnelChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("funnelChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.width.propertyView({ label: trans("funnelChart.width"), tooltip: trans("echarts.widthTooltip") })} + {children.min.propertyView({ label: trans("funnelChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("funnelChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.gap.propertyView({ label: trans("funnelChart.gap"), tooltip: trans("echarts.gapTooltip") })} + {children.opacity.propertyView({ label: trans("funnelChart.opacity"), tooltip: trans("echarts.opacityTooltip") })} {children.tooltip.propertyView({label: trans("funnelChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip")})} {children.label.propertyView({label: trans("funnelChart.label"), tooltip: trans("echarts.labelVisibilityTooltip")})} {children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 0cb5ca5ab..707206ed4 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -32,26 +32,26 @@ export function gaugeChartPropertyView( ), })} {children.echartsTitleConfig.getPropertyView()} - {children.echartsTitle.propertyView({ label: trans("gaugeChart.title") })} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} {children.top.propertyView({ label: trans("gaugeChart.top") })} {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} {children.width.propertyView({ label: trans("gaugeChart.width") })} */} - {children.radius.propertyView({ label: trans("gaugeChart.radius") })} - {children.min.propertyView({ label: trans("gaugeChart.min") })} - {children.max.propertyView({ label: trans("gaugeChart.max") })} - {children.position_x.propertyView({ label: trans("gaugeChart.position_x") })} - {children.position_y.propertyView({ label: trans("gaugeChart.position_y") })} - {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })} - {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth") })} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("echarts.progressBarWidthToolTip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} - {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap") })} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index b36f8eaa0..b92a0bef0 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -79,7 +79,7 @@ export const en = { funnelType:'Funnel Chart Type', tooltip: 'Tooltip', legendVisibility: 'Legend Visibility', - left: 'Left', + left: 'Position-X', defaultLeft:'35', top: 'Top', defaultTop:'60', @@ -137,7 +137,6 @@ export const en = { progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', progressBar: 'Progress Bar', - roundCap: 'Round Cap', }, echarts: { defaultTitle: "Data Display", @@ -156,10 +155,31 @@ export const en = { changingSortTooltip: "Change the Sorting direction.", changingLabelTooltip: "Change the Position of the Label.", changingAlignTooltip: "Change the Alignment of the Chart.", - tooltipVisibilityTooltip: "Show or hide the ToolTips of the chart.", - labelVisibilityTooltip: "Show or hide the Labels of the chart.", - legendVisibilityTooltip: "Show or hide the Legend of the chart.", - + positionChart_x_Tooltip: "Change the Horizontal position of the Chart.", + positionChart_y_Tooltip: "Change the Vertical position of the Chart.", + topTooltip: "Change the top length of the Chart.", + bottomTooltip: "Change the bottom length of the Chart.", + widthTooltip: "Change the width of the Chart.", + radiusTooltip: "Set the Radius value of the Chart.", + minTooltip: "Set the minimum value of the Chart.", + maxTooltip: "Set the maximum value of the Chart.", + gapTooltip: "Set the gap value between the Components.", + opacityTooltip: "Set the opacity of the Chart.", + titleTooltip: "Set the title of the Chart.", + roundCap: 'Round Cap', + roundCapTooltip: "Change the shape of the start, current, and end edges of the progress bar to round or straight.", + progressBarVisibilityToolip: "Show or hide the current status on the progress bar.", + endAngleTooltip: "Set the End angle value of the Chart.", + startAngleTooltip: "Set the Start angle value of the Chart.", + splitNumberTooltip: "Set the Split number of the Chart.", + pointerLengthTooltip: "Set the Pointer length of the Chart.", + pointerWidthTooltip: "Set the Pointer Width of the Chart.", + progressBarWidthToolTip: "Set the Progress Bar Width of the Chart.", + tooltipVisibilityTooltip: "Show or hide the ToolTips of the Chart.", + labelVisibilityTooltip: "Show or hide the Labels of the Chart.", + legendVisibilityTooltip: "Show or hide the Legend of the Chart.", + progressBarVisibilityTooltip: "Show or hide the Progress Bar of the Chart.", + roundCapVisibilityTooltip: "Show or hide the Round Cap of the Chart.", }, chart: { delete: "Delete", From 84b42857b956da46c849603de9b56c7d64a7e616 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 18 Dec 2024 15:13:08 -0500 Subject: [PATCH 38/42] Applied gradient colors to a chart using just one color picker --- .../candleStickChartUtils.ts | 9 +- .../comps/funnelChartComp/funnelChartUtils.ts | 8 +- .../comps/gaugeChartComp/gaugeChartUtils.ts | 9 +- .../src/util/gradientBackgroundColor.tsx | 134 +++++++++++++----- .../comps/controls/styleControlConstants.tsx | 9 +- 5 files changed, 109 insertions(+), 60 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 371c2db43..9600e17a2 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import { useContext } from "react"; -import getBackgroundColor from "../../util/gradientBackgroundColor"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -136,11 +136,6 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { - const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; - const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; - const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; - const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; - if (props.mode === "json") { let opt={ @@ -160,7 +155,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] } }, - "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), "color": props?.echartsOption.data?.map(data => data.color), "tooltip": props?.tooltip&&{ "trigger": "axis", diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 6f800df8c..8c25565e7 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; -import getBackgroundColor from "../../util/gradientBackgroundColor"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -135,10 +135,6 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; - const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; - const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; - const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; if (props.mode === "json") { let opt={ @@ -158,7 +154,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] } }, - "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index f36644c00..9a68de018 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; -import getBackgroundColor from "../../util/gradientBackgroundColor"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -136,11 +136,6 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { - const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF"; - const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor; - const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity; - const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction; - if (props.mode === "json") { let opt={ "title": { @@ -159,7 +154,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] }, }, - "backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction), + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ "trigger": "item", "formatter": "{a}
{b} : {c}%" diff --git a/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx index b5aab38a0..0ebead21a 100644 --- a/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx +++ b/client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx @@ -1,38 +1,100 @@ -import opacityToHex from "./opacityToHex"; - -const getBackgroundColor = ( - backgroundColor: any, - gradientColor: any, - opacity: any, - direction: any, -) => { - if (direction?.split(' ').length < 4) - return gradientColor && backgroundColor - ? { - "type": 'radial', - "x": direction?.split(' ')[0], - "y": direction?.split(' ')[1], - "r": direction?.split(' ')[2], - "colorStops": [ - { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, - { "offset": 1, "color": gradientColor + opacityToHex(opacity)} - ] - } - : backgroundColor + opacityToHex(opacity) - else - return gradientColor && backgroundColor - ? { - "type": 'linear', - "x": direction?.split(' ')[0], - "y": direction?.split(' ')[1], - "x2": direction?.split(' ')[2], - "y2": direction?.split(' ')[3], - "colorStops": [ - { "offset": 0, "color": backgroundColor + opacityToHex(opacity)}, - { "offset": 1, "color": gradientColor + opacityToHex(opacity)} - ] - } - : backgroundColor + opacityToHex(opacity) +/** + * Converts a CSS gradient string (linear-gradient or radial-gradient) or solid color + * into an ECharts-compatible background configuration. + * + * @param {string} background - A solid color or CSS gradient string + * @returns {string|object} A string or object that can be used in ECharts' `backgroundColor` + */ +export default function parseBackground(background: any) { + if (background.startsWith("linear-gradient")) { + // Parse linear-gradient + return parseLinearGradient(background); + } else if (background.startsWith("radial-gradient")) { + // Parse radial-gradient + return parseRadialGradient(background); + } else { + // Assume it's a solid color + return background; + } } -export default getBackgroundColor; \ No newline at end of file +/** + * Parses a linear-gradient CSS string into an ECharts-compatible object. + * + * @param {string} gradient - The linear-gradient CSS string + * @returns {object} An ECharts-compatible linear gradient object + */ +function parseLinearGradient(gradient: any) { + const linearGradientRegex = /linear-gradient\((\d+deg),\s*(.+)\)/; + const match = gradient.match(linearGradientRegex); + + if (!match) { + throw new Error("Invalid linear-gradient format"); + } + + const angle = parseFloat(match[1]); // Extract the angle in degrees + const colorStops = parseColorStops(match[2]); // Extract the color stops + + // Convert angle to x2 and y2 using trigonometry + const x2 = Math.sin((angle * Math.PI) / 180); + const y = Math.cos((angle * Math.PI) / 180); + + return { + type: "linear", + x: 0, + y2: 0, + x2, + y, + colorStops, + }; +} + +/** + * Parses a radial-gradient CSS string into an ECharts-compatible object. + * + * @param {string} gradient - The radial-gradient CSS string + * @returns {object} An ECharts-compatible radial gradient object + */ +function parseRadialGradient(gradient: any) { + const radialGradientRegex = /radial-gradient\(([^,]+),\s*(.+)\)/; + const match = gradient.match(radialGradientRegex); + + if (!match) { + throw new Error("Invalid radial-gradient format"); + } + + const shape = match[1].trim(); // Extract the shape (e.g., "circle") + const colorStops = parseColorStops(match[2]); // Extract the color stops + + // ECharts radial gradient assumes a circular gradient centered at (0.5, 0.5) + return { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, // Default radius + colorStops, + }; +} + +/** + * Parses color stops from a gradient string into an array of objects. + * + * @param {string} colorStopsString - The color stops part of the gradient string + * @returns {Array} An array of color stop objects { offset, color } + */ +function parseColorStops(colorStopsString: any) { + const colorStopRegex = + /((?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+)\s+([\d.]+%)/g; + const colorStops = []; + let match; + + while ( + (match = colorStopRegex.exec(colorStopsString.toLowerCase())) !== null + ) { + const color = match[1].trim().toLowerCase(); // Convert color to lowercase + const offset = parseFloat(match[2]) / 100; // Convert percentage to 0-1 + colorStops.push({ offset, color }); + } + + return colorStops; +} diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 884ab36a7..6de547836 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1975,10 +1975,11 @@ export const EchartDefaultTextStyle = [ ] as const; export const EchartDefaultChartStyle = [ - CHARTBACKGROUNDCOLOR, - CHARTGRADIENTCOLOR, - DIRECTION, - CHARTOPACITY, + getBackground("primarySurface"), + // CHARTBACKGROUNDCOLOR, + // CHARTGRADIENTCOLOR, + // DIRECTION, + // CHARTOPACITY, CHARTSHADOWCOLOR, CHARTBOXSHADOW, CHARTBORDERCOLOR, From b3ff98f3de91baf2b1597a5a1674d48d34a03cf1 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 19 Dec 2024 10:44:49 -0500 Subject: [PATCH 39/42] Fixed trans in gauge chart. --- .../src/comps/gaugeChartComp/gaugeChartPropertyView.tsx | 2 +- client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 707206ed4..cb25183bd 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -47,7 +47,7 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("echarts.progressBarWidthToolTip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index b92a0bef0..22e1d3780 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -137,6 +137,7 @@ export const en = { progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', progressBar: 'Progress Bar', + roundCap: "Round Cap" }, echarts: { defaultTitle: "Data Display", @@ -167,6 +168,7 @@ export const en = { opacityTooltip: "Set the opacity of the Chart.", titleTooltip: "Set the title of the Chart.", roundCap: 'Round Cap', + pointerWidth: "Pointer Width", roundCapTooltip: "Change the shape of the start, current, and end edges of the progress bar to round or straight.", progressBarVisibilityToolip: "Show or hide the current status on the progress bar.", endAngleTooltip: "Set the End angle value of the Chart.", From 98a8e3df93c79678d8d5b888a7b2d31e5c5ca3b8 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 19 Dec 2024 10:55:04 -0500 Subject: [PATCH 40/42] Fixed trans in funnel chart. --- client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 22e1d3780..d3520c738 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -150,8 +150,8 @@ export const en = { funnelAlign: "Funnel Align", sort: "Sort", changingTitle_x_Tooltip: "Change the Horizontal position of the Title.", - changingLegend_x_Tooltip: "Change the Horizontal position of the Legend.", - changingLegend_y_Tooltip: "Change the Vertical position of the Legend.", + changingLegend_x_Tooltip: "Change the Vertical position of the Legend.", + changingLegend_y_Tooltip: "Change the Horizontal position of the Legend.", changingLegend_orient_Tooltip: "Change the Orientation of the Legend.", changingSortTooltip: "Change the Sorting direction.", changingLabelTooltip: "Change the Position of the Label.", From 85a6786e2fb1c10247a6d9d9b8c1ca4b2fb599f1 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 19 Dec 2024 11:03:07 -0500 Subject: [PATCH 41/42] Reverted candlestick chart, updated background ability. --- .../candleStickChartComp.tsx | 21 ++++---- .../candleStickChartConstants.tsx | 19 ++------ .../candleStickChartPropertyView.tsx | 33 ++----------- .../candleStickChartUtils.ts | 48 +++++-------------- 4 files changed, 29 insertions(+), 92 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx index 54f2007ed..ff33cc260 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx @@ -144,9 +144,9 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - themeConfig, + theme?.theme?.components?.candleStickChart || {}, ); - }, [chartSize, ...Object.values(echartsConfigChildren), theme]); + }, [chartSize, ...Object.values(echartsConfigChildren)]); useEffect(() => { comp.children.mapInstance.dispatch(changeValueAction(null, false)) @@ -168,14 +168,15 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => { }} > (echartsCompRef.current = e)} - style={{ height: "100%" }} - notMerge - lazyUpdate - opts={{ locale: getEchartsLocale() }} - option={option} - mode={mode} - /> + ref={(e) => (echartsCompRef.current = e)} + style={{ height: "100%" }} + notMerge + lazyUpdate + opts={{ locale: getEchartsLocale() }} + option={option} + theme={mode !== 'map' ? themeConfig : undefined} + mode={mode} + /> ); }); diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 78f761344..35852214d 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -16,9 +16,7 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle, - EchartDefaultChartStyle, - EchartDefaultTextStyle + EchartsStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -26,7 +24,6 @@ import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxi import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; -import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; @@ -255,25 +252,15 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, - echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, - left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), - right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), - top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), - bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), - dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')), - dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')), + // style: styleControl(EchartsStyle, 'style'), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), - dataZoomVisibility: withDefault(BoolControl, true), } if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), - titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), - labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), - legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + style: styleControl(EchartsStyle, 'style'), } } diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index 124ae89f6..b3c545d4a 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -31,46 +31,19 @@ export function candleStickChartPropertyView( ), })} - {children.echartsTitleConfig.getPropertyView()} - {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} - {children.left.propertyView({ label: trans("candleStickChart.left") })} - {children.right.propertyView({ label: trans("candleStickChart.right") })} - {children.top.propertyView({ label: trans("candleStickChart.top") })} - {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })} - {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })} - {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })} {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})} - {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})} - {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
{children.onEvent.propertyView()}
- {children.style?.getPropertyView()} + {children.style?.getPropertyView()}
-
{hiddenPropertyView(children)} -
- -
- {children.chartStyle?.getPropertyView()} -
-
- {children.titleStyle?.getPropertyView()} -
-
- {children.labelStyle?.getPropertyView()} -
- { - children.legendVisibility.getView() ? -
- {children.legendStyle?.getPropertyView()} -
: <> - } +
{hiddenPropertyView(children)}
); - + const getChatConfigByMode = (mode: string) => { switch(mode) { case "json": diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 9600e17a2..b4b5d6f71 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -135,53 +135,29 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - - if (props.mode === "json") { let opt={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "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] - } + "left":"center" }, - "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), - "color": props?.echartsOption.data?.map(data => data.color), - "tooltip": props?.tooltip&&{ + "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"), + "color": props.echartsOption.data?.map(data => data.color), + "tooltip": props.tooltip&&{ "trigger": "axis", "axisPointer": { "type": "cross" } }, "grid": { - "left": `${props?.left}%`, - "right": `${props?.right}%`, - "bottom": `${props?.bottom}%`, - "top": `${props?.top}%`, + "left": "10%", + "right": "10%", + "bottom": "10%", }, - "dataZoom": [ - { - "show": props?.dataZoomVisibility, - "type": 'slider', - "start": 0, - "end": 100, - "bottom": props?.dataZoomBottom, - 'height': props?.dataZoomHeight - } - ], "xAxis": { "type": "category", - "data": props?.echartsOption.xAxis.data + "data": props.echartsOption.xAxis.data }, "yAxis": { "type": "value", @@ -189,8 +165,8 @@ export function getEchartsConfig( }, "series": [ { - "name": props?.echartsConfig.type, - "type": props?.echartsConfig.type, + "name": props.echartsConfig.type, + "type": props.echartsConfig.type, "left": "10%", "top": 60, "bottom": 60, @@ -200,9 +176,9 @@ export function getEchartsConfig( "gap": 2, "label": { "show": true, - "position": props?.echartsLabelConfig.top + "position": props.echartsLabelConfig.top }, - "data": props?.echartsOption.data, + "data": props.echartsOption.data, } ] } From c10dd8802c7d5912e1617a1a7c9cac5fa0c0d38b Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 19 Dec 2024 12:06:15 -0500 Subject: [PATCH 42/42] Fixed background Color issue on funnel and gauge. --- .../src/comps/funnelChartComp/funnelChartUtils.ts | 2 +- .../lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 8c25565e7..1442ea995 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -154,7 +154,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] } }, - "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "color": props.echartsOption.data?.map(data => data.color), "tooltip": props.tooltip&&{ "trigger": "item", diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 9a68de018..e2c5fa310 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -154,7 +154,7 @@ export function getEchartsConfig( "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] }, }, - "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"), + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ "trigger": "item", "formatter": "{a}
{b} : {c}%"