7 ms·

Show HN: ReactCircle – Renders SVG circle and percentage

63 points by zzarcon 8y ago

amelius 8y ago
That's generally the easy part of showing progress. The difficult part is usually to determine how much time is still needed for a computation.
- struppi 8y ago
  Yes, you are right. But still: This is easy to understand (I think I got everything I'd need from the animated gif and the one code example). It looks like it's versatile and will save you at least half a day of googling, coding and testing (unless you are an expert in all technologies involved). I upvoted it..
- hyder_m29 8y ago
  Which is not the goal of this component. Progress here can be a lot of things, such as of a task, or your fitness goals, or world domination.
- WorldMaker 8y ago
  Which reminds me that I need to update my demo, mentioned in this blog post, given the JS has somewhat bitrot since 2015: http://blog.worldmaker.net/2015/03/17/compradprog/ http://blog.worldmaker.net/2015/03/17/compradprog/ My theory, also described in the blog post, and which I felt like the demo demonstrated when its JS worked, is that the nice thing about radial progress bars is that with spin and "tail" movement you can use a radial progress bar for composite progress (progress of multiple individual tasks with defined progress composited together, including cases of "task discovery" where progress may only start later). I felt that when done right it doesn't violate user expectations ("forward momentum"), and it's an interesting merger of the spinner and progress bar that could be used in some pretty complicated situations. I should get that demo working again.
chrismatheson 8y ago
Brill job!! Love little do one thing well components!
- zzarcon 8y ago
  Thanks! That was the motivation for the project, do something simple right, feel free to add any feedback or contribute to the repo!!
jannes 8y ago
Very cool! However, I'm getting very low FPS when dragging the slider in Firefox on OSX (especially when dragging long distance in a short time). Is this due to the SVG rendering performance of Firefox or due to your code? Turning off animations doesn't seem to make a difference.
- zzarcon 8y ago
  Thanks for the feedback! You are right, the demo currently hangs quite a lot on Firefox, Im pretty sure the issue is actually not related with the component itself, I created a issue on the repo to fix it https://github.com/zzarcon/react-circle/issues/10 https://github.com/zzarcon/react-circle/issues/10 :)
  - jannes 8y ago
    Thanks! That already works a lot better. To further improve things, I would suggest two changes to your webpack config: 1. Use the production version of React. It seems that you are using the slightly slower development version. (In webpack this is done by defining process.env.NODE_ENV = "production" and eliminating dead code afterwards) 2. Stop using webpack in development mode for your deployment. There are 272 eval() calls in your bundle because of this: https://raw.githubusercontent.com/zzarcon/react-circle/c1480fddaba9bb9390e95ac3ea4dea5cf710f2c7/dist-bundle.js https://raw.githubusercontent.com/zzarcon/react-circle/c1480... Both of these things are already taken care of by the production mode in webpack 4.
    - zzarcon 8y ago
      You are so right!! Im using an external tool for deploying the site, created a PR there to use production mode, do you think that should be enough? Thanks! https://github.com/zzarcon/ts-react-toolbox/pull/2 https://github.com/zzarcon/ts-react-toolbox/pull/2
  - muizelaar 8y ago
    It looks like the whole app is re-rendering every frame instead of just having the stroke properties animate: https://perfht.ml/2vEbUc6 https://perfht.ml/2vEbUc6
ReactCircle 8y ago
extremely poor performance
- soswow42 8y ago
  lol.
- zzarcon 8y ago
  After some investigation, I found that the cause of the issue is not the component itself https://github.com/zzarcon/react-circle/issues/10 https://github.com/zzarcon/react-circle/issues/10
- jannes 8y ago
  You created a throwaway to post this comment? May I ask why?
  - GoToRO 8y ago
    why not?
akerro 8y ago
Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.
- have_faith 8y ago
  Your comments reads in bad taste. Maybe be more constructive?
  - akerro 8y ago
    This is my feedback on extremely poor performance of this single reactive component. I hope developer of this component never makes a single webpage. If a single component is that slow and unresponsive, as you see on my video, the webpage (or even worse MOBILE APP) would probably require 16 core Ryzen to render smoothly and scroll up and down on it. I play on this laptop Civ V (minimal requirements [1]) on this laptop, but can't a single web-widget? This is tragic quality. Constructive or not, looks like author didnt test it on every browser on a lower-performance hardware like 10year old CPU, eg. maybe i3. If I use this widget in my development and we give a product with this widget to customer who runs IE11 or EDGE on i3 from 2012, it will be my problem to fix it. I will complain to the developer, we all waste time and resources. If developer of a thing wants to show us something they're proud of. Test it, benchmark it, show it. Never let us, users benchmark and test your stuff, you will get blacklisted for that poor quality and performance software quickly. [1] https://support.2k.com/hc/en-us/articles/201332873-Civilization-V-PC-System-Requirements https://support.2k.com/hc/en-us/articles/201332873-Civilizat...
    - zzarcon 8y ago
      I fixed the issue, was unrelated with the component itself, can you please have a look again and verify that it works fine? https://zzarcon.github.io/react-circle/ https://zzarcon.github.io/react-circle/
    - 8y ago
dccoolgai 8y ago
Congrats! Very nice looking. CC: consider adding a title (or desc?) element for accessibility. Although you have a lot of the info in text, I find adding a title/desc element to all svgs is a good habit.
- zzarcon 8y ago
  Thats a good point, just created an issue for it https://github.com/zzarcon/react-circle/issues/12 https://github.com/zzarcon/react-circle/issues/12 feel free to put some feedback there, thanks!
deleted 8y ago
[deleted]
eeZah7Ux 8y ago
Research shows that people are really bad at estimating and comparing angles instead of bars. Don't use pie/circle diagrams. Sorry I don't have a link to the pieces of research.
- DiThi 8y ago
  That's true when you have more than the ratio between two things. But IMHO just a ratio or percentage is perfectly fine.
- WorldMaker 8y ago
  Which can also be used intentionally as a feature. It's common from users to expect that when given an exact number for progress (35%) that percentages are themselves exact and evenly distributed. How many people hear bug reports that it took extra time to move from 36% to 37% than from 35% to 36%, or were worried that the system might have been stuck or crashed at 54% because it took so long, from someone trying to eagle eye your progress indicator? Just because you can give a progress percentage doesn't mean that the user needs to know the exact value of that percentage or be able to visually compare progress indicators as strongly as possible.
riquito 8y ago
I was working on the same exact thing in the latest days. In my opinion the transition stroke-dashoffset is too performance hungry to be really usable. I ended up throwing away my svg implementation to redo it in canvas. If you're going stateful to handle timers remember to use requestAnimationFrame
hamslamwich 8y ago
This is super cool. Nice work!
johi 8y ago
Great value mate! Thanks for sharing.

63 points by zzarcon 8y ago

That's generally the easy part of showing progress. The difficult part is usually to determine how much time is still needed for a computation.

struppi 8y ago
Yes, you are right. But still: This is easy to understand (I think I got everything I'd need from the animated gif and the one code example). It looks like it's versatile and will save you at least half a day of googling, coding and testing (unless you are an expert in all technologies involved). I upvoted it..
hyder_m29 8y ago
Which is not the goal of this component. Progress here can be a lot of things, such as of a task, or your fitness goals, or world domination.
WorldMaker 8y ago
Which reminds me that I need to update my demo, mentioned in this blog post, given the JS has somewhat bitrot since 2015: http://blog.worldmaker.net/2015/03/17/compradprog/ http://blog.worldmaker.net/2015/03/17/compradprog/ My theory, also described in the blog post, and which I felt like the demo demonstrated when its JS worked, is that the nice thing about radial progress bars is that with spin and "tail" movement you can use a radial progress bar for composite progress (progress of multiple individual tasks with defined progress composited together, including cases of "task discovery" where progress may only start later). I felt that when done right it doesn't violate user expectations ("forward momentum"), and it's an interesting merger of the spinner and progress bar that could be used in some pretty complicated situations. I should get that demo working again.

chrismatheson 8y ago

Brill job!! Love little do one thing well components!

zzarcon 8y ago
Thanks! That was the motivation for the project, do something simple right, feel free to add any feedback or contribute to the repo!!

jannes 8y ago

Very cool! However, I'm getting very low FPS when dragging the slider in Firefox on OSX (especially when dragging long distance in a short time). Is this due to the SVG rendering performance of Firefox or due to your code? Turning off animations doesn't seem to make a difference.

zzarcon 8y ago
Thanks for the feedback! You are right, the demo currently hangs quite a lot on Firefox, Im pretty sure the issue is actually not related with the component itself, I created a issue on the repo to fix it https://github.com/zzarcon/react-circle/issues/10 https://github.com/zzarcon/react-circle/issues/10 :)
- jannes 8y ago
  Thanks! That already works a lot better. To further improve things, I would suggest two changes to your webpack config: 1. Use the production version of React. It seems that you are using the slightly slower development version. (In webpack this is done by defining process.env.NODE_ENV = "production" and eliminating dead code afterwards) 2. Stop using webpack in development mode for your deployment. There are 272 eval() calls in your bundle because of this: https://raw.githubusercontent.com/zzarcon/react-circle/c1480fddaba9bb9390e95ac3ea4dea5cf710f2c7/dist-bundle.js https://raw.githubusercontent.com/zzarcon/react-circle/c1480... Both of these things are already taken care of by the production mode in webpack 4.
  - zzarcon 8y ago
    You are so right!! Im using an external tool for deploying the site, created a PR there to use production mode, do you think that should be enough? Thanks! https://github.com/zzarcon/ts-react-toolbox/pull/2 https://github.com/zzarcon/ts-react-toolbox/pull/2
- muizelaar 8y ago
  It looks like the whole app is re-rendering every frame instead of just having the stroke properties animate: https://perfht.ml/2vEbUc6 https://perfht.ml/2vEbUc6

ReactCircle 8y ago

extremely poor performance

soswow42 8y ago
lol.
zzarcon 8y ago
After some investigation, I found that the cause of the issue is not the component itself https://github.com/zzarcon/react-circle/issues/10 https://github.com/zzarcon/react-circle/issues/10
jannes 8y ago
You created a throwaway to post this comment? May I ask why?
- GoToRO 8y ago
  why not?

akerro 8y ago

Congratulations on making probably the slowest circular-progress bar I've even seen, that had to be a challenge, but you did it. https://gfycat.com/NimbleMintyBinturong https://gfycat.com/NimbleMintyBinturong That's on my laptop with i5, 4 cores. I can play smoothly on this L4D2, TF2, CivV... but not this reactive circular-progress bar.

have_faith 8y ago
Your comments reads in bad taste. Maybe be more constructive?
- akerro 8y ago
  This is my feedback on extremely poor performance of this single reactive component. I hope developer of this component never makes a single webpage. If a single component is that slow and unresponsive, as you see on my video, the webpage (or even worse MOBILE APP) would probably require 16 core Ryzen to render smoothly and scroll up and down on it. I play on this laptop Civ V (minimal requirements [1]) on this laptop, but can't a single web-widget? This is tragic quality. Constructive or not, looks like author didnt test it on every browser on a lower-performance hardware like 10year old CPU, eg. maybe i3. If I use this widget in my development and we give a product with this widget to customer who runs IE11 or EDGE on i3 from 2012, it will be my problem to fix it. I will complain to the developer, we all waste time and resources. If developer of a thing wants to show us something they're proud of. Test it, benchmark it, show it. Never let us, users benchmark and test your stuff, you will get blacklisted for that poor quality and performance software quickly. [1] https://support.2k.com/hc/en-us/articles/201332873-Civilization-V-PC-System-Requirements https://support.2k.com/hc/en-us/articles/201332873-Civilizat...
  - zzarcon 8y ago
    I fixed the issue, was unrelated with the component itself, can you please have a look again and verify that it works fine? https://zzarcon.github.io/react-circle/ https://zzarcon.github.io/react-circle/
  - 8y ago

dccoolgai 8y ago

Congrats! Very nice looking. CC: consider adding a title (or desc?) element for accessibility. Although you have a lot of the info in text, I find adding a title/desc element to all svgs is a good habit.

zzarcon 8y ago
Thats a good point, just created an issue for it https://github.com/zzarcon/react-circle/issues/12 https://github.com/zzarcon/react-circle/issues/12 feel free to put some feedback there, thanks!

deleted 8y ago

[deleted]

eeZah7Ux 8y ago

Research shows that people are really bad at estimating and comparing angles instead of bars. Don't use pie/circle diagrams. Sorry I don't have a link to the pieces of research.

DiThi 8y ago
That's true when you have more than the ratio between two things. But IMHO just a ratio or percentage is perfectly fine.
WorldMaker 8y ago
Which can also be used intentionally as a feature. It's common from users to expect that when given an exact number for progress (35%) that percentages are themselves exact and evenly distributed. How many people hear bug reports that it took extra time to move from 36% to 37% than from 35% to 36%, or were worried that the system might have been stuck or crashed at 54% because it took so long, from someone trying to eagle eye your progress indicator? Just because you can give a progress percentage doesn't mean that the user needs to know the exact value of that percentage or be able to visually compare progress indicators as strongly as possible.

riquito 8y ago

I was working on the same exact thing in the latest days. In my opinion the transition stroke-dashoffset is too performance hungry to be really usable. I ended up throwing away my svg implementation to redo it in canvas. If you're going stateful to handle timers remember to use requestAnimationFrame

hamslamwich 8y ago

This is super cool. Nice work!

johi 8y ago

Great value mate! Thanks for sharing.