Skip to content

Commit 8c23506

Browse files
Imiss-U1025Imiss-U1025
committed
Fixed an editing ability on Temperature Gauge chart.
1 parent 7209f93 commit 8c23506

File tree

4 files changed

+24
-27
lines changed

4 files changed

+24
-27
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ let chartJsonModeChildren: any = {
288288
bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')),
289289
width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
290290
radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')),
291+
radiusTemperature:withDefault(NumberControl,trans('gaugeChart.defaultRadiusTemperature')),
291292
min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
292293
max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
293294
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
@@ -305,6 +306,7 @@ let chartJsonModeChildren: any = {
305306
pointerIcon:withDefault(StringControl),
306307
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
307308
progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')),
309+
progressBarWidthTemperature:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthTemperature')),
308310
stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')),
309311
stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')),
310312
stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')),
@@ -325,6 +327,7 @@ let chartJsonModeChildren: any = {
325327
axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')),
326328
axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')),
327329
axisTickColorGrade: withDefault(ColorControl),
330+
axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')),
328331
}
329332
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
330333
chartJsonModeChildren = {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ export function gaugeChartPropertyView(
261261
{children.top.propertyView({ label: trans("gaugeChart.top") })}
262262
{children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
263263
{children.width.propertyView({ label: trans("gaugeChart.width") })} */}
264-
{children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
264+
{children.radiusTemperature.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
265265
{children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
266266
{children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
267267
{children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
@@ -271,7 +271,8 @@ export function gaugeChartPropertyView(
271271
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
272272
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
273273
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
274-
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
274+
{children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
275+
{children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })}
275276
{children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
276277
{children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })}
277278
{children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })}

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

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -424,18 +424,6 @@ export function getEchartsConfig(
424424
{
425425
...basicSeries,
426426
type: 'gauge',
427-
// Reduce the overall size of the gauge
428-
radius: '85%',
429-
center: ['50%', '55%'], // Adjust center if needed
430-
431-
anchor: {
432-
show: true,
433-
showAbove: true,
434-
size: 14, // Decrease anchor size
435-
itemStyle: {
436-
color: '#FAC858'
437-
}
438-
},
439427
pointer: {
440428
width: 6, // Narrow the pointer
441429
length: '70%', // Shorten the pointer length
@@ -458,35 +446,35 @@ export function getEchartsConfig(
458446
name: 'Good',
459447
title: {
460448
fontSize: 12,
461-
offsetCenter: ['-60%', '75%']
449+
offsetCenter: ['-60%', '60%']
462450
},
463451
detail: {
464452
fontSize: 12,
465-
offsetCenter: ['-60%', '90%']
453+
offsetCenter: ['-60%', '80%']
466454
}
467455
},
468456
{
469457
value: 40,
470458
name: 'Better',
471459
title: {
472460
fontSize: 12,
473-
offsetCenter: ['0%', '75%']
461+
offsetCenter: ['0%', '60%']
474462
},
475463
detail: {
476464
fontSize: 12,
477-
offsetCenter: ['0%', '90%']
465+
offsetCenter: ['0%', '80%']
478466
}
479467
},
480468
{
481469
value: 60,
482470
name: 'Perfect',
483471
title: {
484472
fontSize: 12,
485-
offsetCenter: ['60%', '75%']
473+
offsetCenter: ['60%', '60%']
486474
},
487475
detail: {
488476
fontSize: 12,
489-
offsetCenter: ['60%', '90%']
477+
offsetCenter: ['60%', '80%']
490478
}
491479
}
492480
],
@@ -512,44 +500,44 @@ export function getEchartsConfig(
512500
series: [
513501
{
514502
...basicSeries,
503+
radius: `${props.radiusTemperature}%`,
515504
itemStyle: {
516505
color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0]
517506
},
518507
progress: {
519508
show: true,
520-
width: props.progressBarWidth
509+
width: props.progressBarWidthTemperature
521510
},
522511
pointer: {
523512
show: false
524513
},
525514
axisLine: {
526515
lineStyle: {
527-
width: props.progressBarWidth
516+
width: props.progressBarWidthTemperature
528517
}
529518
},
530519
axisTick: {
531520
length: props.axisTickLength,
532-
distance: -Number(props.progressBarWidth) - 10,
521+
distance: -Number(props.progressBarWidthTemperature) - 10,
533522
lineStyle: {
534523
color: props.axisTickColorGrade || 'auto',
535524
width: props.axisTickWidth
536525
}
537526
},
538527
splitLine: {
539-
distance: -Number(props.progressBarWidth) - 10 - Number(props.axisTickLength),
528+
distance: -Number(props.progressBarWidthTemperature) - 10 - Number(props.axisTickLength),
540529
length: Number(props.axisTickLength) * 2,
541530
lineStyle: {
542531
color: props.axisTickColorGrade || 'auto',
543532
width: Number(props.axisTickWidth) * 1.5
544533
}
545534
},
546535
axisLabel: {
547-
distance: -20, // Reduced from -20
536+
distance: -Number(props.axisLabelDistance),
548537
...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"),
549538
},
550539
detail: {
551540
valueAnimation: true,
552-
lineHeight: 30, // Reduced from 40
553541
offsetCenter: [0, '-15%'],
554542
formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0],
555543
...styleWrapper(props?.legendStyle, theme?.legendStyle, 40, 'inherit'),
@@ -574,7 +562,7 @@ export function getEchartsConfig(
574562
splitNumber: props?.splitNumber,
575563
min: props?.min,
576564
max: props?.max,
577-
radius: `${props.radius}%`,
565+
radius: `${props.radiusTemperature}%`,
578566
itemStyle: {
579567
color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0]
580568
},

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export const en = {
125125
splitNumber: 'Split Number',
126126
radius: 'Radius',
127127
defaultRadius: '80',
128+
defaultRadiusTemperature: '70',
128129
defaultPointerLength: '50',
129130
pointerLength: 'Pointer Length',
130131
pointerWidth: 'Pointer Width',
@@ -137,6 +138,7 @@ export const en = {
137138
progressBarWidth: 'Progress Bar Width',
138139
defaultProgressBarWidth: '10',
139140
defaultProgressBarWidthStage: '15',
141+
defaultProgressBarWidthTemperature: '35',
140142
progressBar: 'Progress Bar',
141143
roundCap: "Round Cap",
142144
chartType: "Chart Type",
@@ -149,6 +151,9 @@ export const en = {
149151
defaultGradeGaugePointerLength: "25",
150152
defaultGradeGaugePointerWidth: "10",
151153
defaultGradeGaugePointer_Y: "45",
154+
defaultAxisLabelDistance: "10",
155+
axisLabelDistance: "Axis Label Distance",
156+
axisLabelDistanceTooltip: "Axis Label Distance",
152157
stageGauge: {
153158
defaultProgressBarColor1: "#67e0e3",
154159
defaultProgressBarColor2: "#37a2da",

0 commit comments

Comments
 (0)