Skip to content

Commit 4de9835

Browse files
Imiss-U1025Imiss-U1025
committed
Added ChartBackgroundColor, ChartGradientColor, ChartShadowColor, ChartBorderColor, ChartTextColor as ColorControl.
1 parent 216b753 commit 4de9835

File tree

5 files changed

+432
-154
lines changed

5 files changed

+432
-154
lines changed

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export function getEchartsConfig(
138138
console.log("props", props);
139139
console.log("theme", theme);
140140

141-
const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor;
142-
const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor;
141+
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor;
142+
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
143143
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
144144
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
145145

@@ -156,9 +156,9 @@ export function getEchartsConfig(
156156
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
157157
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize,
158158
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
159-
"color": props?.titleStyle?.text || theme?.titleStyle?.fontColor,
159+
"color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor,
160160
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
161-
"textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor,
161+
"textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
162162
"textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0],
163163
"textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1],
164164
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2]
@@ -188,9 +188,9 @@ export function getEchartsConfig(
188188
"fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
189189
"fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
190190
"fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
191-
"color": props?.legendStyle?.text || theme?.legendStyle?.fontColor,
191+
"color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor,
192192
"fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
193-
"textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor,
193+
"textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
194194
"textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0],
195195
"textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1],
196196
"textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2]
@@ -211,11 +211,11 @@ export function getEchartsConfig(
211211
"sort": props.echartsSortingConfig.sort,
212212
"itemStyle": {
213213
"opacity": props.opacity,
214-
"borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor,
214+
"borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
215215
"borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
216216
"borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
217217
"borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
218-
"shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor,
218+
"shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
219219
"shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0],
220220
"shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1],
221221
"shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2]
@@ -226,9 +226,9 @@ export function getEchartsConfig(
226226
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
227227
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
228228
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
229-
"color": props?.labelStyle?.text || theme?.labelStyle?.fontColor,
229+
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor,
230230
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
231-
"textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor,
231+
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
232232
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0],
233233
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1],
234234
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2]

‎client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
225225
placeholder = '#FFFFFF';
226226
break;
227227
}
228+
case 'chartBackgroundColor': {
229+
placeholder = '#FFFFFF';
230+
break;
231+
}
232+
case 'chartGradientColor': {
233+
placeholder = '#FFFFFF';
234+
break;
235+
}
236+
case 'chartShadowColor': {
237+
placeholder = '#FFFFFF';
238+
break;
239+
}
240+
case 'chartBorderColor': {
241+
placeholder = '#FFFFFF';
242+
break;
243+
}
244+
case 'chartTextColor': {
245+
placeholder = '#FFFFFF';
246+
break;
247+
}
228248
case 'boxShadow': {
229249
placeholder = '0px 0px 0px';
230250
break;
@@ -367,6 +387,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
367387
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
368388
break;
369389
}
390+
case 'chartBackgroundColor': {
391+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
392+
break;
393+
}
394+
case 'chartGradientColor': {
395+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
396+
break;
397+
}
398+
case 'chartShadowColor': {
399+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
400+
break;
401+
}
402+
case 'chartBorderColor': {
403+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
404+
break;
405+
}
406+
case 'chartTextColor': {
407+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
408+
break;
409+
}
370410
case 'boxShadow': {
371411
icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
372412
break;

0 commit comments

Comments
 (0)