feat(data-warehouse): Select color of series on a query visualization

[rossgray]

Problem

At the moment it is not possible to change the color of a series on a query visualization.

Changes

UX

Adds a color picker (the same one as for conditional formatting, thanks Tom!) to the series display options tab. See screen recording below.

Screen.Recording.2024-10-30.at.17.21.54.mov

Code

• I have have refactored the ColorPickerButton into its own file since it is now used in 2 different places (I also renamed it ColourPickerButton -> ColorPickerButton since we use the American spelling in most places and thought it best to be consistent).
• I also added a colorChoices prop so that for the series color we can pass in the set of colors currently used for series (this is different from the color palette used for conditional formatting)

Limitations

• It is not ideal having to click off of the display settings before seeing the visualization update, however it is not straightforward to change this behaviour so decided to leave it for now.
• This is already an issue but there is not much space on the select for the series label
  
• In Metabase you can change the color of a series directly by clicking on the color glyph directly, without having to open up the settings tab (see below).
  
  I thought about doing the same - I think it would require us to move the colour glyph out of the select to a separate button on the left (see below). The only thing is that there is then even less space to display the label, unless we change the layout a bit, so not sure whether to proceed with this or not?
  

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

I presume so.

How did you test this code?

Local testing

[Gilbert09]

Just the one change, then this is good - top stuff! 🚀

[Gilbert09]

There should be a backend equivalent for this - generate it with pnpm schema:build command. Without it, I think saving an insight with a color will get rejected by the backend (I think)

[rossgray]

Ah right, I hadn't tested saving an insight. Will try what you said 👍

[rossgray]

that should be fixed now

[github-actions]

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged

Filename	Size
frontend/dist/toolbar.js	1.15 MB

_{compressed-size-action}

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.