Skip to content

Commit 4058b81

Browse files
Imiss-U1025Imiss-U1025
committed
Added gradient background.
1 parent 1d062e0 commit 4058b81

File tree

5 files changed

+68
-14
lines changed

5 files changed

+68
-14
lines changed

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import {
1717
clickEvent,
1818
styleControl,
1919
EchartsStyle,
20-
TextStyle,
21-
FunnelStyle,
20+
FunnelTextStyle,
2221
FunnelChartStyle
2322
} from "lowcoder-sdk";
2423
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
@@ -279,15 +278,13 @@ let chartJsonModeChildren: any = {
279278
if (EchartsStyle) {
280279
chartJsonModeChildren = {
281280
...chartJsonModeChildren,
282-
style: styleControl(FunnelStyle, 'style'),
283-
titleStyle: styleControl(FunnelStyle, 'titleStyle'),
284-
legendStyle: styleControl(FunnelStyle, 'legendStyle'),
281+
style: styleControl(FunnelTextStyle, 'style'),
282+
titleStyle: styleControl(FunnelTextStyle, 'titleStyle'),
283+
legendStyle: styleControl(FunnelTextStyle, 'legendStyle'),
285284
chartStyle: styleControl(FunnelChartStyle, 'chartStyle')
286285
}
287286
}
288287

289-
console.log(FunnelChartStyle)
290-
291288
const chartMapModeChildren = {
292289
mapInstance: stateComp(),
293290
getMapInstance: FunctionControl,

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,6 @@ export function getEchartsConfig(
134134
chartSize?: ChartSize,
135135
theme?: any,
136136
): EChartsOptionWithMap {
137-
138-
console.log("props?.titleStyle",props.echartsOption.data?.map(data=>data.color));
139137
if (props.mode === "json") {
140138
let opt={
141139
"title": {
@@ -145,7 +143,7 @@ export function getEchartsConfig(
145143
"textStyle": {
146144
"fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily || "Arial",
147145
"fontSize": props?.titleStyle?.textSize || theme?.style?.textSize || 18,
148-
"fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight || "bold",
146+
"fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight,
149147
"color": props?.titleStyle?.text || theme?.style?.text || "#333",
150148
"fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle,
151149
"textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor,
@@ -154,7 +152,18 @@ export function getEchartsConfig(
154152
"textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2]
155153
}
156154
},
157-
"backgroundColor": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) || theme?.style?.background : props?.chartStyle?.background || theme?.style?.background,
155+
"backgroundColor": props?.chartStyle?.gradientBackground && props?.chartStyle?.background
156+
? {
157+
"x": props?.chartStyle?.direction?.split(' ')[0],
158+
"y": props?.chartStyle?.direction?.split(' ')[1],
159+
"x2": props?.chartStyle?.direction?.split(' ')[2],
160+
"y2": props?.chartStyle?.direction?.split(' ')[3],
161+
"colorStops": [
162+
{ "offset": 0, "color": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || "#FFFFFF" },
163+
{ "offset": 1, "color": props?.chartStyle?.opacity ? props?.chartStyle?.gradientBackground + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.gradientBackground || "#FFFFFF" }
164+
]
165+
}
166+
: props?.chartStyle?.opacity ? (props?.chartStyle?.background || theme?.style?.background) + opacityToHex(props?.chartStyle?.opacity) : props?.chartStyle?.background || theme?.style?.background,
158167
"color": props.echartsOption.data?.map(data => data.color),
159168
"tooltip": props.tooltip&&{
160169
"trigger": "item",

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import {
4343
SimpleColorConfig,
4444
SingleColorConfig,
4545
MarginConfig,
46+
DirectionConfig,
4647
PaddingConfig,
4748
TextSizeConfig,
4849
TextWeightConfig,
@@ -187,7 +188,11 @@ function isBorderStyleConfig(config: SingleColorConfig): config is borderStyleCo
187188
}
188189

189190
function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
190-
return config.hasOwnProperty("margin");
191+
return config.hasOwnProperty("direction");
192+
}
193+
194+
function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig {
195+
return config.hasOwnProperty("direction");
191196
}
192197

193198
function isBoxShadowConfig(
@@ -326,6 +331,9 @@ function isEmptyBorderStyle(borderStyle: string) {
326331
function isEmptyMargin(margin: string) {
327332
return _.isEmpty(margin);
328333
}
334+
function isEmptyDirection(direction: string) {
335+
return _.isEmpty(direction);
336+
}
329337
function isEmptyPadding(padding: string) {
330338
return _.isEmpty(padding);
331339
}
@@ -493,6 +501,10 @@ function calcColors<ColorMap extends Record<string, string>>(
493501
res[name] = props[name];
494502
return;
495503
}
504+
if (!isEmptyDirection(props[name]) && isDirectionConfig(config)) {
505+
res[name] = props[name];
506+
return;
507+
}
496508
if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) {
497509
res[name] = props[name];
498510
return;
@@ -767,6 +779,7 @@ const LineHeightPropIcon = styled(LineHeightIcon)`
767779
`;
768780

769781
const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
782+
const DirectionIcon = styled(ExpandIcon)` margin: 0 8px 0 2px; color: #888`;
770783
const PaddingIcon = styled(CompressIcon)` margin: 0 8px 0 2px; color: #888`;
771784
const RadiusPropIcon = styled(BorderRadiusIcon)` width: 24px; margin: 0 11px 0 0px; color: #888`;
772785
const BorderPropIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px; color: #888`;
@@ -913,6 +926,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
913926
name === 'footerBackgroundImagePosition' ||
914927
name === 'footerBackgroundImageOrigin' ||
915928
name === 'margin' ||
929+
name === 'direction' ||
916930
name === 'padding' ||
917931
name === 'containerHeaderPadding' ||
918932
name === 'containerSiderPadding' ||
@@ -1096,6 +1110,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
10961110
preInputNode: <MarginIcon title="Margin" />,
10971111
placeholder: props[name],
10981112
})
1113+
: name === 'direction'
1114+
? (
1115+
children[name] as InstanceType<
1116+
typeof StringControl
1117+
>
1118+
).propertyView({
1119+
label: config.label,
1120+
preInputNode: <DirectionIcon title="direction" />,
1121+
placeholder: props[name],
1122+
})
10991123
: name === 'animationIterationCount'
11001124
? (
11011125
children[name] as InstanceType<

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,10 @@ export type MarginConfig = CommonColorConfig & {
165165
readonly margin: string;
166166
};
167167

168+
export type DirectionConfig = CommonColorConfig & {
169+
readonly direction: string;
170+
};
171+
168172
export type PaddingConfig = CommonColorConfig & {
169173
readonly padding: string;
170174
};
@@ -203,6 +207,7 @@ export type SingleColorConfig =
203207
| FontFamilyConfig
204208
| FontStyleConfig
205209
| MarginConfig
210+
| DirectionConfig
206211
| PaddingConfig
207212
| ContainerHeaderPaddingConfig
208213
| ContainerSiderPaddingConfig
@@ -548,6 +553,12 @@ const MARGIN = {
548553
margin: "margin",
549554
} as const;
550555

556+
const DIRECTION = {
557+
name: "direction",
558+
label: trans("style.direction"),
559+
position: "direction",
560+
} as const;
561+
551562
const PADDING = {
552563
name: "padding",
553564
label: trans("style.padding"),
@@ -742,6 +753,16 @@ function getBackground(depTheme: keyof ThemeDetail = "primarySurface") {
742753
} as const;
743754
}
744755

756+
function getGradientBackground(depTheme: keyof ThemeDetail = "primarySurface") {
757+
return {
758+
name: "gradientBackground",
759+
label: trans("style.gradientBackground"),
760+
depTheme: depTheme,
761+
depType: DEP_TYPE.SELF,
762+
transformer: toSelf,
763+
} as const;
764+
}
765+
745766
function getStaticBackground(color: string) {
746767
return {
747768
name: "background",
@@ -1793,7 +1814,7 @@ export const JsonEditorStyle = [LABEL] as const;
17931814

17941815
export const EchartsStyle = [getBackground("primarySurface")] as const;
17951816

1796-
export const FunnelStyle = [
1817+
export const FunnelTextStyle = [
17971818
TEXT,
17981819
TEXT_SIZE,
17991820
TEXT_WEIGHT,
@@ -1805,6 +1826,8 @@ export const FunnelStyle = [
18051826

18061827
export const FunnelChartStyle = [
18071828
getBackground("primarySurface"),
1829+
getGradientBackground(),
1830+
DIRECTION,
18081831
OPACITY,
18091832
BOXSHADOWCOLOR,
18101833
BOXSHADOW,

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -568,7 +568,8 @@ export const en = {
568568
"siderBackgroundImageOrigin": "Sider Background Image Origin",
569569
"activeBackground": "Active Background Color",
570570
"labelBackground": "Label Background Color",
571-
571+
"gradientBackground": "Gradient Background Color",
572+
"direction": "Direction"
572573
},
573574
"export": {
574575
"hiddenDesc": "If true, the component is hidden",

0 commit comments

Comments
 (0)