Replace metrics-graphics with Observable Plot

Đang mở
  • Có gì không ổn?
#481 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 8 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
d3, javascript
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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).
Ngôn ngữ chính
JavaScript
Star
21
Fork
7
Merge trung bình
7 ngày 6 giờ
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của mozilla/ensemble

Tất cả issue của mozilla/ensemble

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.