売上チャートカード
年々前から毎月の収入の年:現在の年は柔らかいエリアとソリッドラインとして、昨年はあがったラインとして、それらの間のギャップは物語です。 見出しは、デルタチップで合計までカウントし、月のスワップをその月の数字と1年前に交換します。 同じフレームは、スタットカードとプロチャートカードとして、それは任意のダッシュボード列にドロップします。 無料で、Recharts上に構築されています。
Revenue
$152,314
+16%$131,304 last year
- This year
- Last year
インストール
収益チャートを CLI に追加します。また、Recharts とコンポーズするチップをインストールしたり、ファイルをコピーしたりします。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add revenue-chart-card共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
あなた自身の数字
パス data 12点のポイントとして current そして、 過去の投稿 値。合計、デルタとホバーの読み出しが派生するので、同期し続けるのは他にありません。 タイトル 残りのヘッドラインのラベルを置きます。
import { RevenueChartCard, type RevenuePoint,} from "@/components/application/dashboard/revenue-chart-card";
// Twelve points, one per month. `current` is this year, `previous` the same// month a year earlier; the headline and the delta are computed from them.const revenue: RevenuePoint[] = [ { label: "Jan", current: 9840, previous: 8210 }, { label: "Feb", current: 10120, previous: 8460 }, // ... { label: "Dec", current: 14703, previous: 11924 },];
<RevenueChartCard data={revenue} title="Net revenue" />行目で
カードはあります flex-1 デフォルトでは344pxの高さなので、チャットスターターのダッシュボードのように、注文チャートカードやその他のカードで行を共有します。
{/* Fills a dashboard row beside another card; the default height is 344px */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>