Skip to content

Commit d41fc20

Browse files
Imiss-U1025Imiss-U1025
committed
geoMap finished
1 parent 71c01ba commit d41fc20

File tree

7 files changed

+137
-9
lines changed

7 files changed

+137
-9
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ const BarTypeOptions = [
2626
label: trans("chart.calendarPie"),
2727
value: "calendarPie",
2828
},
29+
{
30+
label: trans("chart.geoPie"),
31+
value: "geoPie",
32+
},
2933
] as const;
3034

3135
// radius percent for each pie chart when one line has [1, 2, 3] pie charts
@@ -38,7 +42,8 @@ export const PieChartConfig = (function () {
3842
{
3943
type: dropdownControl(BarTypeOptions, "basicPie"),
4044
cellSize: withDefault(NumberControl, 40),
41-
range: withDefault(StringControl, "2021-09")
45+
range: withDefault(StringControl, "2021-09"),
46+
mapUrl: withDefault(StringControl, "https://echarts.apache.org/examples/data/asset/geo/USA.json"),
4247
},
4348
(props): PieSeriesOption => {
4449
const config: PieSeriesOption = {
@@ -64,6 +69,9 @@ export const PieChartConfig = (function () {
6469
position: 'inside'
6570
};
6671
}
72+
if (props.type === "geoPie") {
73+
config.mapUrl = props.mapUrl;
74+
}
6775
return config;
6876
}
6977
)
@@ -78,6 +86,9 @@ export const PieChartConfig = (function () {
7886
{children.type.getView() === "calendarPie" && children.range.propertyView({
7987
label: trans("lineChart.range"),
8088
})}
89+
{children.type.getView() === "geoPie" && children.mapUrl.propertyView({
90+
label: trans("pieChart.mapUrl"),
91+
})}
8192
</>
8293
))
8394
.build();

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import _ from "lodash";
1212
import { useContext, useEffect, useMemo, useRef, useState } from "react";
1313
import ReactResizeDetector from "react-resize-detector";
1414
import ReactECharts from "../basicChartComp/reactEcharts";
15+
import * as echarts from "echarts";
1516
import {
1617
childrenToProps,
1718
depsConfig,
@@ -26,7 +27,7 @@ import {
2627
getPromiseAfterDispatch,
2728
dropdownControl,
2829
} from "lowcoder-sdk";
29-
import { getEchartsLocale, trans } from "i18n/comps";
30+
import { getEchartsLocale, i18nObjs, trans } from "i18n/comps";
3031
import {
3132
echartsConfigOmitChildren,
3233
getEchartsConfig,
@@ -141,13 +142,33 @@ PieChartTmpComp = withViewFn(PieChartTmpComp, (comp) => {
141142

142143
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
143144
const childrenProps = childrenToProps(echartsConfigChildren);
145+
const [mapJson, setMapJson] = useState(null);
146+
useEffect(() => {
147+
const fetchMapData = async () => {
148+
if (childrenProps.chartConfig.subtype === 'geoPie') {
149+
let fetchedMapJson = i18nObjs.usaMap;
150+
try {
151+
const response = await fetch(childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial);
152+
fetchedMapJson = await response.json();
153+
} catch {}
154+
echarts.registerMap('jsonmap', fetchedMapJson);
155+
setMapJson(fetchedMapJson);
156+
}
157+
};
158+
159+
fetchMapData();
160+
}, [childrenProps.chartConfig.subtype, childrenProps.chartConfig.mapUrl, childrenProps.chartConfig.mapSpecial]);
161+
144162
const option = useMemo(() => {
163+
if (!mapJson && childrenProps.chartConfig.subtype === 'geoPie') {
164+
return {}; // Return an empty object or some default value until the map is loaded
165+
}
145166
return getEchartsConfig(
146167
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
147168
chartSize,
148169
themeConfig
149170
);
150-
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
171+
}, [mapJson, theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
151172

152173
return (
153174
<ReactResizeDetector

‎client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,10 @@ export function getSeriesConfig(props: EchartsConfigProps) {
9494
padAngle: s.padAngle,
9595
name: s.seriesName,
9696
label: {
97+
show: s.showLabel,
9798
position: s.labelPosition,
9899
alignTo: s.labelAlignTo,
100+
bleedMargin: s.labelBleedMargin,
99101
},
100102
labelLine: {
101103
length: s.labelLineLength,
@@ -112,6 +114,9 @@ export function getSeriesConfig(props: EchartsConfigProps) {
112114
shadowBlur: s.itemShadowBlur,
113115
},
114116
}
117+
if(s.labelAlignTo === 'edge') {
118+
config.label.edgeDistance = s.labelEdgeDistance;
119+
}
115120
if(s.roseType !== "none") {
116121
config.roseType = s.roseType;
117122
}
@@ -123,6 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
123128
}
124129
}
125130
}
131+
config.radius = s.radius;
132+
if(s.left!="" && s.top!="") {
133+
config.center = [s.left, s.top];
134+
}
135+
if(props.chartConfig.subtype === 'geoPie') config.coordinateSystem = 'geo';
126136
} else {
127137
config.data = s.data;
128138
config.center = s.date;
@@ -177,6 +187,15 @@ export function getEchartsConfig(
177187
containLabel: true,
178188
},
179189
};
190+
if(props.chartConfig.subtype === "geoPie") {
191+
config.geo = {
192+
map: 'jsonmap',
193+
roam: true,
194+
itemStyle: {
195+
areaColor: '#e7e8ea'
196+
}
197+
};
198+
}
180199

181200
//calendar pie
182201
if(props.chartConfig.subtype === "calendarPie") {

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { i18nObjs, trans } from "i18n/comps";
1616

1717
import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
1818
import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
19+
import { x } from "@fullcalendar/resource/internal-common";
1920

2021
export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
2122
export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
@@ -82,6 +83,10 @@ export const LabelPositionOptions = [
8283
const seriesChildrenMap = {
8384
columnName: StringControl,
8485
seriesName: StringControl,
86+
showLabel: withDefault(BoolControl, true),
87+
radius: withDefault(StringControl, 30),
88+
left: withDefault(StringControl, ""),
89+
top: withDefault(StringControl, ""),
8590
startAngle: withDefault(NumberControl, 0),
8691
endAngle: withDefault(NumberControl, 360),
8792
roseType: dropdownControl(RoseTypeOptions, "none"),
@@ -125,6 +130,15 @@ class SeriesComp extends SeriesTmpComp {
125130
this.children.columnName.dispatchChangeValueAction(value);
126131
}}
127132
/>
133+
{this.children.radius.propertyView({
134+
label: trans("pieChart.radius"),
135+
})}
136+
{this.children.left.propertyView({
137+
label: trans("pieChart.left"),
138+
})}
139+
{this.children.top.propertyView({
140+
label: trans("pieChart.top"),
141+
})}
128142
{this.children.startAngle.propertyView({
129143
label: trans("pieChart.startAngle"),
130144
})}
@@ -134,22 +148,25 @@ class SeriesComp extends SeriesTmpComp {
134148
{this.children.roseType.propertyView({
135149
label: trans("pieChart.roseType"),
136150
})}
137-
{this.children.labelPosition.propertyView({
151+
{this.children.showLabel.propertyView({
152+
label: trans("pieChart.showLabel"),
153+
})}
154+
{this.children.showLabel.getView() && this.children.labelPosition.propertyView({
138155
label: trans("pieChart.labelPosition"),
139156
})}
140-
{this.children.labelAlignTo.propertyView({
157+
{this.children.showLabel.getView() && this.children.labelAlignTo.propertyView({
141158
label: trans("pieChart.labelAlignTo"),
142159
})}
143-
{this.children.labelBleedMargin.propertyView({
160+
{this.children.showLabel.getView() && this.children.labelBleedMargin.propertyView({
144161
label: trans("pieChart.labelBleedMargin"),
145162
})}
146-
{this.children.labelAlignTo.getView() === "edge" && this.children.labelEdgeDistance.propertyView({
163+
{this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "edge" && this.children.labelEdgeDistance.propertyView({
147164
label: trans("pieChart.labelEdgeDistance"),
148165
})}
149-
{this.children.labelLineLength.propertyView({
166+
{this.children.showLabel.getView() && this.children.labelLineLength.propertyView({
150167
label: trans("pieChart.labelLineLength"),
151168
})}
152-
{this.children.labelAlignTo.getView() === "labelLine" && this.children.labelLineLength2.propertyView({
169+
{this.children.showLabel.getView() && this.children.labelAlignTo.getView() === "labelLine" && this.children.labelLineLength2.propertyView({
153170
label: trans("pieChart.labelLineLength2"),
154171
})}
155172
{this.children.padAngle.propertyView({

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,10 @@ export const en = {
348348
borderType: "Border Type",
349349
},
350350
pieChart: {
351+
showLabel: "Show Label",
352+
mapUrl: "Map URL",
353+
left: "Left",
354+
top: "Top",
351355
itemBg: "Background Image",
352356
itemColor: "Color",
353357
itemShadowColor: "Shadow Color",
@@ -568,6 +572,7 @@ export const en = {
568572
doughnutPie: "Doughnut Pie",
569573
rosePie: "Rose Pie",
570574
calendarPie: "Calendar Pie",
575+
geoPie: "Geo Map Pie",
571576
pieType: "Pie Chart Type",
572577
spending: "Spending",
573578
budget: "Budget",

‎client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

Lines changed: 54 additions & 0 deletions
Large diffs are not rendered by default.

‎client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,5 @@ export type I18nObjects = {
2828
timeXAxisLabel?: XAXisComponentOption["axisLabel"];
2929
imageEditorLocale?: Record<string, string>;
3030
defaultPieBg: string;
31+
usaMap: Record<string, unknown>;
3132
};

0 commit comments

Comments
 (0)