Replace metrics-graphics with Observable Plot

Offen
  • Stimmt etwas nicht?
#481 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 8 Tagen

@stephaniehobson arbeitet bereits daran.

Seit 06.11.2026.

  • #482 von @stephaniehobson — offen

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
d3, javascript
Bereich
data-visualization, frontend

Rechercherichtung

Read docs/execplans/2026-11-05-observable-plot-charts.md first; it contains the plan and decision log for replacing metrics-graphics with @observablehq/plot. Then inspect Chart.test.jsx and the chart entry point to understand existing rendering and tests. Done means the charts retain the listed appearance and behavior, the three deliberate visitor-facing changes work, and the end-to-end tests still pass.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Line charts on data.firefox.com are drawn by metrics-graphics 2.15.6, which is abandoned. Its last stable release is from 2019.

Replace it with Observable Plot (@observablehq/plot), a maintained charting library from the d3 authors, built on d3 7.

Alternatives considered:

  • Plain d3 modules. No new dependency, but we'd own all the hover, legend, and marker code ourselves.
  • Chart.js. It draws to canvas, so every Playwright assertion on chart SVG would need rewriting.
  • The metrics-graphics 3.0 beta. Unmaintained, and it breaks the 2.x API anyway.

Plot draws SVG like metrics-graphics does, so the end-to-end tests keep working on lines and strokes. It also renders in jsdom, so Chart.test.jsx can assert on the drawn chart instead of on an options object.

What changes for visitors

The charts should look the same: lines, colors and order (including generated colors past 11 populations), the legend, annotation markers, y-axis bounds and units, the shaded area on single-line charts, axis lines, and the hover readout. Three changes are deliberate:

  • Charts no longer animate when they redraw.
  • Clicking a chart pins the hover readout until the next click. This is built into Plot.
  • A metric with no plottable data shows "No data to show for this metric." instead of "Load error".

What a prototype showed

  • Resizing the hardware dashboard (#409) through five widths went from about 55 s to 0.56 s in Chromium, and from 67 s to 0.72 s in Firefox. That's most of #409's complaint, though the unthrottled resize listener is still there.
  • The lazy chart chunk shrank from 492 kB to 265 kB (154 kB to 90 kB gzipped).
  • d3 v4 and its nested d3-transition are gone, and the d3-color advisory with them.

The plan and its decision log are in docs/execplans/2026-11-05-observable-plot-charts.md on the branch for this work.

Related

  • #409: hardware dashboard is slow to resize. Largely addressed by this change.
  • #339: lines connect points across gaps in the data. Still happens after this change, but Plot makes it straightforward to fix (see the comment there).
Vorherrschende Sprache
JavaScript
Sterne
21
Forks
7
Ø Merge
7 T. 3 Std.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus mozilla/ensemble

Alle Issues in mozilla/ensemble

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.