Theme: added comp theme styling in candleStickChart

Author: raheeliftikhar5

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx

@@ -63,7 +63,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
     color: chartColorPalette,
     backgroundColor: "#fff",
   };
-
   let themeConfig = defaultChartTheme;
   try {
     themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx

@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }

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

@@ -141,7 +141,7 @@ export function getEchartsConfig(
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background || theme.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
    "tooltip": props.tooltip&&{
     "trigger": "axis",

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

@@ -864,8 +864,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
 
-      const appSettingsComp = editorState.getAppSettingsComp();
-      const { preventAppStylesOverwriting } = appSettingsComp.getView();
+      const appSettingsComp = editorState?.getAppSettingsComp();
+      const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
       const { themeId } = theme || {}; 
       const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
       const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -386,7 +386,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </Card>
             </ThemeSettingsView>
 
-            {/* <ThemeSettingsView>
+            <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
               </StyleThemeSettingsCover>
@@ -425,7 +425,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView> */}
+            </ThemeSettingsView>
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>