Skip to content

Commit 03bc7bd

Browse files
Imiss-U1025Imiss-U1025
committed
Added radical gradient and many fields to Candlestick chart.
1 parent e27f7ca commit 03bc7bd

File tree

8 files changed

+139
-78
lines changed

8 files changed

+139
-78
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,9 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
144144
return getEchartsConfig(
145145
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
146146
chartSize,
147-
theme?.theme?.components?.candleStickChart || {},
147+
themeConfig,
148148
);
149-
}, [chartSize, ...Object.values(echartsConfigChildren)]);
149+
}, [chartSize, ...Object.values(echartsConfigChildren), theme]);
150150

151151
useEffect(() => {
152152
comp.children.mapInstance.dispatch(changeValueAction(null, false))
@@ -174,7 +174,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
174174
lazyUpdate
175175
opts={{ locale: getEchartsLocale() }}
176176
option={option}
177-
theme={mode !== 'map' ? themeConfig : undefined}
178177
mode={mode}
179178
/>
180179
</ReactResizeDetector>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,17 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartsStyle,
20+
EchartDefaultChartStyle,
21+
EchartDefaultTextStyle
2022
} from "lowcoder-sdk";
2123
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2224
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
2325
import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
2426
import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
2527
import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
2628
import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
29+
import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
2730
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
2831
import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
2932
import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
@@ -252,6 +255,7 @@ let chartJsonModeChildren: any = {
252255
echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
253256
echartsLegendConfig: EchartsLegendConfig,
254257
echartsLabelConfig: EchartsLabelConfig,
258+
echartsTitleConfig:EchartsTitleConfig,
255259
echartsConfig: EchartsOptionComp,
256260
// style: styleControl(EchartsStyle, 'style'),
257261
tooltip: withDefault(BoolControl, true),
@@ -260,7 +264,10 @@ let chartJsonModeChildren: any = {
260264
if (EchartsStyle) {
261265
chartJsonModeChildren = {
262266
...chartJsonModeChildren,
263-
style: styleControl(EchartsStyle, 'style'),
267+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
268+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
269+
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
270+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
264271
}
265272
}
266273

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,33 @@ export function candleStickChartPropertyView(
3131
</div>
3232
),
3333
})}
34+
{children.echartsTitleConfig.getPropertyView()}
35+
{children.legendVisibility.getView()&& children.echartsLegendConfig.getPropertyView()}
3436
{children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
3537
{children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
38+
{children.legendVisibility.propertyView({label: trans("funnelChart.legendVisibility")})}
3639
</Section>
3740
<Section name={sectionNames.interaction}>
3841
{children.onEvent.propertyView()}
3942
</Section>
4043
<Section name={sectionNames.style}>
4144
{children.style?.getPropertyView()}
4245
</Section>
43-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
46+
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}
47+
</Section>
48+
49+
<Section name={sectionNames.chartStyle}> //chart's style
50+
{children.chartStyle?.getPropertyView()}
51+
</Section>
52+
<Section name={sectionNames.titleStyle}>
53+
{children.titleStyle?.getPropertyView()}
54+
</Section>
55+
<Section name={sectionNames.labelStyle}>
56+
{children.labelStyle?.getPropertyView()}
57+
</Section>
58+
<Section name={sectionNames.legendStyle}>
59+
{children.legendStyle?.getPropertyView()}
60+
</Section>
4461
</>
4562
);
4663

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

Lines changed: 66 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import { useContext } from "react";
16+
import getBackgroundColor from "../../util/gradientBackgroundColor";
1617

