Skip to content

Commit daf61f8

Browse files
Imiss-U1025Imiss-U1025
committed
Fixed an editing ability on Multi Title and Ring chart.
1 parent 45c681e commit daf61f8

File tree

5 files changed

+75
-97
lines changed

5 files changed

+75
-97
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
@@ -271,6 +271,8 @@ let chartJsonModeChildren: any = {
271271
stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption),
272272
gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption),
273273
temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption),
274+
multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption),
275+
ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption),
274276
chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
275277
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
276278
echartsLegendConfig: EchartsLegendConfig,
@@ -329,6 +331,7 @@ let chartJsonModeChildren: any = {
329331
axisTickColorGrade: withDefault(ColorControl),
330332
axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')),
331333
}
334+
332335
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
333336
chartJsonModeChildren = {
334337
...chartJsonModeChildren,

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ 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.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
274275
{children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
275276
{children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })}
276277
{children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
@@ -306,7 +307,7 @@ export function gaugeChartPropertyView(
306307
const multiGaugePropertyView = (
307308
<>
308309
<Section name={trans("chart.config")}>
309-
{children.echartsOption.propertyView({
310+
{children.multiTitleGaugeOption.propertyView({
310311
label: trans("chart.echartsOptionLabel"),
311312
styleName: "higher",
312313
tooltip: (
@@ -338,6 +339,8 @@ export function gaugeChartPropertyView(
338339
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
339340
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
340341
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
342+
{children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}
343+
{children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
341344
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
342345
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
343346
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
@@ -369,7 +372,7 @@ export function gaugeChartPropertyView(
369372
const ringGaugePropertyView = (
370373
<>
371374
<Section name={trans("chart.config")}>
372-
{children.echartsOption.propertyView({
375+
{children.ringGaugeOption.propertyView({
373376
label: trans("chart.echartsOptionLabel"),
374377
styleName: "higher",
375378
tooltip: (

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

Lines changed: 41 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -425,12 +425,10 @@ export function getEchartsConfig(
425425
...basicSeries,
426426
type: 'gauge',
427427
pointer: {
428-
width: 6, // Narrow the pointer
429-
length: '70%', // Shorten the pointer length
430-
offsetCenter: [0, '10%'],
431-
icon: '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'
428+
...basicSeries.pointer,
429+
icon: props.pointerIcon || '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',
430+
offsetCenter: [0, '8%']
432431
},
433-
434432
progress: {
435433
show: true,
436434
overlap: true,
@@ -440,56 +438,34 @@ export function getEchartsConfig(
440438
roundCap: true
441439
},
442440

443-
data: [
444-
{
445-
value: 20,
446-
name: 'Good',
447-
title: {
448-
fontSize: 12,
449-
offsetCenter: ['-60%', '60%']
450-
},
451-
detail: {
452-
fontSize: 12,
453-
offsetCenter: ['-60%', '80%']
454-
}
441+
data: props.multiTitleGaugeOption.data[0].value.map(item => ({
442+
value: item.value,
443+
name: item.title,
444+
title: {
445+
offsetCenter: item.titlePosition
455446
},
456-
{
457-
value: 40,
458-
name: 'Better',
459-
title: {
460-
fontSize: 12,
461-
offsetCenter: ['0%', '60%']
462-
},
463-
detail: {
464-
fontSize: 12,
465-
offsetCenter: ['0%', '80%']
466-
}
447+
detail: {
448+
offsetCenter: item.valuePosition
467449
},
468-
{
469-
value: 60,
470-
name: 'Perfect',
471-
title: {
472-
fontSize: 12,
473-
offsetCenter: ['60%', '60%']
474-
},
475-
detail: {
476-
fontSize: 12,
477-
offsetCenter: ['60%', '80%']
450+
itemStyle: {
451+
color: item.color
452+
},
453+
pointer: {
454+
itemStyle: {
455+
color: item.color
478456
}
479457
}
480-
],
458+
})),
481459

482460
title: {
483-
fontSize: 12
461+
...styleWrapper(props?.labelStyle, theme?.labelStyle, 16),
484462
},
485463
detail: {
486464
width: 30,
487465
height: 12,
488-
fontSize: 12,
489-
color: '#fff',
466+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff'),
490467
backgroundColor: 'inherit',
491-
borderRadius: 3,
492-
formatter: '{value}%'
468+
formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0],
493469
}
494470
}
495471
]
@@ -602,11 +578,9 @@ export function getEchartsConfig(
602578
series: [
603579
{
604580
...basicSeries,
605-
type: 'gauge',
606-
center: ['50%', '55%'],
607-
radius: '80%', // Shrink the gauge
608581
startAngle: 90,
609-
endAngle: -270,
582+
endAngle: 450,
583+
type: 'gauge',
610584
pointer: {
611585
show: false
612586
},
@@ -617,7 +591,7 @@ export function getEchartsConfig(
617591
clip: false,
618592
itemStyle: {
619593
borderWidth: 1,
620-
borderColor: '#464646'
594+
borderColor: 'inherit'
621595
}
622596
},
623597
axisLine: {
@@ -634,63 +608,35 @@ export function getEchartsConfig(
634608
axisLabel: {
635609
show: false
636610
},
637-
data: [
638-
{
639-
value: 20,
640-
name: 'Perfect',
641-
title: {
642-
fontSize: 12, // Smaller font
643-
offsetCenter: ['0%', '-40%'] // Adjust if needed
644-
},
645-
detail: {
646-
valueAnimation: true,
647-
fontSize: 12, // Smaller font
648-
width: 40, // Slightly smaller
649-
height: 12, // Slightly smaller
650-
offsetCenter: ['0%', '-20%']
651-
}
611+
data: props.ringGaugeOption.data[0].value.map(item => ({
612+
value: item.value,
613+
name: item.title,
614+
title: {
615+
offsetCenter: item.titlePosition
652616
},
653-
{
654-
value: 40,
655-
name: 'Good',
656-
title: {
657-
fontSize: 12,
658-
offsetCenter: ['0%', '0%']
659-
},
660-
detail: {
661-
valueAnimation: true,
662-
fontSize: 12,
663-
width: 40,
664-
height: 12,
665-
offsetCenter: ['0%', '20%']
666-
}
617+
detail: {
618+
offsetCenter: item.valuePosition
667619
},
668-
{
669-
value: 60,
670-
name: 'Commonly',
671-
title: {
672-
fontSize: 12,
673-
offsetCenter: ['0%', '40%']
674-
},
675-
detail: {
676-
valueAnimation: true,
677-
fontSize: 12,
678-
width: 40,
679-
height: 12,
680-
offsetCenter: ['0%', '60%']
620+
itemStyle: {
621+
color: item.color
622+
},
623+
pointer: {
624+
itemStyle: {
625+
color: item.color
681626
}
682627
}
683-
],
628+
})),
684629
title: {
685-
fontSize: 12 // Smaller title font size
630+
...styleWrapper(props?.labelStyle, theme?.labelStyle, 16),
686631
},
687632
detail: {
688-
fontSize: 12,
689633
width: 40,
690634
height: 12,
691635
borderRadius: 20,
692636
borderWidth: 1,
693-
formatter: '{value}%'
637+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#000000'),
638+
// backgroundColor: 'inherit',
639+
formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0],
694640
}
695641
}
696642
]

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,30 @@ export const enObj: I18nObjects = {
191191
{value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" }
192192
]
193193
},
194+
defaultMultiTitleGaugeChartOption: {
195+
data: [
196+
{
197+
formatter: "{value}%",
198+
value: [
199+
{color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['-60%', '60%'], valuePosition: ['-60%', '80%']},
200+
{color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '60%'], valuePosition: ['0%', '80%']},
201+
{color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['60%', '60%'], valuePosition: ['60%', '80%']},
202+
]
203+
}
204+
]
205+
},
206+
defaultRingGaugeChartOption: {
207+
data: [
208+
{
209+
formatter: "{value}%",
210+
value: [
211+
{color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']},
212+
{color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']},
213+
{color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']},
214+
]
215+
}
216+
]
217+
},
194218
defaultSankeyChartOption: {
195219
data: [
196220
{name: "Show"},

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export type I18nObjects = {
88
defaultStageGaugeChartOption: Record<string, unknown>;
99
defaultGradeGaugeChartOption: Record<string, unknown>;
1010
defaultTemperatureGaugeChartOption: Record<string, unknown>;
11+
defaultMultiTitleGaugeChartOption: Record<string, unknown>;
12+
defaultRingGaugeChartOption: Record<string, unknown>;
1113
defaultFunnelChartOption: Record<string, unknown>;
1214
defaultSankeyChartOption: Record<string, unknown>;
1315
defaultCandleStickChartOption: Record<string, unknown>;

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