Skip to content

Commit fe9e505

Browse files
Imiss-U1025Imiss-U1025
committed
Added Pointer and Fixed default values
1 parent 9010367 commit fe9e505

File tree

4 files changed

+76
-64
lines changed

4 files changed

+76
-64
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,8 @@ let chartJsonModeChildren: any = {
272272
startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
273273
endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
274274
splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
275+
pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')),
276+
pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')),
275277

276278
}
277279
if (EchartsStyle) {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export function gaugeChartPropertyView(
4343
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })}
4444
{children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })}
4545
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })}
46+
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength") })}
47+
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth") })}
4648
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
4749
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
4850
</Section>

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

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export function getEchartsConfig(
148148
"left":props.echartsTitleConfig.top,
149149
"textStyle": {
150150
"fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
151-
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize,
151+
"fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || 18,
152152
"fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
153153
"color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
154154
"fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
@@ -175,75 +175,79 @@ export function getEchartsConfig(
175175
"formatter": "{a} <br/>{b} : {c}%"
176176
},
177177
"series": [
178-
{
179-
"name": props.echartsConfig.type,
180-
"type": props.echartsConfig.type,
181-
"radius": `${props.radius}%`,
182-
"left": `${props.left}%`,
183-
"top": props.top,
184-
"bottom": props.bottom,
185-
"width": `${props.left}%`,
186-
"min": props.min,
187-
"max": props.max,
188-
"gap": props.gap,
189-
"startAngle": props.startAngle,
190-
"endAngle": props.endAngle,
191-
"splitNumber": props.splitNumber,
192-
"itemStyle": {
193-
"color": props.echartsOption.data?.map(data => data.color),
194-
"opacity": props.opacity,
195-
"borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
196-
"borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
197-
"borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
198-
"borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
199-
"shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
200-
"shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
201-
"shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
202-
"shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
203-
},
204-
'detail': {
205-
"fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
206-
"fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize,
207-
"fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
208-
"color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000",
209-
"fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
210-
"textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
211-
"textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0],
212-
"textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1],
213-
"textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2]
214-
},
215-
"label": {
216-
"show": props.label,
217-
"position": props.echartsLabelConfig.top,
218-
},
219-
"data": props.echartsOption.data?.map(item => ({
220-
...item,
221-
title: {
222-
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
223-
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
224-
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
225-
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
226-
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
227-
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
228-
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
229-
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
230-
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
178+
{
179+
"name": props.echartsConfig.type,
180+
"type": props.echartsConfig.type,
181+
"radius": `${props.radius}%`,
182+
"left": `${props.left}%`,
183+
"top": props.top,
184+
"bottom": props.bottom,
185+
"width": `${props.left}%`,
186+
"min": props.min,
187+
"max": props.max,
188+
"gap": props.gap,
189+
"startAngle": props.startAngle,
190+
"endAngle": props.endAngle,
191+
"splitNumber": props.splitNumber,
192+
"pointer": {
193+
"length": `${props.pointerLength}%`,
194+
"width": props.pointerWidth,
195+
},
196+
"itemStyle": {
197+
"color": props.echartsOption.data?.map(data => data.color),
198+
"opacity": props.opacity,
199+
"borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
200+
"borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
201+
"borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
202+
"borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius,
203+
"shadowColor": props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
204+
"shadowBlur": props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
205+
"shadowOffsetX": props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
206+
"shadowOffsetY": props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
207+
},
208+
'detail': {
209+
"fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
210+
"fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16,
211+
"fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
212+
"color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000",
213+
"fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
214+
"textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
215+
"textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0],
216+
"textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1],
217+
"textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2]
218+
},
219+
"label": {
220+
"show": props.label,
221+
"position": props.echartsLabelConfig.top,
222+
},
223+
"data": props.echartsOption.data?.map(item => ({
224+
...item,
225+
title: {
226+
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
227+
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
228+
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
229+
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
230+
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
231+
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
232+
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
233+
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
234+
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
235+
}
236+
}))
231237
}
232-
}))
238+
]
233239
}
234-
]
235-
}
236240
return props.echartsOption ? opt : {};
237-
241+
238242
}
239-
243+
240244
if(props.mode === "map") {
241245
const {
242246
mapZoomLevel,
243247
mapCenterLat,
244248
mapCenterLng,
245-
mapOptions,
246-
showCharts,
249+
mapOptions,
250+
showCharts,
247251
} = props;
248252

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

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,18 @@ export const en = {
103103
defaultMax:'100',
104104
gap: 'Gap',
105105
defaultGap: '2',
106-
defaultStartAngle: '180',
106+
defaultStartAngle: '210',
107107
startAngle: 'Start Angle',
108-
defaultEndAngle: '0',
108+
defaultEndAngle: '-30',
109109
endAngle: 'End Angle',
110110
defaultSplitNumber: '10',
111111
splitNumber: 'Split Number',
112112
radius: 'Radius',
113-
defaultRadius: '60%',
113+
defaultRadius: '60',
114+
defaultPointerLength: '75',
115+
pointerLength: 'Pointer Length',
116+
pointerWidth: 'Pointer Width',
117+
defaultPointerWidth: '25',
114118
label:'Label',
115119

116120
},

0 commit comments

Comments
 (0)