Skip to content

Commit 7932384

Browse files
n-larkn-lark
authored
[1875] 3/4ths gauge in autosize is not working well + needle dial fix for tall gauges (#2199)
1 parent 50e8af3 commit 7932384

4 files changed

Lines changed: 204 additions & 3 deletions

File tree

‎cypress/fixtures/flows/dashboard-gauge-autosize.json‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
[
2+
{
3+
"id": "gauge-autosize-tab",
4+
"type": "tab",
5+
"label": "Gauge Autosize",
6+
"disabled": false,
7+
"info": ""
8+
},
9+
{
10+
"id": "dashboard-ui-base",
11+
"type": "ui-base",
12+
"name": "UI Name",
13+
"path": "/dashboard",
14+
"includeClientData": true,
15+
"acceptsClientConfig": ["ui-notification", "ui-control"]
16+
},
17+
{
18+
"id": "dashboard-ui-theme",
19+
"type": "ui-theme",
20+
"name": "Theme",
21+
"colors": {
22+
"surface": "#ffffff",
23+
"primary": "#0094ce",
24+
"bgPage": "#eeeeee",
25+
"groupBg": "#ffffff",
26+
"groupOutline": "#cccccc"
27+
}
28+
},
29+
{
30+
"id": "dashboard-ui-page-1",
31+
"type": "ui-page",
32+
"name": "Page 1",
33+
"ui": "dashboard-ui-base",
34+
"path": "/page1",
35+
"icon": "home",
36+
"layout": "grid",
37+
"theme": "dashboard-ui-theme",
38+
"order": 1,
39+
"className": "",
40+
"visible": "true",
41+
"disabled": false
42+
},
43+
{
44+
"id": "dashboard-ui-group",
45+
"type": "ui-group",
46+
"name": "Gauges",
47+
"page": "dashboard-ui-page-1",
48+
"width": "6",
49+
"height": "1",
50+
"order": 1,
51+
"showTitle": true,
52+
"className": "",
53+
"visible": "true",
54+
"disabled": "false"
55+
},
56+
{
57+
"id": "dashboard-ui-gauge-auto",
58+
"type": "ui-gauge",
59+
"z": "gauge-autosize-tab",
60+
"group": "dashboard-ui-group",
61+
"name": "auto",
62+
"order": 1,
63+
"value": "payload",
64+
"valueType": "msg",
65+
"width": "3",
66+
"height": "0",
67+
"gtype": "gauge-34",
68+
"gstyle": "needle",
69+
"title": "auto",
70+
"alwaysShowTitle": true,
71+
"floatingTitlePosition": "top-left",
72+
"units": "%",
73+
"icon": "",
74+
"prefix": "",
75+
"suffix": "",
76+
"segments": [
77+
{ "from": "0", "color": "#53a51c", "text": "", "textType": "label" },
78+
{ "from": "60", "color": "#f6c000", "text": "", "textType": "label" },
79+
{ "from": "80", "color": "#ca3838", "text": "", "textType": "label" }
80+
],
81+
"min": "0",
82+
"max": "100",
83+
"sizeThickness": "16",
84+
"sizeGap": "4",
85+
"sizeKeyThickness": "8",
86+
"styleRounded": true,
87+
"styleGlow": false,
88+
"className": "",
89+
"x": 400,
90+
"y": 100,
91+
"wires": [[]]
92+
},
93+
{
94+
"id": "dashboard-ui-gauge-fixed",
95+
"type": "ui-gauge",
96+
"z": "gauge-autosize-tab",
97+
"group": "dashboard-ui-group",
98+
"name": "fixed",
99+
"order": 2,
100+
"value": "payload",
101+
"valueType": "msg",
102+
"width": "3",
103+
"height": "4",
104+
"gtype": "gauge-34",
105+
"gstyle": "needle",
106+
"title": "fixed",
107+
"alwaysShowTitle": true,
108+
"floatingTitlePosition": "top-left",
109+
"units": "%",
110+
"icon": "",
111+
"prefix": "",
112+
"suffix": "",
113+
"segments": [
114+
{ "from": "0", "color": "#53a51c", "text": "", "textType": "label" },
115+
{ "from": "60", "color": "#f6c000", "text": "", "textType": "label" },
116+
{ "from": "80", "color": "#ca3838", "text": "", "textType": "label" }
117+
],
118+
"min": "0",
119+
"max": "100",
120+
"sizeThickness": "16",
121+
"sizeGap": "4",
122+
"sizeKeyThickness": "8",
123+
"styleRounded": true,
124+
"styleGlow": false,
125+
"className": "",
126+
"x": 400,
127+
"y": 160,
128+
"wires": [[]]
129+
},
130+
{
131+
"id": "dashboard-ui-gauge-half-auto",
132+
"type": "ui-gauge",
133+
"z": "gauge-autosize-tab",
134+
"group": "dashboard-ui-group",
135+
"name": "half-auto",
136+
"order": 3,
137+
"value": "payload",
138+
"valueType": "msg",
139+
"width": "3",
140+
"height": "0",
141+
"gtype": "gauge-half",
142+
"gstyle": "needle",
143+
"title": "half-auto",
144+
"alwaysShowTitle": true,
145+
"floatingTitlePosition": "top-left",
146+
"units": "%",
147+
"icon": "",
148+
"prefix": "",
149+
"suffix": "",
150+
"segments": [
151+
{ "from": "0", "color": "#53a51c", "text": "", "textType": "label" },
152+
{ "from": "60", "color": "#f6c000", "text": "", "textType": "label" },
153+
{ "from": "80", "color": "#ca3838", "text": "", "textType": "label" }
154+
],
155+
"min": "0",
156+
"max": "100",
157+
"sizeThickness": "16",
158+
"sizeGap": "4",
159+
"sizeKeyThickness": "8",
160+
"styleRounded": true,
161+
"styleGlow": false,
162+
"className": "",
163+
"x": 400,
164+
"y": 220,
165+
"wires": [[]]
166+
}
167+
]

‎cypress/tests/widgets/gauge-autosize.spec.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
describe('Node-RED Dashboard 2.0 - Gauge auto-height (#1875)', () => {
2+
beforeEach(() => {
3+
cy.deployFixture('dashboard-gauge-autosize')
4+
cy.visit('/dashboard/page1')
5+
})
6+
7+
it('gives an auto-height gauge the default height instead of collapsing to one row', () => {
8+
cy.get('#nrdb-ui-widget-dashboard-ui-gauge-auto').children().eq(0).should('have.css', 'grid-row-end', 'span 3')
9+
})
10+
11+
it('leaves a fixed-height gauge unchanged', () => {
12+
cy.get('#nrdb-ui-widget-dashboard-ui-gauge-fixed').children().eq(0).should('have.css', 'grid-row-end', 'span 4')
13+
})
14+
15+
it('does not force a default height on an auto half-gauge (fix is scoped to gauge-34)', () => {
16+
cy.get('#nrdb-ui-widget-dashboard-ui-gauge-half-auto').children().eq(0).should('not.have.css', 'grid-row-end', 'span 3')
17+
})
18+
})

‎ui/src/layouts/Group.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,9 @@ export default {
136136
if (widget.type === 'ui-chart') {
137137
return 8
138138
}
139+
if (widget.type === 'ui-gauge' && widget.props.gtype === 'gauge-34') {
140+
return 3
141+
}
139142
}
140143
return height
141144
},

