palerdot / react-d3-speedometer

React Speedometer component using d3.js ⚛️
https://palerdot.in/react-d3-speedometer/
MIT License
232 stars 58 forks source link

fix fluid width to fill only needed space #164

Closed yoelbassin closed 1 year ago

yoelbassin commented 1 year ago

Hey! Have been using this project for a while now, and always had this problem, so I decided to create a PR about it.

Until now, when using fluidWidth={true}, the gauge filled the entire div it was in, even though it used only half of the space.

Case study 1:

<Box width={300} height={400}>
    <ReactSpeedometer
        ringWidth={40}
        fluidWidth={true}
        minValue={100}
        maxValue={500}
        value={473}
        needleColor="steelblue"
    />
</Box>

Before:

After:

Case study 2:

<Box width={500} height={200}>
    <ReactSpeedometer
        ringWidth={40}
        fluidWidth={true}
        minValue={100}
        maxValue={500}
        value={473}
        needleColor="steelblue"
    />
</Box>

Before:

After:

palerdot commented 1 year ago

@yoelbassin Thanks for the PR. Much appreciated.

Can you change the base of the branch to https://github.com/palerdot/react-d3-speedometer/tree/react-v18 react-v18 branch and make changes against that? v18 branch will be made master/stable soon, and all the future enhancements will be made against this branch. The new branch has some changes with respect to tests, and other files and there will be conflicts.

If you can change the base and update the PR against react-v18 branch, I will check and merge and release it as next rc version for v18.

yoelbassin commented 1 year ago

Reopened in #165