Skip to content

Commit 63fa7f0

Browse files
Imiss-U1025Imiss-U1025
committed
show calendar labels
1 parent 7644006 commit 63fa7f0

File tree

4 files changed

+145
-50
lines changed

4 files changed

+145
-50
lines changed

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { MultiCompBuilder } from "lowcoder-sdk";
22
import { PieSeriesOption } from "echarts";
3-
import { dropdownControl } from "lowcoder-sdk";
3+
import {
4+
dropdownControl,
5+
NumberControl,
6+
StringControl,
7+
withDefault,
8+
} from "lowcoder-sdk";
49
import { ConstructorToView } from "lowcoder-core";
510
import { trans } from "i18n/comps";
611

@@ -17,6 +22,10 @@ const BarTypeOptions = [
1722
label: trans("chart.rosePie"),
1823
value: "rosePie",
1924
},
25+
{
26+
label: trans("chart.calendarPie"),
27+
value: "calendarPie",
28+
},
2029
] as const;
2130

2231
// radius percent for each pie chart when one line has [1, 2, 3] pie charts
@@ -28,20 +37,33 @@ export const PieChartConfig = (function () {
2837
return new MultiCompBuilder(
2938
{
3039
type: dropdownControl(BarTypeOptions, "basicPie"),
40+
cellSize: withDefault(NumberControl, 40),
41+
range: withDefault(StringControl, "2021-09")
3142
},
3243
(props): PieSeriesOption => {
3344
const config: PieSeriesOption = {
3445
type: "pie",
46+
subtype: props.type,
3547
label: {
3648
show: true,
37-
formatter: "{d}%",
49+
formatter: "{c}",
3850
},
51+
range: props.range,
3952
};
4053
if (props.type === "rosePie") {
4154
config.roseType = "area";
42-
} else if (props.type === "doughnutPie") {
55+
}
56+
if (props.type === "doughnutPie") {
4357
config.radius = ["40%", "60%"];
4458
}
59+
if (props.type === "calendarPie") {
60+
config.coordinateSystem = 'calendar';
61+
config.cellSize = [props.cellSize, props.cellSize];
62+
config.label = {
63+
...config.label,
64+
position: 'inside'
65+
};
66+
}
4567
return config;
4668
}
4769
)
@@ -50,6 +72,12 @@ export const PieChartConfig = (function () {
5072
{children.type.propertyView({
5173
label: trans("chart.pieType"),
5274
})}
75+
{children.type.getView() === "calendarPie" && children.cellSize.propertyView({
76+
label: trans("lineChart.cellSize"),
77+
})}
78+
{children.type.getView() === "calendarPie" && children.range.propertyView({
79+
label: trans("lineChart.range"),
80+
})}
5381
</>
5482
))
5583
.build();

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

Lines changed: 86 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -64,36 +64,56 @@ export const echartsConfigOmitChildren = [
6464
type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
6565

6666
export function getSeriesConfig(props: EchartsConfigProps) {
67-
let visibleSeries = props.series.filter((s) => !s.getView().hide);
67+
let visibleSeries = props.series.filter((s) => !s.getView().hide).map(s => s.toJsonValue());
68+
let newVisibleSeries;
69+
if(props.chartConfig.subtype === "calendarPie") {
70+
const dataInRange = props.data.filter(item => item[props.xAxisKey].substr(0, 7) === props.chartConfig.range);
71+
newVisibleSeries = dataInRange.map(data => {
72+
return {
73+
data: visibleSeries.map(s => ({name: s.seriesName, value: data[s.columnName]})),
74+
date: data[props.xAxisKey],
75+
}
76+
});
77+
visibleSeries = newVisibleSeries;
78+
}
6879
const seriesLength = visibleSeries.length;
6980
return visibleSeries.map((s, index) => {
7081
// pie
7182
const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
72-
const config = {
83+
let config = {
7384
...props.chartConfig,
7485
radius: radiusAndCenter.radius,
7586
center: radiusAndCenter.center,
76-
startAngle: s.getView().startAngle,
77-
endAngle: s.getView().endAngle,
78-
name: s.getView().seriesName,
7987
selectedMode: "single",
80-
label: {
81-
position: s.getView().labelPosition,
82-
alignTo: s.getView().labelAlignTo,
83-
bleedMargin: s.getView().labelBleedMargin,
84-
edgeDistance: s.getView().labelEdgeDistance,
85-
},
86-
labelLine: {
87-
length: s.getView().labelLineLength,
88-
length2: s.getView().labelLineLength2,
89-
},
90-
encode: {
91-
itemName: props.xAxisKey,
92-
value: s.getView().columnName,
93-
},
9488
};
95-
if(s.getView().roseType !== "none") {
96-
config.roseType = s.getView().roseType;
89+
if(props.chartConfig.subtype !== "calendarPie") {
90+
config = {
91+
...config,
92+
startAngle: s.startAngle,
93+
endAngle: s.endAngle,
94+
name: s.seriesName,
95+
label: {
96+
position: s.labelPosition,
97+
alignTo: s.labelAlignTo,
98+
bleedMargin: s.labelBleedMargin,
99+
edgeDistance: s.labelEdgeDistance,
100+
},
101+
labelLine: {
102+
length: s.labelLineLength,
103+
length2: s.labelLineLength2,
104+
},
105+
encode: {
106+
itemName: props.xAxisKey,
107+
value: s.columnName,
108+
},
109+
}
110+
if(s.roseType !== "none") {
111+
config.roseType = s.roseType;
112+
}
113+
} else {
114+
config.data = s.data;
115+
config.center = s.date;
116+
config.radius = props.chartConfig.cellSize[0]*0.4;
97117
}
98118
return config;
99119
});
@@ -145,6 +165,30 @@ export function getEchartsConfig(
145165
},
146166
};
147167

168+
//calendar pie
169+
if(props.chartConfig.subtype === "calendarPie") {
170+
config.calendar = {
171+
top: 'middle',
172+
left: 'center',
173+
orient: 'vertical',
174+
cellSize: props.chartConfig.cellSize,
175+
yearLabel: {
176+
show: false,
177+
fontSize: 30
178+
},
179+
dayLabel: {
180+
margin: 20,
181+
firstDay: 1,
182+
nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
183+
},
184+
monthLabel: {
185+
show: false
186+
},
187+
range: [props.chartConfig.range]
188+
}
189+
}
190+
//
191+
148192
if (props.data.length <= 0) {
149193
// no data
150194
return {
@@ -183,8 +227,28 @@ export function getEchartsConfig(
183227
},
184228
})),
185229
};
230+
if(props.chartConfig.subtype === "calendarPie") {
231+
config.series = [
232+
{
233+
id: 'label',
234+
type: 'scatter',
235+
coordinateSystem: 'calendar',
236+
symbolSize: 0,
237+
label: {
238+
show: true,
239+
formatter: function (params) {
240+
return params.value[1];
241+
},
242+
offset: [-props.chartConfig.cellSize[0] / 2 + 10, -props.chartConfig.cellSize[1] / 2 + 10],
243+
fontSize: 14
244+
},
245+
data: Array.from({ length: 31 }, (_, index) => index + 1).map(d => ([props.chartConfig.range + "-" + (d<10?`0${d}`:d), d]))
246+
},
247+
...config.series,
248+
]
249+
}
186250

187-
// console.log("Echarts transformedData and config", transformedData, config);
251+
console.log("Echarts transformedData and config", transformedData, config);
188252
return config;
189253
}
190254

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,8 @@ export const en = {
313313

314314
},
315315
lineChart: {
316+
cellSize: "Cell Size",
317+
range: "Range",
316318
markLines: "Mark Lines",
317319
markAreas: "Mark Areas",
318320
stacked: "Stacked Chart",
@@ -559,6 +561,7 @@ export const en = {
559561
basicPie: "Basic Pie",
560562
doughnutPie: "Doughnut Pie",
561563
rosePie: "Rose Pie",
564+
calendarPie: "Calendar Pie",
562565
pieType: "Pie Chart Type",
563566
spending: "Spending",
564567
budget: "Budget",

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

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -80,77 +80,77 @@ const defaultMapData = {
8080
export const enObj: I18nObjects = {
8181
defaultDataSource: [
8282
{
83-
date: "2021-09",
83+
date: "2021-09-01",
8484
department: "Administration",
8585
spending: 9003,
86-
budget: 8000,
86+
budget: 8000
8787
},
8888
{
89-
date: "2021-09",
89+
date: "2021-09-02",
9090
department: "Finance",
9191
spending: 3033,
92-
budget: 4000,
92+
budget: 4000
9393
},
9494
{
95-
date: "2021-09",
95+
date: "2021-09-03",
9696
department: "Sales",
9797
spending: 9230,
98-
budget: 8000,
98+
budget: 8000
9999
},
100100
{
101-
date: "2021-10",
101+
date: "2021-09-04",
102102
department: "Administration",
103103
spending: 13032,
104-
budget: 15000,
104+
budget: 15000
105105
},
106106
{
107-
date: "2021-10",
107+
date: "2021-09-05",
108108
department: "Finance",
109109
spending: 2300,
110-
budget: 5000,
110+
budget: 5000
111111
},
112112
{
113-
date: "2021-10",
113+
date: "2021-09-05",
114114
department: "Sales",
115115
spending: 7323.5,
116-
budget: 8000,
116+
budget: 8000
117117
},
118118
{
119-
date: "2021-11",
119+
date: "2021-09-06",
120120
department: "Administration",
121121
spending: 13000,
122-
budget: 16023,
122+
budget: 16023
123123
},
124124
{
125-
date: "2021-11",
125+
date: "2021-09-06",
126126
department: "Finance",
127127
spending: 3569.5,
128-
budget: 3000,
128+
budget: 3000
129129
},
130130
{
131-
date: "2021-11",
131+
date: "2021-09-07",
132132
department: "Sales",
133133
spending: 10000,
134-
budget: 9932,
134+
budget: 9932
135135
},
136136
{
137-
date: "2021-12",
137+
date: "2021-09-07",
138138
department: "Administration",
139139
spending: 18033,
140-
budget: 20000,
140+
budget: 20000
141141
},
142142
{
143-
date: "2021-12",
143+
date: "2021-09-08",
144144
department: "Finance",
145145
spending: 4890,
146-
budget: 4500,
146+
budget: 4500
147147
},
148148
{
149-
date: "2021-12",
149+
date: "2021-09-09",
150150
department: "Sales",
151151
spending: 9322,
152-
budget: 8000,
153-
},
152+
budget: 8000
153+
}
154154
],
155155
defaultBarChartOption: {
156156
xAxis: {

0 commit comments

Comments
 (0)