Add pie chart for asset/debt allocation in dashboard view #666
Reference in New Issue
Block a user
Delete Branch "feature/d3-pie-chart"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Demo Video:
https://github.com/maybe-finance/maybe/assets/1793797/fd428f4e-e656-49fe-9e6e-05b573ada216
I tried to keep this pretty close to how the time series chart was implemented for consistency but I ended up having to take a different route in a couple of places. Specifically the view box of the SVG in the pie chart is fixed instead of being dynamically calculated on mount, this allows the thickness of the ring to scale according to the width of the pie chart and avoids the issue of one of the pie charts having a 0 width due to being hidden in another tab.
I opted to keep colors using the existing tailwind mechanisms we have right now this means we need to pass both a fill_color and a bg_color to each value in the pie chart since both are used to render the chart. There doesn't seem to be any mechanism to get the raw color code for an accountable right now, but let me know if you'd like to go down that approach instead.
/claim #644
Resolves #644
@JoshAntBrown code looks good! In regards to the accountable colors, I think that's something I've just been trying to defer as long as possible until we really start diving into and implementing that inheritance hierarchy, so I think what we've got here is good for now.
@justinfar I'm not really sure what the correct way to go on this is, so punting this question over to you.
In regards to the sizing of the pie chart and the line chart in the dashboard, a couple questions:
@zachgoll
Is it possible to set a max-height on the height of the line chart/NW card so that they're inline with each other in terms of size?
I'm good with dynamically scaling the pie chart thickness slightly for different screen sizes, although in the initial video I'm noticing that the thickness of the donut chart's segments are slightly thicker than in the design (was this done mainly due to increase the size of the hover targets?)
Happy to decrease the thickness, but yeah it felt just a little bit too fiddly to hover on especially with them being curved. Tried to increase them without them feeling overly thick.
All good with the thickness was just noting it down to make sure :)
The net worth chart was set to height 100% which was causing additional space (since the container is shared with the header above). Adding the pie chart further increased the initial height of the element causing the chart to be larger than before. I've updated the net worth chart to fill the remaining height with flexbox instead and set a min height to ensure the chart is always visible.
Think we're all set with this one! Nice work, this looks great.