feat(insights): allow customizing result colors with data color themes #26862
Conversation
# Conflicts: # posthog/schema.py
📸 UI snapshots have been updated16 snapshot changes in total. 0 added, 16 modified, 0 deleted:
Triggered by this commit. |
# Conflicts: # frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--light.png # frontend/__snapshots__/scenes-other-settings--settings-project--dark.png # frontend/__snapshots__/scenes-other-settings--settings-project--light.png # frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--dark.png # frontend/__snapshots__/scenes-other-settings--settings-project-with-replay-features--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-all-options--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-all-options--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-password-only--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-password-only--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-github--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-github--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-google--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-google--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-saml--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-enforced-saml--light.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-only--dark.png # frontend/__snapshots__/scenes-other-settings--settings-session-timeout-sso-only--light.png # frontend/src/lib/constants.tsx # frontend/src/scenes/insights/utils.tsx # frontend/src/scenes/teamActivityDescriber.tsx # frontend/src/types.ts # posthog/migrations/max_migration.txt
📸 UI snapshots have been updated16 snapshot changes in total. 0 added, 16 modified, 0 deleted:
Triggered by this commit. |
frontend/src/queries/nodes/InsightViz/ResultCustomizationsModal.tsx
Outdated
Show resolved
Hide resolved
| )} | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| <ResultCustomizationsModal /> |
There was a problem hiding this comment.
should we only show this in Edit mode? since the changes made outside it won't persist
There was a problem hiding this comment.
I opted to not do so, since this is also happening for other settings. We should address that in a proper "edit mode" overhaul.
There was a problem hiding this comment.
Looks great! Can't wait to get this into prod.
Just regarding discoverability of the feature (I might have missed other ways to find the modal), maybe we can change this edit icon to be the color glyph/circle so users can both recognise the label by matching the color + know there's something they can click without having to hover over the series
…l.tsx Co-authored-by: Anirudh Pillai <anirudhx5@gmail.com>
Will do! In a follow up though, don't want to resolve merge conflicts any more here :D |
Problem
Users want to be able to customize the colors in insights. Most often this is because multiple insights on the same dashboard should have the same color for the same values. See #23093 and #17593. But there are other use cases as well:
Changes
This PR is the unstacked version of #26238, #26296, #26350 & #26522, with a recent version of master merged in and some fixes.
Summary of changes:
insight-colorsfor now.dataColorThemeprop on the insight query (no UI, yet).Known shortcomings:
How did you test this code?
Tested manually and added some automatic tests