Skip to content

Commit 216b753

Browse files
Imiss-U1025Imiss-U1025
committed
Added chartOpacity, chartBoxShadow, chartBorderStyle, chartBorderRadius, chartBorderWidth, chartTextSize, chartTextWeight, chartFontFamily, chartFontStyle as StringControl.
1 parent b77d3e0 commit 216b753

File tree

5 files changed

+644
-207
lines changed

5 files changed

+644
-207
lines changed

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

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,13 @@ export function getEchartsConfig(
134134
chartSize?: ChartSize,
135135
theme?: any,
136136
): EChartsOptionWithMap {
137+
138+
console.log("props", props);
139+
console.log("theme", theme);
140+
137141
const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor;
138142
const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor;
139-
const opacity = props?.chartStyle?.opacity || theme?.chartStyle?.opacity;
143+
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
140144
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
141145

142146
console.log("props", props);
@@ -149,15 +153,15 @@ export function getEchartsConfig(
149153
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
150154
"left":props.echartsTitleConfig.top,
151155
"textStyle": {
152-
"fontFamily": props?.titleStyle?.fontFamily || theme?.titleStyle?.fontFamily,
153-
"fontSize": props?.titleStyle?.textSize || theme?.titleStyle?.fontSize,
154-
"fontWeight": props?.titleStyle?.textWeight || theme?.titleStyle?.fontWeight,
156+
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
157+
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize,
158+
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
155159
"color": props?.titleStyle?.text || theme?.titleStyle?.fontColor,
156-
"fontStyle": props?.titleStyle?.fontStyle || theme?.titleStyle?.fontStyle,
160+
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
157161
"textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor,
158-
"textShadowBlur": props?.titleStyle?.boxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0],
159-
"textShadowOffsetX": props?.titleStyle?.boxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1],
160-
"textShadowOffsetY": props?.titleStyle?.boxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2]
162+
"textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0],
163+
"textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1],
164+
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2]
161165
}
162166
},
163167
"backgroundColor": gradientColor && backgroundColor
@@ -181,15 +185,15 @@ export function getEchartsConfig(
181185
"data": props.echartsOption.data?.map(data=>data.name),
182186
"top": props.echartsLegendConfig.top,
183187
"textStyle": {
184-
"fontFamily": props?.legendStyle?.fontFamily || theme?.legendStyle?.fontFamily,
185-
"fontSize": props?.legendStyle?.textSize || theme?.legendStyle?.fontSize,
186-
"fontWeight": props?.legendStyle?.textWeight || theme?.legendStyle?.fontWeight,
188+
"fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
189+
"fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
190+
"fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
187191
"color": props?.legendStyle?.text || theme?.legendStyle?.fontColor,
188-
"fontStyle": props?.legendStyle?.fontStyle || theme?.legendStyle?.fontStyle,
192+
"fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
189193
"textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor,
190-
"textShadowBlur": props?.legendStyle?.boxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0],
191-
"textShadowOffsetX": props?.legendStyle?.boxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1],
192-
"textShadowOffsetY": props?.legendStyle?.boxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2]
194+
"textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0],
195+
"textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1],
196+
"textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2]
193197
}
194198
},
195199
"series": [
@@ -208,26 +212,26 @@ export function getEchartsConfig(
208212
"itemStyle": {
209213
"opacity": props.opacity,
210214
"borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor,
211-
"borderWidth": props?.chartStyle?.borderWidth || theme?.chartStyle?.borderWidth,
212-
"borderType": props?.chartStyle?.borderStyle || theme?.chartStyle?.borderType,
213-
"borderRadius": props?.chartStyle?.radius || theme?.chartStyle?.borderRadius,
215+
"borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
216+
"borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
217+
"borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
214218
"shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor,
215-
"shadowBlur": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0],
216-
"shadowOffsetX": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1],
217-
"shadowOffsetY": props?.chartStyle?.boxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2]
219+
"shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0],
220+
"shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1],
221+
"shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2]
218222
},
219223
"label": {
220224
"show": props.label,
221225
"position": props.echartsLabelConfig.top,
222-
"fontFamily": props?.labelStyle?.fontFamily || theme?.labelStyle?.fontFamily,
223-
"fontSize": props?.labelStyle?.textSize || theme?.labelStyle?.fontSize,
224-
"fontWeight": props?.labelStyle?.textWeight || theme?.labelStyle?.fontWeight,
226+
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
227+
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
228+
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
225229
"color": props?.labelStyle?.text || theme?.labelStyle?.fontColor,
226-
"fontStyle": props?.labelStyle?.fontStyle || theme?.labelStyle?.fontStyle,
230+
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
227231
"textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor,
228-
"textShadowBlur": props?.labelStyle?.boxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0],
229-
"textShadowOffsetX": props?.labelStyle?.boxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1],
230-
"textShadowOffsetY": props?.labelStyle?.boxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2]
232+
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0],
233+
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1],
234+
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2]
231235
},
232236
"data": props.echartsOption.data
233237
}

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

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,16 @@ const isColorStyle = (styleKey: string) => {
102102
styleKey !== 'containerSiderPadding' &&
103103
styleKey !== 'containerFooterPadding' &&
104104
styleKey !== 'containerBodyPadding' &&
105-
styleKey !== 'direction';
105+
styleKey !== 'direction' &&
106+
styleKey !== 'chartOpacity' &&
107+
styleKey !== 'chartBoxShadow' &&
108+
styleKey !== 'chartBorderStyle' &&
109+
styleKey !== 'chartBorderRadius' &&
110+
styleKey !== 'chartBorderWidth' &&
111+
styleKey !== 'chartTextSize' &&
112+
styleKey !== 'chartTextWeight' &&
113+
styleKey !== 'chartFontFamily' &&
114+
styleKey !== 'chartFontStyle';
106115
}
107116

108117

@@ -280,6 +289,43 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
280289
placeholder = '0 0 1 1';
281290
break;
282291
}
292+
case 'chartOpacity': {
293+
placeholder = '1';
294+
break;
295+
}
296+
case 'chartBoxShadow': {
297+
placeholder = '1px 1px 1px';
298+
break;
299+
}
300+
case 'chartBorderStyle': {
301+
placeholder = 'solid';
302+
break;
303+
}
304+
case 'chartBorderRadius': {
305+
placeholder = '1px';
306+
break;
307+
}
308+
case 'chartBorderWidth': {
309+
placeholder = '1px';
310+
break;
311+
}
312+
case 'chartTextSize': {
313+
placeholder = '14px';
314+
break;
315+
}
316+
case 'chartTextWeight': {
317+
placeholder = 'normal';
318+
break;
319+
}
320+
case 'chartFontFamily': {
321+
placeholder = 'Arial';
322+
break;
323+
}
324+
case 'chartFontStyle': {
325+
placeholder = 'normal';
326+
break;
327+
}
328+
283329
}
284330
return placeholder;
285331
}
@@ -389,6 +435,43 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
389435
icon = <ExpandIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
390436
break;
391437
}
438+
case 'chartOpacity': {
439+
icon = <OpacityIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
440+
break;
441+
}
442+
case 'chartBoxShadow': {
443+
icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
444+
break;
445+
}
446+
case 'chartBorderStyle': {
447+
icon = <BorderStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
448+
break;
449+
}
450+
case 'chartBorderRadius': {
451+
icon = <BorderRadiusIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
452+
break;
453+
}
454+
case 'chartBorderWidth': {
455+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
456+
break;
457+
}
458+
case 'chartTextSize': {
459+
icon = <TextSizeIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
460+
break;
461+
}
462+
case 'chartTextWeight': {
463+
icon = <TextWeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
464+
break;
465+
}
466+
case 'chartFontFamily': {
467+
icon = <FontFamilyIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
468+
break;
469+
}
470+
case 'chartFontStyle': {
471+
icon = <TextStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
472+
break;
473+
}
474+
392475
}
393476
return icon;
394477
}

0 commit comments

Comments
 (0)