Skip to content

Commit 407deca

Browse files
Imiss-U1025Imiss-U1025
committed
polar line chart
1 parent 48c10a0 commit 407deca

File tree

4 files changed

+62
-43
lines changed

4 files changed

+62
-43
lines changed

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,12 +238,12 @@ export function getEchartsConfig(
238238
},
239239
radiusAxis: {
240240
type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
241-
data: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.labelData:undefined,
241+
data: props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
242242
max: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.radiusAxisMax || undefined,
243243
},
244244
angleAxis: {
245245
type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
246-
data: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.labelData,
246+
data: !props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
247247
max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
248248
startAngle: props.chartConfig.polarData.polarStartAngle,
249249
endAngle: props.chartConfig.polarData.polarEndAngle,

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
Option,
88
valueComp,
99
genRandomKey,
10+
jsonControl,
11+
toArray,
1012
showLabelPropertyView,
1113
withContext,
1214
RedButton,
@@ -77,9 +79,17 @@ export const LineChartConfig = (function () {
7779
stacked: BoolControl,
7880
area: BoolControl,
7981
smooth: BoolControl,
82+
polar: BoolControl,
8083
itemColor: ItemColorComp,
8184
symbol: dropdownControl(SymbolOptions, "emptyCircle"),
8285
symbolSize: withDefault(NumberControl, 4),
86+
radiusAxisMax: NumberControl,
87+
polarRadiusStart: withDefault(StringControl, '30'),
88+
polarRadiusEnd: withDefault(StringControl, '80%'),
89+
polarStartAngle: withDefault(NumberControl, 90),
90+
polarEndAngle: withDefault(NumberControl, -180),
91+
polarIsTangent: withDefault(BoolControl, false),
92+
labelData: jsonControl(toArray, []),
8393
},
8494
(props): LineSeriesOption => {
8595
const config: LineSeriesOption = {
@@ -94,7 +104,7 @@ export const LineChartConfig = (function () {
94104
if (!params.encode || !params.dimensionNames) {
95105
return params.color;
96106
}
97-
const dataKey = params.dimensionNames[params.encode["y"][0]];
107+
const dataKey = params.dimensionNames[params.encode[props.polar?"radius":"y"][0]];
98108
const color = (props.itemColor as any)({
99109
seriesName: params.seriesName,
100110
value: (params.data as any)[dataKey],
@@ -107,6 +117,16 @@ export const LineChartConfig = (function () {
107117
return color;
108118
},
109119
},
120+
polarData: {
121+
polar: props.polar,
122+
radiusAxisMax: props.radiusAxisMax,
123+
polarRadiusStart: props.polarRadiusStart,
124+
polarRadiusEnd: props.polarRadiusEnd,
125+
polarStartAngle: props.polarStartAngle,
126+
polarEndAngle: props.polarEndAngle,
127+
labelData: props.labelData,
128+
polarIsTangent: props.polarIsTangent,
129+
},
110130
};
111131
if (props.stacked) {
112132
config.stack = "stackValue";
@@ -124,6 +144,9 @@ export const LineChartConfig = (function () {
124144
distance: 20
125145
}
126146
}
147+
if (props.polar) {
148+
config.coordinateSystem = 'polar';
149+
}
127150
return config;
128151
}
129152
)
@@ -135,17 +158,41 @@ export const LineChartConfig = (function () {
135158
{children.area.propertyView({
136159
label: trans("lineChart.area"),
137160
})}
161+
{children.polar.propertyView({
162+
label: trans("lineChart.polar"),
163+
})}
164+
{children.polar.getView() && children.polarIsTangent.propertyView({
165+
label: trans("barChart.polarIsTangent"),
166+
})}
167+
{children.polar.getView() && children.polarStartAngle.propertyView({
168+
label: trans("barChart.polarStartAngle"),
169+
})}
170+
{children.polar.getView() && children.polarEndAngle.propertyView({
171+
label: trans("barChart.polarEndAngle"),
172+
})}
173+
{children.polar.getView() && children.radiusAxisMax.propertyView({
174+
label: trans("barChart.radiusAxisMax"),
175+
})}
176+
{children.polar.getView() && children.polarRadiusStart.propertyView({
177+
label: trans("barChart.polarRadiusStart"),
178+
})}
179+
{children.polar.getView() && children.polarRadiusEnd.propertyView({
180+
label: trans("barChart.polarRadiusEnd"),
181+
})}
182+
{children.polar.getView() && children.labelData.propertyView({
183+
label: trans("barChart.polarLabelData"),
184+
})}
138185
{showLabelPropertyView(children)}
139186
{children.showEndLabel.propertyView({
140187
label: trans("lineChart.showEndLabel"),
141188
})}
189+
{children.smooth.propertyView({ label: trans("chart.smooth") })}
142190
{children.symbol.propertyView({
143191
label: trans("lineChart.symbol"),
144192
})}
145193
{children.symbolSize.propertyView({
146194
label: trans("lineChart.symbolSize"),
147195
})}
148-
{children.smooth.propertyView({ label: trans("chart.smooth") })}
149196
{children.itemColor.getPropertyView()}
150197
</>
151198
))

‎client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts‎

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export const echartsConfigOmitChildren = [
6666
type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
6767

6868

69-
export function isAxisChart(type: CharOptionCompType, subtype: string) {
70-
return !notAxisChartSet.has(type) && !notAxisChartSubtypeSet.has(subtype);
69+
export function isAxisChart(type: CharOptionCompType, polar: boolean) {
70+
return !notAxisChartSet.has(type) && !polar;
7171
}
7272

7373
export function getSeriesConfig(props: EchartsConfigProps) {
@@ -79,27 +79,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
7979
}
8080
const seriesLength = visibleSeries.length;
8181
return visibleSeries.map((s, index) => {
82-
if (isAxisChart(props.chartConfig.type, props.chartConfig.subtype)) {
82+
if (isAxisChart(props.chartConfig.type, props.chartConfig.polarData.polar)) {
8383
let encodeX: string, encodeY: string;
8484
const horizontalX = props.xAxisDirection === "horizontal";
8585
let itemStyle = props.chartConfig.itemStyle;
86-
// FIXME: need refactor... chartConfig returns a function with paramters
87-
if (props.chartConfig.type === "bar") {
88-
// barChart's border radius, depend on x-axis direction and stack state
89-
const borderRadius = horizontalX ? [2, 2, 0, 0] : [0, 2, 2, 0];
90-
if (props.chartConfig.stack && index === visibleSeries.length - 1) {
91-
itemStyle = { ...itemStyle, borderRadius: borderRadius };
92-
} else if (!props.chartConfig.stack) {
93-
itemStyle = { ...itemStyle, borderRadius: borderRadius };
94-
}
9586

96-
if(props.chartConfig.subtype === "waterfall" && index === 0) {
97-
itemStyle = {
98-
borderColor: 'transparent',
99-
color: 'transparent'
100-
}
101-
}
102-
}
10387
if (horizontalX) {
10488
encodeX = props.xAxisKey;
10589
encodeY = s.getView().columnName;
@@ -112,7 +96,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
11296
position: horizontalX?"top":"right",
11397
}}, {[horizontalX?"xAxis":"yAxis"]: area.getView().to}]));
11498
return {
115-
name: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().seriesName,
99+
name: s.getView().seriesName,
116100
selectedMode: "single",
117101
select: {
118102
itemStyle: {
@@ -166,7 +150,7 @@ export function getEchartsConfig(
166150
theme?: any,
167151
): EChartsOptionWithMap {
168152
// axisChart
169-
const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.subtype);
153+
const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.polarData.polar);
170154
const gridPos = {
171155
left: `${props?.left}%`,
172156
right: `${props?.right}%`,
@@ -246,34 +230,20 @@ export function getEchartsConfig(
246230
let transformedData =
247231
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames);
248232

249-
if(props.chartConfig.subtype === "waterfall") {
250-
config.legend = undefined;
251-
let sum = transformedData.reduce((acc, item) => {
252-
if(typeof item[seriesColumnNames[0]] === 'number') return acc + item[seriesColumnNames[0]];
253-
else return acc;
254-
}, 0)
255-
const total = sum;
256-
transformedData.map(d => {
257-
d[` `] = sum - d[seriesColumnNames[0]];
258-
sum = d[` `];
259-
})
260-
transformedData = [{[seriesColumnNames[0] + "_placeholder"]: 0, [seriesColumnNames[0]]: total}, ...transformedData]
261-
}
262-
263-
if(props.chartConfig.subtype === "polar") {
233+
if(props.chartConfig.polarData.polar) {
264234
config = {
265235
...config,
266236
polar: {
267237
radius: [props.chartConfig.polarData.polarRadiusStart, props.chartConfig.polarData.polarRadiusEnd],
268238
},
269239
radiusAxis: {
270240
type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
271-
data: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.labelData:undefined,
241+
data: props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
272242
max: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.radiusAxisMax || undefined,
273243
},
274244
angleAxis: {
275245
type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
276-
data: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.labelData,
246+
data: !props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
277247
max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
278248
startAngle: props.chartConfig.polarData.polarStartAngle,
279249
endAngle: props.chartConfig.polarData.polarEndAngle,
@@ -364,6 +334,7 @@ export function getEchartsConfig(
364334
}
365335
}
366336
}
337+
console.log("config", config);
367338

368339
// log.log("Echarts transformedData and config", transformedData, config);
369340
return config;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ export const en = {
315315
lineChart: {
316316
markLines: "Mark Lines",
317317
markAreas: "Mark Areas",
318-
stacked: "Stacked",
318+
stacked: "Stacked Chart",
319319
area: "Area Chart",
320320
max: "Max",
321321
min: "Min",
@@ -337,6 +337,7 @@ export const en = {
337337
middle: "Middle",
338338
end: "End",
339339
step: "Step",
340+
polar: "Polar Chart",
340341
},
341342
barChart: {
342343
title: 'Title',

0 commit comments

Comments
 (0)