Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Keep drag-box zoom smooth on long graph ranges

オープン
  • 何か問題がありますか？
#940 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@bracyw がすでに取り組んでいます。

2026年10月30日 から。

評価

この issue はまだ評価されていません。

説明

by: ai dev work frontend
What

On the graph page, a historical range near the 7-day cap with five topics (about 3M points) drops to about 40 fps while drag-box zooming, though panning runs at 80 fps and hover at 120. While the box is dragged, the chart is redrawn on every mouse move just to draw the selection box, and each redraw re-runs min-max decimation over every point. Drag-box zoom should be as smooth as the rest of the page on long ranges.

Requirements
  • Drag-box zoom on a 7-day, five-topic historical range runs at least as smoothly as panning does today (about 80 fps on the setup measured in #938)
  • Hover, pan and wheel zoom on that range are no slower than in #938
  • Zoomed and unzoomed views draw the same lines as today (each pixel column keeps its min and max)
  • Live mode with five topics stays at full frame rate
Notes
  • Measured in #938 (5 topics × 594k points, 1 Hz over 7 days): drag-box zoom 40 fps, pan 80, wheel zoom 105, hover 120. ApexCharts on develop managed 0.4–3 fps on the same data.
  • CPU profile of a 3 s drag-box zoom: about 70% in Chart.js's min-max decimation, about 13% more in the decimation plugin and object spreads, under 1% in graph-page code.
  • chartjs-plugin-zoom calls a chart update on every mouse move during a drag-box zoom.
  • The graph code is in angular-client/src/pages/graph-page/graph/ (graph-chart.utils.ts, graph.component.ts). Hover reads full-resolution samples kept separately from the drawn points.
  • Blocked by #925, which moves the graph page to Chart.js.
  • Open question: downsample on the client, or have the backend downsample time-range queries the way it already does for runs (see closed #457). That backend query is also slow on this range: 4–130 s to load.
Context transfer
SUMMARY
Follow-up from #925 / PR #938 (graph page on Chart.js). Chart.js is far faster than ApexCharts on long ranges, but drag-box zoom on 7 days x 5 topics holds only ~40 fps because every mousemove re-decimates all points.

CONTEXT
- Versions: chart.js 4.5.1, ng2-charts 10.0.0, chartjs-plugin-zoom 2.2.0.
- Workload: Custom -> Date Range over 7 days, 5 topics at 1 Hz = 5 x 594,001 points. Run selection can't reproduce it: the run endpoint downsamples to ~5k points per topic.
- Measurement (median of 3, ng serve dev build, 120 Hz display): fps = frames rendered per second over the gesture window; mouse input fired at a fixed 125 Hz.
  Chart.js (925): idle 120, hover 120, drag-box zoom 40 (p95 frame 58 ms), pan while zoomed 80 (p95 25 ms), wheel zoom 105, live 5 topics 120. Load after network 0.47 s, heap ~650 MB.
  ApexCharts (develop db4e64ab): hover 0.9, drag-box zoom 3.1 plus a 4.7 s freeze on release, pan 0.4, wheel 2.6, live 23. Load after network 14.3 s with an 8 s freeze, heap ~2.6 GB.
- Profile of a 3 s drag-box zoom on 925: ~2.66 s CPU; 70% minMaxDecimation, 6% decimation plugin, 7% __spreadProps, <1% graph-page code.
- Live mode (30 s window, ~12.7k points) and hover never hit this cost.
主要言語
TypeScript
スター
5
フォーク
1
平均マージ
2日 13時間
マージ済み PR（30日）
48

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Northeastern-Electric-Racing/Argos のほかの issue

Northeastern-Electric-Racing/Argos の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。