Skip to content

Commit c87b7b3

Browse files
Imiss-U1025Imiss-U1025
committed
Fixed an editing ability on Clock chart.
1 parent ab040d8 commit c87b7b3

File tree

5 files changed

+104
-97
lines changed

5 files changed

+104
-97
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
@@ -273,6 +273,8 @@ let chartJsonModeChildren: any = {
273273
temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption),
274274
multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption),
275275
ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption),
276+
clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption),
277+
276278
chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
277279
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
278280
echartsLegendConfig: EchartsLegendConfig,

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

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ export function gaugeChartPropertyView(
463463
const clockGaugePropertyView = (
464464
<>
465465
<Section name={trans("chart.config")}>
466-
{children.echartsOption.propertyView({
466+
{children.clockGaugeOption.propertyView({
467467
label: trans("chart.echartsOptionLabel"),
468468
styleName: "higher",
469469
tooltip: (
@@ -481,25 +481,13 @@ export function gaugeChartPropertyView(
481481
{children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
482482
{children.echartsTitleConfig.getPropertyView()}
483483
{children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
484-
{/* {children.left.propertyView({ label: trans("gaugeChart.left") })}
485-
{children.top.propertyView({ label: trans("gaugeChart.top") })}
486-
{children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
487-
{children.width.propertyView({ label: trans("gaugeChart.width") })} */}
488484
{children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })}
489-
{children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })}
490-
{children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })}
491-
{children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
492-
{children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
493-
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })}
494-
{children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })}
495-
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
496-
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
497-
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
498-
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
499-
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
500-
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
501-
{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
502-
{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
485+
{children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}
486+
{children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
487+
{children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })}
488+
{children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })}
489+
{children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}
490+
{children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
503491
</Section>
504492
<Section name={sectionNames.interaction}>
505493
{children.onEvent.propertyView()}
@@ -510,12 +498,12 @@ export function gaugeChartPropertyView(
510498
<Section name={sectionNames.titleStyle}>
511499
{children.titleStyle?.getPropertyView()}
512500
</Section>
513-
<Section name={sectionNames.labelStyle}>
514-
{children.labelStyle?.getPropertyView()}
515-
</Section>
516-
<Section name={sectionNames.detailStyle}>
517-
{children.legendStyle?.getPropertyView()}
518-
</Section>
501+
{/*<Section name={sectionNames.labelStyle}>*/}
502+
{/* {children.labelStyle?.getPropertyView()}*/}
503+
{/*</Section>*/}
504+
{/*<Section name={sectionNames.detailStyle}>*/}
505+
{/* {children.legendStyle?.getPropertyView()}*/}
506+
{/*</Section>*/}
519507
<Section name={sectionNames.axisLabelStyle}>
520508
{children.axisLabelStyle?.getPropertyView()}
521509
</Section>

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

Lines changed: 57 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -622,14 +622,6 @@ export function getEchartsConfig(
622622
color: '#f00',
623623
fontSize: 14 // Reduced from 25
624624
},
625-
anchor: {
626-
show: true,
627-
size: 14, // Reduced from 20
628-
itemStyle: {
629-
borderColor: '#000',
630-
borderWidth: 1 // Reduced border width
631-
}
632-
},
633625
pointer: {
634626
offsetCenter: [0, '10%'],
635627
length: '80%', // Reduced pointer length (from 115%) for proportionality
@@ -695,16 +687,10 @@ export function getEchartsConfig(
695687
title: {
696688
show: false
697689
},
698-
anchor: {
699-
show: true,
700-
size: 10, // Smaller anchor
701-
itemStyle: {
702-
color: '#000'
703-
}
704-
}
705690
}
706691
]
707692
}
693+
console.log(props?.clockGaugeOption?.data?.map(data => data.hour)[0])
708694

709695
let clockGaugeOpt = {
710696
...basicStyle,
@@ -722,23 +708,39 @@ export function getEchartsConfig(
722708
clockwise: true,
723709
axisLine: {
724710
lineStyle: {
725-
width: 15,
726-
color: [[1, 'rgba(0,0,0,0.7)']],
727-
shadowColor: 'rgba(0, 0, 0, 0.5)',
728-
shadowBlur: 15
711+
width: props.progressBarWidth,
712+
color: [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]],
713+
shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
714+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
715+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
716+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
717+
}
718+
},
719+
axisTick: {
720+
length: props.axisTickLength,
721+
lineStyle: {
722+
width: props.axisTickWidth,
723+
color: props.axisTickColor,
724+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
725+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
726+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
727+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
729728
}
730729
},
731730
splitLine: {
731+
length: Number(props.axisTickLength) * 2,
732732
lineStyle: {
733-
shadowColor: 'rgba(0, 0, 0, 0.3)',
734-
shadowBlur: 3,
735-
shadowOffsetX: 1,
736-
shadowOffsetY: 2
733+
width: Number(props.axisTickWidth) * 1.5,
734+
color: props.axisTickColor,
735+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
736+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
737+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
738+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
737739
}
738740
},
739741
axisLabel: {
740-
fontSize: 15,
741-
distance: 20,
742+
...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 16, "#000000"),
743+
distance: Number(props?.progressBarWidth) + Number(props.axisLabelDistance),
742744
formatter: function (value) {
743745
if (value === 0) {
744746
return '';
@@ -748,15 +750,15 @@ export function getEchartsConfig(
748750
},
749751
pointer: {
750752
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',
751-
width: 6,
752-
length: '55%',
753+
width: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width,
754+
length: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length,
753755
offsetCenter: [0, '8%'],
754756
itemStyle: {
755-
color: '#C0911F',
756-
shadowColor: 'rgba(0, 0, 0, 0.3)',
757-
shadowBlur: 8,
758-
shadowOffsetX: 2,
759-
shadowOffsetY: 4
757+
color: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color,
758+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
759+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
760+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
761+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
760762
}
761763
},
762764
detail: {
@@ -767,7 +769,7 @@ export function getEchartsConfig(
767769
},
768770
data: [
769771
{
770-
value: 0
772+
value: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value
771773
}
772774
]
773775
},
@@ -793,28 +795,15 @@ export function getEchartsConfig(
793795
},
794796
pointer: {
795797
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',
796-
width: 4,
797-
length: '70%',
798+
width: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width,
799+
length: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length,
798800
offsetCenter: [0, '8%'],
799801
itemStyle: {
800-
color: '#C0911F',
801-
shadowColor: 'rgba(0, 0, 0, 0.3)',
802-
shadowBlur: 8,
803-
shadowOffsetX: 2,
804-
shadowOffsetY: 4
805-
}
806-
},
807-
anchor: {
808-
show: true,
809-
size: 10,
810-
showAbove: false,
811-
itemStyle: {
812-
borderWidth: 15,
813-
borderColor: '#C0911F',
814-
shadowColor: 'rgba(0, 0, 0, 0.3)',
815-
shadowBlur: 8,
816-
shadowOffsetX: 2,
817-
shadowOffsetY: 4
802+
color: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color,
803+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
804+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
805+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
806+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
818807
}
819808
},
820809
detail: {
@@ -825,7 +814,7 @@ export function getEchartsConfig(
825814
},
826815
data: [
827816
{
828-
value: 20
817+
value: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value
829818
}
830819
]
831820
},
@@ -852,27 +841,27 @@ export function getEchartsConfig(
852841
},
853842
pointer: {
854843
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',
855-
width: 2,
856-
length: '85%',
844+
width: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width,
845+
length: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length,
857846
offsetCenter: [0, '8%'],
858847
itemStyle: {
859-
color: '#C0911F',
860-
shadowColor: 'rgba(0, 0, 0, 0.3)',
861-
shadowBlur: 8,
862-
shadowOffsetX: 2,
863-
shadowOffsetY: 4
848+
color: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color,
849+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
850+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
851+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
852+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
864853
}
865854
},
866855
anchor: {
867856
show: true,
868-
size: 15,
857+
size: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size,
869858
showAbove: true,
870859
itemStyle: {
871-
color: '#C0911F',
872-
shadowColor: 'rgba(0, 0, 0, 0.3)',
873-
shadowBlur: 8,
874-
shadowOffsetX: 2,
875-
shadowOffsetY: 4
860+
color: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color,
861+
shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55",
862+
shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
863+
shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
864+
shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
876865
}
877866
},
878867
detail: {
@@ -883,7 +872,7 @@ export function getEchartsConfig(
883872
},
884873
data: [
885874
{
886-
value: 40
875+
value: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value
887876
}
888877
]
889878
}

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

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,15 +236,42 @@ export const enObj: I18nObjects = {
236236
defaultBarometerGaugeChartOption: {
237237
data: [
238238
{
239-
formatter: "{value}%",
240239
value: [
241-
{color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']},
242-
{color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']},
243-
{color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']},
240+
{color: "#19b1e6", },
244241
]
245242
}
246243
]
247244
},
245+
defaultClockGaugeChartOption: {
246+
data: [
247+
{
248+
outlineColor: "#aa2a2a",
249+
anchor:{
250+
color: "#cfae09",
251+
size: 10,
252+
},
253+
hour: {
254+
color: "#cfae09",
255+
width: 4,
256+
length: 50,
257+
value: 4
258+
},
259+
minute: {
260+
color: "#cfae09",
261+
width: 2.5,
262+
length: 65,
263+
value: 30
264+
},
265+
second: {
266+
color: "#cfae09",
267+
width: 1,
268+
length: 90,
269+
value: 45,
270+
271+
}
272+
},
273+
]
274+
},
248275
defaultSankeyChartOption: {
249276
data: [
250277
{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
@@ -11,6 +11,7 @@ export type I18nObjects = {
1111
defaultMultiTitleGaugeChartOption: Record<string, unknown>;
1212
defaultRingGaugeChartOption: Record<string, unknown>;
1313
defaultBarometerGaugeChartOption: Record<string, unknown>;
14+
defaultClockGaugeChartOption: Record<string, unknown>;
1415
defaultFunnelChartOption: Record<string, unknown>;
1516
defaultSankeyChartOption: Record<string, unknown>;
1617
defaultCandleStickChartOption: Record<string, unknown>;

0 commit comments

Comments
 (0)