Skip to content

Commit d303942

Browse files
Imiss-U1025Imiss-U1025
committed
Reverted candlestick chart, updated background ability.
1 parent cf3686a commit d303942

File tree

4 files changed

+29
-92
lines changed

4 files changed

+29
-92
lines changed

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

Lines changed: 11 additions & 10 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-
themeConfig,
147+
theme?.theme?.components?.candleStickChart || {},
148148
);
149-
}, [chartSize, ...Object.values(echartsConfigChildren), theme]);
149+
}, [chartSize, ...Object.values(echartsConfigChildren)]);
150150

151151
useEffect(() => {
152152
comp.children.mapInstance.dispatch(changeValueAction(null, false))
@@ -168,14 +168,15 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
168168
}}
169169
>
170170
<ReactECharts
171-
ref={(e) => (echartsCompRef.current = e)}
172-
style={{ height: "100%" }}
173-
notMerge
174-
lazyUpdate
175-
opts={{ locale: getEchartsLocale() }}
176-
option={option}
177-
mode={mode}
178-
/>
171+
ref={(e) => (echartsCompRef.current = e)}
172+
style={{ height: "100%" }}
173+
notMerge
174+
lazyUpdate
175+
opts={{ locale: getEchartsLocale() }}
176+
option={option}
177+
theme={mode !== 'map' ? themeConfig : undefined}
178+
mode={mode}
179+
/>
179180
</ReactResizeDetector>
180181
);
181182
});

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,14 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle,
20-
EchartDefaultChartStyle,
21-
EchartDefaultTextStyle
19+
EchartsStyle
2220
} from "lowcoder-sdk";
2321
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2422
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
2523
import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
2624
import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
2725
import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
2826
import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
29-
import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
3027
import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
3128
import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
3229
import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
@@ -255,25 +252,15 @@ let chartJsonModeChildren: any = {
255252
echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
256253
echartsLegendConfig: EchartsLegendConfig,
257254
echartsLabelConfig: EchartsLabelConfig,
258-
echartsTitleConfig:EchartsTitleConfig,
259255
echartsConfig: EchartsOptionComp,
260-
left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
261-
right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
262-
top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
263-
bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
264-
dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
265-
dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
256+
// style: styleControl(EchartsStyle, 'style'),
266257
tooltip: withDefault(BoolControl, true),
267258
legendVisibility: withDefault(BoolControl, true),
268-
dataZoomVisibility: withDefault(BoolControl, true),
269259
}
270260
if (EchartsStyle) {
271261
chartJsonModeChildren = {
272262
...chartJsonModeChildren,
273-
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
274-
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
275-
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
276-
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
263+
style: styleControl(EchartsStyle, 'style'),
277264
}
278265
}
279266

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

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,46 +31,19 @@ export function candleStickChartPropertyView(
3131
</div>
3232
),
3333
})}
34-
{children.echartsTitleConfig.getPropertyView()}
35-
{children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
36-
{children.left.propertyView({ label: trans("candleStickChart.left") })}
37-
{children.right.propertyView({ label: trans("candleStickChart.right") })}
38-
{children.top.propertyView({ label: trans("candleStickChart.top") })}
39-
{children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
4034
{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") })}
4335
{children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
44-
{children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
45-
{children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
4636
</Section>
4737
<Section name={sectionNames.interaction}>
4838
{children.onEvent.propertyView()}
4939
</Section>
5040
<Section name={sectionNames.style}>
51-
{children.style?.getPropertyView()}
41+
{children.style?.getPropertyView()}
5242
</Section>
53-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}
54-
</Section>
55-
56-
<Section name={sectionNames.chartStyle}>
57-
{children.chartStyle?.getPropertyView()}
58-
</Section>
59-
<Section name={sectionNames.titleStyle}>
60-
{children.titleStyle?.getPropertyView()}
61-
</Section>
62-
<Section name={sectionNames.labelStyle}>
63-
{children.labelStyle?.getPropertyView()}
64-
</Section>
65-
{
66-
children.legendVisibility.getView() ?
67-
<Section name={sectionNames.legendStyle}>
68-
{children.legendStyle?.getPropertyView()}
69-
</Section> : <></>
70-
}
43+
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
7144
</>
7245
);
73-
46+
7447
const getChatConfigByMode = (mode: string) => {
7548
switch(mode) {
7649
case "json":

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

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -135,62 +135,38 @@ export function getEchartsConfig(
135135
chartSize?: ChartSize,
136136
theme?: any,
137137
): EChartsOptionWithMap {
138-
139-
140138
if (props.mode === "json") {
141139
let opt={
142140
"title": {
143141
"text": props.echartsTitle,
144142
'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-
}
143+
"left":"center"
157144
},
158-
"backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle.backgroundColor || "#FFFFFF"),
159-
"color": props?.echartsOption.data?.map(data => data.color),
160-
"tooltip": props?.tooltip&&{
145+
"backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"),
146+
"color": props.echartsOption.data?.map(data => data.color),
147+
"tooltip": props.tooltip&&{
161148
"trigger": "axis",
162149
"axisPointer": {
163150
"type": "cross"
164151
}
165152
},
166153
"grid": {
167-
"left": `${props?.left}%`,
168-
"right": `${props?.right}%`,
169-
"bottom": `${props?.bottom}%`,
170-
"top": `${props?.top}%`,
154+
"left": "10%",
155+
"right": "10%",
156+
"bottom": "10%",
171157
},
172-
"dataZoom": [
173-
{
174-
"show": props?.dataZoomVisibility,
175-
"type": 'slider',
176-
"start": 0,
177-
"end": 100,
178-
"bottom": props?.dataZoomBottom,
179-
'height': props?.dataZoomHeight
180-
}
181-
],
182158
"xAxis": {
183159
"type": "category",
184-
"data": props?.echartsOption.xAxis.data
160+
"data": props.echartsOption.xAxis.data
185161
},
186162
"yAxis": {
187163
"type": "value",
188164
"scale": true
189165
},
190166
"series": [
191167
{
192-
"name": props?.echartsConfig.type,
193-
"type": props?.echartsConfig.type,
168+
"name": props.echartsConfig.type,
169+
"type": props.echartsConfig.type,
194170
"left": "10%",
195171
"top": 60,
196172
"bottom": 60,
@@ -200,9 +176,9 @@ export function getEchartsConfig(
200176
"gap": 2,
201177
"label": {
202178
"show": true,
203-
"position": props?.echartsLabelConfig.top
179+
"position": props.echartsLabelConfig.top
204180
},
205-
"data": props?.echartsOption.data,
181+
"data": props.echartsOption.data,
206182
}
207183
]
208184
}

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