search

plotly / dash-daq

Control components for Dash
MIT License
141 stars 40 forks source link

[Feature] - new component idea - SI numeric input #116

Open carl-dawson opened 4 years ago

carl-dawson commented 4 years ago

I've been hacking together a new component for a project that I'm working on, and I thought it might be a good addition to the Dash Daq repository. It's a composite component with a numeric input and a drop-down list. The drop down list is populated with a user supplied base scientific unit (e.g Hz, Wb, T, K, etc.) prepended with the standard SI prefixes (e.g. μ, m, k, M, G, etc.), each corresponding to an order of magnitude (e.g. -6, -3, 3, 6, 9, etc.). The numeric input is the significand. The component value is [significand * 10^magnitude]

2020-07-31 (1)

If this is something you'd be interested in including, I could use some guidance regarding React best practices here. My current implementation feels pretty hacky.

alexcjohnson commented 4 years ago

For sure, good idea, and it would be a great fit for this package! (leaving aside the ambiguity of the specific example you show here - does km3 mean k(m3) or (km)3? 😈 )

We have a bit of a guide for making dash components in https://dash.plotly.com/react-for-python-developers - might be more basic than you had in mind though, otherwise I'd say just take a look at how the other dash-daq and dash-core-components components are written, you may find some inspiration. And, feel free to make a PR at any time and we can discuss specific places you're looking for help.

carl-dawson commented 4 years ago

Ha, I was wondering if you'd catch that. I got around that problem by adding a user defined parameter called unitMagnitude. So in the above example it is (km)^3, which is what I needed for my application. Still slightly hacky and ambiguous though. I'll keep digging around for something similar. Can you think of any existing components off the top of your head that might implement a similar composite design pattern?

alexcjohnson commented 4 years ago

Nothing comes to mind - we've talked about adding a potentially editable text display to dcc.Slider but we haven't gotten around to it. You'll probably want to look at dcc.Input for how it handles up & down arrows, and updates on every keypress vs only on blur, but then the units dropdown will add its own complexity.

One tricky thing may be the 2-way binding between these props. I assume (in addition to the configuration props which will be write-only), you'll have three input/output props, I guess value, significand, and magnitude (though I might vote for exponent over magnitude but that's a separate discussion). The user interacting with the component will set significand and magnitude, and value will be the output; but you'll also want app developers to be able to simply specify value and have significand and magnitude determined automatically WITHOUT then causing value to be set again with a change in its 15th digit; or an app developer should be able to set value and magnitude, only leaving significand to be calculated.