Repository navigation
[Feature] - new component idea - SI numeric input #116
Description
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]
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.
Activity
alexcjohnson commentedon Jul 31, 2020
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 commentedon Jul 31, 2020
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 commentedon Jul 31, 2020
Nothing comes to mind - we've talked about adding a potentially editable text display to
dcc.Sliderbut we haven't gotten around to it. You'll probably want to look atdcc.Inputfor 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, andmagnitude(though I might vote forexponentovermagnitudebut that's a separate discussion). The user interacting with the component will setsignificandandmagnitude, andvaluewill be the output; but you'll also want app developers to be able to simply specifyvalueand havesignificandandmagnitudedetermined automatically WITHOUT then causingvalueto be set again with a change in its 15th digit; or an app developer should be able to setvalueandmagnitude, only leavingsignificandto be calculated.