Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: ReactCircle – Renders SVG circle and percentage

github.com

Post reply on HN
Print view View original

51–56 of 56 posts

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#51

Post by WorldMaker »

eeZah7Ux wrote: post #45

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.

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.

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#52

Post by muizelaar »

zzarcon wrote: post #10
jannes wrote: post #5

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.

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 :)

It looks like the whole app is re-rendering every frame instead of just having the stroke properties animate: https://perfht.ml/2vEbUc6

Re: Show HN: ReactCircle – Renders SVG circle and percentage

#56

Post by zzarcon »

jannes wrote: post #44
zzarcon wrote: post #10

Earlier quoted context omitted.

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 :)

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 eva…

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

Post reply on HN