Skip to content

Commit fad5306

Browse files
Imiss-U1025Imiss-U1025
committed
Mark Line
1 parent bfec22d commit fad5306

File tree

7 files changed

+107
-68
lines changed

7 files changed

+107
-68
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export function isAxisChart(type: CharOptionCompType, subtype: string) {
7171
}
7272

7373
export function getSeriesConfig(props: EchartsConfigProps) {
74-
console.log("SeriesProps:", props);
7574
let visibleSeries = props.series.filter((s) => !s.getView().hide);
7675
if(props.chartConfig.subtype === "waterfall") {
7776
const seriesOn = visibleSeries[0];
@@ -252,8 +251,6 @@ export function getEchartsConfig(
252251
}
253252
}
254253

255-
console.log("TransformedData", transformedData);
256-
257254
config = {
258255
...config,
259256
dataset: [
@@ -357,7 +354,6 @@ export function getEchartsConfig(
357354
if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
358355
if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
359356
}
360-
console.log("Config", config);
361357
// log.log("Echarts transformedData and config", transformedData, config);
362358
return config;
363359
}

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

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,6 @@ import {
1010
} from "lowcoder-sdk";
1111
import { trans } from "i18n/comps";
1212

13-
const BarTypeOptions = [
14-
{
15-
label: trans("chart.basicLine"),
16-
value: "basicLine",
17-
},
18-
{
19-
label: trans("chart.stackedLine"),
20-
value: "stackedLine",
21-
},
22-
{
23-
label: trans("chart.areaLine"),
24-
value: "areaLine",
25-
},
26-
] as const;
27-
2813
export const ItemColorComp = withContext(
2914
new MultiCompBuilder({ value: ColorOrBoolCodeControl }, (props) => props.value)
3015
.setPropertyViewFn((children) =>
@@ -42,7 +27,8 @@ export const LineChartConfig = (function () {
4227
return new MultiCompBuilder(
4328
{
4429
showLabel: BoolControl,
45-
type: dropdownControl(BarTypeOptions, "basicLine"),
30+
stacked: BoolControl,
31+
area: BoolControl,
4632
smooth: BoolControl,
4733
itemColor: ItemColorComp,
4834
},
@@ -71,9 +57,10 @@ export const LineChartConfig = (function () {
7157
},
7258
},
7359
};
74-
if (props.type === "stackedLine") {
60+
if (props.stacked) {
7561
config.stack = "stackValue";
76-
} else if (props.type === "areaLine") {
62+
}
63+
if (props.area) {
7764
config.areaStyle = {};
7865
}
7966
if (props.smooth) {
@@ -84,8 +71,11 @@ export const LineChartConfig = (function () {
8471
)
8572
.setPropertyViewFn((children) => (
8673
<>
87-
{children.type.propertyView({
88-
label: trans("chart.lineType"),
74+
{children.stacked.propertyView({
75+
label: trans("lineChart.stacked"),
76+
})}
77+
{children.area.propertyView({
78+
label: trans("lineChart.area"),
8979
})}
9080
{showLabelPropertyView(children)}
9181
{children.smooth.propertyView({ label: trans("chart.smooth") })}

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
chartColorPalette,
2626
getPromiseAfterDispatch,
2727
dropdownControl,
28-
JSONObject,
2928
} from "lowcoder-sdk";
3029
import { getEchartsLocale, trans } from "i18n/comps";
3130
import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
@@ -151,11 +150,6 @@ LineChartTmpComp = withViewFn(LineChartTmpComp, (comp) => {
151150
);
152151
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
153152

154-
useEffect(() => {
155-
comp.children.mapInstance.dispatch(changeValueAction(null, false))
156-
if(comp.children.mapInstance.value) return;
157-
}, [option])
158-
159153
return (
160154
<ReactResizeDetector
161155
onResize={(w, h) => {

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

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import {
22
jsonControl,
3-
JSONObject,
43
stateComp,
54
toJSONObjectArray,
65
toObject,
76
BoolControl,
87
withDefault,
98
StringControl,
109
NumberControl,
11-
FunctionControl,
1210
dropdownControl,
1311
eventHandlerControl,
1412
valueComp,
1513
withType,
1614
uiChildren,
1715
clickEvent,
16+
toArray,
1817
styleControl,
1918
EchartDefaultTextStyle,
2019
EchartDefaultChartStyle,
21-
toArray
2220
} from "lowcoder-sdk";
2321
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2422
import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
@@ -69,24 +67,6 @@ export const UIEventOptions = [
6967
},
7068
] as const;
7169

72-
export const MapEventOptions = [
73-
{
74-
label: trans("chart.mapReady"),
75-
value: "mapReady",
76-
description: trans("chart.mapReadyDesc"),
77-
},
78-
{
79-
label: trans("chart.zoomLevelChange"),
80-
value: "zoomLevelChange",
81-
description: trans("chart.zoomLevelChangeDesc"),
82-
},
83-
{
84-
label: trans("chart.centerPositionChange"),
85-
value: "centerPositionChange",
86-
description: trans("chart.centerPositionChangeDesc"),
87-
},
88-
] as const;
89-
9070
export const XAxisDirectionOptions = [
9171
{
9272
label: trans("chart.horizontal"),
@@ -271,6 +251,7 @@ let chartJsonModeChildren: any = {
271251
tooltip: withDefault(BoolControl, true),
272252
legendVisibility: withDefault(BoolControl, true),
273253
}
254+
274255
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
275256
chartJsonModeChildren = {
276257
...chartJsonModeChildren,
@@ -282,18 +263,6 @@ if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
282263
}
283264
}
284265

285-
const chartMapModeChildren = {
286-
mapInstance: stateComp(),
287-
getMapInstance: FunctionControl,
288-
mapApiKey: withDefault(StringControl, ''),
289-
mapZoomLevel: withDefault(NumberControl, 3),
290-
mapCenterLng: withDefault(NumberControl, 15.932644),
291-
mapCenterLat: withDefault(NumberControl, 50.942063),
292-
mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
293-
onMapEvent: eventHandlerControl(MapEventOptions),
294-
showCharts: withDefault(BoolControl, true),
295-
}
296-
297266
export type UIChartDataType = {
298267
seriesName: string;
299268
// coordinate chart
@@ -315,7 +284,6 @@ export const lineChartChildrenMap = {
315284
onEvent: eventHandlerControl([clickEvent] as const),
316285
...chartUiModeChildren,
317286
...chartJsonModeChildren,
318-
...chartMapModeChildren,
319287
};
320288

321289
const chartUiChildrenMap = uiChildren(lineChartChildrenMap);

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export function isAxisChart(type: CharOptionCompType, subtype: string) {
7171
}
7272

7373
export function getSeriesConfig(props: EchartsConfigProps) {
74-
console.log("SeriesProps:", props);
7574
let visibleSeries = props.series.filter((s) => !s.getView().hide);
7675
if(props.chartConfig.subtype === "waterfall") {
7776
const seriesOn = visibleSeries[0];
@@ -108,6 +107,8 @@ export function getSeriesConfig(props: EchartsConfigProps) {
108107
encodeX = s.getView().columnName;
109108
encodeY = props.xAxisKey;
110109
}
110+
const markLineData = s.getView().markLines.map(line => ({type: line.getView().type}));
111+
console.log("MLData", markLineData)
111112
return {
112113
name: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().seriesName,
113114
selectedMode: "single",
@@ -120,6 +121,9 @@ export function getSeriesConfig(props: EchartsConfigProps) {
120121
x: encodeX,
121122
y: encodeY,
122123
},
124+
markLine: {
125+
data: markLineData,
126+
},
123127
// each type of chart's config
124128
...props.chartConfig,
125129
itemStyle: itemStyle,
@@ -215,7 +219,7 @@ export function getEchartsConfig(
215219
.map((s) => s.getView().columnName);
216220
// y-axis is category and time, data doesn't need to aggregate
217221
let transformedData =
218-
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsOption.length && props.echartsOption || props.data : transformData(props.echartsOption.length && props.echartsOption || props.data, props.xAxisKey, seriesColumnNames);
222+
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.data : transformData(props.data, props.xAxisKey, seriesColumnNames);
219223

220224
if(props.chartConfig.subtype === "waterfall") {
221225
config.legend = undefined;

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

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import {
22
BoolControl,
33
StringControl,
44
list,
5-
JSONObject,
65
isNumeric,
76
genRandomKey,
87
Dropdown,
9-
OptionsType,
8+
Option,
9+
RedButton,
10+
CustomModal,
1011
MultiCompBuilder,
1112
valueComp,
13+
dropdownControl,
1214
} from "lowcoder-sdk";
1315
import { trans } from "i18n/comps";
1416

@@ -18,6 +20,7 @@ import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcod
1820
export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
1921
export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
2022
type SeriesDataType = ConstructorToDataType<typeof SeriesComp>;
23+
type MarkLineDataType = ConstructorToDataType<typeof MarkLinesTmpComp>;
2124

2225
type ActionDataType = {
2326
type: "chartDataChanged";
@@ -32,9 +35,46 @@ export function newSeries(name: string, columnName: string): SeriesDataType {
3235
};
3336
}
3437

38+
export function newMarkLine(type: string): MarkLineDataType {
39+
return {
40+
type,
41+
dataIndex: genRandomKey(),
42+
};
43+
}
44+
45+
export const MarkLineTypeOptions = [
46+
{
47+
label: trans("lineChart.max"),
48+
value: "max",
49+
},
50+
{
51+
label: trans("lineChart.average"),
52+
value: "average",
53+
},
54+
{
55+
label: trans("lineChart.min"),
56+
value: "min",
57+
},
58+
] as const;
59+
60+
const valToLabel = (val) => MarkLineTypeOptions.find(o => o.value === val)?.label || "";
61+
const markLinesChildrenMap = {
62+
type: dropdownControl(MarkLineTypeOptions, "max"),
63+
// unique key, for sort
64+
dataIndex: valueComp<string>(""),
65+
};
66+
const MarkLinesTmpComp = new MultiCompBuilder(markLinesChildrenMap, (props) => {
67+
return props;
68+
})
69+
.setPropertyViewFn((children: any) => {
70+
return <>{children.type.propertyView({label: trans("lineChart.type")})}</>;
71+
})
72+
.build();
73+
3574
const seriesChildrenMap = {
3675
columnName: StringControl,
3776
seriesName: StringControl,
77+
markLines: list(MarkLinesTmpComp),
3878
hide: BoolControl,
3979
// unique key, for sort
4080
dataIndex: valueComp<string>(""),
@@ -63,6 +103,42 @@ class SeriesComp extends SeriesTmpComp {
63103
this.children.columnName.dispatchChangeValueAction(value);
64104
}}
65105
/>
106+
<Option
107+
items={this.children.markLines.getView()}
108+
title={trans("lineChart.markLines")}
109+
itemTitle={(s) => valToLabel(s.getView().type)}
110+
popoverTitle={(s) => trans("lineChart.markLineType")}
111+
content={(s, index) => (
112+
<>
113+
{s.getPropertyView({label: "Type"})}
114+
{
115+
<RedButton
116+
onClick={() => {
117+
this.children.markLines.dispatch(this.children.markLines.deleteAction(index));
118+
}}
119+
>
120+
{trans("chart.delete")}
121+
</RedButton>
122+
}
123+
</>
124+
)}
125+
onAdd={() => {
126+
this.children.markLines.dispatch(
127+
this.children.markLines.pushAction(
128+
newMarkLine("max")
129+
)
130+
);
131+
}}
132+
onMove={(fromIndex, toIndex) => {
133+
const action = this.children.markLines.arrayMoveAction(fromIndex, toIndex);
134+
this.children.markLines.dispatch(action);
135+
}}
136+
hide={(s) => true}
137+
onHide={(s, hide) => console.log("onHide")}
138+
dataIndex={(s) => {
139+
return s.getView().dataIndex;
140+
}}
141+
/>
66142
</>
67143
);
68144
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,16 @@ export const en = {
312312
defaultBarometerPointer_Y: "-10"
313313

314314
},
315+
lineChart: {
316+
markLines: "Mark Lines",
317+
stacked: "Stacked",
318+
area: "Area Chart",
319+
max: "Max",
320+
min: "Min",
321+
average: "Average",
322+
markLineType: "Marker Type",
323+
type: "Type",
324+
},
315325
barChart: {
316326
title: 'Title',
317327
barWidth: 'Bar Width(%)',
@@ -499,6 +509,7 @@ export const en = {
499509
basicLine: "Basic Line",
500510
stackedLine: "Stacked Line",
501511
areaLine: "Area Line",
512+
stackedAreaLine: "Stacked Area Line",
502513
smooth: "Smooth Curve",
503514
lineType: "Line Chart Type",
504515
basicPie: "Basic Pie",

0 commit comments

Comments
 (0)