React向けリアルタイム折れ線グラフ
LivelineはReact用のリアルタイムアニメーション折れ線グラフコンポーネント。単一の<canvas>要素とrequestAnimationFrameループで動作し、React 18以外の依存関係がない。60fpsで滑らかな補間を実現する。
APIはdataとvalueの2プロップだけで動くシンプルな設計。不定期なデータ更新でも8%/フレームのLerp補間で滑らかに見せる。
主な機能:
- Momentum — 方向矢印で上昇・下降・横ばいを色分け表示
- Value Overlay — チャート上に大きな数値を60fpsで描画
- Time Windows — 1分・5分など時間範囲の切替ボタン
- Reference Line — 固定値の水平線
- Candlestick — OHLC形式のローソク足表示
- Multi-series — 複数折れ線の重ね描画
テーマは単一のCSS色文字列から線・グラデーション・グロー・バッジ・グリッドラベルのカラーパレットを自動生成する。loading状態の呼吸アニメーションやpause機能も備える。
