Skip to content

Commit d7e5a2d

Browse files
Imiss-U1025Imiss-U1025
committed
Fixed an editing ability on Barometer chart.
1 parent 186aa15 commit d7e5a2d

File tree

7 files changed

+78
-59
lines changed

7 files changed

+78
-59
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
@@ -274,6 +274,7 @@ let chartJsonModeChildren: any = {
274274
multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption),
275275
ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption),
276276
clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption),
277+
barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption),
277278

278279
chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
279280
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
@@ -307,6 +308,7 @@ let chartJsonModeChildren: any = {
307308
pointerIcon:withDefault(StringControl),
308309
gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')),
309310
clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')),
311+
barometerPointerIcon:withDefault(StringControl, trans('gaugeChart.defaultBarometerPointerIcon')),
310312
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
311313
axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')),
312314
axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')),
@@ -332,6 +334,7 @@ if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
332334
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
333335
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
334336
axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'),
337+
axisLabelStyleOutline: styleControl(EchartDefaultTextStyle, 'axisLabelStyleOutline'),
335338
}
336339
}
337340
const chartMapModeChildren = {

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

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ export function gaugeChartPropertyView(
400400
const barometerGaugePropertyView = (
401401
<>
402402
<Section name={trans("chart.config")}>
403-
{children.echartsOption.propertyView({
403+
{children.barometerGaugeOption.propertyView({
404404
label: trans("chart.echartsOptionLabel"),
405405
styleName: "higher",
406406
tooltip: (
@@ -418,25 +418,15 @@ export function gaugeChartPropertyView(
418418
{children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
419419
{children.echartsTitleConfig.getPropertyView()}
420420
{children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
421-
{/* {children.left.propertyView({ label: trans("gaugeChart.left") })}
422-
{children.top.propertyView({ label: trans("gaugeChart.top") })}
423-
{children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
424-
{children.width.propertyView({ label: trans("gaugeChart.width") })} */}
425-
{children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
426-
{children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
427-
{children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
428421
{children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
429422
{children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
430423
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
431424
{children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
432-
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
433425
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
434426
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
435-
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
436-
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
427+
{children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
428+
{children.barometerPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
437429
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
438-
{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
439-
{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
440430
</Section>
441431
<Section name={sectionNames.interaction}>
442432
{children.onEvent.propertyView()}
@@ -456,6 +446,9 @@ export function gaugeChartPropertyView(
456446
<Section name={sectionNames.axisLabelStyle}>
457447
{children.axisLabelStyle?.getPropertyView()}
458448
</Section>
449+
<Section name={sectionNames.axisLabelStyleOutline}>
450+
{children.axisLabelStyleOutline?.getPropertyView()}
451+
</Section>
459452
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
460453
</>
461454
);

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

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -577,8 +577,8 @@ export function getEchartsConfig(
577577
height: 12,
578578
borderRadius: 20,
579579
borderWidth: 1,
580-
...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#000000'),
581-
// backgroundColor: 'inherit',
580+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit'),
581+
borderColor: 'inherit',
582582
formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0],
583583
}
584584
}
@@ -589,111 +589,113 @@ export function getEchartsConfig(
589589
...basic,
590590
series: [
591591
{
592+
...basicSeries,
592593
type: 'gauge',
593-
min: 0,
594-
max: 100,
595-
center: ['50%', '60%'],
596-
splitNumber: 10,
597-
radius: '70%', // Reduced from 80% to fit a smaller canvas
594+
min: props?.barometerGaugeOption?.data[0]?.outline?.period[0],
595+
max: props?.barometerGaugeOption?.data[0]?.outline?.period[1],
596+
center: [`${props?.position_x}%`, `${props?.position_y}%`],
597+
splitNumber: props?.barometerGaugeOption?.data[0]?.outline?.splitNumber,
598+
radius: props?.barometerGaugeOption?.data[0]?.outline?.radius,
598599
axisLine: {
599600
lineStyle: {
600-
color: [[1, '#f00']],
601-
width: 2 // Reduced line width
601+
color: [[1, props?.barometerGaugeOption?.data[0]?.outline?.color]],
602+
width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth
602603
}
603604
},
604605
splitLine: {
605606
distance: -12, // Reduced from -18
606-
length: 10, // Reduced from 18
607+
length: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2,
607608
lineStyle: {
608-
color: '#f00',
609-
width: 2 // Thinner line
609+
color: props?.barometerGaugeOption?.data[0]?.outline?.color,
610+
width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5
610611
}
611612
},
612613
axisTick: {
613614
distance: -8, // Reduced from -12
614-
length: 6, // Reduced from 10
615+
length: props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength,
615616
lineStyle: {
616-
color: '#f00',
617-
width: 1
617+
color: props?.barometerGaugeOption?.data[0]?.outline?.color,
618+
width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth
618619
}
619620
},
620621
axisLabel: {
621622
distance: -30, // Reduced from -50 to bring labels closer
622-
color: '#f00',
623-
fontSize: 14 // Reduced from 25
623+
...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 14, '#f00')
624624
},
625625
pointer: {
626-
offsetCenter: [0, '10%'],
627-
length: '80%', // Reduced pointer length (from 115%) for proportionality
628-
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
626+
...basicSeries.pointer,
627+
icon: props?.barometerPointerIcon,
629628
itemStyle: {
630-
color: '#000'
629+
color: props?.barometerGaugeOption?.data[0]?.inline?.color
631630
}
632631
},
633632
detail: {
634633
valueAnimation: true,
635634
precision: 2, // Increase precision or keep as is
636-
fontSize: 16, // Reduced from default larger size
635+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 16),
637636
offsetCenter: [0, '40%'] // Adjust to fit within the smaller radius
638637
},
639638
title: {
640639
offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart
641-
fontSize: 14 // Smaller font
640+
...styleWrapper(props?.labelStyle, theme?.labelStyle, 14)
642641
},
643642
data: [
644643
{
645-
value: 58.46,
646-
name: 'PLP'
644+
value: props?.barometerGaugeOption?.data[0]?.value,
645+
name: props?.barometerGaugeOption?.data[0]?.name,
647646
}
648647
]
649648
},
650649
{
650+
...basicSeries,
651651
type: 'gauge',
652-
min: 0,
653-
max: 60,
654-
center: ['50%', '60%'],
655-
splitNumber: 6,
656-
radius: '60%', // Match the radius
652+
min: props?.barometerGaugeOption?.data[0]?.inline?.period[0],
653+
max: props?.barometerGaugeOption?.data[0]?.inline?.period[1],
654+
center: [`${props?.position_x}%`, `${props?.position_y}%`],
655+
splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber,
656+
radius: props?.barometerGaugeOption?.data[0]?.inline?.radius,
657657
axisLine: {
658658
lineStyle: {
659-
color: [[1, '#000']],
660-
width: 2
659+
color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]],
660+
width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth
661661
}
662662
},
663663
splitLine: {
664664
distance: -2, // Adjust spacing
665-
length: 10, // Reduced length
665+
length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2,
666666
lineStyle: {
667-
color: '#000',
668-
width: 2
667+
color: props?.barometerGaugeOption?.data[0]?.inline?.color,
668+
width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5
669669
}
670670
},
671671
axisTick: {
672672
distance: 0,
673-
length: 6, // Reduced
673+
length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength,
674674
lineStyle: {
675-
color: '#000',
676-
width: 1
675+
color: props?.barometerGaugeOption?.data[0]?.inline?.color,
676+
width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth
677677
}
678678
},
679679
axisLabel: {
680-
distance: 6, // Reduced label distance
681-
fontSize: 14, // Smaller font
682-
color: '#000'
680+
distance: 6,
681+
...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 14, '#000'),
683682
},
684683
pointer: {
685684
show: false
686685
},
687686
title: {
688687
show: false
689688
},
689+
detail: {
690+
show: false
691+
}
690692
}
691693
]
692694
}
693-
console.log(props?.clockGaugeOption?.data?.map(data => data.hour)[0])
694695

695696
let clockGaugeOpt = {
696697
...basicStyle,
698+
tooltip: false,
697699
series: [
698700
{
699701
...basicSeries,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const en = {
146146
defaultPointer_Y: "0",
147147
gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
148148
clockDefaultPointerIcon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
149+
defaultBarometerPointerIcon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
149150
pointer_Y: "Pointer-Y",
150151
pointer_Y_Tooltip: "select vertical of pointer",
151152
pointerIcon: "Pointer Icon",

‎client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,27 @@ export const enObj: I18nObjects = {
236236
defaultBarometerGaugeChartOption: {
237237
data: [
238238
{
239-
value: [
240-
{color: "#19b1e6", },
241-
]
239+
formatter: "{value}%",
240+
value: 58.46,
241+
name: "PLP",
242+
outline: {
243+
color: "#c80707",
244+
period: [0,100],
245+
splitNumber: 10,
246+
progressBarWidth: 2,
247+
axisTickLength: 6,
248+
axisTickWidth: 2,
249+
radius: "70%",
250+
},
251+
inline: {
252+
color: "#000000",
253+
period: [0,60],
254+
progressBarWidth: 2,
255+
splitNumber: 6,
256+
axisTickLength: 6,
257+
axisTickWidth: 2,
258+
radius: "60%"
259+
},
242260
}
243261
]
244262
},

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,4 +192,5 @@ export const sectionNames = {
192192
legendStyle:trans("prop.legendStyle"),
193193
detailStyle:trans("prop.detailStyle"),
194194
axisLabelStyle:trans("prop.axisLabelStyle"),
195+
axisLabelStyleOutline:trans("prop.axisLabelStyleOutline")
195196
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export const en = {
4444
titleStyle: "Title Style",
4545
legendStyle: "Legend Style",
4646
detailStyle: "Detail Style",
47-
axisLabelStyle: "Axis Label Style"
47+
axisLabelStyle: "Axis Label Style",
48+
axisLabelStyleOutline: "Outline Axis Label Style"
4849
},
4950
passwordInput: {
5051
label: "Password:",

0 commit comments

Comments
 (0)