Frontend: Gauge card rounding up and color issue 0.113.0b0

[SeanPM5]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

I know the gauge card was redone, I took a before and after screenshot. There are two minor things wrong:

1. It now appears to be rounding up the value
2. It's now showing a gray color for the unfilled portion of the gauge, it doesn't look quite as nice on a dark theme as you can see in the below pics.

0.112.4 (expected behavior)

Same gauge on 0.113.0b0

Expected behavior

Steps to reproduce

Environment

• Home Assistant release with the issue: 0.112.4
• Last working Home Assistant release (if known): 0.113.0b0
• Browser and browser version: Chrome latest
• Operating system: macOS High Sierra

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[DavidFW1960]

temp fix for colours

                style: |
                  path.dial {
                   stroke: var(--primary-background-color);
                  }

Using card mod of course

[bramkragten]

The background color will be an easy fix, the rounding is hard I'm afraid because we want to round it while it is animating and don't round it when it is done... I'll check it :-)

[naikus]

Hi @bramkragten , author of svg-gauge here. The default label option is a function that rounds the value:

    var defaultOptions = {
      dialRadius: 40,
      // ... other options
      label: function(val) {return Math.round(val);}
    };

You just needed to replace the label function to round to whatever decimal places you needed. The label function is called in every step (frame) in the animation.

P.S. Thanks for evaluating svg-gauge. If you see any problems/improvements please file a bug :)

naikus