Added legend font settings.

lowcoder-org · FalkWolsky · Dec 19, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
commit 1d062e0c7e152fefb115e0c5052645c869ced613
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -281,6 +281,7 @@ if (EchartsStyle) {
     ...chartJsonModeChildren,
     style: styleControl(FunnelStyle, 'style'),
     titleStyle: styleControl(FunnelStyle, 'titleStyle'),
+    legendStyle: styleControl(FunnelStyle, 'legendStyle'),
     chartStyle: styleControl(FunnelChartStyle, 'chartStyle')
   }
 }

diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx
@@ -58,9 +58,18 @@ export function funnelChartPropertyView(
       <Section name={sectionNames.titleStyle}>
         {children.titleStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.labelStyle}>
+      {
+        children.label.getView() ?
+        <Section name={sectionNames.labelStyle}>
         {children.style?.getPropertyView()}
-      </Section>
+      </Section> : <></>
+      }
+      {
+        children.legendVisibility.getView() ?
+        <Section name={sectionNames.legendStyle}>
+          {children.legendStyle?.getPropertyView()}
+        </Section> : <></>
+      }
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -143,10 +143,10 @@ export function getEchartsConfig(
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":props.echartsTitleConfig.top,
     "textStyle": {
-      "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily,
-      "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize,
-      "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight,
-      "color": props?.titleStyle?.text || theme?.style?.text,
+      "fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily || "Arial",
+      "fontSize": props?.titleStyle?.textSize || theme?.style?.textSize || 18,
+      "fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight || "bold",
+      "color": props?.titleStyle?.text || theme?.style?.text || "#333",
       "fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle,
       "textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor,
       "textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0],
@@ -163,6 +163,17 @@ export function getEchartsConfig(
   "legend":props.legendVisibility&& {
     "data": props.echartsOption.data?.map(data=>data.name),
     "top": props.echartsLegendConfig.top,
+    "textStyle": {
+      "fontFamily": props?.legendStyle?.fontFamily || theme?.style?.fontFamily || "Arial",
+      "fontSize": props?.legendStyle?.textSize || theme?.style?.textSize,
+      "fontWeight": props?.legendStyle?.textWeight || theme?.style?.textWeight,
+      "color": props?.legendStyle?.text || theme?.style?.text || "#000000",
+      "fontStyle": props?.legendStyle?.fontStyle || theme?.style?.fontStyle,
+      "textShadowColor": props?.legendStyle?.boxShadowColor || theme?.style?.boxShadowColor,
+      "textShadowBlur": props?.legendStyle?.boxShadow?.split(' ')[0],
+      "textShadowOffsetX": props?.legendStyle?.boxShadow?.split(' ')[1],
+      "textShadowOffsetY": props?.legendStyle?.boxShadow?.split(' ')[2]
+    }
   },
   "series": [
     {
@@ -191,7 +202,7 @@ export function getEchartsConfig(
       "label": {
         "show": props.label,
         "position": props.echartsLabelConfig.top,
-        "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily,
+        "fontFamily": props?.style?.fontFamily || theme?.style?.fontFamily || "Arial",
         "fontSize": props?.style?.textSize || theme?.style?.textSize,
         "fontWeight": props?.style?.textWeight || theme?.style?.textWeight,
         "color": props?.style?.text || theme?.style?.text,

diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -189,4 +189,5 @@ export const sectionNames = {
   modalStyle:trans("prop.modalStyle"),
   chartStyle:trans("prop.chartStyle"),
   titleStyle:trans("prop.titleStyle"),
+  legendStyle:trans("prop.legendStyle"),
 };
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -41,7 +41,8 @@ export const en = {
     columnStyle: 'Column Style',
     modalStyle: 'Modal Style',
     chartStyle: "Chart Style",
-    titleStyle: "Title Style"
+    titleStyle: "Title Style",
+    legendStyle: "Legend Style",
   },
   passwordInput: {
     label: "Password:",