サンキーチャートカード
ダッシュボードカードシェルのSankeyフロー。Rechartsは、ノードとリンクをレイアウトします。カードは、チャートトークン内のピルノードを描画し、ソースの色ですべてのリボンをスズし、各オリジンのフローは1つの家族として読み込まれ、左側の名前と値とラベルのソースをラベルし、右上のシェアをシンクし、あなたが好きなものを分離します - ノードまたはリンク - ヘッドラインが続く間。
Tracked time
86h
Tracked timeShare of tracked time
インストール
サンキーチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
データデータ
nodes です。 { name, color? } リストとリスト links です。 { source, target, value }, 名前またはインデックスでノードを参照する. ノード値, ヘッドライン合計, シンク株式, ホバー関係は、すべてのリンクから派生しています. あなたが通過するときの期間のカプセルは、ドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
// Sources carry the colour - every ribbon leaving a node takes that node's// colour (linkColor="source", the default) - and sinks stay "neutral" so the// ribbons paint them. Nodes without a colour cycle the palette by index.const nodes = [ { name: "Focus", color: "var(--color-chart-7)" }, { name: "Meetings", color: "var(--color-chart-5)" }, { name: "Browsing", color: "neutral" }, { name: "Writing", color: "neutral" }, { name: "Email", color: "neutral" },];
// Links reference nodes by name (or index). Add a node + link and the// layout rebalances; the right-hand percentages are shares of all sinks.const links = [ { source: "Focus", target: "Browsing", value: 16.2 }, { source: "Focus", target: "Writing", value: 11.6 }, { source: "Focus", target: "Email", value: 3.4 }, { source: "Meetings", target: "Email", value: 1.2 },];
<SankeyChartCard title="Tracked time" nodes={nodes} links={links} format={(n) => `${n}h`} // headline + source labels range="This week" // static pill… axisLabels={["Tracked time", "Share of tracked time"]}/>
// …or a working period dropdown: each range overrides links (and nodes / delta / headline).<SankeyChartCard nodes={nodes} ranges={[ { id: "this-week", label: "This week", links: thisWeek }, { id: "last-week", label: "Last week", links: lastWeek }, { id: "this-month", label: "This month", links: thisMonth }, ]}/>