Skip to content

Commit 710831b

Browse files
Imiss-U1025Imiss-U1025
committed
Added control fields and style fields on CandleStick charts.
1 parent 3f78a0a commit 710831b

File tree

11 files changed

+175
-104
lines changed

11 files changed

+175
-104
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ 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,8 +263,8 @@ 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+
axisFlag: withDefault(BoolControl, true),
268268
}
269269
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
270270
chartJsonModeChildren = {

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

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,20 @@ export function candleStickChartPropertyView(
3232
),
3333
})}
3434
{children.echartsTitleConfig.getPropertyView()}
35+
{children.echartsTitleVerticalConfig.getPropertyView()}
3536
{children.left.propertyView({ label: trans("candleStickChart.left") })}
3637
{children.right.propertyView({ label: trans("candleStickChart.right") })}
3738
{children.top.propertyView({ label: trans("candleStickChart.top") })}
3839
{children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
39-
{children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
4040
{children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
4141
{children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })}
4242
{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")})}
43+
{children.axisFlag.propertyView({label: trans("candleStickChart.axisFlag")})}
4544
{children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
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

‎client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts

Lines changed: 75 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import { useContext } from "react";
1616
import parseBackground from "../../util/gradientBackgroundColor";
17+
import {styleWrapper} from "../../util/styleWrapper";
1718

1819
export function transformData(
1920
originData: JSONObject[],
@@ -138,73 +139,91 @@ export function getEchartsConfig(
138139

139140

140141
if (props.mode === "json") {
141-
let opt={
142-
"title": {
143-
"text": props.echartsTitle,
144-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
145-
"left":props.echartsTitleConfig.top,
146-
"textStyle": {
147-
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
148-
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
149-
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
150-
"color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
151-
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
152-
"textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
153-
"textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
154-
"textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
155-
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
156-
}
142+
let opt= {
143+
title: {
144+
text: props.echartsTitle,
145+
top: props.echartsTitleVerticalConfig.top,
146+
left:props.echartsTitleConfig.top,
157147
},
158-
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
159-
"color": props?.echartsOption.data?.map(data => data.color),
160-
"tooltip": props?.tooltip&&{
161-
"trigger": "axis",
162-
"axisPointer": {
163-
"type": "cross"
148+
backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
149+
color: props?.echartsOption.data?.map(data => data.color),
150+
tooltip: props?.tooltip && {
151+
trigger: "axis",
152+
axisPointer: {
153+
type: "cross"
164154
}
165155
},
166-
"grid": {
167-
"left": `${props?.left}%`,
168-
"right": `${props?.right}%`,
169-
"bottom": `${props?.bottom}%`,
170-
"top": `${props?.top}%`,
156+
grid: {
157+
left: `${props?.left}%`,
158+
right: `${props?.right}%`,
159+
bottom: `${props?.bottom}%`,
160+
top: `${props?.top}%`,
171161
},
172-
"dataZoom": [
162+
dataZoom: [
173163
{
174-
"show": props?.dataZoomVisibility,
175-
"type": 'slider',
176-
"start": 0,
177-
"end": 100,
178-
"bottom": props?.dataZoomBottom,
179-
'height': props?.dataZoomHeight
164+
show: props?.dataZoomVisibility,
165+
type: 'slider',
166+
start: 0,
167+
end: 100,
168+
bottom: props?.dataZoomBottom,
169+
height: props?.dataZoomHeight
180170
}
181171
],
182-
"xAxis": {
183-
"type": "category",
184-
"data": props?.echartsOption.xAxis.data
172+
yAxis: {
173+
type: "value",
174+
scale: true,
175+
splitArea: props?.axisFlag && {
176+
show: true,
177+
areaStyle: {
178+
color: props?.echartsOption?.axisColor
179+
}
180+
},
181+
axisLabel: {
182+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 13),
183+
}
185184
},
186-
"yAxis": {
187-
"type": "value",
188-
"scale": true
185+
xAxis: props?.echartsOption && {
186+
type: 'category',
187+
data: props?.echartsOption.xAxis.data,
188+
splitArea: !props?.axisFlag && {
189+
show: true,
190+
areaStyle: {
191+
// Provide multiple colors to alternate through
192+
color: props?.echartsOption?.axisColor
193+
},
194+
},
195+
axisLabel: {
196+
...styleWrapper(props?.labelStyle, theme?.labelStyle, 13),
197+
},
198+
boundaryGap: true,
199+
// Turn off x-axis split lines if desired, so you only see colored areas
200+
splitLine: {
201+
show: false
202+
},
203+
// Show split areas, each day with a different background color
189204
},
190-
"series": [
205+
series: props?.echartsOption && [
191206
{
192-
"name": props?.echartsConfig.type,
193-
"type": props?.echartsConfig.type,
194-
"left": "10%",
195-
"top": 60,
196-
"bottom": 60,
197-
"width": "80%",
198-
"min": 0,
199-
"max": 100,
200-
"gap": 2,
201-
"label": {
202-
"show": true,
203-
"position": props?.echartsLabelConfig.top
207+
name: props?.echartsConfig.type,
208+
type: props?.echartsConfig.type,
209+
label: {
210+
show: true,
211+
position: props?.echartsLabelConfig.top
204212
},
205-
"data": props?.echartsOption.data,
206-
}
207-
]
213+
data: props?.echartsOption.data,
214+
itemStyle: {
215+
...props?.echartsOption.itemStyle,
216+
borderColor: props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
217+
borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
218+
borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
219+
borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
220+
shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
221+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
222+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
223+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
224+
}
225+
},
226+
],
208227
}
209228
return props.echartsOption ? opt : {};
210229

‎client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
AlignBottom,
3+
AlignTop,
4+
dropdownControl,
5+
MultiCompBuilder,
6+
} from "lowcoder-sdk";
7+
import { LegendComponentOption } from "echarts";
8+
import { trans } from "i18n/comps";
9+
10+
const LegendPositionOptions = [
11+
{
12+
label: <AlignTop />,
13+
value: "top",
14+
},
15+
{
16+
label: <AlignBottom />,
17+
value: "bottom",
18+
}
19+
] as const;
20+
21+
export const EchartsTitleVerticalConfig = (function () {
22+
return new MultiCompBuilder(
23+
{
24+
position: dropdownControl(LegendPositionOptions, "top"),
25+
},
26+
(props): LegendComponentOption => {
27+
const config: LegendComponentOption = {
28+
top: "top",
29+
type: "scroll",
30+
};
31+
config.top = props.position
32+
return config;
33+
}
34+
)
35+
.setPropertyViewFn((children) => (
36+
<>
37+
{children.position.propertyView({
38+
label: trans("echarts.titlePositionVertical"),
39+
radioButton: true,
40+
tooltip: trans("echarts.changingLegend_x_Tooltip")
41+
})}
42+
</>
43+
))
44+
.build();
45+
})();

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import opacityToHex from "../../util/opacityToHex";
1616
import parseBackground from "../../util/gradientBackgroundColor";
1717
import {ba} from "@fullcalendar/core/internal-common";
18+
import {styleWrapper} from "../../util/styleWrapper";
1819

1920
export function transformData(
2021
originData: JSONObject[],
@@ -137,28 +138,7 @@ export function getEchartsConfig(
137138
theme?: any,
138139
): EChartsOptionWithMap {
139140

140-
const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => {
141141

142-
return {
143-
"fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif',
144-
"fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize,
145-
"fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight,
146-
"color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor,
147-
"fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle,
148-
"textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor,
149-
"textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0],
150-
"textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1],
151-
"textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2],
152-
"borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit',
153-
"borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth,
154-
"borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
155-
"borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
156-
"backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
157-
"width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
158-
"height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
159-
}
160-
161-
}
162142

163143
if (props.mode === "json") {
164144

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const en = {
5454
tooltip: 'Tooltip',
5555
legendVisibility: 'Legend Visibility',
5656
dataZoomVisibility: 'Data Zoom Visibility',
57+
axisFlag: 'Axis Flag',
5758
left: 'Left',
5859
defaultLeft:'10',
5960
right: 'Right',
@@ -185,6 +186,7 @@ export const en = {
185186
funnelAlign: "Funnel Align",
186187
sort: "Sort",
187188
changingTitle_x_Tooltip: "Change the Horizontal position of the Title.",
189+
changingTitle_y_Tooltip: "Change the Vertical position of the Title.",
188190
changingLegend_x_Tooltip: "Change the Vertical position of the Legend.",
189191
changingLegend_y_Tooltip: "Change the Horizontal position of the Legend.",
190192
changingLegend_orient_Tooltip: "Change the Orientation of the Legend.",

‎client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -307,15 +307,22 @@ export const enObj: I18nObjects = {
307307
},
308308
defaultCandleStickChartOption: {
309309
xAxis: {
310-
data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"]
311-
},
310+
data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
311+
},
312+
axisColor: ['#f0f0f0', '#ffffff'],
312313
data:[
313-
[100, 200, 50, 150],
314-
[120, 220, 80, 180],
315-
[80, 150, 60, 130],
316-
[130, 230, 110, 190],
317-
[90, 180, 70, 160]
318-
]
314+
[22, 25, 18, 26],
315+
[25, 23, 22, 27],
316+
[23, 24, 21, 25],
317+
[24, 26, 23, 27],
318+
[23, 21, 20, 25]
319+
],
320+
itemStyle: {
321+
color: '#ec0000', // Body color (rising)
322+
color0: '#00da3c', // Body color (falling)
323+
borderColor: '#ec0000', // Border color (rising)
324+
borderColor0: '#00da3c', // Border color (falling)
325+
}
319326
},
320327
defaultRadarChartOption: {
321328
indicator: [

‎client/packages/lowcoder-comps/src/util/styleWrapper.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => {
2+
3+
return {
4+
"fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif',
5+
"fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize,
6+
"fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight,
7+
"color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor,
8+
"fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle,
9+
"textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor,
10+
"textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0],
11+
"textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1],
12+
"textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2],
13+
"borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit',
14+
"borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth,
15+
"borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
16+
"borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
17+
"backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
18+
"width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
19+
"height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
20+
}
21+
}

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,5 +192,7 @@ export const sectionNames = {
192192
legendStyle:trans("prop.legendStyle"),
193193
detailStyle:trans("prop.detailStyle"),
194194
axisLabelStyle:trans("prop.axisLabelStyle"),
195-
axisLabelStyleOutline:trans("prop.axisLabelStyleOutline")
195+
axisLabelStyleOutline:trans("prop.axisLabelStyleOutline"),
196+
xAxisStyle:trans("prop.xAxisStyle"),
197+
yAxisStyle:trans("prop.yAxisStyle"),
196198
};

0 commit comments

Comments
 (0)