Skip to content

Commit a1a817a

Browse files
Imiss-U1025Imiss-U1025
committed
Added control fields and style fields to sankey charts
1 parent 5e37980 commit a1a817a

File tree

11 files changed

+152
-46
lines changed

11 files changed

+152
-46
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ let chartJsonModeChildren: any = {
271271
arrowFlag: withDefault(BoolControl, true),
272272
legendVisibility: withDefault(BoolControl, true),
273273
}
274-
if (EchartsStyle) {
274+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
275275
chartJsonModeChildren = {
276276
...chartJsonModeChildren,
277277
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
145145
return getEchartsConfig(
146146
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
147147
chartSize,
148-
theme?.theme?.components?.candleStickChart || {},
148+
themeConfig
149149
);
150150
}, [chartSize, ...Object.values(echartsConfigChildren)]);
151151

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
SankeyLineStyle,
20+
EchartDefaultChartStyle,
21+
EchartDefaultTextStyle,
22+
RadarLabelStyle
2023
} from "lowcoder-sdk";
2124
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2225
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +34,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
3134
import { EChartsOption } from "echarts";
3235
import { i18nObjs, trans } from "i18n/comps";
3336
import { SankeyChartConfig } from "../chartComp/chartConfigs/sankeyChartConfig";
37+
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
38+
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
3439

