Skip to content

docs(observability): document number-tile color picker on ClickStack dashboards - #6564

Open
sankalpsthakur wants to merge 2 commits into
ClickHouse:mainfrom
sankalpsthakur:docs/number-tile-color-picker
Open

docs(observability): document number-tile color picker on ClickStack dashboards#6564
sankalpsthakur wants to merge 2 commits into
ClickHouse:mainfrom
sankalpsthakur:docs/number-tile-color-picker

Conversation

@sankalpsthakur

@sankalpsthakur sankalpsthakur commented Jul 22, 2026

Copy link
Copy Markdown

Summary

Fixes ClickHouse/ClickHouse#113307

Documents the number-tile Color option in Display Settings on the ClickStack dashboards page (docs/use-cases/observability/clickstack/dashboards/index.md).

Related docs work in the same ClickStack area: #6565 (ClickStack MCP tools and authoring).

What this adds

  • How to open the Color control on a number tile
  • Categorical tokens (chart-bluechart-gray) and semantic tokens (chart-success, chart-warning, chart-error)
  • Why tokens (not hex) reflow across light, dark, and IDE themes
  • Legacy chart-1chart-10 mapping note
  • Brief note on ordered color rules (same palette)
  • External API example setting color on a builder number-tile config for POST/PUT /api/v2/dashboards (API parity landed in [HDX-1360] External API parity for number-tile color hyperdxio/hyperdx#2359)

Screenshots

Not included. The issue asks for light/dark screenshots; this PR ships verified prose and token tables only so we do not invent UI. Happy to add screenshots in a follow-up from a real ClickStack session.

Verification

Cross-checked against HyperDX/ClickStack source:

  • packages/app/src/components/ChartDisplaySettingsDrawer.tsxshowTileColor for DisplayType.Number; Color control via ColorSwatchInput (aria-label “Number tile color”)
  • packages/app/src/components/ColorSwatchInput.tsx — token labels and palette-only storage
  • packages/common-utils/src/types.tsCATEGORICAL_PALETTE_TOKENS, SEMANTIC_PALETTE_TOKENS, LEGACY_CHART_PALETTE_TOKEN_MAP
  • packages/api/src/routers/external-api/v2/dashboards.tsChartPaletteToken enum and color on NumberBuilderChartConfig / raw SQL number config

Test plan

  • Preview the dashboards page and confirm the new Number tile color subsection renders under Tile display settings
  • Confirm links to the API reference resolve
  • Spot-check token tables against the product color swatch UI

@sankalpsthakur
sankalpsthakur requested a review from a team as a code owner July 22, 2026 13:33
@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown

@sankalpsthakur is attempting to deploy a commit to the ClickHouse Team on Vercel.

A member of the Team first needs to authorize it.

@CLAassistant

CLAassistant commented Jul 22, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

…dashboards

Document the Display Settings Color control for number tiles, including
categorical and semantic palette tokens, theme reflow, legacy chart-N
mapping, and an external API payload example for POST/PUT dashboards.

Fixes #6298
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Document the number-tile color picker on the HyperDX dashboards page

2 participants