Added ChartBackgroundColor, ChartGradientColor, ChartShadowColor, ChartBorderColor, ChartTextColor as ColorControl.

Author: Imiss-U1025

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

@@ -138,8 +138,8 @@ export function getEchartsConfig(
   console.log("props", props);
   console.log("theme", theme);
 
-  const backgroundColor = props?.chartStyle?.background || theme?.chartStyle?.backgroundColor;
-  const gradientColor = props?.chartStyle?.gradientBackground || theme?.chartStyle?.gradientColor;
+  const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor;
+  const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
   const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
   const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
 
@@ -156,9 +156,9 @@ export function getEchartsConfig(
       "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
       "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize,
       "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
-      "color": props?.titleStyle?.text || theme?.titleStyle?.fontColor,
+      "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor,
       "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
-      "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.titleStyle?.shadowColor,
+      "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
       "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow.split('px')[0],
       "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow.split('px')[1],
       "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow.split('px')[2]
@@ -188,9 +188,9 @@ export function getEchartsConfig(
       "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
       "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
       "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
-      "color": props?.legendStyle?.text || theme?.legendStyle?.fontColor,
+      "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor,
       "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
-      "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.legendStyle?.shadowColor,
+      "textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
       "textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow.split('px')[0],
       "textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow.split('px')[1],
       "textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow.split('px')[2]
@@ -211,11 +211,11 @@ export function getEchartsConfig(
       "sort": props.echartsSortingConfig.sort,
       "itemStyle": {
         "opacity": props.opacity,
-        "borderColor": props?.chartStyle?.border || theme?.chartStyle?.borderColor,
+        "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
         "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
         "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
         "borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
-        "shadowColor": props?.chartStyle?.boxShadowColor || theme?.chartStyle?.shadowColor,
+        "shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
         "shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[0],
         "shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[1],
         "shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow.split('px')[2]
@@ -226,9 +226,9 @@ export function getEchartsConfig(
         "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
         "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
         "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
-        "color": props?.labelStyle?.text || theme?.labelStyle?.fontColor,
+        "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor,
         "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
-        "textShadowColor": props?.labelStyle?.boxShadowColor || theme?.labelStyle?.shadowColor,
+        "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
         "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow.split('px')[0],
         "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow.split('px')[1],
         "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow.split('px')[2]

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

@@ -225,6 +225,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
         placeholder = '#FFFFFF';
         break;
       }
+      case 'chartBackgroundColor': {
+        placeholder = '#FFFFFF';
+        break;
+      }
+      case 'chartGradientColor': {
+        placeholder = '#FFFFFF';
+        break;
+      }
+      case 'chartShadowColor': {
+        placeholder = '#FFFFFF';
+        break;
+      }
+      case 'chartBorderColor': {
+        placeholder = '#FFFFFF';
+        break;
+      }
+      case 'chartTextColor': {
+        placeholder = '#FFFFFF';
+        break;
+      }
       case 'boxShadow': {
         placeholder = '0px 0px 0px';
         break;
@@ -367,6 +387,26 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
         icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
+      case 'chartBackgroundColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
+      case 'chartGradientColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
+      case 'chartShadowColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
+      case 'chartBorderColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
+      case 'chartTextColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+        break;
+      }
       case 'boxShadow': {
         icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;