Added control fields and style fields to tree charts.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx

@@ -16,7 +16,7 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartsStyle, RadarLabelStyle, EchartDefaultChartStyle, EchartDefaultTextStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +31,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { TreeChartConfig } from "comps/chartComp/chartConfigs/treeChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -253,14 +255,27 @@ let chartJsonModeChildren: any = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+
+  left:withDefault(NumberControl,trans('treeChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('treeChart.defaultRight')),
+  top:withDefault(NumberControl,trans('treeChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('treeChart.defaultBottom')),
+  pointSize:withDefault(NumberControl,trans('treeChart.defaultPointSize')),
+  lineWidth:withDefault(NumberControl,trans('treeChart.defaultlineWidth')),
+
+  edgeShape: withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: 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/treeChartComp/treeChartPropertyView.tsx

@@ -31,15 +31,34 @@ export function treeChartPropertyView(
             </div>
           ),
         })}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.echartsTitle.propertyView({ label: trans("treeChart.title") })}
+
+        {children.left.propertyView({ label: trans("treeChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("treeChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("treeChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("treeChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+        {children.pointSize.propertyView({ label: trans("treeChart.pointSize"), tooltip: trans("treeChart.pointSizeTooltip") })}
+        {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })}
+
         {children.tooltip.propertyView({label: trans("treeChart.tooltip")})}
+
       </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/treeChartComp/treeChartUtils.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,42 +137,56 @@ 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": props.echartsOption.data?.map(data => data.color),
-  "tooltip": props.tooltip&&{
-    "trigger": "item",
-    "triggerOn": "mousemove"
-  },
-  "series": [
-    {
-      "name": props.echartsConfig.type,
-      "type": props.echartsConfig.type,
-      "top": "10%",
-      "left": "10%",
-      "bottom": "10%",
-      "right": "10%",
-      "symbolSize": 7,
-      'data': props.echartsOption.data,
-      "label": {
-        "position": "top",
-        "verticalAlign": "middle",
-        "align": "right"
+      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: props.echartsOption.data?.map(data => data.color), // Node colors from data
+      tooltip: props.tooltip && {
+        trigger: "item",
+        triggerOn: "mousemove"
+      },
+      series: [
+        {
+          name: props.echartsConfig.type,
+          type: props.echartsConfig.type,
+          left: `${props?.left}%`,
+          right: `${props?.right}%`,
+          bottom: `${props?.bottom}%`,
+          top: `${props?.top}%`,
+          symbol: "circle", // Define the shape of the nodes (e.g., 'circle', 'rect', etc.)
+          symbolSize: props?.pointSize || 20, // Control the size of the nodes
+          data: props.echartsOption.data,
+          label: {
+            position: "top",
+            verticalAlign: "middle",
+            align: "right",
+            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 11),
+          },
+          leaves: {
+            label: {
+              position: "bottom",
+              verticalAlign: "middle",
+              align: "left"
+            }
           },
-      "leaves": {
-        "label": {
-          "position": "bottom",
-          "verticalAlign": "middle",
-          "align": "left"
+          itemStyle: {
+            ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
+            color: props.echartsOption.pointColor,
+          },
+          lineStyle: {
+            width: props?.lineWidth || 2, // Control the line thickness
+            color: props.echartsOption.lineColor,
+            ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
+          }
         }
-      }
+      ]
     }
-  ]
-}
     return props.echartsOption ? opt : {};
 
   }

client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx

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

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

@@ -49,6 +49,20 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Tree Chart',
     tooltip: 'Tooltip',
+    defaultLeft: "10",
+    left: "Left",
+    defaultRight: "10",
+    right: "Right",
+    defaultTop: "20",
+    top: "Top",
+    defaultBottom: "20",
+    bottom: "Bottom",
+    defaultPointSize: "10",
+    pointSize: "Point Size",
+    pointSizeTooltip: "Set the Point Size of the Chart.",
+    defaultlineWidth: '2',
+    lineWidth: "Line Width",
+    lineWidthTooltip: "Set the Line Width of the Chart."
   },
   graphChart: {
     graphType: 'Graph Chart Type',

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

@@ -417,7 +417,9 @@ export const enObj: I18nObjects = {
             ]
           }
         ]
-      }]
+      }],
+    pointColor: "#380e81",
+    lineColor: "#1a93b8",
   },
   defaultTreemapChartOption: {
     data: [