Skip to content

Commit aad0007

Browse files
committed
area pieces
1 parent 1627cd7 commit aad0007

File tree

5 files changed

+76
-44
lines changed

5 files changed

+76
-44
lines changed

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -334,27 +334,6 @@ export function getEchartsConfig(
334334
}
335335
}
336336
}
337-
338-
//Waterfall x-label initialization
339-
if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
340-
//default labels
341-
// config.xAxis.data = undefined;
342-
// config.xAxis.data = ["Total"];
343-
// for(let i=1; i<transformedData.length; i++)
344-
// config.xAxis.data.push(`Column${i}`);
345-
}
346-
347-
//Polar x-label initialization
348-
if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
349-
//default labels
350-
// config.radiusAxis.data = undefined;
351-
// config.angleAxis.data = undefined;
352-
// let labelData = [];
353-
// for(let i=0; i<transformedData.length; i++)
354-
// labelData.push(`C${i+1}`);
355-
// if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
356-
// if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
357-
}
358337
// log.log("Echarts transformedData and config", transformedData, config);
359338
return config;
360339
}

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import {
44
toJSONObjectArray,
55
toObject,
66
BoolControl,
7+
ColorControl,
78
withDefault,
89
StringControl,
910
NumberControl,
1011
dropdownControl,
12+
list,
1113
eventHandlerControl,
1214
valueComp,
1315
withType,
@@ -17,6 +19,7 @@ import {
1719
styleControl,
1820
EchartDefaultTextStyle,
1921
EchartDefaultChartStyle,
22+
MultiCompBuilder,
2023
} from "lowcoder-sdk";
2124
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2225
import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
@@ -187,6 +190,25 @@ export const noDataPieChartConfig = {
187190
],
188191
} as EChartsOption;
189192

193+
const areaPiecesChildrenMap = {
194+
color: ColorControl,
195+
from: StringControl,
196+
to: StringControl,
197+
// unique key, for sort
198+
dataIndex: valueComp<string>(""),
199+
};
200+
const AreaPiecesTmpComp = new MultiCompBuilder(areaPiecesChildrenMap, (props) => {
201+
return props;
202+
})
203+
.setPropertyViewFn((children: any) =>
204+
(<>
205+
{children.color.propertyView({label: trans("lineChart.color")})}
206+
{children.from.propertyView({label: trans("lineChart.from")})}
207+
{children.to.propertyView({label: trans("lineChart.to")})}
208+
</>)
209+
)
210+
.build();
211+
190212
export type ChartSize = { w: number; h: number };
191213

192214
export const getDataKeys = (data: Array<JSONObject>) => {
@@ -231,6 +253,7 @@ export const chartUiModeChildren = {
231253
yConfig: YAxisConfig,
232254
legendConfig: LegendConfig,
233255
chartConfig: ChartOptionComp,
256+
areaPieces: list(AreaPiecesTmpComp),
234257
onUIEvent: eventHandlerControl(UIEventOptions),
235258
};
236259

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,42 @@ export function lineChartPropertyView(
8282
onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
8383
dataIndex={(s) => s.getView().dataIndex}
8484
/>
85+
<Option
86+
items={children.areaPieces.getView()}
87+
title={trans("lineChart.areaPieces")}
88+
itemTitle={(s) => `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`}
89+
popoverTitle={(s) => trans("lineChart.areaPiece")}
90+
content={(s, index) => (
91+
<>
92+
{s.getPropertyView({label: "Type"})}
93+
{
94+
<RedButton
95+
onClick={() => {
96+
children.areaPieces.dispatch(children.areaPieces.deleteAction(index));
97+
}}
98+
>
99+
{trans("chart.delete")}
100+
</RedButton>
101+
}
102+
</>
103+
)}
104+
onAdd={() => {
105+
children.areaPieces.dispatch(
106+
children.areaPieces.pushAction(
107+
{}
108+
)
109+
);
110+
}}
111+
onMove={(fromIndex, toIndex) => {
112+
const action = children.areaPieces.arrayMoveAction(fromIndex, toIndex);
113+
children.areaPieces.dispatch(action);
114+
}}
115+
hide={(s) => true}
116+
onHide={(s, hide) => console.log("onHide")}
117+
dataIndex={(s) => {
118+
return s.getView().dataIndex;
119+
}}
120+
/>
85121
</Section>
86122
<Section name={sectionNames.interaction}>
87123
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>

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

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,21 @@ export function getEchartsConfig(
203203
...gridPos,
204204
containLabel: true,
205205
},
206+
visualMap: {
207+
type: 'piecewise',
208+
show: false,
209+
dimension: 0,
210+
seriesIndex: 0,
211+
pieces: props.areaPieces?.filter(p => p.getView().from && p.getView().to && p.getView().color)?.map(p => (
212+
{
213+
...(p.getView().from?{min: parseInt(p.getView().from)}:{}),
214+
...(p.getView().to?{max: parseInt(p.getView().to)}:{}),
215+
...(p.getView().color?{color: p.getView().color}:{}),
216+
}
217+
))
218+
},
206219
};
220+
console.log("config", config)
207221
if(props.chartConfig.race) {
208222
config = {
209223
...config,
@@ -264,8 +278,6 @@ export function getEchartsConfig(
264278
}
265279
}
266280

267-
console.log("TransformedData", transformedData);
268-
269281
config = {
270282
...config,
271283
dataset: [
@@ -350,27 +362,6 @@ export function getEchartsConfig(
350362
}
351363
}
352364

353-
//Waterfall x-label initialization
354-
if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
355-
//default labels
356-
config.xAxis.data = undefined;
357-
// config.xAxis.data = ["Total"];
358-
// for(let i=1; i<transformedData.length; i++)
359-
// config.xAxis.data.push(`Column${i}`);
360-
}
361-
362-
//Polar x-label initialization
363-
if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
364-
//default labels
365-
// config.radiusAxis.data = undefined;
366-
// config.angleAxis.data = undefined;
367-
let labelData = [];
368-
for(let i=0; i<transformedData.length; i++)
369-
labelData.push(`C${i+1}`);
370-
if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
371-
if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
372-
}
373-
console.log("Config", config);
374365
// log.log("Echarts transformedData and config", transformedData, config);
375366
return config;
376367
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,9 @@ export const en = {
325325
name: "Name",
326326
from: "From",
327327
to: "To",
328+
color: "Color",
329+
areaPieces: "Area Pieces",
330+
areaPiece: "Area Piece",
328331
},
329332
barChart: {
330333
title: 'Title',

0 commit comments

Comments
 (0)