Skip to content

Commit 85c50d7

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1436 from lowcoder-org/feature-funnelChart
Feature funnel chart
2 parents 84f3285 + 969202a commit 85c50d7

File tree

57 files changed

+1628
-667
lines changed

Some content is hidden

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

57 files changed

+1628
-667
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333
echartsConfigOmitChildren,
3434
getEchartsConfig,
3535
getSelectedPoints,
36-
} from "comps/chartComp/chartUtils";
36+
} from "./chartUtils";
3737
import 'echarts-extension-gmap';
3838
import log from "loglevel";
3939

@@ -124,7 +124,7 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
124124
return getEchartsConfig(
125125
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
126126
chartSize,
127-
theme?.theme?.components?.candleStickChart || {},
127+
themeConfig
128128
);
129129
}, [chartSize, ...Object.values(echartsConfigChildren)]);
130130

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

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartDefaultTextStyle,
20+
EchartDefaultChartStyle
2021
} from "lowcoder-sdk";
2122
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2223
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +33,8 @@ import { EChartsOption } from "echarts";
3233
import { i18nObjs, trans } from "i18n/comps";
3334
import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
3435
import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
36+
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
37+
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
3538

3639
export const ChartTypeOptions = [
3740
{
@@ -237,7 +240,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
237240
export type CharOptionCompType = keyof typeof ChartOptionMap;
238241

239242
export const chartUiModeChildren = {
240-
title: StringControl,
243+
title: withDefault(StringControl, trans("echarts.defaultTitle")),
241244
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
242245
xAxisKey: valueComp<string>(""), // x-axis, key from data
243246
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
@@ -255,14 +258,25 @@ let chartJsonModeChildren: any = {
255258
echartsLegendConfig: EchartsLegendConfig,
256259
echartsLabelConfig: EchartsLabelConfig,
257260
echartsConfig: EchartsOptionComp,
258-
// style: styleControl(EchartsStyle, 'style'),
261+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
262+
echartsTitleConfig:EchartsTitleConfig,
263+
264+
left:withDefault(NumberControl,trans('chart.defaultLeft')),
265+
right:withDefault(NumberControl,trans('chart.defaultRight')),
266+
top:withDefault(NumberControl,trans('chart.defaultTop')),
267+
bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
268+
259269
tooltip: withDefault(BoolControl, true),
260270
legendVisibility: withDefault(BoolControl, true),
261271
}
262-
if (EchartsStyle) {
272+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
263273
chartJsonModeChildren = {
264274
...chartJsonModeChildren,
265-
style: styleControl(EchartsStyle, 'style'),
275+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
276+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
277+
xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
278+
yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
279+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
266280
}
267281
}
268282

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
} from "lowcoder-sdk";
1414
import { trans } from "i18n/comps";
1515
import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
16+
import {LegendConfig} from "./chartConfigs/legendConfig";
1617

1718
export function chartPropertyView(
1819
children: ChartCompChildrenType,
@@ -114,7 +115,14 @@ export function chartPropertyView(
114115
</div>
115116
</Section>
116117
<Section name={sectionNames.layout}>
118+
{children.echartsTitleConfig.getPropertyView()}
119+
{children.echartsTitleVerticalConfig.getPropertyView()}
120+
{children.legendConfig.getPropertyView()}
117121
{children.title.propertyView({ label: trans("chart.title") })}
122+
{children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
123+
{children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
124+
{children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
125+
{children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
118126
{children.chartConfig.children.compType.getView() !== "pie" && (
119127
<>
120128
{children.xAxisDirection.propertyView({
@@ -125,10 +133,24 @@ export function chartPropertyView(
125133
{children.yConfig.getPropertyView()}
126134
</>
127135
)}
128-
{children.legendConfig.getPropertyView()}
129136
{hiddenPropertyView(children)}
137+
{children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
138+
</Section>
139+
<Section name={sectionNames.chartStyle}>
140+
{children.chartStyle?.getPropertyView()}
141+
</Section>
142+
<Section name={sectionNames.titleStyle}>
143+
{children.titleStyle?.getPropertyView()}
144+
</Section>
145+
<Section name={sectionNames.xAxisStyle}>
146+
{children.xAxisStyle?.getPropertyView()}
147+
</Section>
148+
<Section name={sectionNames.yAxisStyle}>
149+
{children.yAxisStyle?.getPropertyView()}
150+
</Section>
151+
<Section name={sectionNames.legendStyle}>
152+
{children.legendStyle?.getPropertyView()}
130153
</Section>
131-
<Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
132154
</>
133155
);
134156

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

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
1212
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "./chartConfigs/chartUrls";
15+
import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1517

1618
export function transformData(
1719
originData: JSONObject[],
@@ -134,52 +136,15 @@ export function getEchartsConfig(
134136
theme?: any,
135137
): EChartsOptionWithMap {
136138
if (props.mode === "json") {
137-
let opt={
138-
"title": {
139-
"text": props.echartsTitle,
140-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
141-
"left":"center"
142-
},
143-
"backgroundColor": props?.style?.background || theme?.style?.background,
144-
"color": props.echartsOption.data?.map(data => data.color),
145-
"tooltip": props.tooltip && {
146-
"trigger": "item",
147-
"formatter": "{a} <br/>{b} : {c}%"
148-
},
149-
"legend":props.legendVisibility&& {
150-
"data": props.echartsOption.data?.map(data=>data.name),
151-
"top": props.echartsLegendConfig.top,
152-
},
153-
"series": [
154-
{
155-
"name": props.echartsConfig.type,
156-
"type": props.echartsConfig.type,
157-
"left": "10%",
158-
"top": 60,
159-
"bottom": 60,
160-
"width": "80%",
161-
"min": 0,
162-
"max": 100,
163-
"gap": 2,
164-
"label": {
165-
"show": true,
166-
"position": props.echartsLabelConfig.top
167-
},
168-
"data": props.echartsOption.data
169-
}
170-
]
171-
}
172-
return props.echartsOption ? opt : {};
173-
139+
return props.echartsOption ? props.echartsOption : {};
174140
}
175-
176141
if(props.mode === "map") {
177142
const {
178143
mapZoomLevel,
179144
mapCenterLat,
180145
mapCenterLng,
181-
mapOptions,
182-
showCharts,
146+
mapOptions,
147+
showCharts,
183148
} = props;
184149

185150
const echartsOption = mapOptions && showCharts ? mapOptions : {};
@@ -197,18 +162,38 @@ export function getEchartsConfig(
197162
// axisChart
198163
const axisChart = isAxisChart(props.chartConfig.type);
199164
const gridPos = {
200-
left: 20,
201-
right: props.legendConfig.left === "right" ? "10%" : 20,
202-
top: 50,
203-
bottom: 35,
165+
left: `${props?.left}%`,
166+
right: `${props?.right}%`,
167+
bottom: `${props?.bottom}%`,
168+
top: `${props?.top}%`,
204169
};
205-
let config: EChartsOptionWithMap = {
206-
title: { text: props.title, left: "center" },
207-
tooltip: {
208-
confine: true,
209-
trigger: axisChart ? "axis" : "item",
170+
let config: any = {
171+
title: {
172+
text: props.title,
173+
top: props.echartsTitleVerticalConfig.top,
174+
left:props.echartsTitleConfig.top,
175+
textStyle: {
176+
...styleWrapper(props?.titleStyle, theme?.titleStyle)
177+
}
178+
},
179+
backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
180+
legend: {
181+
...props.legendConfig,
182+
textStyle: {
183+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 15)
184+
}
185+
},
186+
tooltip: props.tooltip && {
187+
trigger: "axis",
188+
axisPointer: {
189+
type: "line",
190+
lineStyle: {
191+
color: "rgba(0,0,0,0.2)",
192+
width: 2,
193+
type: "solid"
194+
}
195+
}
210196
},
211-
legend: props.legendConfig,
212197
grid: {
213198
...gridPos,
214199
containLabel: true,
@@ -238,7 +223,13 @@ export function getEchartsConfig(
238223
sourceHeader: false,
239224
},
240225
],
241-
series: getSeriesConfig(props),
226+
series: getSeriesConfig(props).map(series => ({
227+
...series,
228+
itemStyle: {
229+
...series.itemStyle,
230+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
231+
}
232+
})),
242233
};
243234
if (axisChart) {
244235
// pure chart's size except the margin around
@@ -266,9 +257,19 @@ export function getEchartsConfig(
266257
config = {
267258
...config,
268259
// @ts-ignore
269-
xAxis: finalXyConfig.xConfig,
260+
xAxis: {
261+
...finalXyConfig.xConfig,
262+
axisLabel: {
263+
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
264+
}
265+
},
270266
// @ts-ignore
271-
yAxis: finalXyConfig.yConfig,
267+
yAxis: {
268+
...finalXyConfig.yConfig,
269+
axisLabel: {
270+
...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
271+
}
272+
},
272273
};
273274
}
274275
// log.log("Echarts transformedData and config", transformedData, config);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartDefaultChartStyle,
19+
EchartCandleStickChartStyle,
2020
EchartDefaultTextStyle
2121
} from "lowcoder-sdk";
2222
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2323
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
2424
import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
2525
import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
26-
import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
26+
import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
2727
import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
2828
import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
2929
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
@@ -252,7 +252,7 @@ export const chartUiModeChildren = {
252252
let chartJsonModeChildren: any = {
253253
echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
254254
echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
255-
echartsLegendConfig: EchartsLegendConfig,
255+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
256256
echartsLabelConfig: EchartsLabelConfig,
257257
echartsTitleConfig:EchartsTitleConfig,
258258
echartsConfig: EchartsOptionComp,
@@ -263,13 +263,13 @@ let chartJsonModeChildren: any = {
263263
dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
264264
dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
265265
tooltip: withDefault(BoolControl, true),
266-
legendVisibility: withDefault(BoolControl, true),
267266
dataZoomVisibility: withDefault(BoolControl, true),
267+
axisFlagVisibility: withDefault(BoolControl, true),
268268
}
269-
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
269+
if (EchartCandleStickChartStyle && EchartDefaultTextStyle) {
270270
chartJsonModeChildren = {
271271
...chartJsonModeChildren,
272-
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
272+
chartStyle: styleControl(EchartCandleStickChartStyle, 'chartStyle'),
273273
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
274274
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
275275
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),

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

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,20 @@ export function candleStickChartPropertyView(
3232
),
3333
})}
3434
{children.echartsTitleConfig.getPropertyView()}
35-
{children.left.propertyView({ label: trans("candleStickChart.left") })}
36-
{children.right.propertyView({ label: trans("candleStickChart.right") })}
37-
{children.top.propertyView({ label: trans("candleStickChart.top") })}
38-
{children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
39-
{children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
40-
{children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
41-
{children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })}
42-
{children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })}
43-
{children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
44-
{children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
45-
{children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
35+
{children.echartsTitleVerticalConfig.getPropertyView()}
36+
{children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })}
37+
{children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
38+
{children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
39+
{children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
40+
{children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
41+
{children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight"), tooltip: trans("candleStickChart.dataZoomHeightTooltip") })}
42+
{children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom"), tooltip: trans("candleStickChart.dataZoomBottomTooltip") })}
43+
{children.axisFlagVisibility.propertyView({label: trans("candleStickChart.axisFlagVisibility"), tooltip: trans("candleStickChart.axisFlagVisibilityTooltip") })}
44+
{children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility"), tooltip: trans("candleStickChart.dataZoomVisibilityTooltip") })}
4645
</Section>
4746
<Section name={sectionNames.interaction}>
4847
{children.onEvent.propertyView()}
4948
</Section>
50-
<Section name={sectionNames.style}>
51-
{children.style?.getPropertyView()}
52-
</Section>
5349
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}
5450
</Section>
5551

@@ -59,15 +55,12 @@ export function candleStickChartPropertyView(
5955
<Section name={sectionNames.titleStyle}>
6056
{children.titleStyle?.getPropertyView()}
6157
</Section>
62-
<Section name={sectionNames.labelStyle}>
58+
<Section name={sectionNames.xAxisStyle}>
6359
{children.labelStyle?.getPropertyView()}
6460
</Section>
65-
{
66-
children.legendVisibility.getView() ?
67-
<Section name={sectionNames.legendStyle}>
68-
{children.legendStyle?.getPropertyView()}
69-
</Section> : <></>
70-
}
61+
<Section name={sectionNames.yAxisStyle}>
62+
{children.legendStyle?.getPropertyView()}
63+
</Section>
7164
</>
7265
);
7366

0 commit comments

Comments
 (0)