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