Skip to content

Commit 0711e8b

Browse files
FalkWolskyFalkWolsky
authored
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 : {};

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

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
))

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

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
))

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

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+
})();

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

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy