Dash Gauge - Show value as integer

Dash Python
1

Hi,

First off, I am big fan of Dash and the seemingly endless possibilities. However, I have little understanding of how it actually works, which in this circumstance means that I cannot figure out how to change the display of an element, namely, the value of the dash-daq-gauge:

image

As the gauge is showing count values, I would like to see (edited using inspect tool):

image

I’ve found that this is the class the value is passed to:

image

My problem, however, is that I cannot figure out how the value is passed to the class or how to style the class such that the value is shown as int.

Any help is appreciated!

2

Found the value that needed to be changed in the source code, however, is there a way to change this through a styling parameter or similar without changing it in source code? :confused:

Changed b.toFixed(1) to b.toFixed(0) in dash_daq.min.js:

image

image

3

From the code you have posted, it does not seem that there is any property for controlling the number of decimals. I guess you would have to just hack the js (as you do now) or alternatively fork dash daq component and build your own component that exposes a property which makes it possible control the number of decimals. If you choose the latter approach, you might consider submitting the change as a pull request :slight_smile:

4

Thank you for your comments :). I am not really sure where to start regarding exposing such properties to dash. I would probably be able to figure out how to create a variable x that could be inserted in .toFixed(x), however, I would be stuck without knowing how to call/change the variable upon calling the component :confused:

5

Ah, okay. It is actually rather simple. I’ll post an example when I get to a PC :slight_smile:

1 Like
6

I have now created a pull request for this feature. You can see the requires changes here. It’s basically just adding a new prop digits which is used instead of the fixed value (of 1) in the code that you posted above.

1 Like
7

Nice! How would you go about setting the prop in the call of Gauge()?

8

You would use it like any other prop. Here is the mwe i posted with the merge request,

import dash
import dash_html_components as html

from dash_daq import Gauge

app = dash.Dash()
app.layout = html.Div([Gauge(showCurrentValue=True, digits=0)],
                      style={'display': 'flex', 'alignItems': 'center', 'justifyContent': 'space-between'})

if __name__ == '__main__':
    app.run_server()
9

Of course, should have looked at the full pull request! Thank you for your help, I hope the pull request comes through, until then I must use the hack :sweat_smile: