Skip to content

Commit 688aa25

Browse files
Imiss-U1025Imiss-U1025
committed
Added control fields and style fields to Basic and Legacy charts.
1 parent a6881ab commit 688aa25

File tree

8 files changed

+210
-80
lines changed

8 files changed

+210
-80
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('candleStickChart.defaultLeft')),
265+
right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
266+
top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
267+
bottom:withDefault(NumberControl,trans('candleStickChart.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: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,13 @@ export function chartPropertyView(
114114
</div>
115115
</Section>
116116
<Section name={sectionNames.layout}>
117+
{children.echartsTitleConfig.getPropertyView()}
118+
{children.echartsTitleVerticalConfig.getPropertyView()}
117119
{children.title.propertyView({ label: trans("chart.title") })}
120+
{children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
121+
{children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
122+
{children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
123+
{children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
118124
{children.chartConfig.children.compType.getView() !== "pie" && (
119125
<>
120126
{children.xAxisDirection.propertyView({
@@ -125,10 +131,24 @@ export function chartPropertyView(
125131
{children.yConfig.getPropertyView()}
126132
</>
127133
)}
128-
{children.legendConfig.getPropertyView()}
129134
{hiddenPropertyView(children)}
135+
{children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
136+
</Section>
137+
<Section name={sectionNames.chartStyle}>
138+
{children.chartStyle?.getPropertyView()}
139+
</Section>
140+
<Section name={sectionNames.titleStyle}>
141+
{children.titleStyle?.getPropertyView()}
142+
</Section>
143+
<Section name={sectionNames.xAxisStyle}>
144+
{children.xAxisStyle?.getPropertyView()}
145+
</Section>
146+
<Section name={sectionNames.yAxisStyle}>
147+
{children.yAxisStyle?.getPropertyView()}
148+
</Section>
149+
<Section name={sectionNames.legendStyle}>
150+
{children.legendStyle?.getPropertyView()}
130151
</Section>
131-
<Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
132152
</>
133153
);
134154

‎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/chartComp/chartComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,8 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
159159
const option = useMemo(() => {
160160
return getEchartsConfig(
161161
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
162-
chartSize
162+
chartSize,
163+
themeConfig
163164
);
164165
}, [chartSize, ...Object.values(echartsConfigChildren)]);
165166

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ import {
1616
ValueFromOption,
1717
uiChildren,
1818
clickEvent,
19+
EchartDefaultTextStyle,
20+
styleControl,
21+
EchartDefaultChartStyle
1922
} from "lowcoder-sdk";
2023
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2124
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -27,6 +30,11 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
2730
import { SeriesListComp } from "./seriesComp";
2831
import { EChartsOption } from "echarts";
2932
import { i18nObjs, trans } from "i18n/comps";
33+
import {EchartsTitleVerticalConfig} from "./chartConfigs/echartsTitleVerticalConfig";
34+
import {EchartsTitleConfig} from "./chartConfigs/echartsTitleConfig";
35+
import {EchartsLegendConfig} from "./chartConfigs/echartsLegendConfig";
36+
import {EchartsLegendOrientConfig} from "./chartConfigs/echartsLegendOrientConfig";
37+
import {EchartsLegendAlignConfig} from "./chartConfigs/echartsLegendAlignConfig";
3038

3139
export const ChartTypeOptions = [
3240
{
@@ -251,10 +259,37 @@ export const chartUiModeChildren = {
251259
legendConfig: LegendConfig,
252260
chartConfig: ChartOptionComp,
253261
onUIEvent: eventHandlerControl(UIEventOptions),
262+
254263
};
255264

256-
const chartJsonModeChildren = {
265+
let chartJsonModeChildren: any = {
266+
echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
257267
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
268+
269+
270+
left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
271+
right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
272+
top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
273+
bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
274+
275+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
276+
echartsTitleConfig:EchartsTitleConfig,
277+
echartsLegendConfig: EchartsLegendConfig,
278+
echartsLegendOrientConfig: EchartsLegendOrientConfig,
279+
echartsLegendAlignConfig: EchartsLegendAlignConfig,
280+
legendVisibility: withDefault(BoolControl, true),
281+
tooltip: withDefault(BoolControl, true),
282+
}
283+
284+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
285+
chartJsonModeChildren = {
286+
...chartJsonModeChildren,
287+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
288+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
289+
xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
290+
yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
291+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
292+
}
258293
}
259294

260295
const chartMapModeChildren = {

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,13 @@ export function chartPropertyView(
114114
</div>
115115
</Section>
116116
<Section name={sectionNames.layout}>
117-
{children.title.propertyView({ label: trans("chart.title") })}
117+
{children.echartsTitleConfig.getPropertyView()}
118+
{children.echartsTitleVerticalConfig.getPropertyView()}
119+
{children.echartsTitle.propertyView({ label: trans("chart.title") })}
120+
{children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })}
121+
{children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })}
122+
{children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })}
123+
{children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
118124
{children.chartConfig.children.compType.getView() !== "pie" && (
119125
<>
120126
{children.xAxisDirection.propertyView({
@@ -125,10 +131,25 @@ export function chartPropertyView(
125131
{children.yConfig.getPropertyView()}
126132
</>
127133
)}
128-
{children.legendConfig.getPropertyView()}
129134
{hiddenPropertyView(children)}
135+
{children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
136+
</Section>
137+
138+
<Section name={sectionNames.chartStyle}>
139+
{children.chartStyle?.getPropertyView()}
140+
</Section>
141+
<Section name={sectionNames.titleStyle}>
142+
{children.titleStyle?.getPropertyView()}
143+
</Section>
144+
<Section name={sectionNames.xAxisStyle}>
145+
{children.xAxisStyle?.getPropertyView()}
146+
</Section>
147+
<Section name={sectionNames.yAxisStyle}>
148+
{children.yAxisStyle?.getPropertyView()}
149+
</Section>
150+
<Section name={sectionNames.legendStyle}>
151+
{children.legendStyle?.getPropertyView()}
130152
</Section>
131-
<Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
132153
</>
133154
);
134155

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