Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit25cb060

Browse files
Merge pull request#1393 from lowcoder-org/feature-funnelChart
Add Control options and styles to remote component.
2 parents6e090b5 +b0078ef commit25cb060

File tree

15 files changed

+1540
-91
lines changed

15 files changed

+1540
-91
lines changed

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,16 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartDefaultChartStyle,
20+
EchartDefaultTextStyle
2021
}from"lowcoder-sdk";
2122
import{RecordConstructorToComp,RecordConstructorToView}from"lowcoder-core";
2223
import{BarChartConfig}from"../chartComp/chartConfigs/barChartConfig";
2324
import{XAxisConfig,YAxisConfig}from"../chartComp/chartConfigs/cartesianAxisConfig";
2425
import{LegendConfig}from"../chartComp/chartConfigs/legendConfig";
2526
import{EchartsLegendConfig}from"../chartComp/chartConfigs/echartsLegendConfig";
2627
import{EchartsLabelConfig}from"../chartComp/chartConfigs/echartsLabelConfig";
28+
import{EchartsTitleConfig}from"comps/chartComp/chartConfigs/echartsTitleConfig";
2729
import{LineChartConfig}from"../chartComp/chartConfigs/lineChartConfig";
2830
import{PieChartConfig}from"../chartComp/chartConfigs/pieChartConfig";
2931
import{ScatterChartConfig}from"../chartComp/chartConfigs/scatterChartConfig";
@@ -252,15 +254,25 @@ let chartJsonModeChildren: any = {
252254
echartsTitle:withDefault(StringControl,trans("candleStickChart.defaultTitle")),
253255
echartsLegendConfig:EchartsLegendConfig,
254256
echartsLabelConfig:EchartsLabelConfig,
257+
echartsTitleConfig:EchartsTitleConfig,
255258
echartsConfig:EchartsOptionComp,
256-
// style: styleControl(EchartsStyle, 'style'),
259+
left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')),
260+
right:withDefault(NumberControl,trans('candleStickChart.defaultRight')),
261+
top:withDefault(NumberControl,trans('candleStickChart.defaultTop')),
262+
bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')),
263+
dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
264+
dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
257265
tooltip:withDefault(BoolControl,true),
258266
legendVisibility:withDefault(BoolControl,true),
267+
dataZoomVisibility:withDefault(BoolControl,true),
259268
}
260-
if(EchartsStyle){
269+
if(EchartDefaultChartStyle&&EchartDefaultTextStyle){
261270
chartJsonModeChildren={
262271
...chartJsonModeChildren,
263-
style:styleControl(EchartsStyle,'style'),
272+
chartStyle:styleControl(EchartDefaultChartStyle,'chartStyle'),
273+
titleStyle:styleControl(EchartDefaultTextStyle,'titleStyle'),
274+
labelStyle:styleControl(EchartDefaultTextStyle,'labelStyle'),
275+
legendStyle:styleControl(EchartDefaultTextStyle,'legendStyle'),
264276
}
265277
}
266278

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,43 @@ export function candleStickChartPropertyView(
3131
</div>
3232
),
3333
})}
34+
{children.echartsTitleConfig.getPropertyView()}
35+
{children.left.propertyView({label:trans("candleStickChart.left")})}
36+
{children.right.propertyView({label:trans("candleStickChart.right")})}
37+
{children.top.propertyView({label:trans("candleStickChart.top")})}
38+
{children.bottom.propertyView({label:trans("candleStickChart.bottom")})}
39+
{children.legendVisibility.getView()&&children.echartsLegendConfig.getPropertyView()}
3440
{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")})}
3543
{children.tooltip.propertyView({label:trans("candleStickChart.tooltip")})}
44+
{children.legendVisibility.propertyView({label:trans("candleStickChart.legendVisibility")})}
45+
{children.dataZoomVisibility.propertyView({label:trans("candleStickChart.dataZoomVisibility")})}
3646
</Section>
3747
<Sectionname={sectionNames.interaction}>
3848
{children.onEvent.propertyView()}
3949
</Section>
4050
<Sectionname={sectionNames.style}>
4151
{children.style?.getPropertyView()}
4252
</Section>
43-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
53+
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}
54+
</Section>
55+
56+
<Sectionname={sectionNames.chartStyle}>
57+
{children.chartStyle?.getPropertyView()}
58+
</Section>
59+
<Sectionname={sectionNames.titleStyle}>
60+
{children.titleStyle?.getPropertyView()}
61+
</Section>
62+
<Sectionname={sectionNames.labelStyle}>
63+
{children.labelStyle?.getPropertyView()}
64+
</Section>
65+
{
66+
children.legendVisibility.getView() ?
67+
<Sectionname={sectionNames.legendStyle}>
68+
{children.legendStyle?.getPropertyView()}
69+
</Section> :<></>
70+
}
4471
</>
4572
);
4673

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

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -135,38 +135,62 @@ export function getEchartsConfig(
135135
chartSize?:ChartSize,
136136
theme?:any,
137137
):EChartsOptionWithMap{
138+
139+
138140
if(props.mode==="json"){
139141
letopt={
140142
"title":{
141143
"text":props.echartsTitle,
142144
'top':props.echartsLegendConfig.top==='bottom' ?'top':'bottom',
143-
"left":"center"
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+
}
144157
},
145-
"backgroundColor":parseBackground(props?.style?.background||theme?.style?.background||"#FFFFFF"),
146-
"color":props.echartsOption.data?.map(data=>data.color),
147-
"tooltip":props.tooltip&&{
158+
"backgroundColor":parseBackground(props?.chartStyle?.background||theme?.chartStyle?.backgroundColor||"#FFFFFF"),
159+
"color":props?.echartsOption.data?.map(data=>data.color),
160+
"tooltip":props?.tooltip&&{
148161
"trigger":"axis",
149162
"axisPointer":{
150163
"type":"cross"
151164
}
152165
},
153166
"grid":{
154-
"left":"10%",
155-
"right":"10%",
156-
"bottom":"10%",
167+
"left":`${props?.left}%`,
168+
"right":`${props?.right}%`,
169+
"bottom":`${props?.bottom}%`,
170+
"top":`${props?.top}%`,
157171
},
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+
],
158182
"xAxis":{
159183
"type":"category",
160-
"data":props.echartsOption.xAxis.data
184+
"data":props?.echartsOption.xAxis.data
161185
},
162186
"yAxis":{
163187
"type":"value",
164188
"scale":true
165189
},
166190
"series":[
167191
{
168-
"name":props.echartsConfig.type,
169-
"type":props.echartsConfig.type,
192+
"name":props?.echartsConfig.type,
193+
"type":props?.echartsConfig.type,
170194
"left":"10%",
171195
"top":60,
172196
"bottom":60,
@@ -176,9 +200,9 @@ export function getEchartsConfig(
176200
"gap":2,
177201
"label":{
178202
"show":true,
179-
"position":props.echartsLabelConfig.top
203+
"position":props?.echartsLabelConfig.top
180204
},
181-
"data":props.echartsOption.data,
205+
"data":props?.echartsOption.data,
182206
}
183207
]
184208
}

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

Lines changed: 75 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ import {
1717
clickEvent,
1818
styleControl,
1919
EchartDefaultChartStyle,
20-
EchartDefaultTextStyle
20+
EchartDefaultTextStyle,
21+
ColorControl,
22+
EchartDefaultDetailStyle
2123
}from"lowcoder-sdk";
2224
import{RecordConstructorToComp,RecordConstructorToView}from"lowcoder-core";
2325
import{BarChartConfig}from"../chartComp/chartConfigs/barChartConfig";
@@ -34,25 +36,6 @@ import { i18nObjs, trans } from "i18n/comps";
3436
import{GaugeChartConfig}from"../chartComp/chartConfigs/gaugeChartConfig";
3537
import{EchartsTitleConfig}from"comps/chartComp/chartConfigs/echartsTitleConfig";
3638

37-
exportconstChartTypeOptions=[
38-
{
39-
label:trans("chart.bar"),
40-
value:"bar",
41-
},
42-
{
43-
label:trans("chart.line"),
44-
value:"line",
45-
},
46-
{
47-
label:trans("chart.scatter"),
48-
value:"scatter",
49-
},
50-
{
51-
label:trans("chart.pie"),
52-
value:"pie",
53-
},
54-
]asconst;
55-
5639
exportconstUIEventOptions=[
5740
{
5841
label:trans("chart.select"),
@@ -232,6 +215,41 @@ const EchartsOptionMap = {
232215
gauge:GaugeChartConfig,
233216
};
234217

218+
constChartTypeOptions=[
219+
{
220+
label:trans("chart.default"),
221+
value:"default",
222+
},
223+
{
224+
label:trans("chart.stageGauge"),
225+
value:"stageGauge",
226+
},
227+
{
228+
label:trans("chart.gradeGauge"),
229+
value:"gradeGauge",
230+
},
231+
{
232+
label:trans("chart.temperatureGauge"),
233+
value:"temperatureGauge",
234+
},
235+
{
236+
label:trans("chart.multiGauge"),
237+
value:"multiGauge",
238+
},
239+
{
240+
label:trans("chart.ringGauge"),
241+
value:"ringGauge",
242+
},
243+
{
244+
label:trans("chart.barometerGauge"),
245+
value:"barometerGauge",
246+
},
247+
{
248+
label:trans("chart.clockGauge"),
249+
value:"clockGauge",
250+
},
251+
]asconst;
252+
235253
constChartOptionComp=withType(ChartOptionMap,"bar");
236254
constEchartsOptionComp=withType(EchartsOptionMap,"gauge");
237255
exporttypeCharOptionCompType=keyoftypeofChartOptionMap;
@@ -251,6 +269,15 @@ export const chartUiModeChildren = {
251269

252270
letchartJsonModeChildren:any={
253271
echartsOption:jsonControl(toObject,i18nObjs.defaultGaugeChartOption),
272+
stageGaugeOption:jsonControl(toObject,i18nObjs.defaultStageGaugeChartOption),
273+
gradeGaugeOption:jsonControl(toObject,i18nObjs.defaultGradeGaugeChartOption),
274+
temperatureGaugeOption:jsonControl(toObject,i18nObjs.defaultTemperatureGaugeChartOption),
275+
multiTitleGaugeOption:jsonControl(toObject,i18nObjs.defaultMultiTitleGaugeChartOption),
276+
ringGaugeOption:jsonControl(toObject,i18nObjs.defaultRingGaugeChartOption),
277+
clockGaugeOption:jsonControl(toObject,i18nObjs.defaultClockGaugeChartOption),
278+
barometerGaugeOption:jsonControl(toObject,i18nObjs.defaultBarometerGaugeChartOption),
279+
280+
chartType:dropdownControl(ChartTypeOptions,trans("chart.default")),
254281
echartsTitle:withDefault(StringControl,trans("gaugeChart.defaultTitle")),
255282
echartsLegendConfig:EchartsLegendConfig,
256283
echartsLabelConfig:EchartsLabelConfig,
@@ -267,6 +294,7 @@ let chartJsonModeChildren: any = {
267294
bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')),
268295
width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
269296
radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')),
297+
temperatureRadius:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureRadius')),
270298
min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
271299
max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
272300
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
@@ -276,18 +304,43 @@ let chartJsonModeChildren: any = {
276304
endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
277305
splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
278306
pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')),
307+
barometerPointerLength:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerLength')),
279308
pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')),
309+
barometerPointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerWidth')),
310+
pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')),
311+
barometerPointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointer_Y')),
312+
pointerIcon:withDefault(StringControl),
313+
gradePointerIcon:withDefault(StringControl,trans('gaugeChart.gradeDefaultPointerIcon')),
314+
clockPointerIcon:withDefault(StringControl,trans('gaugeChart.clockDefaultPointerIcon')),
315+
barometerPointerIcon:withDefault(StringControl,trans('gaugeChart.defaultBarometerPointerIcon')),
316+
multiTitlePointerIcon:withDefault(StringControl,trans('gaugeChart.defaultMultiTitlePointerIcon')),
280317
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
318+
axisTickWidth:withDefault(NumberControl,trans('gaugeChart.defaultAxisTickWidth')),
319+
axisTickLength:withDefault(NumberControl,trans('gaugeChart.defaultAxisTickLength')),
320+
axisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultAxisLabelDistance')),
321+
axisTickColor:withDefault(ColorControl,trans('gaugeChart.defaultAxisTickColor')),
322+
323+
gradeGaugePointerLength:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerLength')),
324+
gradeGaugePointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerWidth')),
325+
gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')),
326+
stageProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultStageProgressBarWidth')),
327+
temperatureProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureProgressBarWidth')),
328+
ringProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultRingProgressBarWidth')),
329+
temperatureAxisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureAxisLabelDistance')),
330+
stageAxisTickColor:withDefault(ColorControl,trans('gaugeChart.defaultStageAxisTickColor')),
331+
gradeAxisTickColor:withDefault(ColorControl),
281332

282333
}
283-
if(EchartDefaultChartStyle&&EchartDefaultTextStyle){
334+
335+
if(EchartDefaultChartStyle&&EchartDefaultTextStyle&&EchartDefaultDetailStyle){
284336
chartJsonModeChildren={
285337
...chartJsonModeChildren,
286338
chartStyle:styleControl(EchartDefaultChartStyle,'chartStyle'),
287339
titleStyle:styleControl(EchartDefaultTextStyle,'titleStyle'),
288340
labelStyle:styleControl(EchartDefaultTextStyle,'labelStyle'),
289-
legendStyle:styleControl(EchartDefaultTextStyle,'legendStyle'),
341+
legendStyle:styleControl(EchartDefaultDetailStyle,'legendStyle'),
290342
axisLabelStyle:styleControl(EchartDefaultTextStyle,'axisLabelStyle'),
343+
axisLabelStyleOutline:styleControl(EchartDefaultTextStyle,'axisLabelStyleOutline'),
291344
}
292345
}
293346
constchartMapModeChildren={

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp