Skip to content

feat(dashboards): Add widget-aware chartcuterie chart type#115312

Open
DominikB2014 wants to merge 3 commits into
masterfrom
dominikb2014/feat/chartcuterie-dashboards-widget-chart
Open

feat(dashboards): Add widget-aware chartcuterie chart type#115312
DominikB2014 wants to merge 3 commits into
masterfrom
dominikb2014/feat/chartcuterie-dashboards-widget-chart

Conversation

@DominikB2014
Copy link
Copy Markdown
Contributor

@DominikB2014 DominikB2014 commented May 11, 2026

  1. Adds a new chartcuterie config specifically for dashboard widgets. Originally I tried to reusue the timeSeries config, but eventually realized we need access to the widget itself to do various things like label formatting from the alias, and thresholds. This can be done in the backend, but i'd prefer to reuse FE code if possible.
  2. Create shared util to get the timeseries label, share it with chartcuterie config and dashboards frontend
  3. Refactor timeSeries config to accept a createPlottable function, this let's us control the timeseries -> plottable behaviour while still sharing most of the code between timeserie and dashboardsWidget chartcuterie config.

Out of scope

This PR is FE-only. The Slack unfurl wire-up (switching ChartType.SLACK_TIMESERIES to ChartType.SLACK_DASHBOARDS_WIDGET, serializing the widget, building the tuples) plus the matching Python ChartType enum entry land in a follow-up backend PR. Thresholds (which the widget model already carries) will also build on this chart type in a separate PR.

Adds SLACK_DASHBOARDS_WIDGET, a chartcuterie chart type that accepts a
Widget alongside its time series so the server-rendered legend matches
what visualizationWidget shows in the dashboard UI. Today the Slack
dashboards unfurl renders multi-query widgets without per-query labels,
so two queries with the same aggregate collapse into a single legend
entry; the new chart type is the rendering half of fixing that. The
backend wire-up (sending the new chart type from the Slack unfurl, and
the matching Python ChartType enum entry) lands in a follow-up so this
PR is FE-only.

To keep the FE legend and the chartcuterie legend in lockstep, the
label-parts assembly that lived inline in transformWidgetSeriesToTimeSeries
is extracted into formatTimeSeriesLabelForWidgetQuery and called by both
paths. transformWidgetSeriesToTimeSeries now delegates to it, so a single
function owns the alias/conditions/field-alias/yAxis-suffix rules.

timeseries.tsx is restructured around a shared buildTimeseriesChartOption
so SLACK_TIMESERIES and SLACK_DASHBOARDS_WIDGET share axes, legend,
palette, sort, isOther handling, and stacking — the only thing each
chart type customizes is the per-series plottable factory. The
dashboards renderer pairs each TimeSeries with its widget query via a
[TimeSeries, widgetQueryIndex] tuple shape because a single widget query
can yield multiple TimeSeries (multi-aggregate, topEvents, yAxis=[...]),
so positional zipping against widget.queries doesn't work in general.

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 11, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

📊 Type Coverage Diff

Metric Before After Delta
Coverage 93.46% 93.46% ±0%
Typed 134,810 134,830 🟢 +20
Untyped 9,431 9,430 🟢 -1
🔍 1 new type safety issue introduced

Type assertions (as) (1 new)

File Line Detail
static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesLabelForWidgetQuery.tsx 49 as stringformatTraceMetricsFunction(yAxis) as string

This is informational only and does not block the PR.

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 8842f07. Configure here.

alias,
undefined,
color
);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Widget-aware label not shown in chart legend

High Severity

The formatted widget-aware label is passed as alias to createPlottableFromTimeSeriesAndWidget, but name is passed as undefined. ECharts uses the series name (from the plottable's name getter) for the chart legend, not the alias/label. Since name is undefined, it falls back to formatTimeSeriesName, which produces raw unformatted names like "count(span.duration)" instead of the intended widget-aware labels like "DB spans : count(spans)". The alias only populates the label getter used for tooltips, which don't exist in chartcuterie's static image output. The alias value likely needs to also be passed as name.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 8842f07. Configure here.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a legit comment?

Copy link
Copy Markdown
Member

@narsaynorath narsaynorath left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, aside from the undefined series name comment. The extension to support dashboard widgets is nice and compact this way with the helpers.

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

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants