react-gauge-chart icon indicating copy to clipboard operation
react-gauge-chart copied to clipboard

Feature/flag to stop needle at max for percentage above 100

Open eirikaho opened this issue 5 years ago • 6 comments

added 'stopNeedleAtMax' prop to flag that the needle should stop just above max for percentages above 1.0.

stopNeedleAtMax={true} image

stopNeedleAtMax={false} image

eirikaho avatar Feb 25 '20 07:02 eirikaho

There are some merge conflicts. Could you merge your local branch with the latest master and fix them?

Martin36 avatar Apr 14 '20 18:04 Martin36

There are some merge conflicts. Could you merge your local branch with the latest master and fix them?

done :heavy_check_mark:

eirikaho avatar Apr 15 '20 06:04 eirikaho

@eirikaho It looks great. I was just thinking, maybe the stop at 100% prop should be set default to true? For me it seems like the most logical behavior for the chart. Or it could even be something that is not a optional thing. What do you think?

Martin36 avatar Apr 16 '20 16:04 Martin36

@Martin36 I agree, it could definitely be the default behaviour and not even an optional prop. Should I update the PR with that change?

eirikaho avatar Apr 16 '20 17:04 eirikaho

@eirikaho Sorry for the late reply, but you can do that

Martin36 avatar Nov 05 '20 14:11 Martin36

I solved this problem in the following way.

const newPercent = Math.min(percent, 1);

<GaugeChart
  percent={newPercent}
  formatTextValue={value => (percent > 1 ? `${(percent * 100).toFixed(0)}%` : `${value}%`)}
/>;

rebase avatar Apr 04 '23 05:04 rebase