Replace metrics-graphics with Observable Plot

Ouverte
  • Quelque chose ne va pas ?
#481 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 8 jours

@stephaniehobson y travaille déjà.

Depuis le 6/11/2026.

  • #482 par @stephaniehobson — ouverte

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
d3, javascript
Domaine
data-visualization, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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).
Langage dominant
JavaScript
Étoiles
21
Forks
7
Merge moyen
7 j 3 h
PR mergées (30 j)
4

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de mozilla/ensemble

Toutes les issues de mozilla/ensemble

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.