Dashboard style progress bar
nbruno opened this issue · comments
Is there any way to customize the display of the progress bar to display like a "dashboard" progress indicator, similar to the dashboard progress bar from ant design https://ant.design/components/progress/
There isn't right now. It seems reasonable to add a prop to configure the proportion of the diameter the path/trail takes up, and combine that with path/trail rotation to achieve this.
I'll take a look at doing that at some point, but not sure exactly when. Thanks for the suggestion!
I added support for this here:
https://github.com/jeremywho/react-circular-progressbar/pull/1
I'm not submitting a PR at the moment as counterClockwise
is broken.
If you have a suggestion for getting that to work, let me know, I'll update and add unit tests and PR.
@jeremywho that looks neat - sorry I haven't had time to dig in yet.
any update on this?
Not yet. I'd like to take a pass at it soon, though.
This is now possible in v1.2.0 with the circleRatio
prop and CSS rotation, based on @jeremywho's helpful initial PR which I fleshed out in #80 (thanks jeremy!)
To do this:
You'd write:
<CircularProgressbar
percentage={66}
text={`${66}%`}
circleRatio={0.75} /* Make the circle only 0.75 of the full diameter */
styles={{
trail: {
strokeLinecap: 'butt',
transform: 'rotate(-135deg)',
transformOrigin: 'center center',
},
path: {
strokeLinecap: 'butt',
transform: 'rotate(-135deg)',
transformOrigin: 'center center',
},
}}
/>
Right now it's slightly cumbersome because you have to adjust transform: rotate
whenever you change circleRatio
. I'm planning to add some abstractions to make this easier in the future.
The syntax is now somewhat nicer in v2.0.0 with buildStyles, e.g.:
const value = 66;
<CircularProgressbar
value={value}
text={`${value}%`}
circleRatio={0.75}
styles={buildStyles({
rotation: 1 / 2 + 1 / 8,
strokeLinecap: "butt",
trailColor: "#eee"
})}
/>
Follow-up question: how would one adjust the height of the SVG based on this circleRatio
so there's no empty space at the bottom?
<CircularProgressbar
value={fill}
circleRatio={0.5}
styles={buildStyles({
rotation: 3 / 4,
strokeLinecap: 'butt',
trailColor: COLOR.PURPLE,
textColor: COLOR.WHITE,
})}
/>
I've tried margin-bottom: -50%
but that's not working.
@garrett-gottlieb you can add a parent div on top of the CircularProgressbar
that has the height you want and with the property overflow:clip
to cut the unwanted space.
progressContainer:{ width: 200, height:150, overflow: "clip" }
@HoussemDjeghri this doesnt work since the progress bar resizes to fit the div, did any one find another solution?