✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

dcc.Input number formatting

Dash
#1

I am working on an app based on DASH, Plotly and Python. The app should take multiple inputs (floating point) and do some calculations. I have some requirements:

  1. I don’t like the arrow up and down in the Number boxes. Since my numbers are floating point I have no use for stepping up and down in value.

  2. The number inputs must accept both commas and dots as decimal separator.

For the above two reasons I have currently decided to use TEXT input box.

Furthermore, our Python dictionary of variables is holding all values in text format.

We would like to be able to calculate with full floating-point precision, but at the same time have dcc.Input only display e.g. 2-4 digits, i.e. we wish that the text display in the input box could be formatted.

Please let me know if you see a way forward in making the app work and do what I wish. Thank you.

Best regards,
Claus

#2

https://dash-bootstrap-components.opensource.faculty.ai/l/components/input may be able to help support your need to limit the number of digits (see the min, max, and step properties). The need to satisfy decimal separators may be a little tricky.

#3

Hi flyingcujo

Thanks for the quick response. For me the support of commas is important. Here’s a list of countries that use comma as decimal separator:

Germany = ca. 80 million, Austria (German speaking) another ca. 10 million. The Scandinavian countries incl. Finland and Iceland = 25 million. France and Spain = 113 million.

This is important to me. I don’t mean to come up as being abrasive in any way, but I am thinking that negligence in this matter is not acceptable to me. Therefore, I was planning to make my own solution with text boxes.

def str2float(xstr):
ystr = xstr.replace(",",".")
ystr = ystr.replace(".", “”, ystr.count(".") -1)
return float(ystr)

… but I’d like to be able to format the dcc.Input box such that the user doesn’t need to look at a full 17-digit after the comma floating point number.

Cheers,
Claus

#4

I am working with @cfuttrup on this problem. Surely the ability to format the display when type='text' in dcc.Input/dbc.Input would be handy.

#5

My list of countries of interest to me, which uses a comma as the decimal separator came out a bit arbitrary, so, out of curiosity I calculated the population of all 74 countries in total = 1.88 billion (ca. 24% of the world population) … not a small amount.

Here’s top 20% (= 15 countries) by population:

Indonesia 264
Brazil 209,3
Russia 144,5
Vietnam 95,54
Germany 82,79
Turkey 80,81
France 66,99
Italy 60,48
South Africa 56,72
Colombia 49,07
Spain 46,66
Argentina 44,27
Ukraine 42,22
Algeria 41,32
Poland 37,98
1322,65

Cheers,
Claus

#6

Please allow me to ask one more time - and first let me explain, that I am not intending to be abrasive or anything - just saying, the solution to working with comma as a decimal separator is to use text strings.

The question is, if there is a way in which I can format the string that dcc.Input displays on the screen (without formating the original content), such that I can limit the length of the string shown to the user?

Best regards,
Claus

#7

The functionality that I wish for dcc.Input is to show a formatted string … essentially the first part of the string - such that I get rid of a lot of numbers in the text string.

I believe dcc.Table already does this, for numbers, where a cell containing a number only shows the start of the number, but when you click into the table cell, it expands with the full precision.

This is essentially what I wish to do with a text string.

Is it possible?

Best regards,
Claus