Added control fields and style fields on Graph charts.

Author: Imiss-U1025

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

@@ -144,6 +144,9 @@ export function getEchartsConfig(
         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),

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

@@ -146,7 +146,7 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
@@ -176,7 +176,6 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
           lazyUpdate
           opts={{ locale: getEchartsLocale() }}
           option={option}
-          theme={mode !== 'map' ? themeConfig : undefined}
           mode={mode}
         />
     </ReactResizeDetector>

client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx

@@ -16,8 +16,11 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartsStyle,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
 } from "lowcoder-sdk";
+
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
 import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
@@ -27,6 +30,8 @@ import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
 import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
 import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
@@ -252,15 +257,25 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("graphChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+  arrowSize:withDefault(NumberControl,trans('graphChart.defaultArrowSize')),
+  pointSize:withDefault(NumberControl,trans('graphChart.defaultPointSize')),
+  repulsion:withDefault(NumberControl,trans('graphChart.defaultRepulsion')),
+  gravity:withDefault(NumberControl,trans('graphChart.defaultGravity')),
+  lineLength:withDefault(NumberControl,trans('graphChart.defaultLineLength')),
+  lineWidth:withDefault(NumberControl,trans('graphChart.defaultLineWidth')),
+  curveness:withDefault(NumberControl,trans('graphChart.defaultCurveness')),
   tooltip: withDefault(BoolControl, true),
+  arrowFlag: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
 if (EchartsStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx

@@ -31,14 +31,29 @@ export function graphChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("graphChart.title") })}
-        {children.tooltip.propertyView({label: trans("graphChart.tooltip")})}
+        {children.echartsTitle.propertyView({ label: trans("graphChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+
+        {children.arrowFlag.getView() && children.arrowSize.propertyView({ label: trans("graphChart.arrowSize"), tooltip: trans("graphChart.arrowSizeTooltip") })}
+        {children.pointSize.propertyView({ label: trans("graphChart.pointSize"), tooltip: trans("graphChart.pointSizeTooltip") })}
+        {children.repulsion.propertyView({ label: trans("graphChart.repulsion"), tooltip: trans("graphChart.repulsionTooltip") })}
+        {children.gravity.propertyView({ label: trans("graphChart.gravity"), tooltip: trans("graphChart.gravityTooltip") })}
+        {children.lineLength.propertyView({ label: trans("graphChart.lineLength"), tooltip: trans("graphChart.lineLengthTooltip") })}
+        {children.lineWidth.propertyView({ label: trans("graphChart.lineWidth"), tooltip: trans("graphChart.lineWidthTooltip") })}
+        {children.curveness.propertyView({ label: trans("graphChart.curveness"), tooltip: trans("graphChart.curvenessTooltip") })}
+
+        {children.arrowFlag.propertyView({label: trans("graphChart.arrowFlag"), tooltip: trans("graphChart.arrowFlagTooltip") })}
+        {children.tooltip.propertyView({label: trans("graphChart.tooltip"), tooltip: trans("graphChart.tooltipTooltip") })}
       </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.layout}>{hiddenPropertyView(children)}</Section>
     </>

client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.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 parseBackground from "../../util/gradientBackgroundColor";
+import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
 
 export function transformData(
   originData: JSONObject[],
@@ -134,32 +136,48 @@ export function getEchartsConfig(
   theme?: any,
 ): 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"
-  },
-        'series': [
-            {
-                "type": "graph",
-      "layout": "force",
-      "force": {
-        "repulsion": 100,
-        "gravity": 0.1,
-        "edgeLength": 100
-                },
-        'categories': props.echartsOption.categories,
-        'links': props.echartsOption.links,
-      'nodes': props.echartsOption.nodes,
+    let opt= props?.echartsOption && {
+      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"),
+      "tooltip": props.tooltip&& {
+        "trigger": "item"
+      },
+      'series': [
+        {
+
+          "type": "graph",
+          "layout": "force",
+          'categories': props.echartsOption.categories,
+          'links': props.echartsOption.links,
+          "force": {
+            "repulsion": props.repulsion,
+            "gravity": props?.gravity,
+            "edgeLength": props?.lineLength
+          },
+          edgeSymbol: ['', props?.arrowFlag ? 'arrow' : ''],
+          edgeSymbolSize: [0, props?.arrowSize],
+          symbolSize: props?.pointSize,
+          lineStyle: {
+            color: props.echartsOption?.color?.lineColor || "#00000033",
+            ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle),
+            width: props?.lineWidth || 1,
+            curveness: props?.curveness
+          },
+          'nodes': props.echartsOption.nodes,
+          itemStyle: {
+            "color": props.echartsOption?.color?.pointColor || "#0000ff",
+            ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle),
+          },
+        }
+      ],
+    }
     return props.echartsOption ? opt : {};
 
   }

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

@@ -34,6 +34,31 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Graph Chart',
     tooltip: 'Tooltip',
+    arrowSize: "Arrow Size",
+    pointSize: "Point Size",
+    repulsion: "Repulsion",
+    gravity: "Gravity",
+    lineLength: "Line Length",
+    curveness: "Curveness",
+    lineWidth: "Line Width",
+    arrowFlag: "Arrow Flag",
+    arrowSizeTooltip: "Select the Arrow Size of the Chart.",
+    pointSizeTooltip: "Select the Point Size of the Chart.",
+    repulsionTooltip: "Select the Repulsion of the Chart.",
+    gravityTooltip: "Select the Gravity of the Chart.",
+    lineLengthTooltip: "Select the Line length of the Chart.",
+    lineWidthTooltip: "Select the Line width of the Chart.",
+    arrowFlagTooltip: "Show or hide the Arrow of the Chart.",
+    tooltipTooltip: "Show or hide the Tooltip of the Chart.",
+    curvenessTooltip: "defaultCurveness",
+    defaultArrowSize: "10",
+    defaultPointSize: "15",
+    defaultRepulsion: "100",
+    defaultGravity: "0.1",
+    defaultLineLength: "100",
+    defaultLineWidth: "2",
+    defaultCurveness: "0",
+
   },
   heatmapChart: {
     heatmapType: 'Heatmap Chart Type',

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

@@ -385,6 +385,10 @@ export const enObj: I18nObjects = {
       ]
   },
   defaultGraphChartOption: {
+     color:{
+       pointColor: "#0000ff",
+       lineColor: "#00000033"
+     },
      categories: [
         {name: "Nodes"},
         {name: "Edges"}

client/packages/lowcoder-comps/src/util/styleWrapper.tsx

@@ -18,4 +18,18 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo
     "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
     "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
   }
+}
+
+export const chartStyleWrapper = (styleContainer: any, themeContainer: any, detailBorderWidth = 0) => {
+
+  return {
+    "shadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor,
+    "shadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0],
+    "shadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1],
+    "shadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2],
+    "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit',
+    "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth,
+    "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
+    "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
+  }
 }