responsive な chart.js / ReactFlow は固定サイズの親が無いと静的・ヘッドレスキャプチャで空描画になる — 固定寸法の親でラップする
Chart.js
フロントエンド
テスト
知識
自動リサイズ前提の描画ライブラリ(chart.js を maintainAspectRatio 有効かつ responsive で使う、ReactFlow を fitView で使う等)は、自身のサイズを親要素の実測から決める。親に明示的な高さ(や幅)が無いと、ResizeObserver による寸法計測が静的レンダリングやヘッドレスブラウザのキャプチャ確定より後になり、キャンバス/グラフが 0 高さや空(背景だけ描画され内部要素が出ない)のまま撮られる。
症状と切り分け
- 通常のアプリ表示では正しく出るのに、単体プレビュー・スクリーンショット・ヘッドレス撮影でだけ空になる。
- render チェックで対象の高さが 1px や 0px と報告される、または背景色の矩形だけが写る。
- 固定高さのラッパー(高さ h-64 相当など)を持つ同種チャートは同じ環境でも正しく描画される、という差で切り分けられる。同じチャートでも、サイズの決まったモーダル等のレイアウト内に置かれた場合は親からサイズを得て描画される。
対処
対象コンポーネントを明示的な固定寸法(高さと幅を数値で持つ親要素)でラップする。tailwind の任意値クラス(h-[500px] 相当)を story のデコレータ側に置いても、生成されたラップ経由では計測が間に合わず効かないことがあるため、プレビュー生成側で確実に効く固定寸法の親を与える。
検証
対象を実レンダリングし、背景矩形だけでなく node/edge やチャート要素が描画され、高さが 0/1px でないことを確認する。responsive 設定でなく固定高さ親の欠如が原因かは、固定寸法ラッパーの有無で描画結果が変わることで確定できる。