Skip to content

Commit 8f68b95

Browse files
Imiss-U1025Imiss-U1025
committed
Added an editing ability on Stage Gauge chart.
1 parent 8563350 commit 8f68b95

File tree

6 files changed

+108
-30
lines changed

6 files changed

+108
-30
lines changed

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
clickEvent,
1818
styleControl,
1919
EchartDefaultChartStyle,
20-
EchartDefaultTextStyle
20+
EchartDefaultTextStyle,
21+
ColorControl
2122
} from "lowcoder-sdk";
2223
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2324
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -267,6 +268,7 @@ export const chartUiModeChildren = {
267268

268269
let chartJsonModeChildren: any = {
269270
echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption),
271+
stageGaugeOption: jsonControl(toObject, i18nObjs.stageGaugeChartOption),
270272
chartType: dropdownControl(ChartTypeOptions, trans("chart.default")),
271273
echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")),
272274
echartsLegendConfig: EchartsLegendConfig,
@@ -295,7 +297,17 @@ let chartJsonModeChildren: any = {
295297
pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')),
296298
pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')),
297299
progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')),
298-
300+
progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')),
301+
stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')),
302+
stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')),
303+
stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')),
304+
stageGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval1')),
305+
stageGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval2')),
306+
stageGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval3')),
307+
axisTickWidth: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickWidth')),
308+
axisTickLength: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickLength')),
309+
axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')),
310+
axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')),
299311
}
300312
if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
301313
chartJsonModeChildren = {

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

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export function gaugeChartPropertyView(
4949
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
5050
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
5151
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
52+
{children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
53+
{children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })}
54+
{children.axisTickColor.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })}
5255
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
5356
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
5457
{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
@@ -79,7 +82,7 @@ export function gaugeChartPropertyView(
7982
const stageGaugePropertyView = (
8083
<>
8184
<Section name={trans("chart.config")}>
82-
{children.echartsOption.propertyView({
85+
{children.stageGaugeOption.propertyView({
8386
label: trans("chart.echartsOptionLabel"),
8487
styleName: "higher",
8588
tooltip: (
@@ -97,6 +100,13 @@ export function gaugeChartPropertyView(
97100
{children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })}
98101
{children.echartsTitleConfig.getPropertyView()}
99102
{children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })}
103+
104+
{children.stageGaugeProgressBarInterval1.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
105+
{children.stageGaugeProgressBarColor1.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
106+
{children.stageGaugeProgressBarInterval2.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
107+
{children.stageGaugeProgressBarColor2.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
108+
{children.stageGaugeProgressBarInterval3.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
109+
{children.stageGaugeProgressBarColor3.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}
100110
{/* {children.left.propertyView({ label: trans("gaugeChart.left") })}
101111
{children.top.propertyView({ label: trans("gaugeChart.top") })}
102112
{children.bottom.propertyView({ label: trans("gaugeChart.bottom") })}
@@ -111,11 +121,14 @@ export function gaugeChartPropertyView(
111121
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })}
112122
{children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}
113123
{children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
114-
{children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
124+
{children.progressBarWidthStage.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}
125+
{children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })}
126+
{children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })}
127+
{children.axisTickColorStage.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })}
115128
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
116129
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
117-
{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}
118-
{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
130+
{/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/}
131+
{/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
119132
</Section>
120133
<Section name={sectionNames.interaction}>
121134
{children.onEvent.propertyView()}
@@ -126,15 +139,15 @@ export function gaugeChartPropertyView(
126139
<Section name={sectionNames.titleStyle}>
127140
{children.titleStyle?.getPropertyView()}
128141
</Section>
129-
<Section name={sectionNames.labelStyle}>
130-
{children.labelStyle?.getPropertyView()}
131-
</Section>
142+
{/*<Section name={sectionNames.labelStyle}>*/}
143+
{/* {children.labelStyle?.getPropertyView()}*/}
144+
{/*</Section>*/}
132145
<Section name={sectionNames.detailStyle}>
133146
{children.legendStyle?.getPropertyView()}
134147
</Section>
135-
<Section name={sectionNames.axisLabelStyle}>
136-
{children.axisLabelStyle?.getPropertyView()}
137-
</Section>
148+
{/*<Section name={sectionNames.axisLabelStyle}>*/}
149+
{/* {children.axisLabelStyle?.getPropertyView()}*/}
150+
{/*</Section>*/}
138151
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
139152
</>
140153
);

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

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,20 @@ export function getEchartsConfig(
182182
"length": `${props?.pointerLength}%`,
183183
"width": props?.pointerWidth,
184184
},
185+
"axisTick": {
186+
"length": props.axisTickLength,
187+
"lineStyle": {
188+
"color": props.axisTickColor,
189+
"width": props.axisTickWidth
190+
}
191+
},
192+
"splitLine": {
193+
"length": Number(props.axisTickLength) * 1.5,
194+
"lineStyle": {
195+
"color": props.axisTickColor,
196+
"width": Number(props.axisTickWidth) * 1.5
197+
}
198+
},
185199
"itemStyle": {
186200
"opacity": props?.opacity,
187201
"borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
@@ -261,49 +275,57 @@ export function getEchartsConfig(
261275
type: 'gauge',
262276
axisLine: {
263277
lineStyle: {
264-
width: 15,
278+
width: props.progressBarWidthStage,
265279
color: [
266-
[0.3, '#67e0e3'],
267-
[0.7, '#37a2da'],
268-
[1, '#fd666d']
280+
props.stageGaugeProgressBarColor1 && props.stageGaugeProgressBarInterval1 ? [props.stageGaugeProgressBarInterval1 || 0.3, props.stageGaugeProgressBarColor1 || "#67e0e3"] : [],
281+
props.stageGaugeProgressBarColor2 && props.stageGaugeProgressBarInterval2 ? [props.stageGaugeProgressBarInterval2 || 0.7, props.stageGaugeProgressBarColor2 || "#37a2da"] : [],
282+
props.stageGaugeProgressBarColor3 && props.stageGaugeProgressBarInterval3 ? [props.stageGaugeProgressBarInterval3 || 1, props.stageGaugeProgressBarColor3 || "#fd666d"] : [],
269283
]
270284
}
271285
},
272286
pointer: {
287+
...basicSeries.pointer,
273288
itemStyle: {
274289
color: 'auto',
275290
}
276291
},
277292
axisTick: {
278-
distance: -15,
279-
length: 7,
293+
distance: -Number(props.progressBarWidthStage),
294+
length: props.axisTickLength,
280295
lineStyle: {
281-
color: '#fff',
282-
width: 1.5
296+
color: props.axisTickColorStage,
297+
width: props.axisTickWidth
283298
}
284299
},
285300
splitLine: {
286-
distance: -15,
287-
length: 15,
301+
distance: -Number(props.progressBarWidthStage),
302+
length: props.progressBarWidthStage,
288303
lineStyle: {
289-
color: '#fff',
290-
width: 3
304+
color: props.axisTickColorStage,
305+
width: Number(props.axisTickWidth) * 1.5
291306
}
292307
},
293308
axisLabel: {
294309
color: 'inherit',
295-
distance: 20,
310+
distance: Number(props.progressBarWidthStage) + 10,
296311
fontSize: 13
297312
},
298313
detail: {
299314
valueAnimation: true,
300-
formatter: '{value} km/h',
301-
color: 'inherit',
302-
fontSize: 20
315+
formatter: props?.stageGaugeOption?.data?.map(data => data.formatter)[0],
316+
fontFamily: props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily,
317+
fontSize: props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 20,
318+
fontWeight: props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight,
319+
color: props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || 'inherit',
320+
fontStyle: props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle,
321+
textShadowColor: props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor,
322+
textShadowBlur: props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0],
323+
textShadowOffsetX: props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1],
324+
textShadowOffsetY: props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2]
303325
},
304326
data: [
305327
{
306-
value: 80
328+
value: props?.stageGaugeOption?.data?.map(data => data.value)
307329
}
308330
]
309331
}

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,35 @@ export const en = {
136136
defaultPosition_Y: '60',
137137
progressBarWidth: 'Progress Bar Width',
138138
defaultProgressBarWidth: '10',
139+
defaultProgressBarWidthStage: '15',
139140
progressBar: 'Progress Bar',
140141
roundCap: "Round Cap",
141142
chartType: "Chart Type",
142-
chartTypeTooltip: "Select the types of Charts."
143+
chartTypeTooltip: "Select the types of Charts.",
144+
stageGauge: {
145+
defaultProgressBarColor1: "#67e0e3",
146+
defaultProgressBarColor2: "#37a2da",
147+
defaultProgressBarColor3: "#fd666d",
148+
defaultProgressBarColor4: "",
149+
defaultProgressBarInterval1: "0.3",
150+
defaultProgressBarInterval2: "0.7",
151+
defaultProgressBarInterval3: "1",
152+
defaultProgressBarInterval4: "",
153+
progressBarInterval: "Interval",
154+
progressBarColor: "Progress Bar Color",
155+
defaultToolTip: "Default ToolTip",
156+
defaultAxisTickLength: "7",
157+
defaultAxisTickWidth: "2",
158+
defaultAxisTickColor: "#444444",
159+
defaultAxisTickColorStage: "#ffffff",
160+
axisTickLength: "axisTick Length",
161+
axisTickWidth: "axisTick Width",
162+
axisTickWidthStage: "axisTick Width",
163+
axisTickColor: "axisTick Color",
164+
axisTickLengthTooltip: "axisTickLengthTooltip",
165+
axisTickWidthTooltip: "axisTickLengthTooltip",
166+
axisTickColorTooltip: "axisTickLengthTooltip",
167+
}
143168
},
144169
echarts: {
145170
defaultTitle: "Data Display",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,11 @@ export const enObj: I18nObjects = {
176176
{ value: 60, name: "Completed",color:'#fc8452' }
177177
]
178178
},
179+
stageGaugeChartOption: {
180+
data: [
181+
{ value: 80, formatter: "Speed: {value} Km/h" }
182+
]
183+
},
179184
defaultSankeyChartOption: {
180185
data: [
181186
{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
@@ -5,6 +5,7 @@ export type I18nObjects = {
55
defaultDataSource: JSONObject[];
66
defaultEchartsJsonOption: Record<string, unknown>;
77
defaultGaugeChartOption: Record<string, unknown>;
8+
stageGaugeChartOption: Record<string, unknown>;
89
defaultFunnelChartOption: Record<string, unknown>;
910
defaultSankeyChartOption: Record<string, unknown>;
1011
defaultCandleStickChartOption: Record<string, unknown>;

0 commit comments

Comments
 (0)