Skip to content

Commit ec01a66

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1451 from lowcoder-org/feature-funnelChart
Remote Chart
2 parents ba03d3b + 9659cdf commit ec01a66

File tree

54 files changed

+822
-553
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+822
-553
lines changed

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ export const chartUiModeChildren = {
253253
};
254254

255255
let chartJsonModeChildren: any = {
256+
echartsData: jsonControl(toJSONObjectArray),
256257
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
257258
echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
258259
echartsLegendConfig: EchartsLegendConfig,

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ export function chartPropertyView(
2828
const uiModePropertyView = (
2929
<>
3030
<Section name={trans("chart.data")}>
31-
{children.data.propertyView({
32-
label: trans("chart.data"),
33-
})}
31+
{children.echartsData.propertyView({ label: trans("chart.data") })}
3432
<Dropdown
3533
value={children.chartConfig.children.compType.getView()}
3634
options={ChartTypeOptions}
@@ -151,6 +149,11 @@ export function chartPropertyView(
151149
<Section name={sectionNames.legendStyle}>
152150
{children.legendStyle?.getPropertyView()}
153151
</Section>
152+
<Section name={sectionNames.advanced}>
153+
{children.data.propertyView({
154+
label: trans("chart.data"),
155+
})}
156+
</Section>
154157
</>
155158
);
156159

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,7 @@ export function getEchartsConfig(
212212
.map((s) => s.getView().columnName);
213213
// y-axis is category and time, data doesn't need to aggregate
214214
const transformedData =
215-
yAxisConfig.type === "category" || yAxisConfig.type === "time"
216-
? props.data
217-
: transformData(props.data, props.xAxisKey, seriesColumnNames);
215+
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
218216
config = {
219217
...config,
220218
dataset: [
@@ -228,6 +226,9 @@ export function getEchartsConfig(
228226
itemStyle: {
229227
...series.itemStyle,
230228
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
229+
},
230+
lineStyle: {
231+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
231232
}
232233
})),
233234
};

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,13 +140,14 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
140140
}, [onUIEvent]);
141141

142142
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
143+
const childrenProps = childrenToProps(echartsConfigChildren);
143144
const option = useMemo(() => {
144145
return getEchartsConfig(
145-
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
146+
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
146147
chartSize,
147-
theme?.theme?.components?.candleStickChart || {},
148+
themeConfig
148149
);
149-
}, [chartSize, ...Object.values(echartsConfigChildren)]);
150+
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
150151

151152
useEffect(() => {
152153
comp.children.mapInstance.dispatch(changeValueAction(null, false))

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ export const chartUiModeChildren = {
250250
};
251251

252252
let chartJsonModeChildren: any = {
253+
echartsData: jsonControl(toObject),
253254
echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
254255
echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
255256
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
@@ -271,8 +272,8 @@ if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
271272
...chartJsonModeChildren,
272273
chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
273274
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
274-
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
275-
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
275+
xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'),
276+
yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
276277
}
277278
}
278279

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,7 @@ export function candleStickChartPropertyView(
1616
const jsonModePropertyView = (
1717
<>
1818
<Section name={trans("chart.config")}>
19-
{children.echartsOption.propertyView({
20-
label: trans("chart.echartsOptionLabel"),
21-
styleName: "higher",
22-
tooltip: (
23-
<div>
24-
<a href={optionUrl} target="_blank" rel="noopener noreferrer">
25-
{trans("chart.echartsOptionTooltip")}
26-
</a>
27-
<br />
28-
<a href={examplesUrl} target="_blank" rel="noopener noreferrer">
29-
{trans("chart.echartsOptionExamples")}
30-
</a>
31-
</div>
32-
),
33-
})}
19+
{children.echartsData.propertyView({ label: trans("chart.data") })}
3420
{children.echartsTitleConfig.getPropertyView()}
3521
{children.echartsTitleVerticalConfig.getPropertyView()}
3622
{children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
@@ -56,10 +42,27 @@ export function candleStickChartPropertyView(
5642
{children.titleStyle?.getPropertyView()}
5743
</Section>
5844
<Section name={sectionNames.xAxisStyle}>
59-
{children.labelStyle?.getPropertyView()}
45+
{children.xAxisStyle?.getPropertyView()}
6046
</Section>
6147
<Section name={sectionNames.yAxisStyle}>
62-
{children.legendStyle?.getPropertyView()}
48+
{children.yAxisStyle?.getPropertyView()}
49+
</Section>
50+
<Section name={sectionNames.advanced}>
51+
{children.echartsOption.propertyView({
52+
label: trans("chart.echartsOptionLabel"),
53+
styleName: "higher",
54+
tooltip: (
55+
<div>
56+
<a href={optionUrl} target="_blank" rel="noopener noreferrer">
57+
{trans("chart.echartsOptionTooltip")}
58+
</a>
59+
<br />
60+
<a href={examplesUrl} target="_blank" rel="noopener noreferrer">
61+
{trans("chart.echartsOptionExamples")}
62+
</a>
63+
</div>
64+
),
65+
})}
6366
</Section>
6467
</>
6568
);

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

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export function getEchartsConfig(
149149
}
150150
},
151151
backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
152-
color: props?.echartsOption.data?.map(data => data.color),
152+
color: props?.echartsData.data?.map(data => data.color) || props?.echartsOption.data?.map(data => data.color),
153153
tooltip: props?.tooltip && {
154154
trigger: "axis",
155155
axisPointer: {
@@ -178,25 +178,25 @@ export function getEchartsConfig(
178178
splitArea: props?.axisFlagVisibility && {
179179
show: true,
180180
areaStyle: {
181-
color: props?.echartsOption?.axisColor
181+
color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
182182
}
183183
},
184184
axisLabel: {
185-
...styleWrapper(props?.legendStyle, theme?.legendStyle, 13),
185+
...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13),
186186
}
187187
},
188188
xAxis: props?.echartsOption && {
189189
type: 'category',
190-
data: props?.echartsOption.xAxis && props?.echartsOption.xAxis.data,
190+
data: props?.echartsData.xAxis && props?.echartsData.xAxis.data || props?.echartsOption.xAxis && props?.echartsOption.xAxis.data,
191191
splitArea: !props?.axisFlagVisibility && {
192192
show: true,
193193
areaStyle: {
194194
// Provide multiple colors to alternate through
195-
color: props?.echartsOption?.axisColor
195+
color: props?.echartsData?.axisColor || props?.echartsOption?.axisColor
196196
},
197197
},
198198
axisLabel: {
199-
...styleWrapper(props?.labelStyle, theme?.labelStyle, 13),
199+
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13),
200200
},
201201
boundaryGap: true,
202202
// Turn off x-axis split lines if desired, so you only see colored areas
@@ -205,16 +205,25 @@ export function getEchartsConfig(
205205
},
206206
// Show split areas, each day with a different background color
207207
},
208-
series: props?.echartsOption && [
208+
series: props?.echartsOption && [
209209
{
210210
name: props?.echartsConfig.type,
211211
type: props?.echartsConfig.type,
212212
label: {
213213
show: true,
214214
position: props?.echartsLabelConfig.top
215215
},
216-
data: props?.echartsOption.data,
217-
itemStyle: {
216+
data: props?.echartsData?.data || props?.echartsOption.data,
217+
itemStyle: props?.echartsData.itemStyle ? {
218+
...props?.echartsData.itemStyle,
219+
borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
220+
borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
221+
borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
222+
shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
223+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
224+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
225+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
226+
} : {
218227
...props?.echartsOption.itemStyle,
219228
borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
220229
borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
@@ -227,7 +236,7 @@ export function getEchartsConfig(
227236
},
228237
],
229238
}
230-
return props.echartsOption ? opt : {};
239+
return props.echartsData || props.echartsOption ? opt : {};
231240

232241
}
233242

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,14 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
156156
}, [mode, onUIEvent]);
157157

158158
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
159+
const childrenProps = childrenToProps(echartsConfigChildren);
159160
const option = useMemo(() => {
160161
return getEchartsConfig(
161-
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
162+
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
162163
chartSize,
163164
themeConfig
164165
);
165-
}, [chartSize, ...Object.values(echartsConfigChildren)]);
166+
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
166167

167168
const isMapScriptLoaded = useMemo(() => {
168169
return mapScriptLoaded || window?.google;

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,7 @@ export const chartUiModeChildren = {
263263
};
264264

265265
let chartJsonModeChildren: any = {
266+
echartsData: jsonControl(toJSONObjectArray),
266267
echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
267268
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
268269

‎client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ export function chartPropertyView(
2727
const uiModePropertyView = (
2828
<>
2929
<Section name={trans("chart.data")}>
30-
{children.data.propertyView({
31-
label: trans("chart.data"),
32-
})}
30+
{children.echartsData.propertyView({ label: trans("chart.data") })}
3331
<Dropdown
3432
value={children.chartConfig.children.compType.getView()}
3533
options={ChartTypeOptions}
@@ -151,6 +149,11 @@ export function chartPropertyView(
151149
<Section name={sectionNames.legendStyle}>
152150
{children.legendStyle?.getPropertyView()}
153151
</Section>
152+
<Section name={sectionNames.advanced}>
153+
{children.data.propertyView({
154+
label: trans("chart.data"),
155+
})}
156+
</Section>
154157
</>
155158
);
156159

‎client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export function getEchartsConfig(
136136
theme?: any,
137137
): EChartsOptionWithMap {
138138
if (props.mode === "json") {
139-
return props.echartsOption ? props.echartsOption : {};
139+
return props.echartsOption || props.echartsOption ? props.echartsOption : {};
140140
}
141141
if(props.mode === "map") {
142142
const {
@@ -181,7 +181,7 @@ export function getEchartsConfig(
181181
...props.legendConfig,
182182
textStyle: {
183183
...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
184-
}
184+
},
185185
},
186186
tooltip: props.tooltip&&{
187187
trigger: "axis",
@@ -212,9 +212,7 @@ export function getEchartsConfig(
212212
.map((s) => s.getView().columnName);
213213
// y-axis is category and time, data doesn't need to aggregate
214214
const transformedData =
215-
yAxisConfig.type === "category" || yAxisConfig.type === "time"
216-
? props.data
217-
: transformData(props.data, props.xAxisKey, seriesColumnNames);
215+
yAxisConfig.type === "category" || yAxisConfig.type === "time" ? props.echartsData.length && props.echartsData || props.data : transformData(props.echartsData.length && props.echartsData || props.data, props.xAxisKey, seriesColumnNames);
218216
config = {
219217
...config,
220218
dataset: [
@@ -228,6 +226,9 @@ export function getEchartsConfig(
228226
itemStyle: {
229227
...series.itemStyle,
230228
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
229+
},
230+
lineStyle: {
231+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
231232
}
232233
})),
233234
};

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,14 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
116116
}, [mapScriptLoaded]);
117117

118118
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
119+
const childrenProps = childrenToProps(echartsConfigChildren);
119120
const option = useMemo(() => {
120121
return getEchartsConfig(
121-
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
122+
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
122123
chartSize,
123124
theme?.theme?.components?.candleStickChart || {},
124125
);
125-
}, [chartSize, ...Object.values(echartsConfigChildren)]);
126+
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
126127

127128
const isMapScriptLoaded = useMemo(() => {
128129
return mapScriptLoaded || window?.google;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,13 +141,14 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
141141
}, [onUIEvent]);
142142

143143
let echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
144+
const childrenProps = childrenToProps(echartsConfigChildren);
144145
const option = useMemo(() => {
145146
return getEchartsConfig(
146-
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
147+
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
147148
chartSize,
148149
themeConfig,
149150
);
150-
}, [chartSize, ...Object.values(echartsConfigChildren), theme]);
151+
}, [theme, childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
151152

152153
useEffect(() => {
153154
comp.children.mapInstance.dispatch(changeValueAction(null, false))

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ export const chartUiModeChildren = {
255255
};
256256

257257
let chartJsonModeChildren: any = {
258+
echartsData: jsonControl(toObject),
258259
echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption),
259260
echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
260261
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,8 @@ export function funnelChartPropertyView(
1616
const jsonModePropertyView = (
1717
<>
1818
<Section name={trans("chart.config")}>
19-
{children.echartsOption.propertyView({
20-
label: trans("chart.echartsOptionLabel"),
21-
styleName: "higher",
22-
tooltip: (
23-
<div>
24-
<a href={optionUrl} target="_blank" rel="noopener noreferrer">
25-
{trans("chart.echartsOptionTooltip")}
26-
</a>
27-
<br />
28-
<a href={examplesUrl} target="_blank" rel="noopener noreferrer">
29-
{trans("chart.echartsOptionExamples")}
30-
</a>
31-
</div>
32-
),
33-
})}
19+
{children.echartsData.propertyView({ label: trans("chart.data") })}
20+
3421
{children.echartsTitleConfig.getPropertyView()}
3522
{children.echartsTitleVerticalConfig.getPropertyView()}
3623
{children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
@@ -74,6 +61,23 @@ export function funnelChartPropertyView(
7461
</Section> : <></>
7562
}
7663
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
64+
<Section name={sectionNames.advanced}>
65+
{children.echartsOption.propertyView({
66+
label: trans("chart.echartsOptionLabel"),
67+
styleName: "higher",
68+
tooltip: (
69+
<div>
70+
<a href={optionUrl} target="_blank" rel="noopener noreferrer">
71+
{trans("chart.echartsOptionTooltip")}
72+
</a>
73+
<br />
74+
<a href={examplesUrl} target="_blank" rel="noopener noreferrer">
75+
{trans("chart.echartsOptionExamples")}
76+
</a>
77+
</div>
78+
),
79+
})}
80+
</Section>
7781
</>
7882
);
7983

0 commit comments

Comments
 (0)