Skip to content

Commit 20963c7

Browse files
Imiss-U1025Imiss-U1025
committed
Added mark areas to config
1 parent fad5306 commit 20963c7

File tree

6 files changed

+89
-12
lines changed

6 files changed

+89
-12
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ export function getEchartsConfig(
227227
d[` `] = sum - d[seriesColumnNames[0]];
228228
sum = d[` `];
229229
})
230-
transformedData = [{[seriesColumnNames[0] + "_placeholder"]: 0, [seriesColumnNames[0]]: total}, ...transformedData]
230+
transformedData = [{[seriesColumnNames[0] + "_placeholder"]: 0, [seriesColumnNames[0]]: total, [props.xAxisKey]: "Total"}, ...transformedData]
231231
}
232232

233233
if(props.chartConfig.subtype === "polar") {
@@ -306,7 +306,7 @@ export function getEchartsConfig(
306306
axisLabel: {
307307
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
308308
},
309-
data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:undefined,
309+
data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
310310
},
311311
// @ts-ignore
312312
yAxis: {
@@ -337,7 +337,7 @@ export function getEchartsConfig(
337337
//Waterfall x-label initialization
338338
if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
339339
//default labels
340-
config.xAxis.data = undefined;
340+
// config.xAxis.data = undefined;
341341
// config.xAxis.data = ["Total"];
342342
// for(let i=1; i<transformedData.length; i++)
343343
// config.xAxis.data.push(`Column${i}`);
@@ -348,11 +348,11 @@ export function getEchartsConfig(
348348
//default labels
349349
// config.radiusAxis.data = undefined;
350350
// config.angleAxis.data = undefined;
351-
let labelData = [];
352-
for(let i=0; i<transformedData.length; i++)
353-
labelData.push(`C${i+1}`);
354-
if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
355-
if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
351+
// let labelData = [];
352+
// for(let i=0; i<transformedData.length; i++)
353+
// labelData.push(`C${i+1}`);
354+
// if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
355+
// if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
356356
}
357357
// log.log("Echarts transformedData and config", transformedData, config);
358358
return config;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,10 @@ export const BarChartConfig = (function () {
102102
{children.barWidth.propertyView({
103103
label: trans("barChart.barWidth"),
104104
})}
105-
{children.race.propertyView({
105+
{children.type.getView() !== "waterfall" && children.race.propertyView({
106106
label: trans("barChart.race"),
107107
})}
108-
{children.stack.propertyView({
108+
{children.type.getView() !== "waterfall" && children.stack.propertyView({
109109
label: trans("barChart.stack"),
110110
})}
111111
{children.showBackground.propertyView({

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import {
33
MultiCompBuilder,
44
BoolControl,
55
dropdownControl,
6+
list,
7+
Option,
8+
valueComp,
9+
genRandomKey,
610
showLabelPropertyView,
711
withContext,
12+
RedButton,
813
StringControl,
914
ColorOrBoolCodeControl,
1015
} from "lowcoder-sdk";

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
108108
encodeY = props.xAxisKey;
109109
}
110110
const markLineData = s.getView().markLines.map(line => ({type: line.getView().type}));
111-
console.log("MLData", markLineData)
111+
const markAreaData = s.getView().markAreas.map(area => ([{name: area.getView().name, xAxis: area.getView().from}, {xAxis: area.getView().to}]));
112112
return {
113113
name: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().seriesName,
114114
selectedMode: "single",
@@ -124,6 +124,12 @@ export function getSeriesConfig(props: EchartsConfigProps) {
124124
markLine: {
125125
data: markLineData,
126126
},
127+
markArea: {
128+
itemStyle: {
129+
color: 'rgba(255, 173, 177, 0.4)',
130+
},
131+
data: markAreaData,
132+
},
127133
// each type of chart's config
128134
...props.chartConfig,
129135
itemStyle: itemStyle,
@@ -313,7 +319,7 @@ export function getEchartsConfig(
313319
axisLabel: {
314320
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
315321
},
316-
data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:undefined,
322+
data: finalXyConfig.xConfig.type === "category" && (props.xAxisData as []).length!==0?props?.xAxisData:transformedData.map((i: any) => i[props.xAxisKey]),
317323
},
318324
// @ts-ignore
319325
yAxis: {

‎client/packages/lowcoder-comps/src/comps/lineChartComp/seriesComp.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,37 @@ const MarkLinesTmpComp = new MultiCompBuilder(markLinesChildrenMap, (props) => {
7070
return <>{children.type.propertyView({label: trans("lineChart.type")})}</>;
7171
})
7272
.build();
73+
const markAreasChildrenMap = {
74+
name: StringControl,
75+
from: StringControl,
76+
to: StringControl,
77+
// unique key, for sort
78+
dataIndex: valueComp<string>(""),
79+
};
80+
const MarkAreasTmpComp = new MultiCompBuilder(markAreasChildrenMap, (props) => {
81+
return props;
82+
})
83+
.setPropertyViewFn((children: any) =>
84+
(<>
85+
{children.name.propertyView({label: trans("lineChart.name")})}
86+
{children.from.propertyView({label: trans("lineChart.from")})}
87+
{children.to.propertyView({label: trans("lineChart.to")})}
88+
</>)
89+
)
90+
.build();
91+
92+
93+
export function newMarkArea(): MarkLineDataType {
94+
return {
95+
dataIndex: genRandomKey(),
96+
};
97+
}
7398

7499
const seriesChildrenMap = {
75100
columnName: StringControl,
76101
seriesName: StringControl,
77102
markLines: list(MarkLinesTmpComp),
103+
markAreas: list(MarkAreasTmpComp),
78104
hide: BoolControl,
79105
// unique key, for sort
80106
dataIndex: valueComp<string>(""),
@@ -138,6 +164,42 @@ class SeriesComp extends SeriesTmpComp {
138164
dataIndex={(s) => {
139165
return s.getView().dataIndex;
140166
}}
167+
/>
168+
<Option
169+
items={this.children.markAreas.getView()}
170+
title={trans("lineChart.markAreas")}
171+
itemTitle={(s) => s.getView().name}
172+
popoverTitle={(s) => trans("lineChart.markLineType")}
173+
content={(s, index) => (
174+
<>
175+
{s.getPropertyView({label: "Type"})}
176+
{
177+
<RedButton
178+
onClick={() => {
179+
this.children.markAreas.dispatch(this.children.markAreas.deleteAction(index));
180+
}}
181+
>
182+
{trans("chart.delete")}
183+
</RedButton>
184+
}
185+
</>
186+
)}
187+
onAdd={() => {
188+
this.children.markAreas.dispatch(
189+
this.children.markAreas.pushAction(
190+
newMarkArea()
191+
)
192+
);
193+
}}
194+
onMove={(fromIndex, toIndex) => {
195+
const action = this.children.markAreas.arrayMoveAction(fromIndex, toIndex);
196+
this.children.markAreas.dispatch(action);
197+
}}
198+
hide={(s) => true}
199+
onHide={(s, hide) => console.log("onHide")}
200+
dataIndex={(s) => {
201+
return s.getView().dataIndex;
202+
}}
141203
/>
142204
</>
143205
);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,13 +314,17 @@ export const en = {
314314
},
315315
lineChart: {
316316
markLines: "Mark Lines",
317+
markAreas: "Mark Areas",
317318
stacked: "Stacked",
318319
area: "Area Chart",
319320
max: "Max",
320321
min: "Min",
321322
average: "Average",
322323
markLineType: "Marker Type",
323324
type: "Type",
325+
name: "Name",
326+
from: "From",
327+
to: "To",
324328
},
325329
barChart: {
326330
title: 'Title',

0 commit comments

Comments
 (0)