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

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
<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

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
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

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-
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)
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