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 = / l i n e a r - g r a d i e n t \( ( \d + d e g ) , \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 = / r a d i a l - g r a d i e n t \( ( [ ^ , ] + ) , \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+ / ( (?: r g b a ? | h s l a ? ) \( [ ^ ) ] + \) | # [ 0 - 9 a - f A - F ] { 3 , 8 } | [ a - z A - 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+ }
0 commit comments