‎ui/src/widgets/ui-gauge/types/UIGaugeDial.vue‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,12 @@ export default {
136136
this.sizes.titleHeight = this.$refs.title ? this.$refs.title.clientHeight : 0
137137
138138
this.width = this.$refs.container.clientWidth
139-
this.height = this.props.height ? this.$refs.container.clientHeight - this.sizes.titleHeight : (this.props.gtype === 'gauge-half' ? 150 : 300)
139+
const available = this.$refs.container.clientHeight - this.sizes.titleHeight
140+
if (this.props.gtype === 'gauge-34' && !this.props.height) {
141+
this.height = available > 0 ? available : 300
142+
} else {
143+
this.height = this.props.height ? available : (this.props.gtype === 'gauge-half' ? 150 : 300)
144+
}
140145
141146
// heights for the SVG
142147
const w = this.width
@@ -157,7 +162,8 @@ export default {
157162
158163
const limit = this.$refs['limits-min']
159164
const labelRoom = limit ? Math.ceil(limit.getBBox().height) : 16
160-
if (gaugeArea + labelRoom < h) {
165+
this.capped = gaugeArea + labelRoom < h
166+
if (this.capped) {
161167
this.height = gaugeArea
162168
this.$refs.gauge.style.flexGrow = '0'
163169
this.$refs.gauge.setAttribute('height', gaugeArea + labelRoom)
@@ -329,7 +335,13 @@ export default {
329335
// this.svg.select('#needle-container')
330336
331337
this.svg.select('#needle-container')
338+
.style('transform-box', this.capped ? 'view-box' : null)
332339
.style('transform-origin', () => {
340+
if (this.capped) {
341+
const cx = this.width / 2
342+
const cy = this.props.gtype === 'gauge-half' ? this.height + this.sizes.fudge : this.height / 2
343+
return `${cx}px ${cy}px`
344+
}
333345
return this.sizes.angle > Math.PI ? 'center center' : 'center bottom'
334346
})
335347
.transition().duration(duration)
@@ -342,7 +354,8 @@ export default {
342354
const rotate = d3.interpolate(start, end)(t)
343355
const deg = rotate * (180 / Math.PI)
344356
// -6 is fudge factor to ensure needle is visible and doesn't have half hanging out of SVG window
345-
return `translate(0, ${vue.props.gtype === 'gauge-half' ? vue.sizes.fudge.toString() : '0'}px)rotate(${deg}deg)`
357+
const yOffset = (vue.props.gtype === 'gauge-half' && !vue.capped) ? vue.sizes.fudge : 0
358+
return `translate(0, ${yOffset}px)rotate(${deg}deg)`
346359
}
347360
return tween
348361
})

0 commit comments

Comments
 (0)