getsentry / getsentry/sentry

Implement new chart legends

Open
#81,315 1 comment 0 reactions 0 assignees View on GitHub
Improvement Product Area: Dashboards
Dominant language
Python
Stars
44.8k
Forks
4.9k
Avg merge
22h 21m
Merged PRs (30d)
586

Description

The current dashboards legend solution is not always easily readable when there are many different series and the toggle on/off to display within the widget is not always obvious. This especially affects the "Releases" series, which doesn't have a lot of emphasis.

We want to replace chart legends across the app with a custom implementation.

## **Proposed Solution**

See [Figma](https://www.figma.com/design/oXDyENKYCEwT1MnLZNtTma/VM-Dashboards?node-id=449-11811&m=dev&t=CRZMLNcFntPFstt7-1) for details. The new chart legend should be implemented in React (rather than using ECharts' built-in legend formatter) and sit above the charts in widgets. This new legend should be used in all the standard charts (e.g., `TimeSeriesWidgetVisualization`) as well as any other appropriate charts (e.g., the "sparkline" on Issue Details pages) if possible.

![Image](https://uploads.linear.app/3ed206af-f87a-40aa-82a0-150bf83e43e6/0e9996fe-10c2-4e0b-a995-a7c5541b3481/229e1024-58e9-4747-85bc-b67983b6ef39?signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXRoIjoiLzNlZDIwNmFmLWY4N2EtNDBhYS04MmEwLTE1MGJmODNlNDNlNi8wZTk5OTZmZS0xMGMyLTRlMGItYTk5NS1hN2M1NTQxYjM0ODEvMjI5ZTEwMjQtNThlOS00NzQ3LTg1YmMtYjY3OTgzYjZlZjM5IiwiaWF0IjoxNzUzMzcwMTU2LCJleHAiOjMzMzIzOTMwMTU2fQ.3Y2HXuS7JWWnXupCd96mdbU2U_BRhBhOAXRfcLXw0y0)

## Prior Art

The old Metrics charts had a custom implementation of legends, done in React. It should be possible to resurrect that code and use it for inspo, if needed. If not, ECharts has detailed documentation for how to listen to and dispatch legend events.

## Extra Info

Also consider:

* there are existing bugs in Linear about the legends (e.g., scrolling legends are synchronized right now, which sucks) which will be naturally solved by this ticket
* legend item names are … complicated. There are cases where the legend must show array values, for example, that would be good to consider

Contributor guide

Open the contributing guide

Research direction

Start by locating TimeSeriesWidgetVisualization, the standard chart widgets, and the Issue Details sparkline, then review the linked Figma design and the old Metrics chart legend implementation. Check how ECharts legend events and series names are currently handled. Done means a React legend replaces the built-in legends across appropriate charts, supports clear toggling and complex item names, and avoids synchronized scrolling issues.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.