注文チャートカード
毎月の注文はバーとして、今年は毎月の注文に加えて、毎月の比較はバーを読みます。 見出しは、デルタチップで合計までカウントし、その月の数字と1年前のもののためにそれを交換する。 収益チャートカードと同じフレームとヘッダーは、2列を共有します。 無料で、再充電に組み込まれています。
Orders
25,162
+20%20,968 last year
- This year
- Last year
インストール
注文チャートを CLI に追加します。また、Recharts とコンポーズするチップをインストールしたり、ファイルをコピーしたりします。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add orders-chart-card共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
あなた自身の数字
パス data 12点のポイントとして current そして、 過去の投稿 値。合計、デルタとホバーの読み出しはそれらから派生します。 タイトル 残りのヘッドラインのラベルを置きます。
import { OrdersChartCard, type OrdersPoint,} from "@/components/application/dashboard/orders-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 orders: OrdersPoint[] = [ { label: "Jan", current: 1680, previous: 1510 }, { label: "Feb", current: 1740, previous: 1480 }, // ... { label: "Dec", current: 2342, previous: 1798 },];
<OrdersChartCard data={orders} title="Paid orders" />行目で
無料のチャートカードは両方とも flex-1 そして、344pxの高さで、チャットスターターのダッシュボードのように、列を均等に分割します。
{/* Two free charts in a row; both are 344px tall by default */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>