Skip to content

Commit 84b4285

Browse files
Imiss-U1025Imiss-U1025
committed
Applied gradient colors to a chart using just one color picker
1 parent e5fbd92 commit 84b4285

File tree

5 files changed

+109
-60
lines changed

5 files changed

+109
-60
lines changed

‎client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import { useContext } from "react";
16-
import getBackgroundColor from "../../util/gradientBackgroundColor";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1717

1818
export function transformData(
1919
originData: JSONObject[],
@@ -136,11 +136,6 @@ export function getEchartsConfig(
136136
theme?: any,
137137
): EChartsOptionWithMap {
138138

139-
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF";
140-
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
141-
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
142-
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
143-
144139

145140
if (props.mode === "json") {
146141
let opt={
@@ -160,7 +155,7 @@ export function getEchartsConfig(
160155
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
161156
}
162157
},
163-
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
158+
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"),
164159
"color": props?.echartsOption.data?.map(data => data.color),
165160
"tooltip": props?.tooltip&&{
166161
"trigger": "axis",

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import opacityToHex from "../../util/opacityToHex";
16-
import getBackgroundColor from "../../util/gradientBackgroundColor";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1717

1818
export function transformData(
1919
originData: JSONObject[],
@@ -135,10 +135,6 @@ export function getEchartsConfig(
135135
chartSize?: ChartSize,
136136
theme?: any,
137137
): EChartsOptionWithMap {
138-
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF";
139-
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
140-
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
141-
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
142138

143139
if (props.mode === "json") {
144140
let opt={
@@ -158,7 +154,7 @@ export function getEchartsConfig(
158154
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
159155
}
160156
},
161-
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
157+
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"),
162158
"color": props.echartsOption.data?.map(data => data.color),
163159
"tooltip": props.tooltip&&{
164160
"trigger": "item",

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import opacityToHex from "../../util/opacityToHex";
16-
import getBackgroundColor from "../../util/gradientBackgroundColor";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1717

1818
export function transformData(
1919
originData: JSONObject[],
@@ -136,11 +136,6 @@ export function getEchartsConfig(
136136
theme?: any,
137137
): EChartsOptionWithMap {
138138

139-
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF";
140-
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
141-
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
142-
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
143-
144139
if (props.mode === "json") {
145140
let opt={
146141
"title": {
@@ -159,7 +154,7 @@ export function getEchartsConfig(
159154
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
160155
},
161156
},
162-
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
157+
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"),
163158
"tooltip": props.tooltip&&{
164159
"trigger": "item",
165160
"formatter": "{a} <br/>{b} : {c}%"

‎client/packages/lowcoder-comps/src/util/gradientBackgroundColor.tsx‎

Lines changed: 98 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,100 @@
1-
import opacityToHex from "./opacityToHex";
2-
3-
const getBackgroundColor = (
4-
backgroundColor: any,
5-
gradientColor: any,
6-
opacity: any,
7-
direction: any,
8-
) => {
9-
if (direction?.split(' ').length < 4)
10-
return gradientColor && backgroundColor
11-
? {
12-
"type": 'radial',
13-
"x": direction?.split(' ')[0],
14-
"y": direction?.split(' ')[1],
15-
"r": direction?.split(' ')[2],
16-
"colorStops": [
17-
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
18-
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
19-
]
20-
}
21-
: backgroundColor + opacityToHex(opacity)
22-
else
23-
return gradientColor && backgroundColor
24-
? {
25-
"type": 'linear',
26-
"x": direction?.split(' ')[0],
27-
"y": direction?.split(' ')[1],
28-
"x2": direction?.split(' ')[2],
29-
"y2": direction?.split(' ')[3],
30-
"colorStops": [
31-
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
32-
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
33-
]
34-
}
35-
: backgroundColor + opacityToHex(opacity)
1+
/**
2+
* Converts a CSS gradient string (linear-gradient or radial-gradient) or solid color
3+
* into an ECharts-compatible background configuration.
4+
*
5+
* @param {string} background - A solid color or CSS gradient string
6+
* @returns {string|object} A string or object that can be used in ECharts' `backgroundColor`
7+
*/
8+
export default function parseBackground(background: any) {
9+
if (background.startsWith("linear-gradient")) {
10+
// Parse linear-gradient
11+
return parseLinearGradient(background);
12+
} else if (background.startsWith("radial-gradient")) {
13+
// Parse radial-gradient
14+
return parseRadialGradient(background);
15+
} else {
16+
// Assume it's a solid color
17+
return background;
18+
}
3619
}
3720

38-
export default getBackgroundColor;
21+
/**
22+
* Parses a linear-gradient CSS string into an ECharts-compatible object.
23+
*
24+
* @param {string} gradient - The linear-gradient CSS string
25+
* @returns {object} An ECharts-compatible linear gradient object
26+
*/
27+
function parseLinearGradient(gradient: any) {
28+
const linearGradientRegex = /linear-gradient\((\d+deg),\s*(.+)\)/;
29+
const match = gradient.match(linearGradientRegex);
30+
31+
if (!match) {
32+
throw new Error("Invalid linear-gradient format");
33+
}
34+
35+
const angle = parseFloat(match[1]); // Extract the angle in degrees
36+
const colorStops = parseColorStops(match[2]); // Extract the color stops
37+
38+
// Convert angle to x2 and y2 using trigonometry
39+
const x2 = Math.sin((angle * Math.PI) / 180);
40+
const y = Math.cos((angle * Math.PI) / 180);
41+
42+
return {
43+
type: "linear",
44+
x: 0,
45+
y2: 0,
46+
x2,
47+
y,
48+
colorStops,
49+
};
50+
}
51+
52+
/**
53+
* Parses a radial-gradient CSS string into an ECharts-compatible object.
54+
*
55+
* @param {string} gradient - The radial-gradient CSS string
56+
* @returns {object} An ECharts-compatible radial gradient object
57+
*/
58+
function parseRadialGradient(gradient: any) {
59+
const radialGradientRegex = /radial-gradient\(([^,]+),\s*(.+)\)/;
60+
const match = gradient.match(radialGradientRegex);
61+
62+
if (!match) {
63+
throw new Error("Invalid radial-gradient format");
64+
}
65+
66+
const shape = match[1].trim(); // Extract the shape (e.g., "circle")
67+
const colorStops = parseColorStops(match[2]); // Extract the color stops
68+
69+
// ECharts radial gradient assumes a circular gradient centered at (0.5, 0.5)
70+
return {
71+
type: "radial",
72+
x: 0.5,
73+
y: 0.5,
74+
r: 0.8, // Default radius
75+
colorStops,
76+
};
77+
}
78+
79+
/**
80+
* Parses color stops from a gradient string into an array of objects.
81+
*
82+
* @param {string} colorStopsString - The color stops part of the gradient string
83+
* @returns {Array} An array of color stop objects { offset, color }
84+
*/
85+
function parseColorStops(colorStopsString: any) {
86+
const colorStopRegex =
87+
/((?:rgba?|hsla?)\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+)\s+([\d.]+%)/g;
88+
const colorStops = [];
89+
let match;
90+
91+
while (
92+
(match = colorStopRegex.exec(colorStopsString.toLowerCase())) !== null
93+
) {
94+
const color = match[1].trim().toLowerCase(); // Convert color to lowercase
95+
const offset = parseFloat(match[2]) / 100; // Convert percentage to 0-1
96+
colorStops.push({ offset, color });
97+
}
98+
99+
return colorStops;
100+
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1975,10 +1975,11 @@ export const EchartDefaultTextStyle = [
19751975
] as const;
19761976

19771977
export const EchartDefaultChartStyle = [
1978-
CHARTBACKGROUNDCOLOR,
1979-
CHARTGRADIENTCOLOR,
1980-
DIRECTION,
1981-
CHARTOPACITY,
1978+
getBackground("primarySurface"),
1979+
// CHARTBACKGROUNDCOLOR,
1980+
// CHARTGRADIENTCOLOR,
1981+
// DIRECTION,
1982+
// CHARTOPACITY,
19821983
CHARTSHADOWCOLOR,
19831984
CHARTBOXSHADOW,
19841985
CHARTBORDERCOLOR,

0 commit comments

Comments
 (0)