Skip to content

Commit 75aa68a

Browse files
n-larkn-lark
authored
[1607] Too much whitespace on gauge on mobile + desktop (#2195)
1 parent 966c84b commit 75aa68a

3 files changed

Lines changed: 197 additions & 0 deletions

File tree

‎cypress/fixtures/flows/dashboard-gauge-half-fit.json‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
[
2+
{
3+
"id": "ghf-tab",
4+
"type": "tab",
5+
"label": "Gauge Half Fit",
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": "Half",
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-half-tall",
58+
"type": "ui-gauge",
59+
"z": "ghf-tab",
60+
"group": "dashboard-ui-group",
61+
"name": "Tall",
62+
"order": 1,
63+
"value": "payload",
64+
"valueType": "msg",
65+
"width": "2",
66+
"height": "5",
67+
"gtype": "gauge-half",
68+
"gstyle": "needle",
69+
"title": "Tall half",
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": 120,
91+
"wires": [[]]
92+
},
93+
{
94+
"id": "dashboard-ui-gauge-34-tall",
95+
"type": "ui-gauge",
96+
"z": "ghf-tab",
97+
"group": "dashboard-ui-group",
98+
"name": "Tall34",
99+
"order": 2,
100+
"value": "payload",
101+
"valueType": "msg",
102+
"width": "2",
103+
"height": "5",
104+
"gtype": "gauge-34",
105+
"gstyle": "needle",
106+
"title": "Tall 34",
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": 200,
128+
"wires": [[]]
129+
},
130+
{
131+
"id": "ghf-inject",
132+
"type": "inject",
133+
"z": "ghf-tab",
134+
"name": "Set 65",
135+
"props": [{ "p": "payload" }],
136+
"repeat": "",
137+
"crontab": "",
138+
"once": true,
139+
"onceDelay": "0.1",
140+
"topic": "",
141+
"payload": "65",
142+
"payloadType": "num",
143+
"x": 180,
144+
"y": 120,
145+
"wires": [["dashboard-ui-gauge-half-tall", "dashboard-ui-gauge-34-tall"]]
146+
}
147+
]

‎cypress/tests/widgets/gauge-half-fit.spec.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
describe('Node-RED Dashboard 2.0 - Gauge dial fit (#1607)', () => {
2+
beforeEach(() => {
3+
cy.deployFixture('dashboard-gauge-half-fit')
4+
cy.visit('/dashboard/page1')
5+
})
6+
7+
it('sizes the half-gauge to its arc, not the whole tall cell', () => {
8+
const widget = '#nrdb-ui-widget-dashboard-ui-gauge-half-tall'
9+
cy.get(widget).find('svg').should('be.visible')
10+
// eslint-disable-next-line promise/always-return, promise/catch-or-return
11+
cy.get(widget).then(($w) => {
12+
const cell = $w[0].getBoundingClientRect().height
13+
const svg = $w[0].querySelector('svg')
14+
const svgH = svg.getBoundingClientRect().height
15+
const svgW = svg.getBoundingClientRect().width
16+
// the arc is ~w/2 tall; the svg should hug that (+ label room), not stretch to the cell
17+
expect(svgH, 'svg sized to the arc, not the cell').to.be.lessThan(svgW / 2 + 40)
18+
expect(svgH, 'svg does not fill the tall cell').to.be.lessThan(cell - 40)
19+
})
20+
})
21+
22+
it('sizes the 34 dial to its arc, not the whole tall cell', () => {
23+
const widget = '#nrdb-ui-widget-dashboard-ui-gauge-34-tall'
24+
cy.get(widget).find('svg').should('be.visible')
25+
// eslint-disable-next-line promise/always-return, promise/catch-or-return
26+
cy.get(widget).then(($w) => {
27+
const cell = $w[0].getBoundingClientRect().height
28+
const svg = $w[0].querySelector('svg')
29+
const svgH = svg.getBoundingClientRect().height
30+
const svgW = svg.getBoundingClientRect().width
31+
// the dial is ~min(w,h)=w tall here; the svg should hug that, not stretch to the cell
32+
expect(svgH, 'svg sized to the dial, not the cell').to.be.lessThan(svgW + 40)
33+
expect(svgH, 'svg does not fill the tall cell').to.be.lessThan(cell - 40)
34+
})
35+
})
36+
})

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,12 +144,26 @@ export default {
144144
145145
this.$refs.gauge.setAttribute('width', w)
146146
147+
let gaugeArea
147148
if (this.props.gtype === 'gauge-half') {
148149
const minDimension = Math.min(w / 2, h)
149150
this.r = minDimension + this.sizes.fudge
151+
gaugeArea = minDimension
150152
} else {
151153
const minDimension = Math.min(w, h)
152154
this.r = minDimension / 2
155+
gaugeArea = minDimension
156+
}
157+
158+
const limit = this.$refs['limits-min']
159+
const labelRoom = limit ? Math.ceil(limit.getBBox().height) : 16
160+
if (gaugeArea + labelRoom < h) {
161+
this.height = gaugeArea
162+
this.$refs.gauge.style.flexGrow = '0'
163+
this.$refs.gauge.setAttribute('height', gaugeArea + labelRoom)
164+
} else {
165+
this.$refs.gauge.style.flexGrow = ''
166+
this.$refs.gauge.setAttribute('height', '100%')
153167
}
154168
},
155169
update (value, duration = 1000) {

0 commit comments

Comments
 (0)