Added control fields and style fields to treemap charts.

Author: Imiss-U1025

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

@@ -145,7 +145,7 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx

@@ -16,7 +16,9 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  RadarLabelStyle,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +33,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { TreemapChartConfig } from "comps/chartComp/chartConfigs/treemapChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -253,14 +257,25 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+
+  left:withDefault(NumberControl,trans('treemapChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('treemapChart.defaultRight')),
+  top:withDefault(NumberControl,trans('treemapChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('treemapChart.defaultBottom')),
+
   tooltip: withDefault(BoolControl, true),
-  legendVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+
+if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx

@@ -31,14 +31,31 @@ export function treeChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("treemapChart.title") })}
-        {children.tooltip.propertyView({label: trans("treemapChart.tooltip")})}
+
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.echartsTitle.propertyView({ label: trans("treeChart.title"), tooltip: trans("echarts.titleTooltip") })}
+
+        {children.left.propertyView({ label: trans("treemapChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("treemapChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("treemapChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("treemapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+
+        {children.tooltip.propertyView({label: trans("treemapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip") })}
+        {children.labelVisibility.propertyView({label: trans("echarts.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.detailStyle}>
+        {children.detailStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>

client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts

@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
+import parseBackground from "../../util/gradientBackgroundColor";
 
 export function transformData(
   originData: JSONObject[],
@@ -135,30 +137,44 @@ export function getEchartsConfig(
 ): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
-  "title": {
-    "text": props.echartsTitle,
-    'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-    "left":"center"
-  },
-  "backgroundColor": props?.style?.background || theme?.style?.background,
-  "color": [],
-  "tooltip": props.tooltip&&{
-    "trigger": "item",
-    "formatter": "{b}: {c}",
-    "axisPointer": {
-      "type": "shadow"
-    },
-  },
-  "series": [
-    {
-      "name": props.echartsConfig.type,
-      "type": props.echartsConfig.type,
-      'data': props.echartsOption.data,
-      "breadcrumb": {
-        "show": true
-      }
-    }
-  ]
+      title: {
+        text: props?.echartsTitle,
+        top: props?.echartsTitleVerticalConfig.top,
+        left: props?.echartsTitleConfig.top,
+        textStyle: {
+          ...styleWrapper(props?.titleStyle, theme?.titleStyle)
+        }
+      },
+      backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+      color: [],
+      tooltip: props.tooltip&&{
+        trigger: "item",
+        formatter: "{b}: {c}",
+        axisPointer: {
+          type: "shadow"
+        },
+      },
+      series: [
+        {
+          name: props.echartsConfig.type,
+          type: props.echartsConfig.type,
+          left: `${props?.left}%`,
+          right: `${props?.right}%`,
+          bottom: `${props?.bottom}%`,
+          top: `${props?.top}%`,
+          data: props.echartsOption.data,
+          breadcrumb: {
+            show: true
+          },
+          color: props.echartsOption.color,
+          itemStyle: {
+            ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+          },
+          label: {
+            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12),
+          }
+        }
+      ]
     }
     return props.echartsOption ? opt : {};
 

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -43,6 +43,14 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Treemap Chart',
     tooltip: 'Tooltip',
+    defaultLeft: "10",
+    left: "Left",
+    defaultRight: "10",
+    right: "Right",
+    defaultTop: "20",
+    top: "Top",
+    defaultBottom: "20",
+    bottom: "Bottom",
   },
   treeChart: {
     treeType: 'Tree Chart Type',
@@ -347,6 +355,7 @@ export const en = {
     axisTickColorTooltip: "Select the Color of Axis Tick",
     axisLabelDistanceTooltip: "Select the Distance between the Axis labels and the Split line",
     tooltipTooltip: "Show or hide the Tooltip of the Chart.",
+    labelVisibility: "Label",
   },
   chart: {
     delete: "Delete",

client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

@@ -423,37 +423,39 @@ export const enObj: I18nObjects = {
   },
   defaultTreemapChartOption: {
     data: [
-        {
-          name: 'nodeA',
-          value: 10,
-          children: [
-            {
-              name: 'nodeAa',
-              value: 4,
-            },
-            {
-              name: 'nodeAb',
-              value: 6
-            }
-          ]
-        },
-        {
-          name: 'nodeB',
-          value: 20,
-          children: [
-            {
-              name: 'nodeBa',
-              value: 20,
-              children: [
-                {
-                  name: 'nodeBa1',
-                  value: 20
-                }
-              ]
-            }
-          ]
-        }
-      ]
+      {
+        name: 'Category A',
+        value: 100,
+        children: [
+          {
+            name: 'Subcategory A1',
+            value: 70,
+            children: [
+              { name: 'Item A1-1', value: 10 },
+              { name: 'Item A1-2', value: 20 },
+              { name: 'Item A1-3', value: 10 },
+              { name: 'Item A1-4', value: 30 }
+            ]
+          }
+        ]
+      },
+      {
+        name: 'Category B',
+        value: 80,
+        children: [
+          {
+            name: 'Subcategory B1',
+            value: 50,
+            children: [
+              { name: 'Item B1-1', value: 20 },
+              { name: 'Item B1-2', value: 15 },
+              { name: 'Item B1-3', value: 15 }
+            ]
+          },
+        ]
+      }
+    ],
+    color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1']
   },
   defaultSunburstChartOption: {
     data: [