1718
export function transformData(
1819
originData: JSONObject[],
@@ -134,64 +135,82 @@ export function getEchartsConfig(
134135
chartSize?: ChartSize,
135136
theme?: any,
136137
): EChartsOptionWithMap {
138+
139+
const backgroundColor = props?.chartStyle?.chartBackgroundColor || theme?.chartStyle?.backgroundColor || "#FFFFFF";
140+
const gradientColor = props?.chartStyle?.chartGradientColor || theme?.chartStyle?.gradientColor;
141+
const opacity = props?.chartStyle?.chartOpacity || theme?.chartStyle?.opacity;
142+
const direction = props?.chartStyle?.direction || theme?.chartStyle?.direction;
143+
144+
137145
if (props.mode === "json") {
138146
let opt={
139-
"title": {
140-
"text": props.echartsTitle,
141-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
142-
"left":"center"
143-
},
144-
"backgroundColor": props?.style?.background || theme?.style?.background,
145-
"color": props.echartsOption.data?.map(data => data.color),
146-
"tooltip": props.tooltip&&{
147-
"trigger": "axis",
148-
"axisPointer": {
149-
"type": "cross"
150-
}
151-
},
152-
"grid": {
153-
"left": "10%",
154-
"right": "10%",
155-
"bottom": "10%",
156-
},
157-
"xAxis": {
158-
"type": "category",
159-
"data": props.echartsOption.xAxis.data
160-
},
161-
"yAxis": {
162-
"type": "value",
163-
"scale": true
164-
},
165-
"series": [
166-
{
167-
"name": props.echartsConfig.type,
168-
"type": props.echartsConfig.type,
169-
"left": "10%",
170-
"top": 60,
171-
"bottom": 60,
172-
"width": "80%",
173-
"min": 0,
174-
"max": 100,
175-
"gap": 2,
176-
"label": {
177-
"show": true,
178-
"position": props.echartsLabelConfig.top
147+
"title": {
148+
"text": props.echartsTitle,
149+
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
150+
"left":props.echartsTitleConfig.top,
151+
"textStyle": {
152+
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
153+
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
154+
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
155+
"color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
156+
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
157+
"textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
158+
"textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
159+
"textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
160+
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
161+
}
162+
},
163+
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
164+
"color": props.echartsOption.data?.map(data => data.color),
165+
"tooltip": props.tooltip&&{
166+
"trigger": "axis",
167+
"axisPointer": {
168+
"type": "cross"
169+
}
170+
},
171+
"grid": {
172+
"left": "10%",
173+
"right": "10%",
174+
"bottom": "10%",
179175
},
180-
"data": props.echartsOption.data,
176+
"xAxis": {
177+
"type": "category",
178+
"data": props.echartsOption.xAxis.data
179+
},
180+
"yAxis": {
181+
"type": "value",
182+
"scale": true
183+
},
184+
"series": [
185+
{
186+
"name": props.echartsConfig.type,
187+
"type": props.echartsConfig.type,
188+
"left": "10%",
189+
"top": 60,
190+
"bottom": 60,
191+
"width": "80%",
192+
"min": 0,
193+
"max": 100,
194+
"gap": 2,
195+
"label": {
196+
"show": true,
197+
"position": props.echartsLabelConfig.top
198+
},
199+
"data": props.echartsOption.data,
200+
}
201+
]
181202
}
182-
]
183-
}
184203
return props.echartsOption ? opt : {};
185-
204+
186205
}
187-
206+
188207
if(props.mode === "map") {
189208
const {
190209
mapZoomLevel,
191210
mapCenterLat,
192211
mapCenterLng,
193-
mapOptions,
194-
showCharts,
212+
mapOptions,
213+
showCharts,
195214
} = props;
196215

197216
const echartsOption = mapOptions && showCharts ? mapOptions : {};

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import opacityToHex from "../../util/opacityToHex";
16+
import getBackgroundColor from "../../util/gradientBackgroundColor";
1617

1718
export function transformData(
1819
originData: JSONObject[],
@@ -164,18 +165,7 @@ export function getEchartsConfig(
164165
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
165166
}
166167
},
167-
"backgroundColor": gradientColor && backgroundColor
168-
? {
169-
"x": direction?.split(' ')[0],
170-
"y": direction?.split(' ')[1],
171-
"x2": direction?.split(' ')[2],
172-
"y2": direction?.split(' ')[3],
173-
"colorStops": [
174-
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
175-
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
176-
]
177-
}
178-
: backgroundColor + opacityToHex(opacity),
168+
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
179169
"color": props.echartsOption.data?.map(data => data.color),
180170
"tooltip": props.tooltip&&{
181171
"trigger": "item",

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

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
1515
import opacityToHex from "../../util/opacityToHex";
16+
import getBackgroundColor from "../../util/gradientBackgroundColor";
1617

1718
export function transformData(
1819
originData: JSONObject[],
@@ -158,18 +159,7 @@ export function getEchartsConfig(
158159
"textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
159160
},
160161
},
161-
"backgroundColor": gradientColor && backgroundColor
162-
? {
163-
"x": direction?.split(' ')[0],
164-
"y": direction?.split(' ')[1],
165-
"x2": direction?.split(' ')[2],
166-
"y2": direction?.split(' ')[3],
167-
"colorStops": [
168-
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
169-
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
170-
]
171-
}
172-
: backgroundColor + opacityToHex(opacity),
162+
"backgroundColor": getBackgroundColor(backgroundColor, gradientColor, opacity, direction),
173163
"tooltip": props.tooltip&&{
174164
"trigger": "item",
175165
"formatter": "{a} <br/>{b} : {c}%"

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import opacityToHex from "./opacityToHex";
2+
3+
const getBackgroundColor = (
4+
backgroundColor = '',
5+
gradientColor = '',
6+
opacity = '',
7+
direction = '',
8+
) => {
9+
if (direction?.split(' ').length < 4)
10+
return gradientColor && backgroundColor
11+
? {
12+
"type": 'radical',
13+
"x": direction?.split(' ')[0],
14+
"y": direction?.split(' ')[1],
15+
"r": direction?.split(' ')[2],
16+
"colorStops": [
17+
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
18+
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
19+
]
20+
}
21+
: backgroundColor + opacityToHex(opacity)
22+
else
23+
return gradientColor && backgroundColor
24+
? {
25+
"type": 'linear',
26+
"x": direction?.split(' ')[0],
27+
"y": direction?.split(' ')[1],
28+
"x2": direction?.split(' ')[2],
29+
"y2": direction?.split(' ')[3],
30+
"colorStops": [
31+
{ "offset": 0, "color": backgroundColor + opacityToHex(opacity)},
32+
{ "offset": 1, "color": gradientColor + opacityToHex(opacity)}
33+
]
34+
}
35+
: backgroundColor + opacityToHex(opacity)
36+
}
37+
38+
export default getBackgroundColor;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export default function opacityToHex(opacity: any) {
1111
// Return 'FF' if an exception occurs
1212
return 'FF';
1313
}
14-
}
14+
}
15+

0 commit comments

Comments
 (0)