posthog icon indicating copy to clipboard operation
posthog copied to clipboard

feat: slimmer doughnut

Open pauldambra opened this issue 3 years ago • 4 comments

Problem

relates to #11433

As a first step

  • slims the donut
  • makes the total underneath it larger
  • starts splitting out the doughnut chart from the linegraph
  • magnifies an arc on hover

### without legend

Screenshot 2022-09-15 at 16 48 46

with legend

Screenshot 2022-09-15 at 16 48 56

hover

2022-09-15 16 49 04

pauldambra avatar Sep 15 '22 15:09 pauldambra

I think this looks better but I find the small hover area somewhat frustrating... I almost wonder if this isn't better as an option rather than the default? I dunno maybe thats just me

benjackwhite avatar Sep 16 '22 13:09 benjackwhite

chunky slim
Screenshot 2022-09-16 at 14 37 49 Screenshot 2022-09-16 at 14 38 40

Yep, I went almost all the other way from chunky to slim :)

chartjs expresses it as a percentage of the circle cut out so we can pick a different cutout amount

Pie charts are a bad way of displaying data (IMHO) so the next steps of making the breakdown easier to read are the important ones

pauldambra avatar Sep 16 '22 13:09 pauldambra

I agree with you guys on this - the usability has massively done down hill in the aim of looking good- need to go back to the drawing board and see what we can do to fix this. Would people be open to having a filled pie chart? this would help with the visibility as well as usability ?

lottiecoxon avatar Sep 20 '22 09:09 lottiecoxon

0 to 100 cutout in 10% steps

cc @lottiecoxon

0-cutout 10-cutout 20-cutout 30-cutout 40-cutout 50-cutout 60-cutout 70-cutout 80-cutout 90-cutout 100-cutout

pauldambra avatar Sep 21 '22 08:09 pauldambra

0%, 60% and 70% I am happy with

I was thinking about how to fix our hover issue with the super skinny charts and I was wondering would a layering method help or just be confusing and difficult to implement. (Feel free to pushback- these are just experimental ideas for now)

Having an invisible selection area

Idea: when you would hover over the invisible boundary for one of these sections it would react on the visible colour section.

Untitled_Artwork 116

Having a slightly faded area filled and a thinner section full

This would basically create more space for hovering/reacting but with less of the intense colour?

Untitled_Artwork 219

lottiecoxon avatar Sep 23 '22 10:09 lottiecoxon

cc @mariusandra @lottiecoxon as a pie as agreed in https://posthog.slack.com/archives/C0368RPHLQH/p1663942196109679

2022-09-23 16 00 59

pauldambra avatar Sep 23 '22 15:09 pauldambra

I love the pie ❤️

lottiecoxon avatar Sep 26 '22 10:09 lottiecoxon

without hover offset when 100%

pie2

pauldambra avatar Sep 26 '22 20:09 pauldambra