Skip to content

Commit 73ad9ee

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1458 from lowcoder-org/dev
Dev -> Main v2.6
2 parents 100d845 + 2112ea4 commit 73ad9ee

File tree

271 files changed

+18348
-1926
lines changed

Some content is hidden

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

271 files changed

+18348
-1926
lines changed

‎client/VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.5.3
1+
2.6.0

‎client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-frontend",
3-
"version": "2.5.0",
3+
"version": "2.6.0",
44
"type": "module",
55
"private": true,
66
"workspaces": [

‎client/packages/lowcoder-comps/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "2.5.4",
3+
"version": "2.6.1",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

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

Lines changed: 7 additions & 4 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

@@ -120,13 +120,16 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
120120
}, [onUIEvent]);
121121

122122
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
123+
124+
const childrenProps = childrenToProps(echartsConfigChildren);
125+
123126
const option = useMemo(() => {
124127
return getEchartsConfig(
125-
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
128+
childrenProps as ToViewReturn<typeof echartsConfigChildren>,
126129
chartSize,
127-
theme?.theme?.components?.candleStickChart || {},
130+
themeConfig
128131
);
129-
}, [chartSize, ...Object.values(echartsConfigChildren)]);
132+
}, [childrenProps, chartSize, ...Object.values(echartsConfigChildren)]);
130133

131134
useEffect(() => {
132135
comp.children.mapInstance.dispatch(changeValueAction(null, false))

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartDefaultTextStyle,
20+
EchartDefaultChartStyle,
21+
toArray
2022
} from "lowcoder-sdk";
2123
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2224
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -32,6 +34,8 @@ import { EChartsOption } from "echarts";
3234
import { i18nObjs, trans } from "i18n/comps";
3335
import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
3436
import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
37+
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
38+
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
3539

3640
export const ChartTypeOptions = [
3741
{
@@ -237,7 +241,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
237241
export type CharOptionCompType = keyof typeof ChartOptionMap;
238242

239243
export const chartUiModeChildren = {
240-
title: StringControl,
244+
title: withDefault(StringControl, trans("echarts.defaultTitle")),
241245
data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
242246
xAxisKey: valueComp<string>(""), // x-axis, key from data
243247
xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
@@ -250,19 +254,31 @@ export const chartUiModeChildren = {
250254
};
251255

252256
let chartJsonModeChildren: any = {
257+
echartsData: jsonControl(toArray),
253258
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
254259
echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
255260
echartsLegendConfig: EchartsLegendConfig,
256261
echartsLabelConfig: EchartsLabelConfig,
257262
echartsConfig: EchartsOptionComp,
258-
// style: styleControl(EchartsStyle, 'style'),
263+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
264+
echartsTitleConfig:EchartsTitleConfig,
265+
266+
left:withDefault(NumberControl,trans('chart.defaultLeft')),
267+
right:withDefault(NumberControl,trans('chart.defaultRight')),
268+
top:withDefault(NumberControl,trans('chart.defaultTop')),
269+
bottom:withDefault(NumberControl,trans('chart.defaultBottom')),
270+
259271
tooltip: withDefault(BoolControl, true),
260272
legendVisibility: withDefault(BoolControl, true),
261273
}
262-
if (EchartsStyle) {
274+
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
263275
chartJsonModeChildren = {
264276
...chartJsonModeChildren,
265-
style: styleControl(EchartsStyle, 'style'),
277+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
278+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
279+
xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'),
280+
yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
281+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
266282
}
267283
}
268284

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

Lines changed: 30 additions & 5 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,
@@ -27,9 +28,7 @@ export function chartPropertyView(
2728
const uiModePropertyView = (
2829
<>
2930
<Section name={trans("chart.data")}>
30-
{children.data.propertyView({
31-
label: trans("chart.data"),
32-
})}
31+
{children.echartsData.propertyView({ label: trans("chart.data") })}
3332
<Dropdown
3433
value={children.chartConfig.children.compType.getView()}
3534
options={ChartTypeOptions}
@@ -114,7 +113,14 @@ export function chartPropertyView(
114113
</div>
115114
</Section>
116115
<Section name={sectionNames.layout}>
116+
{children.echartsTitleConfig.getPropertyView()}
117+
{children.echartsTitleVerticalConfig.getPropertyView()}
118+
{children.legendConfig.getPropertyView()}
117119
{children.title.propertyView({ label: trans("chart.title") })}
120+
{children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })}
121+
{children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })}
122+
{children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })}
123+
{children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
118124
{children.chartConfig.children.compType.getView() !== "pie" && (
119125
<>
120126
{children.xAxisDirection.propertyView({
@@ -125,10 +131,29 @@ export function chartPropertyView(
125131
{children.yConfig.getPropertyView()}
126132
</>
127133
)}
128-
{children.legendConfig.getPropertyView()}
129134
{hiddenPropertyView(children)}
135+
{children.tooltip.propertyView({label: trans("echarts.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()}
151+
</Section>
152+
<Section name={sectionNames.advanced}>
153+
{children.data.propertyView({
154+
label: trans("chart.data"),
155+
})}
130156
</Section>
131-
<Section name={sectionNames.style}>{children.chartConfig.getPropertyView()}</Section>
132157
</>
133158
);
134159

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

Lines changed: 58 additions & 56 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,
@@ -227,9 +212,7 @@ export function getEchartsConfig(
227212
.map((s) => s.getView().columnName);
228213
// y-axis is category and time, data doesn't need to aggregate
229214
const transformedData =
230-
yAxisConfig.type === "category" || yAxisConfig.type === "time"
231-
? props.data
232-
: 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);
233216
config = {
234217
...config,
235218
dataset: [
@@ -238,7 +221,16 @@ export function getEchartsConfig(
238221
sourceHeader: false,
239222
},
240223
],
241-
series: getSeriesConfig(props),
224+
series: getSeriesConfig(props).map(series => ({
225+
...series,
226+
itemStyle: {
227+
...series.itemStyle,
228+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
229+
},
230+
lineStyle: {
231+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
232+
}
233+
})),
242234
};
243235
if (axisChart) {
244236
// pure chart's size except the margin around
@@ -266,9 +258,19 @@ export function getEchartsConfig(
266258
config = {
267259
...config,
268260
// @ts-ignore
269-
xAxis: finalXyConfig.xConfig,
261+
xAxis: {
262+
...finalXyConfig.xConfig,
263+
axisLabel: {
264+
...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11)
265+
}
266+
},
270267
// @ts-ignore
271-
yAxis: finalXyConfig.yConfig,
268+
yAxis: {
269+
...finalXyConfig.yConfig,
270+
axisLabel: {
271+
...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11)
272+
}
273+
},
272274
};
273275
}
274276
// log.log("Echarts transformedData and config", transformedData, config);

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