3540
export const ChartTypeOptions = [
3641
{
@@ -252,15 +257,32 @@ let chartJsonModeChildren: any = {
252257
echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")),
253258
echartsLegendConfig: EchartsLegendConfig,
254259
echartsLabelConfig: EchartsLabelConfig,
260+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
261+
echartsTitleConfig:EchartsTitleConfig,
255262
echartsConfig: EchartsOptionComp,
256-
// style: styleControl(EchartsStyle, 'style'),
263+
264+
left:withDefault(NumberControl,trans('sankeyChart.defaultLeft')),
265+
right:withDefault(NumberControl,trans('sankeyChart.defaultRight')),
266+
top:withDefault(NumberControl,trans('sankeyChart.defaultTop')),
267+
bottom:withDefault(NumberControl,trans('sankeyChart.defaultBottom')),
268+
curveness:withDefault(NumberControl,trans('sankeyChart.defaultCurveness')),
269+
opacity:withDefault(NumberControl,trans('sankeyChart.defaultOpacity')),
270+
nodeWidth:withDefault(NumberControl,trans('sankeyChart.defaultNodeWidth')),
271+
nodeGap:withDefault(NumberControl,trans('sankeyChart.defaultNodeGap')),
272+
273+
draggable: withDefault(BoolControl, true),
274+
focus: withDefault(BoolControl, true),
257275
tooltip: withDefault(BoolControl, true),
258276
legendVisibility: withDefault(BoolControl, true),
259277
}
260-
if (EchartsStyle) {
278+
279+
if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {
261280
chartJsonModeChildren = {
262281
...chartJsonModeChildren,
263-
style: styleControl(EchartsStyle, 'style'),
282+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
283+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
284+
lineStyle: styleControl(SankeyLineStyle, 'lineStyle'),
285+
detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
264286
}
265287
}
266288

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,44 @@ export function sankeyChartPropertyView(
3131
</div>
3232
),
3333
})}
34+
35+
{children.echartsTitleConfig.getPropertyView()}
36+
{children.echartsTitleVerticalConfig.getPropertyView()}
3437
{children.echartsLabelConfig.getPropertyView()}
35-
{children.echartsTitle.propertyView({ label: trans("sankeyChart.title") })}
36-
{children.tooltip.propertyView({label: trans("sankeyChart.tooltip")})}
38+
39+
{children.echartsTitle.propertyView({ label: trans("sankeyChart.title"), tooltip: trans("echarts.titleTooltip") })}
40+
{children.left.propertyView({ label: trans("sankeyChart.left"), tooltip: trans("echarts.leftTooltip") })}
41+
{children.right.propertyView({ label: trans("sankeyChart.right"), tooltip: trans("echarts.rightTooltip") })}
42+
{children.top.propertyView({ label: trans("sankeyChart.top"), tooltip: trans("echarts.topTooltip") })}
43+
{children.bottom.propertyView({ label: trans("sankeyChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
44+
{children.curveness.propertyView({ label: trans("sankeyChart.curveness"), tooltip: trans("sankeyChart.curvenessTooltip") })}
45+
{children.opacity.propertyView({ label: trans("sankeyChart.opacity"), tooltip: trans("sankeyChart.opacityTooltip") })}
46+
{children.nodeWidth.propertyView({ label: trans("sankeyChart.nodeWidth"), tooltip: trans("sankeyChart.nodeWidthTooltip") })}
47+
{children.nodeGap.propertyView({ label: trans("sankeyChart.nodeGap"), tooltip: trans("sankeyChart.nodeGapTooltip") })}
48+
49+
50+
{children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
51+
{children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
52+
{children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
53+
3754
</Section>
3855
<Section name={sectionNames.interaction}>
3956
{children.onEvent.propertyView()}
4057
</Section>
41-
<Section name={sectionNames.style}>
42-
{children.style?.getPropertyView()}
58+
59+
<Section name={sectionNames.chartStyle}>
60+
{children.chartStyle?.getPropertyView()}
61+
</Section>
62+
<Section name={sectionNames.lineStyle}>
63+
{children.lineStyle?.getPropertyView()}
64+
</Section>
65+
<Section name={sectionNames.titleStyle}>
66+
{children.titleStyle?.getPropertyView()}
4367
</Section>
68+
<Section name={sectionNames.detailStyle}>
69+
{children.detailStyle?.getPropertyView()}
70+
</Section>
71+
4472
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
4573
</>
4674
);

‎client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
1212
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
15+
import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1517

1618
export function transformData(
1719
originData: JSONObject[],
@@ -135,13 +137,17 @@ export function getEchartsConfig(
135137
): EChartsOptionWithMap {
136138
if (props.mode === "json") {
137139
let opt={
138-
"title": {
139-
"text": props.echartsTitle,
140-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
141-
"left":"center"
142-
},
143-
"backgroundColor": props?.style?.background || theme?.style?.background,
144-
"color": props.echartsOption.data?.map(data => data.color),
140+
title: {
141+
text: props?.echartsTitle,
142+
top: props?.echartsTitleVerticalConfig.top,
143+
left: props?.echartsTitleConfig.top,
144+
textStyle: {
145+
...styleWrapper(props?.titleStyle, theme?.titleStyle)
146+
}
147+
},
148+
backgroundColor: parseBackground(
149+
props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"
150+
),
145151
"tooltip": props.tooltip&&{
146152
"trigger": "item",
147153
"formatter": "{a} <br/>{b} : {c}%"
@@ -150,19 +156,32 @@ export function getEchartsConfig(
150156
{
151157
"name": props.echartsConfig.type,
152158
"type": props.echartsConfig.type,
153-
"left": "10%",
154-
"top": 60,
155-
"bottom": 60,
156-
"width": "80%",
157-
"min": 0,
158-
"max": 100,
159-
"gap": 2,
159+
left: `${props?.left}%`,
160+
right: `${props?.right}%`,
161+
bottom: `${props?.bottom}%`,
162+
top: `${props?.top}%`,
160163
"label": {
161164
"show": true,
162-
"position": props.echartsLabelConfig.top
165+
"position": props.echartsLabelConfig.top,
166+
...styleWrapper(props?.detailStyle, theme?.detailStyle,15)
167+
},
168+
"data": props.echartsOption?.data?.map(item => ({name: item.name, itemStyle: {color: item.color}})),
169+
"links":props.echartsOption.links,
170+
emphasis: {
171+
focus: props?.focus ? 'adjacency' : undefined,
172+
},
173+
lineStyle: {
174+
...chartStyleWrapper(props?.lineStyle, theme?.lineStyle),
175+
color: 'gradient',
176+
curveness: props?.curveness,
177+
opacity: props?.opacity,
178+
},
179+
itemStyle: {
180+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
163181
},
164-
"data": props.echartsOption.data,
165-
"links":props.echartsOption.links
182+
nodeWidth: props?.nodeWidth,
183+
nodeGap: props?.nodeGap,
184+
draggable: props?.draggable,
166185
}
167186
]
168187
}

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

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ export const en = {
4242
curveness: "Curveness",
4343
lineWidth: "Line Width",
4444
arrowFlag: "Arrow",
45-
arrowSizeTooltip: "Select the Arrow Size of the Chart.",
46-
pointSizeTooltip: "Select the Point Size of the Chart.",
47-
repulsionTooltip: "Select the Repulsion of the Chart.",
48-
gravityTooltip: "Select the Gravity of the Chart.",
49-
lineLengthTooltip: "Select the Line length of the Chart.",
50-
lineWidthTooltip: "Select the Line width of the Chart.",
45+
arrowSizeTooltip: "Set the Arrow Size of the Chart.",
46+
pointSizeTooltip: "Set the Point Size of the Chart.",
47+
repulsionTooltip: "Set the Repulsion of the Chart.",
48+
gravityTooltip: "Set the Gravity of the Chart.",
49+
lineLengthTooltip: "Set the Line length of the Chart.",
50+
lineWidthTooltip: "Set the Line width of the Chart.",
5151
arrowFlagTooltip: "Show or hide the Arrow of the Chart.",
5252
tooltipTooltip: "Show or hide the Tooltip of the Chart.",
53-
curvenessTooltip: "defaultCurveness",
53+
curvenessTooltip: "Set the Curveness of the Chart.",
5454
defaultArrowSize: "10",
5555
defaultPointSize: "15",
5656
defaultRepulsion: "100",
@@ -134,6 +134,30 @@ export const en = {
134134
title: 'Title',
135135
defaultTitle: 'Sankey Chart',
136136
tooltip: 'Tooltip',
137+
curveness: "Curveness",
138+
defaultCurveness: "0.5",
139+
curvenessTooltip: "Select the Curveness of the Chart.",
140+
opacity: "Opacity",
141+
defaultOpacity: "0.5",
142+
opacityTooltip: "Set the opacity of the Chart.",
143+
nodeWidth: "Node Width",
144+
defaultNodeWidth: "20",
145+
nodeWidthTooltip: "Change the width of the Node",
146+
nodeGap: "Node Gap",
147+
defaultNodeGap: "10",
148+
nodeGapTooltip: "Set the gap value between the Lines.",
149+
draggable: "Draggable",
150+
draggableTooltip: "Set whether the node is draggable or not.",
151+
focus: "Focus",
152+
focusTooltip: "Set whether to enable or disable adjacency when an item is focused.",
153+
left: 'Left',
154+
defaultLeft:'15',
155+
right: 'Right',
156+
defaultRight:'10',
157+
top: 'Top',
158+
defaultTop:'15',
159+
bottom: 'Bottom',
160+
defaultBottom:'10',
137161
},
138162
funnelChart: {
139163
title: 'Title',

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -292,17 +292,18 @@ export const enObj: I18nObjects = {
292292
},
293293
defaultSankeyChartOption: {
294294
data: [
295-
{name: "Show"},
296-
{name: "Click"},
297-
{name: "Visit"},
298-
{name: "Query"},
299-
{name: "Buy"}
295+
{name: "Category A", color: '#67F9D8'},
296+
{name: "Category B", color: '#FFE434'},
297+
{name: "Category C", color: '#56A3F1'},
298+
{name: "Category D", color: '#FF917C'},
299+
{name: "Category E", color: '#FF6347'}
300300
],
301301
links: [
302-
{source: "Show", target: "Click", value: 80},
303-
{source: "Click", target: "Visit", value: 60},
304-
{source: "Visit", target: "Query", value: 40},
305-
{source: "Query", target: "Buy", value: 20}
302+
{ source: 'Category A', target: 'Category B', value: 10 },
303+
{ source: 'Category A', target: 'Category C', value: 15 },
304+
{ source: 'Category B', target: 'Category D', value: 25 },
305+
{ source: 'Category C', target: 'Category D', value: 20 },
306+
{ source: 'Category D', target: 'Category E', value: 30 }
306307
]
307308
},
308309
defaultCandleStickChartOption: {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo
1515
"borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
1616
"borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
1717
"backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
18-
"width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
19-
"height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
20-
"padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number)
18+
"width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0],
19+
"height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1],
20+
"padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0]
2121
}
2222
}
2323

‎client/packages/lowcoder-design/src/components/Section.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ export const sectionNames = {
188188
columnStyle:trans("prop.columnStyle"),
189189
modalStyle:trans("prop.modalStyle"),
190190
chartStyle:trans("prop.chartStyle"),
191+
lineStyle:trans("prop.lineStyle"),
191192
titleStyle:trans("prop.titleStyle"),
192193
legendStyle:trans("prop.legendStyle"),
193194
detailStyle:trans("prop.detailStyle"),

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const en = {
4141
columnStyle: 'Column Style',
4242
modalStyle: 'Modal Style',
4343
chartStyle: "Chart Style",
44+
lineStyle: "Line Style",
4445
titleStyle: "Title Style",
4546
legendStyle: "Legend Style",
4647
detailStyle: "Detail Style",

0 commit comments

Comments
 (0)