Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0711e8b

Browse files
Merge pull request #1400 from lowcoder-org/feature-charts-release
Update funnel and gauge chart.
2 parents b0a8dcc + c10dd88 commit 0711e8b

31 files changed

+1758
-347
lines changed

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -168,15 +168,15 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
168168
}}
169169
>
170170
<ReactECharts
171-
ref={(e) => (echartsCompRef.current = e)}
172-
style={{ height: "100%" }}
173-
notMerge
174-
lazyUpdate
175-
opts={{ locale: getEchartsLocale() }}
176-
option={option}
177-
theme={mode !== 'map' ? themeConfig : undefined}
178-
mode={mode}
179-
/>
171+
ref={(e) => (echartsCompRef.current = e)}
172+
style={{ height: "100%" }}
173+
notMerge
174+
lazyUpdate
175+
opts={{ locale: getEchartsLocale() }}
176+
option={option}
177+
theme={mode !== 'map' ? themeConfig : undefined}
178+
mode={mode}
179+
/>
180180
</ReactResizeDetector>
181181
);
182182
});

‎client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ export function candleStickChartPropertyView(
3838
{children.onEvent.propertyView()}
3939
</Section>
4040
<Section name={sectionNames.style}>
41-
{children.style?.getPropertyView()}
41+
{children.style?.getPropertyView()}
4242
</Section>
4343
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
4444
</>
4545
);
46-
46+
4747
const getChatConfigByMode = (mode: string) => {
4848
switch(mode) {
4949
case "json":

‎client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts‎

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import { useContext } from "react";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1617

1718
export function transformData(
1819
originData: JSONObject[],
@@ -136,62 +137,62 @@ export function getEchartsConfig(
136137
): EChartsOptionWithMap {
137138
if (props.mode === "json") {
138139
let opt={
139-
"title": {
140-
"text": props.echartsTitle,
141-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
142-
"left":"center"
143-
},
144-
"backgroundColor": props?.style?.background || theme?.style?.background,
145-
"color": props.echartsOption.data?.map(data => data.color),
146-
"tooltip": props.tooltip&&{
147-
"trigger": "axis",
148-
"axisPointer": {
149-
"type": "cross"
150-
}
151-
},
152-
"grid": {
153-
"left": "10%",
154-
"right": "10%",
155-
"bottom": "10%",
156-
},
157-
"xAxis": {
158-
"type": "category",
159-
"data": props.echartsOption.xAxis.data
160-
},
161-
"yAxis": {
162-
"type": "value",
163-
"scale": true
164-
},
165-
"series": [
166-
{
167-
"name": props.echartsConfig.type,
168-
"type": props.echartsConfig.type,
169-
"left": "10%",
170-
"top": 60,
171-
"bottom": 60,
172-
"width": "80%",
173-
"min": 0,
174-
"max": 100,
175-
"gap": 2,
176-
"label": {
177-
"show": true,
178-
"position": props.echartsLabelConfig.top
140+
"title": {
141+
"text": props.echartsTitle,
142+
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
143+
"left":"center"
144+
},
145+
"backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
146+
"color": props.echartsOption.data?.map(data => data.color),
147+
"tooltip": props.tooltip&&{
148+
"trigger": "axis",
149+
"axisPointer": {
150+
"type": "cross"
151+
}
152+
},
153+
"grid": {
154+
"left": "10%",
155+
"right": "10%",
156+
"bottom": "10%",
157+
},
158+
"xAxis": {
159+
"type": "category",
160+
"data": props.echartsOption.xAxis.data
161+
},
162+
"yAxis": {
163+
"type": "value",
164+
"scale": true
179165
},
180-
"data": props.echartsOption.data,
166+
"series": [
167+
{
168+
"name": props.echartsConfig.type,
169+
"type": props.echartsConfig.type,
170+
"left": "10%",
171+
"top": 60,
172+
"bottom": 60,
173+
"width": "80%",
174+
"min": 0,
175+
"max": 100,
176+
"gap": 2,
177+
"label": {
178+
"show": true,
179+
"position": props.echartsLabelConfig.top
180+
},
181+
"data": props.echartsOption.data,
182+
}
183+
]
181184
}
182-
]
183-
}
184185
return props.echartsOption ? opt : {};
185-
186+
186187
}
187-
188+
188189
if(props.mode === "map") {
189190
const {
190191
mapZoomLevel,
191192
mapCenterLat,
192193
mapCenterLng,
193-
mapOptions,
194-
showCharts,
194+
mapOptions,
195+
showCharts,
195196
} = props;
196197

197198
const echartsOption = mapOptions && showCharts ? mapOptions : {};
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
AlignClose,
3+
AlignRight,
4+
AlignLeft,
5+
dropdownControl,
6+
MultiCompBuilder,
7+
} from "lowcoder-sdk";
8+
import {FunnelSeriesOption, LegendComponentOption} from "echarts";
9+
import { trans } from "i18n/comps";
10+
11+
const FunnelAlignOptions = [
12+
{
13+
label: <AlignLeft />,
14+
value: "left",
15+
},
16+
{
17+
label: <AlignClose />,
18+
value: "center",
19+
},
20+
{
21+
label: <AlignRight />,
22+
value: "right",
23+
}
24+
] as const;
25+
26+
export const EchartsFunnelAlignConfig = (function () {
27+
return new MultiCompBuilder(
28+
{
29+
funnelAlign: dropdownControl(FunnelAlignOptions, "center"),
30+
},
31+
(props): FunnelSeriesOption => {
32+
const config: FunnelSeriesOption = {
33+
funnelAlign: "center",
34+
};
35+
config.funnelAlign = props.funnelAlign
36+
return config;
37+
}
38+
)
39+
.setPropertyViewFn((children) => (
40+
<>
41+
{children.funnelAlign.propertyView({
42+
label: trans("echarts.funnelAlign"),
43+
radioButton: true,
44+
tooltip: trans("echarts.changingAlignTooltip")
45+
})}
46+
</>
47+
))
48+
.build();
49+
})();

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLabelConfig.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ import { LegendComponentOption } from "echarts";
99
import { trans } from "i18n/comps";
1010

1111
const LabelPositionOptions = [
12+
{
13+
label: <AlignLeft />,
14+
value: "left",
15+
},
1216
{
1317
label: <AlignClose />,
1418
value: "inside",
1519
},
1620
{
1721
label: <AlignRight />,
1822
value: "right",
19-
},
20-
{
21-
label: <AlignLeft />,
22-
value: "left",
23-
},
23+
}
2424
] as const;
2525

2626
export const EchartsLabelConfig = (function () {
@@ -42,6 +42,7 @@ export const EchartsLabelConfig = (function () {
4242
{children.position.propertyView({
4343
label: trans("echarts.labelPosition"),
4444
radioButton: true,
45+
tooltip: trans("echarts.changingLabelTooltip")
4546
})}
4647
</>
4748
))
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
AlignClose,
3+
AlignRight,
4+
AlignLeft,
5+
dropdownControl,
6+
MultiCompBuilder,
7+
} from "lowcoder-sdk";
8+
import { LegendComponentOption } from "echarts";
9+
import { trans } from "i18n/comps";
10+
11+
const FunnelLegnedAlignOptions = [
12+
{
13+
label: <AlignLeft />,
14+
value: "left",
15+
},
16+
{
17+
label: <AlignClose />,
18+
value: "center",
19+
},
20+
{
21+
label: <AlignRight />,
22+
value: "right",
23+
}
24+
] as const;
25+
26+
export const EchartsLegendAlignConfig = (function () {
27+
return new MultiCompBuilder(
28+
{
29+
left: dropdownControl(FunnelLegnedAlignOptions, "center"),
30+
},
31+
(props): LegendComponentOption => {
32+
const config: LegendComponentOption = {
33+
left: "center",
34+
type: "scroll",
35+
};
36+
config.left = props.left
37+
return config;
38+
}
39+
)
40+
.setPropertyViewFn((children) => (
41+
<>
42+
{children.left.propertyView({
43+
label: trans("echarts.legendAlign"),
44+
radioButton: true,
45+
tooltip: trans("echarts.changingLegend_y_Tooltip")
46+
})}
47+
</>
48+
))
49+
.build();
50+
})();

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const EchartsLegendConfig = (function () {
3737
{children.position.propertyView({
3838
label: trans("echarts.legendPosition"),
3939
radioButton: true,
40+
tooltip: trans("echarts.changingLegend_x_Tooltip")
4041
})}
4142
</>
4243
))
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
HorizontalIcon,
3+
VerticalIcon,
4+
dropdownControl,
5+
MultiCompBuilder,
6+
} from "lowcoder-sdk";
7+
import { LegendComponentOption } from "echarts";
8+
import { trans } from "i18n/comps";
9+
10+
const LegendOrientOptions = [
11+
{
12+
label: <HorizontalIcon />,
13+
value: "horizontal",
14+
},
15+
{
16+
label: <VerticalIcon />,
17+
value: "vertical",
18+
},
19+
] as const;
20+
21+
export const EchartsLegendOrientConfig = (function () {
22+
return new MultiCompBuilder(
23+
{
24+
orient: dropdownControl(LegendOrientOptions, "horizontal"),
25+
},
26+
(props): LegendComponentOption => {
27+
const config: LegendComponentOption = {
28+
orient: "horizontal",
29+
type: "scroll"
30+
};
31+
config.orient = props.orient
32+
return config;
33+
}
34+
)
35+
.setPropertyViewFn((children) => (
36+
<>
37+
{children.orient.propertyView({
38+
label: trans("echarts.legendOrient"),
39+
radioButton: true,
40+
tooltip: trans("echarts.changingLegend_orient_Tooltip")
41+
})}
42+
</>
43+
))
44+
.build();
45+
})();
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {
2+
AlignBottom,
3+
AlignTop,
4+
dropdownControl,
5+
MultiCompBuilder,
6+
} from "lowcoder-sdk";
7+
import {FunnelSeriesOption, LegendComponentOption} from "echarts";
8+
import { trans } from "i18n/comps";
9+
10+
const SortingOptions = [
11+
{
12+
label: <AlignBottom />,
13+
value: "descending",
14+
},
15+
{
16+
label: <AlignTop />,
17+
value: "ascending",
18+
},
19+
] as const;
20+
21+
export const EchartsSortingConfig = (function () {
22+
return new MultiCompBuilder(
23+
{
24+
sort: dropdownControl(SortingOptions, "descending"),
25+
},
26+
(props): FunnelSeriesOption => {
27+
const config: FunnelSeriesOption = {
28+
sort: "descending"
29+
};
30+
config.sort = props.sort
31+
return config;
32+
}
33+
)
34+
.setPropertyViewFn((children) => (
35+
<>
36+
{children.sort.propertyView({
37+
label: trans("echarts.sort"),
38+
radioButton: true,
39+
tooltip: trans("echarts.changingSortTooltip")
40+
})}
41+
</>
42+
))
43+
.build();
44+
})();

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /