Skip to content

Commit 3ee81bc

Browse files
Imiss-U1025Imiss-U1025
committed
Added an editing ability on Temperature Gauge chart.
1 parent a113aaf commit 3ee81bc

File tree

5 files changed

+45
-63
lines changed

5 files changed

+45
-63
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@ let chartJsonModeChildren: any = {
270270
echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption),
271271
stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption),
272272
gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption),
273+
temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption),
273274
chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
274275
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
275276
echartsLegendConfig: EchartsLegendConfig,

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export function gaugeChartPropertyView(
239239
const temperatureGaugePropertyView = (
240240
<>
241241
<Section name={trans("chart.config")}>
242-
{children.echartsOption.propertyView({
242+
{children.temperatureGaugeOption.propertyView({
243243
label: trans("chart.echartsOptionLabel"),
244244
styleName: "higher",
245245
tooltip: (
@@ -272,6 +272,9 @@ export function gaugeChartPropertyView(
272272
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
273273
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
274274
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
275+
{children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
276+
{children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })}
277+
{children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })}
275278
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
276279
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
277280
{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
@@ -286,9 +289,9 @@ export function gaugeChartPropertyView(
286289
<Section name={sectionNames.titleStyle}>
287290
{children.titleStyle?.getPropertyView()}
288291
</Section>
289-
<Section name={sectionNames.labelStyle}>
290-
{children.labelStyle?.getPropertyView()}
291-
</Section>
292+
{/*<Section name={sectionNames.labelStyle}>*/}
293+
{/* {children.labelStyle?.getPropertyView()}*/}
294+
{/*</Section>*/}
292295
<Section name={sectionNames.detailStyle}>
293296
{children.legendStyle?.getPropertyView()}
294297
</Section>

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

Lines changed: 31 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -393,22 +393,6 @@ export function getEchartsConfig(
393393
width: Number(props.axisTickWidth) * 1.5
394394
}
395395
},
396-
// axisTick: {
397-
// distance: -Number(props.progressBarWidthStage),
398-
// length: props.axisTickLength,
399-
// lineStyle: {
400-
// color: props.axisTickColorStage,
401-
// width: props.axisTickWidth
402-
// }
403-
// },
404-
// splitLine: {
405-
// distance: -Number(props.progressBarWidthStage),
406-
// length: props.progressBarWidthStage,
407-
// lineStyle: {
408-
// color: props.axisTickColorStage,
409-
// width: Number(props.axisTickWidth) * 1.5
410-
// }
411-
// },
412396
axisLabel: {
413397
show: false
414398
},
@@ -528,83 +512,71 @@ export function getEchartsConfig(
528512
series: [
529513
{
530514
...basicSeries,
531-
type: 'gauge',
532-
center: ['50%', '70%'],
533-
radius: '80%', // Shrink the gauge radius
534-
startAngle: 200,
535-
endAngle: -20,
536-
min: 0,
537-
max: 60,
538-
splitNumber: 12,
539515
itemStyle: {
540-
color: '#FFAB91'
516+
color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0]
541517
},
542518
progress: {
543519
show: true,
544-
width: 20 // Reduced from 30
520+
width: props.progressBarWidth
545521
},
546522
pointer: {
547523
show: false
548524
},
549525
axisLine: {
550526
lineStyle: {
551-
width: 20 // Reduced from 30
527+
width: props.progressBarWidth
552528
}
553529
},
554530
axisTick: {
555-
distance: -30, // Reduced from -45
556-
splitNumber: 5,
531+
length: props.axisTickLength,
532+
distance: -Number(props.progressBarWidth) - 10,
557533
lineStyle: {
558-
width: 2,
559-
color: '#999'
534+
color: props.axisTickColorGrade || 'auto',
535+
width: props.axisTickWidth
560536
}
561537
},
562538
splitLine: {
563-
distance: -36, // Reduced from -52
564-
length: 10, // Reduced from 14
539+
distance: -Number(props.progressBarWidth) - 10 - Number(props.axisTickLength),
540+
length: Number(props.axisTickLength) * 2,
565541
lineStyle: {
566-
width: 2, // Reduced from 3
567-
color: '#999'
542+
color: props.axisTickColorGrade || 'auto',
543+
width: Number(props.axisTickWidth) * 1.5
568544
}
569545
},
570546
axisLabel: {
571-
distance: -14, // Reduced from -20
572-
color: '#999',
573-
fontSize: 14 // Reduced from 20
574-
},
575-
anchor: {
576-
show: false
577-
},
578-
title: {
579-
show: false
547+
distance: -20, // Reduced from -20
548+
...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"),
580549
},
581550
detail: {
582551
valueAnimation: true,
583-
width: '60%',
584552
lineHeight: 30, // Reduced from 40
585-
borderRadius: 8,
586553
offsetCenter: [0, '-15%'],
587-
fontSize: 40, // Reduced from 60
588-
fontWeight: 'bolder',
589-
formatter: '{value} °C',
590-
color: 'inherit'
554+
formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0],
555+
...styleWrapper(props?.legendStyle, theme?.legendStyle, 40, 'inherit'),
591556
},
592557
data: [
593558
{
594-
value: 20
559+
value: props?.temperatureGaugeOption?.data?.map(data => data.value)
595560
}
596561
]
597562
},
598563
{
599564
type: 'gauge',
600-
center: ['50%', '70%'],
601-
radius: '80%', // Match the same radius
602-
startAngle: 200,
603-
endAngle: -20,
604-
min: 0,
605-
max: 60,
565+
// center: ['50%', '70%'],
566+
// radius: '80%', // Match the same radius
567+
// startAngle: 200,
568+
// endAngle: -20,
569+
// min: 0,
570+
// max: 60,
571+
center: [`${props?.position_x}%`, `${props?.position_y}%`],
572+
startAngle: props?.startAngle,
573+
endAngle: props?.endAngle,
574+
splitNumber: props?.splitNumber,
575+
min: props?.min,
576+
max: props?.max,
577+
radius: `${props.radius}%`,
606578
itemStyle: {
607-
color: '#FD7347'
579+
color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0]
608580
},
609581
progress: {
610582
show: true,
@@ -630,7 +602,7 @@ export function getEchartsConfig(
630602
},
631603
data: [
632604
{
633-
value: 20
605+
value: props?.temperatureGaugeOption?.data?.map(data => data.value)
634606
}
635607
]
636608
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,11 @@ export const enObj: I18nObjects = {
186186
{ value: 80, name: "Grade Rating" }
187187
]
188188
},
189+
defaultTemperatureGaugeChartOption: {
190+
data: [
191+
{value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" }
192+
]
193+
},
189194
defaultSankeyChartOption: {
190195
data: [
191196
{name: "Show"},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export type I18nObjects = {
77
defaultGaugeChartOption: Record<string, unknown>;
88
defaultStageGaugeChartOption: Record<string, unknown>;
99
defaultGradeGaugeChartOption: Record<string, unknown>;
10+
defaultTemperatureGaugeChartOption: Record<string, unknown>;
1011
defaultFunnelChartOption: Record<string, unknown>;
1112
defaultSankeyChartOption: Record<string, unknown>;
1213
defaultCandleStickChartOption: Record<string, unknown>;

0 commit comments

Comments
 (0)