node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

Gauge does not render properly.

Open joluxer opened this issue 9 months ago • 1 comments

Current Behavior

The gauge widget in 3/4 mode:

  • does not place the start and stop values at the end of the arc
  • does not respect all color settings, last segment of the arc is red instead of the configured color of light green
  • does not render the mustache template for the unit display at all, shows the mustache template string literally

Example image: Dashboard-2-0-defect-gauge-flows

Expected Behavior

  • render the start and stop values at the end of the round scale
  • render all arc segments with the actual configured colors
  • render the the displayed unit string from the given mustache template or equivalent simple method for dynamic text

Example image from dashboard 1: Dashboard-1-good-gauge-flows

Steps To Reproduce

Using the provided flow below is a minimal example, how to reproduce the defects: Dashboard-2-0-defect-gauge-flows.json

Environment

  • Dashboard version: 1.8.1
  • Node-RED version: 3.1.9
  • Node.js version: v18.19.1
  • npm version: 10.2.4
  • Platform/OS: Debian 12.5
  • Browser: Firefox 115.7.0esr

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

joluxer avatar May 09 '24 10:05 joluxer

Maybe the distortion happens, when one places more than 2 gauges on a page: Dashboard-2-0-multiple-defect-gauge-flows

joluxer avatar May 09 '24 11:05 joluxer