Skip to content

Commit 5e37980

Browse files
Imiss-U1025Imiss-U1025
committed
Added control fields and style fields to radar charts
1 parent 319a002 commit 5e37980

File tree

10 files changed

+191
-55
lines changed

10 files changed

+191
-55
lines changed

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
AlignBottom,
33
AlignTop,
4+
AlignClose,
45
dropdownControl,
56
MultiCompBuilder,
67
} from "lowcoder-sdk";
@@ -12,6 +13,10 @@ const LegendPositionOptions = [
1213
label: <AlignBottom />,
1314
value: "bottom",
1415
},
16+
{
17+
label: <AlignClose />,
18+
value: "center",
19+
},
1520
{
1621
label: <AlignTop />,
1722
value: "top",

‎client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export function getEchartsConfig(
144144
...styleWrapper(props?.titleStyle, theme?.titleStyle)
145145
}
146146
},
147-
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
147+
backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
148148
tooltip: props?.tooltip && {
149149
position: "top"
150150
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (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/radarChartComp/radarChartConstants.tsx

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartDefaultChartStyle,
20+
EchartDefaultTextStyle,
21+
RadarLabelStyle
2022
} from "lowcoder-sdk";
2123
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2224
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +33,10 @@ import { SeriesListComp } from "../chartComp/seriesComp";
3133
import { EChartsOption } from "echarts";
3234
import { i18nObjs, trans } from "i18n/comps";
3335
import { RadarChartConfig } from "comps/chartComp/chartConfigs/radarChartConfig";
36+
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
37+
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
38+
import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
39+
import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
3440

3541
export const ChartTypeOptions = [
3642
{
@@ -252,15 +258,31 @@ let chartJsonModeChildren: any = {
252258
echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")),
253259
echartsLegendConfig: EchartsLegendConfig,
254260
echartsLabelConfig: EchartsLabelConfig,
261+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
262+
echartsTitleConfig:EchartsTitleConfig,
255263
echartsConfig: EchartsOptionComp,
264+
echartsLegendOrientConfig: EchartsLegendOrientConfig,
265+
echartsLegendAlignConfig: EchartsLegendAlignConfig,
266+
267+
position_x:withDefault(NumberControl,trans('radarChart.defaultPosition_X')),
268+
position_y:withDefault(NumberControl,trans('radarChart.defaultPosition_Y')),
269+
radius:withDefault(NumberControl,trans('radarChart.defaultRadius')),
270+
splitNumber:withDefault(NumberControl,trans('radarChart.defaultSplitNumber')),
271+
startAngle:withDefault(NumberControl,trans('radarChart.defaultStartAngle')),
256272
// style: styleControl(EchartsStyle, 'style'),
273+
areaFlag:withDefault(BoolControl, true),
257274
tooltip: withDefault(BoolControl, true),
258275
legendVisibility: withDefault(BoolControl, true),
276+
indicatorVisibility: withDefault(BoolControl, true),
259277
}
260-
if (EchartsStyle) {
278+
279+
if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle) {
261280
chartJsonModeChildren = {
262281
...chartJsonModeChildren,
263-
style: styleControl(EchartsStyle, 'style'),
282+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
283+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
284+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
285+
detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
264286
}
265287
}
266288

‎client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,44 @@ export function radarChartPropertyView(
3131
</div>
3232
),
3333
})}
34-
{children.echartsTitle.propertyView({ label: trans("radarChart.title") })}
35-
{children.tooltip.propertyView({label: trans("radarChart.tooltip")})}
34+
35+
{children.echartsTitleConfig.getPropertyView()}
36+
{children.echartsTitleVerticalConfig.getPropertyView()}
37+
{children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
38+
{children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
39+
{children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
40+
{children.echartsTitle.propertyView({ label: trans("radarChart.title"), tooltip: trans("echarts.titleTooltip") })}
41+
{children.radius.propertyView({ label: trans("radarChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
42+
{children.startAngle.propertyView({ label: trans("radarChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
43+
{children.splitNumber.propertyView({ label: trans("radarChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
44+
{children.position_x.propertyView({ label: trans("radarChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
45+
{children.position_y.propertyView({ label: trans("radarChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
46+
47+
{children.areaFlag.propertyView({label: trans("radarChart.areaFlag"), tooltip: trans("radarChart.areaFlagTooltip")})}
48+
{children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})}
49+
{children.indicatorVisibility.propertyView({label: trans("radarChart.indicatorVisibility"), tooltip: trans("radarChart.indicatorVisibilityTooltip")})}
3650
</Section>
3751
<Section name={sectionNames.interaction}>
3852
{children.onEvent.propertyView()}
3953
</Section>
40-
<Section name={sectionNames.style}>
41-
{children.style?.getPropertyView()}
54+
<Section name={sectionNames.chartStyle}>
55+
{children.chartStyle?.getPropertyView()}
56+
</Section>
57+
<Section name={sectionNames.titleStyle}>
58+
{children.titleStyle?.getPropertyView()}
4259
</Section>
60+
{
61+
children.indicatorVisibility.getView() ?
62+
<Section name={sectionNames.labelStyle}>
63+
{children.detailStyle?.getPropertyView()}
64+
</Section> : <></>
65+
}
66+
{
67+
children.legendVisibility.getView() ?
68+
<Section name={sectionNames.legendStyle}>
69+
{children.legendStyle?.getPropertyView()}
70+
</Section> : <></>
71+
}
4372
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
4473
</>
4574
);

‎client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts

Lines changed: 76 additions & 25 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[],
@@ -134,33 +136,82 @@ export function getEchartsConfig(
134136
theme?: any,
135137
): EChartsOptionWithMap {
136138
if (props.mode === "json") {
139+
console.log(props?.detailStyle?.detailSize?.split('px')[0] || theme?.detailStyle?.detailSize.split('px')[0] || 3,
140+
props?.detailStyle?.detailSize?.split('px')[1] || theme?.detailStyle?.detailSize.split('px')[1] || 3)
137141
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),
145-
"tooltip": {
146-
"trigger": "axis",
147-
"formatter": function(params) {
148-
let tooltipText = params[0].name + '<br/>';
149-
params.forEach(function(item) {
150-
tooltipText += item.seriesName + ': ' + item.value + '<br/>';
151-
});
152-
return tooltipText;
153-
}
154-
},
155-
"radar": [
156-
{
157-
"indicator": props.echartsOption.indicator,
158-
"center": ["50%", "50%"],
159-
"radius": "60%"
160-
}
142+
title: {
143+
text: props?.echartsTitle,
144+
top: props?.echartsTitleVerticalConfig.top,
145+
left: props?.echartsTitleConfig.top,
146+
textStyle: {
147+
...styleWrapper(props?.titleStyle, theme?.titleStyle)
148+
}
149+
},
150+
legend: props.legendVisibility && {
151+
top: props.echartsLegendConfig.top,
152+
left: props.echartsLegendAlignConfig.left,
153+
orient: props.echartsLegendOrientConfig.orient,
154+
textStyle: {
155+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 15),
156+
}
157+
},
158+
backgroundColor: parseBackground(
159+
props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"
160+
),
161+
color: props.echartsOption.data?.map(data => data.color),
162+
tooltip: {
163+
trigger: "axis",
164+
formatter: function (params) {
165+
let tooltipText = params[0].name + '<br/>';
166+
params.forEach(function (item) {
167+
tooltipText += item.seriesName + ': ' + item.value + '<br/>';
168+
});
169+
return tooltipText;
170+
}
171+
},
172+
radar: [
173+
{
174+
indicator: props.echartsOption.indicator,
175+
center: [`${props?.position_x}%`, `${props?.position_y}%`],
176+
startAngle: props?.startAngle,
177+
endAngle: props?.endAngle,
178+
splitNumber: props?.splitNumber,
179+
radius: `${props.radius}%`,
180+
shape: props?.areaFlag ? 'circle' : 'line',
181+
axisName: {
182+
...styleWrapper(props?.detailStyle, theme?.detailStyle, 13),
183+
show: props?.indicatorVisibility,
184+
},
185+
splitArea: {
186+
areaStyle: {
187+
color: props?.echartsOption?.color,
188+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
189+
}
190+
},
191+
}
192+
],
193+
series: props?.echartsOption && {
194+
data: props?.echartsOption?.series && [
195+
...props?.echartsOption?.series.map(item => ({
196+
...item,
197+
areaStyle: item.areaColor && {
198+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
199+
color: item.areaColor
200+
},
201+
lineStyle: {
202+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle),
203+
color: item.lineColor,
204+
width: item.lineWidth,
205+
},
206+
symbolSize: item.pointSize,
207+
itemStyle: {
208+
color: item.pointColor
209+
}
210+
}))
161211
],
162-
"series": props.echartsOption.series.map(option=>{return {...option,type:'radar'}})
163-
}
212+
type: "radar"
213+
}
214+
}
164215
return props.echartsOption ? opt : {};
165216

166217
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,21 @@ export const en = {
8787
radarType: 'Radar Chart Type',
8888
title: 'Title',
8989
defaultTitle: 'Radar Chart',
90+
radius: 'Radius',
91+
defaultRadius: '60',
92+
defaultStartAngle: '90',
93+
startAngle: 'Start Angle',
94+
defaultSplitNumber: '5',
95+
position_x: 'Position-X',
96+
defaultPosition_X: '50',
97+
position_y: 'Position-Y',
98+
defaultPosition_Y: '50',
99+
splitNumber: 'Split Number',
90100
tooltip: 'Tooltip',
101+
areaFlag: 'Area Flag',
102+
areaFlagTooltip: "Divide the area into a Line or a Circle.",
103+
indicatorVisibility: "Indicator",
104+
indicatorVisibilityTooltip: "Show or hide the Indicator of the Chart.",
91105
},
92106
candleStickChart: {
93107
candleStickType: 'CandleStick Chart Type',
@@ -223,6 +237,7 @@ export const en = {
223237

224238
},
225239
echarts: {
240+
legendVisibility: 'Legend',
226241
defaultTitle: "Data Display",
227242
legendPosition: "Legend-Y",
228243
legendOrient: "Legend Orient",

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

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -325,32 +325,29 @@ export const enObj: I18nObjects = {
325325
}
326326
},
327327
defaultRadarChartOption: {
328+
color: ['#6ee1d5', '#a7dd85'],
328329
indicator: [
329-
{ name: "Indicator 1", max: 100 },
330-
{ name: "Indicator 2", max: 100 },
331-
{ name: "Indicator 3", max: 100 },
332-
{ name: "Indicator 4", max: 100 },
333-
{ name: "Indicator 5", max: 100 }
330+
{ name: "Indicator 1", max: 100 },
331+
{ name: "Indicator 2", max: 100 },
332+
{ name: "Indicator 3", max: 100 },
333+
{ name: "Indicator 4", max: 100 },
334+
{ name: "Indicator 5", max: 100 },
335+
{ name: "Indicator 6", max: 100 }
334336
],
335337
series: [
336-
{
337-
"name": "Data 1",
338-
"data": [
339-
{
340-
"value": [90, 80, 70, 60, 50],
341-
"name": "Data 1"
342-
}
343-
]
338+
{
339+
"name": "Data A",
340+
"value": [90, 80, 70, 70, 80, 70],
344341
},
345342
{
346-
"name": "Data 2",
347-
"data": [
348-
{
349-
"value": [70, 60, 50, 40, 30],
350-
"name": "Data 2"
351-
}
352-
]
353-
}
343+
name: "Data B",
344+
value: [60, 60, 40, 50, 50, 40],
345+
areaColor: '#ff00ff77',
346+
lineColor: '#ff00ff77',
347+
lineWidth: 2,
348+
pointSize: 8,
349+
pointColor: "#ff00ff77",
350+
}
354351
]
355352
},
356353
defaultHeatmapChartOption: {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo
1717
"backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
1818
"width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
1919
"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)
2021
}
2122
}
2223

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2029,6 +2029,22 @@ export const EchartDefaultDetailStyle = [
20292029
CHARTBORDERWIDTH,
20302030
] as const;
20312031

2032+
export const RadarLabelStyle = [
2033+
CHARTBACKGROUNDCOLOR,
2034+
PADDING,
2035+
CHARTTEXTCOLOR,
2036+
CHARTTEXTSIZE,
2037+
CHARTTEXTWEIGHT,
2038+
CHARTFONTFAMILY,
2039+
CHARTFONTSTYLE,
2040+
CHARTSHADOWCOLOR,
2041+
CHARTBOXSHADOW,
2042+
CHARTBORDERCOLOR,
2043+
CHARTBORDERSTYLE,
2044+
CHARTBORDERRADIUS,
2045+
CHARTBORDERWIDTH,
2046+
] as const;
2047+
20322048
export const CalendarStyle = [
20332049
getBackground("primarySurface"),
20342050
{

0 commit comments

Comments
 (0)