Improve dashboard/account charts and tooltips #2157

2025-04-26T03:03:16+08:00

ahatzz11 commented

2025-04-26 03:03:16 +08:00

(Migrated from github.com)

This PR fixes/improves some of the UI around charts for both the dashboard and the account view.

Fix the tooltip account value text on the tooltip to use color-black for visibility in dark mode. I'm not sure if we want a different tooltip all-together on dark mode, but this is at least an incremental improvement
Changes the circle outline on the tooltip to an arrow. I'm quite colorblind, and the small outline of a red/green circle is almost impossible for me to tell unless I zoom in really close. I think the arrows are a much better visual indicator
Simplifies and consolidates some of the logic/structure around the trend change line. Previously, the net worth chart was using the _trend_change partial, and the account page was rolling its own. This resulted in a few differences:
- Cool mono font on net worth chart, not on account page
- Trend % and icon on net worth chart, not on account page
- Better comparison labels on account page, not on net worth (e.g. "no change vs prior period" for no change instead of "no change vs {selected time period}"
Now, both charts use the same partial, which was also updated to include the comparison label in a consistent way. This also standardizes a bit of formatting here. The comparison label here is an optional parameter to support places that this partial is used without a comparison timeframe, e.g. the holdings drawer (see more below)

Account trend change before/after:
Cleans up a few things on the holdings page and drawer:
- Changes "Cost" to "Average cost" in the table
- Standardized some locales, although uppercase ends up overriding most of these changes
- Changes "Trend" in the drawer to "Total Return". This does use the _trend_change partial which is maybe a little misleading, but it doesn't pass a comparison label so there is no vs. comparison. The @holding.trend object here seems to automatically be set to have a start date since the beginning, and the range picker on the graph does not impact the holding page right now, so I think "Total Return" is more accurate"
Adds some text to locales files to the net worth and account charts to remove hardcoded text (there are probably still lots of these, but again just some incremental changes)

This PR fixes/improves some of the UI around charts for both the dashboard and the account view. - Fix the tooltip account value text on the tooltip to use `color-black` for visibility in dark mode. I'm not sure if we want a different tooltip all-together on dark mode, but this is at least an incremental improvement ![CleanShot-002607 2025-04-25 at 14 04 17](https://github.com/user-attachments/assets/d4b4a8c6-c4a5-4e9e-90bb-6e32869cc3e5) - Changes the circle outline on the tooltip to an arrow. I'm quite colorblind, and the small outline of a red/green circle is almost impossible for me to tell unless I zoom in really close. I think the arrows are a much better visual indicator ![CleanShot-002609 2025-04-25 at 14 08 16](https://github.com/user-attachments/assets/167ab409-020d-435c-b30f-c7b3d665ca51) - Simplifies and consolidates some of the logic/structure around the trend change line. Previously, the net worth chart was using the `_trend_change` partial, and the account page was rolling its own. This resulted in a few differences: - Cool mono font on net worth chart, not on account page - Trend % and icon on net worth chart, not on account page - Better comparison labels on account page, not on net worth (e.g. "no change vs prior period" for no change instead of "no change vs {selected time period}" Now, both charts use the same partial, which was also updated to include the `comparison label` in a consistent way. This also standardizes a bit of formatting here. The comparison label here is an optional parameter to support places that this partial is used _without_ a comparison timeframe, e.g. the holdings drawer (see more below) Account trend change before/after: ![CleanShot-002613 2025-04-25 at 14 16 20](https://github.com/user-attachments/assets/216ac70b-bed1-482c-8654-4081eef4fa14) - Cleans up a few things on the holdings page and drawer: - Changes "Cost" to "Average cost" in the table - Standardized some locales, although `uppercase` ends up overriding most of these changes - Changes "Trend" in the drawer to "Total Return". This _does_ use the `_trend_change` partial which is maybe a little misleading, but it doesn't pass a comparison label so there is no `vs.` comparison. The `@holding.trend` object here seems to automatically be set to have a start date since the beginning, and the range picker on the graph does not impact the holding page right now, so I think "Total Return" is more accurate" ![CleanShot-002616 2025-04-25 at 14 53 01](https://github.com/user-attachments/assets/60446597-2863-48dc-abf8-6b643a59801d) - Adds some text to locales files to the net worth and account charts to remove hardcoded text (there are probably still lots of these, but again just some incremental changes)

zachgoll (Migrated from github.com) approved these changes 2025-04-29 02:57:26 +08:00

zachgoll (Migrated from github.com) left a comment

Agree with all of these! Nice changes.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gavin/maybe#2157