Skip to content

Commit 25cb060

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1393 from lowcoder-org/feature-funnelChart
Add Control options and styles to remote component.
2 parents 6e090b5 + b0078ef commit 25cb060

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

+16-4
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

+28-1
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
<Section name={sectionNames.interaction}>
3848
{children.onEvent.propertyView()}
3949
</Section>
4050
<Section name={sectionNames.style}>
4151
{children.style?.getPropertyView()}
4252
</Section>
43-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</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+
}
4471
</>
4572
);
4673

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

+36-12
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
let opt={
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

+75-22
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-
export const ChartTypeOptions = [
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-
] as const;
55-
5639
export const UIEventOptions = [
5740
{
5841
label: trans("chart.select"),
@@ -232,6 +215,41 @@ const EchartsOptionMap = {
232215
gauge: GaugeChartConfig,
233216
};
234217

218+
const ChartTypeOptions = [
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+
] as const;
252+
235253
const ChartOptionComp = withType(ChartOptionMap, "bar");
236254
const EchartsOptionComp = withType(EchartsOptionMap, "gauge");
237255
export type CharOptionCompType = keyof typeof ChartOptionMap;
@@ -251,6 +269,15 @@ export const chartUiModeChildren = {
251269

252270
let chartJsonModeChildren: 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
const chartMapModeChildren = {

0 commit comments

Comments
 (0)