ファネルチャートカード
ダッシュボードカードシェルの横のフローファネル。各ステージは、テーパーが次のファネルのトップのシェアに大きさで分類される列で、中心のパーセンテージピルと値/名前のフッターで。ステージを回転させ、残りの部分を薄くし、見出しを交換することによってそれを持ち上げます。Rechartsのファネルは、垂直トラップロイドスタックなので、これは同じトークンから手書きされます。リストバージョンでは、ステージバーカードを参照してください。
Sign-up funnel
197
+5.2%インストール
ファネルチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
形状とモノ
shape="sharp" 明白な台形のための緩和された先を交換し、層にされた端は、 mono テキストの色ですべてのステージをペイント - 光の黒い、暗闇の白 - シングルシンクカード用。 彼らは組み合わせます。
{/* Straight-edged trapezoids, no edge layers */}<FunnelChartCard shape="sharp" title="Hiring" ranges={HIRING_RANGES} />
{/* Single ink: mid grey on light, near-white on dark */}<FunnelChartCard mono title="Checkout" ranges={CHECKOUT_RANGES} />
{/* Both */}<FunnelChartCard mono shape="sharp" title="Hiring" ranges={HIRING_RANGES} />データデータ
stages フラット { label, value, color? } リスト、ファネルのトップ。 ステージを追加し、それは列を取得します - 幅、首、パーセンテージ、フッターはすべて派生しています。 色は、オーバーライドされない限り、チャートパレットをサイクルします。 期間のカプセルは、あなたが通過したときにドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
// One entry per stage, top of the funnel first.const stages = [ { label: "Link opened", value: 197 }, { label: "Started", value: 110 }, { label: "Completed", value: 77 }, { label: "Converted", value: 38, color: "var(--color-chart-3)" }, // override any colour];
<FunnelChartCard title="Sign-up funnel" stages={stages} headline={197} // optional resting headline (defaults to the first stage) delta={0.052} // "+5.2%" chip range="Last 30 days" // static pill…/>
// …or a working period dropdown: each range overrides stages / delta / headline.<FunnelChartCard title="Checkout funnel" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: -0.018 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.042 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: 0.097 }, ]}/>