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