Added control fields and style fields to sankey charts

lowcoder-org · FalkWolsky · Jan 11, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
commit a1a817a16f50e28a4d02851ca2254a5f2f5852f7
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
@@ -271,7 +271,7 @@ let chartJsonModeChildren: any = {
   arrowFlag: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
     chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
@@ -145,7 +145,7 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
@@ -16,7 +16,10 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  SankeyLineStyle,
+  EchartDefaultChartStyle,
+  EchartDefaultTextStyle,
+  RadarLabelStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +34,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { SankeyChartConfig } from "../chartComp/chartConfigs/sankeyChartConfig";
+import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
 
 export const ChartTypeOptions = [
   {
@@ -252,15 +257,32 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
-  // style: styleControl(EchartsStyle, 'style'),
+
+  left:withDefault(NumberControl,trans('sankeyChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('sankeyChart.defaultRight')),
+  top:withDefault(NumberControl,trans('sankeyChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('sankeyChart.defaultBottom')),
+  curveness:withDefault(NumberControl,trans('sankeyChart.defaultCurveness')),
+  opacity:withDefault(NumberControl,trans('sankeyChart.defaultOpacity')),
+  nodeWidth:withDefault(NumberControl,trans('sankeyChart.defaultNodeWidth')),
+  nodeGap:withDefault(NumberControl,trans('sankeyChart.defaultNodeGap')),
+
+  draggable: withDefault(BoolControl, true),
+  focus: withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+
+if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    lineStyle: styleControl(SankeyLineStyle, 'lineStyle'),
+    detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
   }
 }
 

diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx
@@ -31,16 +31,44 @@ export function sankeyChartPropertyView(
             </div>
           ),
         })}
+
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.echartsLabelConfig.getPropertyView()}
-        {children.echartsTitle.propertyView({ label: trans("sankeyChart.title") })}
-        {children.tooltip.propertyView({label: trans("sankeyChart.tooltip")})}
+
+        {children.echartsTitle.propertyView({ label: trans("sankeyChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.left.propertyView({ label: trans("sankeyChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("sankeyChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("sankeyChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("sankeyChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+        {children.curveness.propertyView({ label: trans("sankeyChart.curveness"), tooltip: trans("sankeyChart.curvenessTooltip") })}
+        {children.opacity.propertyView({ label: trans("sankeyChart.opacity"), tooltip: trans("sankeyChart.opacityTooltip") })}
+        {children.nodeWidth.propertyView({ label: trans("sankeyChart.nodeWidth"), tooltip: trans("sankeyChart.nodeWidthTooltip") })}
+        {children.nodeGap.propertyView({ label: trans("sankeyChart.nodeGap"), tooltip: trans("sankeyChart.nodeGapTooltip") })}
+
+
+        {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
+        {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
+        {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.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.lineStyle}>
+        {children.lineStyle?.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>
     </>
   );

diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.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,13 +137,17 @@ 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),
+      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",
     "formatter": "{a} <br/>{b} : {c}%"
@@ -150,19 +156,32 @@ export function getEchartsConfig(
     {
       "name": props.echartsConfig.type,
       "type": props.echartsConfig.type,
-      "left": "10%",
-      "top": 60,
-      "bottom": 60,
-      "width": "80%",
-      "min": 0,
-      "max": 100,
-      "gap": 2,
+      left: `${props?.left}%`,
+      right: `${props?.right}%`,
+      bottom: `${props?.bottom}%`,
+      top: `${props?.top}%`,
       "label": {
         "show": true,
-        "position": props.echartsLabelConfig.top
+        "position": props.echartsLabelConfig.top,
+        ...styleWrapper(props?.detailStyle, theme?.detailStyle,15)
+      },
+      "data": props.echartsOption?.data?.map(item => ({name: item.name, itemStyle: {color: item.color}})),
+      "links":props.echartsOption.links,
+      emphasis: {
+        focus: props?.focus ? 'adjacency' : undefined,
+      },
+      lineStyle: {
+        ...chartStyleWrapper(props?.lineStyle, theme?.lineStyle),
+        color: 'gradient',
+        curveness: props?.curveness,
+        opacity: props?.opacity,
+      },
+      itemStyle: {
+        ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
       },
-      "data": props.echartsOption.data,
-      "links":props.echartsOption.links
+      nodeWidth: props?.nodeWidth,
+      nodeGap: props?.nodeGap,
+      draggable: props?.draggable,
     }
   ]
 }

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -42,15 +42,15 @@ export const en = {
     curveness: "Curveness",
     lineWidth: "Line Width",
     arrowFlag: "Arrow",
-    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.",
+    arrowSizeTooltip: "Set the Arrow Size of the Chart.",
+    pointSizeTooltip: "Set the Point Size of the Chart.",
+    repulsionTooltip: "Set the Repulsion of the Chart.",
+    gravityTooltip: "Set the Gravity of the Chart.",
+    lineLengthTooltip: "Set the Line length of the Chart.",
+    lineWidthTooltip: "Set 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",
+    curvenessTooltip: "Set the Curveness of the Chart.",
     defaultArrowSize: "10",
     defaultPointSize: "15",
     defaultRepulsion: "100",
@@ -134,6 +134,30 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Sankey Chart',
     tooltip: 'Tooltip',
+    curveness: "Curveness",
+    defaultCurveness: "0.5",
+    curvenessTooltip: "Select the Curveness of the Chart.",
+    opacity: "Opacity",
+    defaultOpacity: "0.5",
+    opacityTooltip: "Set the opacity of the Chart.",
+    nodeWidth: "Node Width",
+    defaultNodeWidth: "20",
+    nodeWidthTooltip: "Change the width of the Node",
+    nodeGap: "Node Gap",
+    defaultNodeGap: "10",
+    nodeGapTooltip: "Set the gap value between the Lines.",
+    draggable: "Draggable",
+    draggableTooltip: "Set whether the node is draggable or not.",
+    focus: "Focus",
+    focusTooltip: "Set whether to enable or disable adjacency when an item is focused.",
+    left: 'Left',
+    defaultLeft:'15',
+    right: 'Right',
+    defaultRight:'10',
+    top: 'Top',
+    defaultTop:'15',
+    bottom: 'Bottom',
+    defaultBottom:'10',
   },
   funnelChart: {
     title: 'Title',

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
@@ -292,17 +292,18 @@ export const enObj: I18nObjects = {
   },
   defaultSankeyChartOption: {
     data: [
-      {name: "Show"},
-      {name: "Click"},
-      {name: "Visit"},
-      {name: "Query"},
-      {name: "Buy"}
+      {name: "Category A", color: '#67F9D8'},
+      {name: "Category B", color: '#FFE434'},
+      {name: "Category C", color: '#56A3F1'},
+      {name: "Category D", color: '#FF917C'},
+      {name: "Category E", color: '#FF6347'}
     ],
     links: [
-      {source: "Show", target: "Click", value: 80},
-      {source: "Click", target: "Visit", value: 60},
-      {source: "Visit", target: "Query", value: 40},
-      {source: "Query", target: "Buy", value: 20}
+      { source: 'Category A', target: 'Category B', value: 10 },
+      { source: 'Category A', target: 'Category C', value: 15 },
+      { source: 'Category B', target: 'Category D', value: 25 },
+      { source: 'Category C', target: 'Category D', value: 20 },
+      { source: 'Category D', target: 'Category E', value: 30 }
     ]
   },
   defaultCandleStickChartOption: {

diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx
@@ -15,9 +15,9 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo
     "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
     "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
     "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
-    "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
-    "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
-    "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number)
+    "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0],
+    "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1],
+    "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0]
   }
 }
 

diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -188,6 +188,7 @@ export const sectionNames = {
   columnStyle:trans("prop.columnStyle"),
   modalStyle:trans("prop.modalStyle"),
   chartStyle:trans("prop.chartStyle"),
+  lineStyle:trans("prop.lineStyle"),
   titleStyle:trans("prop.titleStyle"),
   legendStyle:trans("prop.legendStyle"),
   detailStyle:trans("prop.detailStyle"),

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,6 +41,7 @@ export const en = {
     columnStyle: 'Column Style',
     modalStyle: 'Modal Style',
     chartStyle: "Chart Style",
+    lineStyle: "Line Style",
     titleStyle: "Title Style",
     legendStyle: "Legend Style",
     detailStyle: "Detail Style",

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2013,9 +2013,19 @@ export const EchartCandleStickChartStyle = [
   CHARTBORDERWIDTH,
 ] as const;
 
+export const SankeyLineStyle = [
+  CHARTSHADOWCOLOR,
+  CHARTBOXSHADOW,
+  CHARTBORDERCOLOR,
+  CHARTBORDERSTYLE,
+  CHARTBORDERRADIUS,
+  CHARTBORDERWIDTH,
+] as const;
+
 export const EchartDefaultDetailStyle = [
   CHARTBACKGROUNDCOLOR,
   DETAILSIZE,
+  PADDING,
   CHARTTEXTCOLOR,
   CHARTTEXTSIZE,
   CHARTTEXTWEIGHT,