Skip to content

[FEATURE] TimeSeriesChart: add Exemplars support - #800

Open
julianocosta89 wants to merge 6 commits into
perses:mainfrom
julianocosta89:exemplars/3445-timeserieschart
Open

[FEATURE] TimeSeriesChart: add Exemplars support#800
julianocosta89 wants to merge 6 commits into
perses:mainfrom
julianocosta89:exemplars/3445-timeserieschart

Conversation

@julianocosta89

@julianocosta89 julianocosta89 commented Sep 7, 2026

Copy link
Copy Markdown

Description

Part of #3445 (perses/perses#3445). Stacked on #799 — review/merge that one first. Also uses ExemplarMetadataDialog from perses/shared
().

Summary

Renders the exemplar data fetched by the Prometheus datasource changes as diamond scatter series on time-series charts, with a metadata dialog on click — Grafana-style, as
discussed in #3445.

Changes

  • Exemplars render as diamond scatter series on top of their matching series (ECharts supports mixing series types in one chart), inheriting the series color and y axis.
  • Only rendered for series visible in the legend — exemplar series are dropped for deselected series.
  • Clicking a diamond opens the ExemplarMetadataDialog from @perses-dev/components (series labels, exemplar labels, value, timestamp) instead of pinning the chart tooltip.
  • Minor touch-ups in prometheus/ carried over from the stacked review (redundant type re-exports removed).

Out of scope

Trace-linking in the Traces explorer, HeatMapChart rendering (can reuse the shared dialog), hover-tooltip integration — as discussed in #3445.

Testing

  • TimeSeriesChart: 62 tests pass, including panel-level tests asserting exemplars reach the ECharts option as diamond scatter series with embedded metadata, and are dropped for
    deselected series (option captured via a mocked EChart component since jsdom has no canvas).
  • Repo-wide: turbo run type-check / test (30 packages), lint (31), oxfmt clean.

Screenshots

See perses/shared#278

Checklist

  • Pull request has a descriptive title and context useful to a reviewer.
  • Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
    following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
  • All commits have DCO signoffs.

UI Changes

  • Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
  • Code follows the UI guidelines.

…t method

Add an optional `exemplars: { enable: boolean }` section to the
PrometheusDatasource spec, exposed in the datasource editor as a
toggle and validated by the CUE schema.

Add a `queryExemplars` method to the Prometheus client hitting
GET /api/v1/query_exemplars with the same query parameters and
authentication handling as the other API calls. The endpoint is also
added to the default proxy allowedEndpoints list.

Related to perses/perses#3445

Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
When the selected datasource has exemplars enabled in its spec and the
query runs in range mode, fire a query_exemplars request alongside the
range query (same PromQL and time range, in parallel) and attach the
converted exemplar data to the returned TimeSeriesData.

Exemplar timestamps are converted from seconds to ms and values are
parsed as numbers. A failing exemplar request never breaks the panel:
the error is logged and the query result is returned without exemplars.

Related to perses/perses#3445

Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
@julianocosta89
julianocosta89 force-pushed the exemplars/3445-timeserieschart branch 2 times, most recently from 2d80f3b to f86d682 Compare September 8, 2026 12:08
@AntoineThebaud

Copy link
Copy Markdown
Contributor

Please add a screenshot to your PR desc 🙏

Exemplars render as diamond scatter series on top of their matching
series, inheriting the series color and y axis; only series visible in
the legend get markers. Hovering a diamond shows the
ExemplarMetadataTooltip from @perses-dev/components (series labels,
exemplar labels, value, timestamp) anchored to the chart, and clicking
the diamond pins it — clicking it again or elsewhere on the chart
unpins it — mirroring the annotation tooltip interaction instead of
opening a modal dialog.

Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
@julianocosta89
julianocosta89 force-pushed the exemplars/3445-timeserieschart branch from f86d682 to 10769bd Compare September 9, 2026 10:57
julianocosta89 and others added 3 commits September 9, 2026 13:34
   While a tooltip is pinned (line chart or exemplar), the other tooltip type
   no longer renders in mouse-follow mode on top of it. Clicking a different
   element type unpins the previous tooltip and pins the new one, so only one
   tooltip stays pinned at a time; Ctrl/Cmd-click opts into pinning multiple
   tooltips, consistent with the existing cross-chart behavior.

Signed-off-by: Juliano Costa <juliano.costa@datadoghq.com>
@AntoineThebaud AntoineThebaud changed the title Exemplars/3445 timeserieschart [FEATURE] TimeSeriesChart: add Exemplars support Sep 10, 2026
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.

2 participants