Skip to content

Commit 8d2427a

Browse files
Imiss-U1025Imiss-U1025
committed
show legends
1 parent be9ed2f commit 8d2427a

File tree

5 files changed

+17
-358
lines changed

5 files changed

+17
-358
lines changed

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export function getEchartsConfig(
276276
},
277277
};
278278
}
279-
// log.log("Echarts transformedData and config", transformedData, config);
279+
// console.log("Echarts transformedData and config", transformedData, config);
280280
return config;
281281
}
282282

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,6 @@ export const chartUiModeChildren = {
251251
legendConfig: LegendConfig,
252252
chartConfig: ChartOptionComp,
253253
areaPieces: list(AreaPiecesTmpComp),
254-
animationDuration: withDefault(NumberControl, 1000),
255254
onUIEvent: eventHandlerControl(UIEventOptions),
256255
};
257256

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartPropertyView.tsx

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export function pieChartPropertyView(
2727
<>
2828
<Section name={trans("chart.data")}>
2929
{children.chartConfig.getPropertyView()}
30-
{children.animationDuration.propertyView({label: trans("pieChart.animationDuration")})}
3130
<Dropdown
3231
value={children.xAxisKey.getView()}
3332
options={columnOptions}
@@ -83,42 +82,6 @@ export function pieChartPropertyView(
8382
onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
8483
dataIndex={(s) => s.getView().dataIndex}
8584
/>
86-
<Option
87-
items={children.areaPieces.getView()}
88-
title={trans("pieChart.areaPieces")}
89-
itemTitle={(s) => `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`}
90-
popoverTitle={(s) => trans("pieChart.areaPiece")}
91-
content={(s, index) => (
92-
<>
93-
{s.getPropertyView({label: "Type"})}
94-
{
95-
<RedButton
96-
onClick={() => {
97-
children.areaPieces.dispatch(children.areaPieces.deleteAction(index));
98-
}}
99-
>
100-
{trans("chart.delete")}
101-
</RedButton>
102-
}
103-
</>
104-
)}
105-
onAdd={() => {
106-
children.areaPieces.dispatch(
107-
children.areaPieces.pushAction(
108-
{}
109-
)
110-
);
111-
}}
112-
onMove={(fromIndex, toIndex) => {
113-
const action = children.areaPieces.arrayMoveAction(fromIndex, toIndex);
114-
children.areaPieces.dispatch(action);
115-
}}
116-
hide={(s) => true}
117-
onHide={(s, hide) => console.log("onHide")}
118-
dataIndex={(s) => {
119-
return s.getView().dataIndex;
120-
}}
121-
/>
12285
</Section>
12386
<Section name={sectionNames.interaction}>
12487
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

Lines changed: 16 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,6 @@ export function transformData(
5555
return transformedData;
5656
}
5757

58-
const notAxisChartSet: Set<CharOptionCompType> = new Set(["pie"] as const);
59-
const notAxisChartSubtypeSet: Set<string> = new Set(["polar"] as const);
6058
export const echartsConfigOmitChildren = [
6159
"hidden",
6260
"selectedPoints",
@@ -65,81 +63,23 @@ export const echartsConfigOmitChildren = [
6563
] as const;
6664
type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
6765

68-
69-
export function isAxisChart(type: CharOptionCompType, polar: boolean) {
70-
return !notAxisChartSet.has(type) && !polar;
71-
}
72-
7366
export function getSeriesConfig(props: EchartsConfigProps) {
7467
let visibleSeries = props.series.filter((s) => !s.getView().hide);
75-
if(props.chartConfig.subtype === "waterfall") {
76-
const seriesOn = visibleSeries[0];
77-
const seriesPlaceholder = visibleSeries[0];
78-
visibleSeries = [seriesPlaceholder, seriesOn];
79-
}
8068
const seriesLength = visibleSeries.length;
8169
return visibleSeries.map((s, index) => {
82-
if (isAxisChart(props.chartConfig.type, props.chartConfig.polarData?.polar)) {
83-
let encodeX: string, encodeY: string;
84-
const horizontalX = props.xAxisDirection === "horizontal";
85-
let itemStyle = props.chartConfig.itemStyle;
86-
87-
if (horizontalX) {
88-
encodeX = props.xAxisKey;
89-
encodeY = s.getView().columnName;
90-
} else {
91-
encodeX = s.getView().columnName;
92-
encodeY = props.xAxisKey;
93-
}
94-
const markLineData = s.getView().markLines.map(line => ({type: line.getView().type}));
95-
const markAreaData = s.getView().markAreas.map(area => ([{name: area.getView().name, [horizontalX?"xAxis":"yAxis"]: area.getView().from, label: {
96-
position: horizontalX?"top":"right",
97-
}}, {[horizontalX?"xAxis":"yAxis"]: area.getView().to}]));
98-
return {
99-
name: s.getView().seriesName,
100-
selectedMode: "single",
101-
select: {
102-
itemStyle: {
103-
borderColor: "#000",
104-
},
105-
},
106-
step: s.getView().step,
107-
encode: {
108-
x: encodeX,
109-
y: encodeY,
110-
},
111-
markLine: {
112-
data: markLineData,
113-
},
114-
markArea: {
115-
itemStyle: {
116-
color: 'rgba(255, 173, 177, 0.4)',
117-
},
118-
data: markAreaData,
119-
},
120-
// each type of chart's config
121-
...props.chartConfig,
122-
itemStyle: itemStyle,
123-
label: {
124-
...props.chartConfig.label,
125-
...(!horizontalX && { position: "outside" }),
126-
},
127-
};
128-
} else {
129-
// pie
130-
const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
131-
return {
132-
...props.chartConfig,
133-
radius: radiusAndCenter.radius,
134-
center: radiusAndCenter.center,
135-
name: s.getView().seriesName,
136-
selectedMode: "single",
137-
encode: {
138-
itemName: props.xAxisKey,
139-
value: s.getView().columnName,
140-
},
141-
};
142-
}
70+
// pie
71+
const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
72+
return {
73+
...props.chartConfig,
74+
radius: radiusAndCenter.radius,
75+
center: radiusAndCenter.center,
76+
name: s.getView().seriesName,
77+
selectedMode: "single",
78+
encode: {
79+
itemName: props.xAxisKey,
80+
value: s.getView().columnName,
81+
},
82+
};
14383
});
14484
}
14585

@@ -149,8 +89,6 @@ export function getEchartsConfig(
14989
chartSize?: ChartSize,
15090
theme?: any,
15191
): EChartsOptionWithMap {
152-
// axisChart
153-
const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.polarData?.polar);
15492
const gridPos = {
15593
left: `${props?.left}%`,
15694
right: `${props?.right}%`,
@@ -189,38 +127,13 @@ export function getEchartsConfig(
189127
...gridPos,
190128
containLabel: true,
191129
},
192-
animationDuration: props.animationDuration,
193130
};
194-
if (props.areaPieces.length > 0) {
195-
config.visualMap = {
196-
type: 'piecewise',
197-
show: false,
198-
dimension: 0,
199-
seriesIndex: 0,
200-
pieces: props.areaPieces?.filter(p => p.getView().from && p.getView().to && p.getView().color)?.map(p => (
201-
{
202-
...(p.getView().from?{min: parseInt(p.getView().from)}:{}),
203-
...(p.getView().to?{max: parseInt(p.getView().to)}:{}),
204-
...(p.getView().color?{color: p.getView().color}:{}),
205-
}
206-
))
207-
}
208-
}
209-
if(props.chartConfig.race) {
210-
config = {
211-
...config,
212-
// Disable init animation.
213-
animationDuration: 0,
214-
animationDurationUpdate: 2000,
215-
animationEasing: 'linear',
216-
animationEasingUpdate: 'linear',
217-
}
218-
}
131+
219132
if (props.data.length <= 0) {
220133
// no data
221134
return {
222135
...config,
223-
...(axisChart ? noDataAxisConfig : noDataPieChartConfig),
136+
...noDataPieChartConfig,
224137
};
225138
}
226139
const yAxisConfig = props.yConfig();
@@ -231,27 +144,6 @@ export function getEchartsConfig(
231144
let transformedData =
232145
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames);
233146

234-
if(props.chartConfig.polarData?.polar) {
235-
config = {
236-
...config,
237-
polar: {
238-
radius: [props.chartConfig.polarData.polarRadiusStart, props.chartConfig.polarData.polarRadiusEnd],
239-
},
240-
radiusAxis: {
241-
type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
242-
data: props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
243-
max: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.radiusAxisMax || undefined,
244-
},
245-
angleAxis: {
246-
type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
247-
data: !props.chartConfig.polarData.polarIsTangent && props.chartConfig.polarData.labelData.length!==0?props.chartConfig.polarData.labelData:undefined,
248-
max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
249-
startAngle: props.chartConfig.polarData.polarStartAngle,
250-
endAngle: props.chartConfig.polarData.polarEndAngle,
251-
},
252-
}
253-
}
254-
255147
config = {
256148
...config,
257149
dataset: [
@@ -273,70 +165,10 @@ export function getEchartsConfig(
273165
lineStyle: {
274166
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
275167
},
276-
data: transformedData.map((i: any) => i[series.name])
277168
})),
278169
};
279-
if (axisChart) {
280-
// pure chart's size except the margin around
281-
let chartRealSize;
282-
if (chartSize) {
283-
const rightSize =
284-
typeof gridPos.right === "number"
285-
? gridPos.right
286-
: (chartSize.w * parseFloat(gridPos.right)) / 100.0;
287-
chartRealSize = {
288-
// actually it's self-adaptive with the x-axis label on the left, not that accurate but work
289-
w: chartSize.w - gridPos.left - rightSize,
290-
// also self-adaptive on the bottom
291-
h: chartSize.h - gridPos.top - gridPos.bottom,
292-
right: rightSize,
293-
};
294-
}
295-
const finalXyConfig = calcXYConfig(
296-
props.xConfig,
297-
yAxisConfig,
298-
props.xAxisDirection,
299-
transformedData.map((d) => d[props.xAxisKey]),
300-
chartRealSize
301-
);
302-
config = {
303-
...config,
304-
// @ts-ignore
305-
xAxis: {
306-
...finalXyConfig.xConfig,
307-
axisLabel: {
308-
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
309-
},
310-
data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
311-
},
312-
// @ts-ignore
313-
yAxis: {
314-
...finalXyConfig.yConfig,
315-
axisLabel: {
316-
...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
317-
},
318-
data: finalXyConfig.yConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
319-
},
320-
};
321-
322-
if(props.chartConfig.race) {
323-
config = {
324-
...config,
325-
xAxis: {
326-
...config.xAxis,
327-
animationDuration: 300,
328-
animationDurationUpdate: 300
329-
},
330-
yAxis: {
331-
...config.yAxis,
332-
animationDuration: 300,
333-
animationDurationUpdate: 300
334-
},
335-
}
336-
}
337-
}
338170

339-
// log.log("Echarts transformedData and config", transformedData, config);
171+
// console.log("Echarts transformedData and config", transformedData, config);
340172
return config;
341173
}
342174

0 commit comments

Comments
 (0)