docs(clickstack): document heatmap dashboard tile#6150
Closed
alex-fedotyev wants to merge 1 commit intoClickHouse:mainfrom
Closed
docs(clickstack): document heatmap dashboard tile#6150alex-fedotyev wants to merge 1 commit intoClickHouse:mainfrom
alex-fedotyev wants to merge 1 commit intoClickHouse:mainfrom
Conversation
Add a Heatmap step to the Custom Dashboards walkthrough covering: - when to use a heatmap vs a Line chart (distribution shape over time) - that the data source dropdown is restricted to Traces sources (logs, metrics, and session sources are filtered out, since heatmaps need the source's Duration Expression for span duration) - the pre-filled Value (`(Duration)/1e6`) and Count (`count()`) once a source is selected - using `Where` and the time range to scope the heatmap to a service or set of operations the user wants to observe, with wider ranges making bimodal latency patterns easier to spot - the Display Settings drawer (Scale / Value / Count), with a cross-link to the Event Deltas page where the full settings table already lives - the two-query model (bounds + bucket) visible in the editor SQL preview - a Drill down to Event Deltas subsection: clicking a cell on a rendered tile reveals a "View in Event Deltas" action that opens the Event Deltas view with the tile's data source, Where clause, and time range carried over Cross-link the existing Event Deltas "Customize the heatmap" section to the new dashboard tile flow so users discovering the feature in either place find the other. Screenshots are captured in dark theme to match neighbouring sections, with `ServiceName:"payment"` over 24h to surface the bimodal duration distribution that makes a heatmap worth using. Closes ClickHouse#6146 Refs hyperdxio/hyperdx#2107
|
@alex-fedotyev is attempting to deploy a commit to the ClickHouse Team on Vercel. A member of the Team first needs to authorize it. |
|
|
Contributor
Author
|
Re-opened as #6151 from an in-repo branch so Vercel previews authorize automatically. Same content; broken link |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #6146.
Summary
Adds a Heatmap step to
dashboards/index.mdso the Custom Dashboards walkthrough covers the new visualization type alongside Line/Bar, and cross-links from the existing Event Deltas page so users discovering the feature in either place find the other.The Heatmap tile shipped to ClickStack/HyperDX in hyperdxio/hyperdx#2107.
What the new section covers
Traces. Logs, metrics, and session sources are filtered out, since heatmaps need the source'sDuration Expressionfor span duration. (MatchesallowedSourceKinds={[SourceKind.Trace]}inChartEditorControls.tsx.)Valueset to(Duration)/1e6,Countset tocount(), withnumberFormatfor proper Y-axis labels.Whereto scope the heatmap to a specific service or set of operations, and adjusting the time range to match the period of interest. Wider ranges expose distribution shifts that shorter windows hide.View in Event Deltasaction that opens the Event Deltas view with the tile's data source,Whereclause, and time range carried over.Use cases covered
Screenshots
Three screenshots, all dark theme to match neighbouring sections, captured at
play-clickstack.clickhouse.comagainst the demo traces dataset:heatmap-tile-editor.png: Heatmap tab selected in the chart editor withServiceName:"payment"filter and the bimodal preview, showing the Display Settings button.heatmap-tile-rendered.png: Saved tile on the dashboard over a 24h window with the fast and slow paths clearly separated.heatmap-tile-drilldown.png: cell click revealing theView in Event Deltasaction.Validation
Walked the flow end to end on
play-clickstack.clickhouse.com:ClickPy TracesandDemo Traceswhen Heatmap is selected; logs/metrics sources do not appear.Value=(Duration)/1e6,Count=count()populate on source selection.View in Event Deltasaction; selecting it lands on/search?source=...&where=ServiceName%3A%22payment%22&from=...&to=...&mode=deltawith the data source,Whereclause, and time range carried over, and the Event Deltas analysis mode panel selected.