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)
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