Comments (5)
I have added a new prop called
valueTextBelowPos.
Previously, the value 23 was hard coded in the _renderCurrentValueText. The label was placed manually 23pt below to gauge.
I propose extracting this value into a configuration, so it won't be a 'magic number'.
As a start, the prop name should be changed, to valueTextYOffset
. The current prop is not descriptive and confusing as a public facing prop/api. Since we are dealing with height/Y axis distance
, we should name something along those lines like valueTextYOffset
. In future, there might be a similar valueTextXOffset
position.
We also need to consider what happens if the user (rightly) gives a negative value like -23
. Will the text be automatically aligned at the top as expected? Please check on this and may post a screenshot of this scenario with this code changes.
There are other code changes which I will comment in the PR. For example, there is duplication of parentHeight - PROPS.valueTextBelowPos
, which should be put in a variable like fluidHeight / calculatedHeight
, changing {width: width}
to {width}
etc.
If you think that it is correct, I will update the documentation and test as you mentioned in #153
Let us keep the documentation part as the last step. If everything is fine, we can do this as a last step.
PS: It is generally a good idea to create an issue, and discuss the proposed changes before making the change, as it might save time for both the contributor and the maintainer.
from react-d3-speedometer.
I have added a new prop called
valueTextBelowPos
.
Previously, the value 23
was hard coded in the _renderCurrentValueText
. The label was placed manually 23pt below to gauge.
I propose extracting this value into a configuration, so it won't be a 'magic number'.
This value is needed in this PR, since I calculate the minimum height of the gauge along the label.
I could 'magically' add 23pt to the height of the component, but that wouldn't be correct.
If you think that it is correct, I will update the documentation and test as you mentioned in #153
from react-d3-speedometer.
We also need to consider what happens if the user (rightly) gives a negative value like -23. Will the text be automatically aligned at the top as expected? Please check on this and may post a screenshot of this scenario with this code changes.
Clarifying on this behaviour since it is configurable by the end user, if the value is positive
, it should go below the gauge, if it is negative
, it should go above the gauge. The text should not be rendered in the middle of the gauge (atleast for now). That is what I think, if this is tweakable by the end user. Otherwise, this prop will create whole new class of confusions and issues.
from react-d3-speedometer.
What do you think about having this as some constant (that isn't configurable by the end user)?
Again, my problem here is magically having 23
in two places in the code.
What do you think?
from react-d3-speedometer.
What do you think about having this as some constant (that isn't configurable by the end user)? Again, my problem here is magically having
23
in two places in the code.What do you think?
That works. Maybe declare VALUE_TEXT_Y_OFFSET
somewhere in the config file and use it wherever needed. Introducing this prop will be confusing.
from react-d3-speedometer.
Related Issues (20)
- how can i give a unit/prefix/suffix to the segment label value ? #151 HOT 3
- Adding New props
- zoom in or out not take parent width HOT 3
- "Error: require() of ES Module" while unit testing with vitest and react-resting library
- Hi guys i am working on react speedometer chart in my company project where i want seven emotion and that niddle should move to the dominant emotion value and perticular to the colored segment as well
- Hi guys i am working on react speedometer chart in my company project where i want seven emotion and that niddle should move to the dominant emotion value and perticular to the colored segment as well
- Target animation HOT 1
- How to add a linear gradient color to needle HOT 5
- Facing app crash after importing using given example HOT 5
- Allow `segmentValueFormatter` to return a DOM node HOT 2
- Having two labels HOT 1
- Possible to make needle stop at max value? HOT 3
- Minus sign used in "segmentValueFormatter" is wrong HOT 2
- Setting Full width Prop to true is make the speedometer component to render partially and then re render on state change HOT 3
- Tooltip on hover on the segment HOT 1
- First value should be equivalent to min value given. Current min value - 1000 HOT 2
- Typescript React v18 react-d3-speedometer@next. I am getting Could not find a declaration file for module 'react-d3-speedometer'. HOT 1
- Custom Segment Labels should be an array with length of 10
- When will v2.0 become general available? is it stable already? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-d3-speedometer.