デプロイ可能なダッシュボードを組み立てる
デプロイ可能なダッシュボードを組み立てる
これが総仕上げです。KPIカード、チャート、レポートレイアウトを作ってきました。今度はそれらのピースをひとつにまとめ、実際のURLに公開できる完全なダッシュボードページに仕上げます。
フルページを組み立てましょう。ブランドを冠したヘッダー、KPIカードの行、チャートセクション、データテーブル — すべてをひとつのまとまった画面に収めます。これこそ、ステークホルダーに手渡して「これがライブのダッシュボードです」と言える成果物です。
エンドツーエンドで考えましょう。デプロイ可能なアプリは、見た目がきれいなだけでは足りません。整理されていて、読みやすく、それ自体で説明が完結していることが大切です。このレッスンを終えれば、ポートフォリオに載せられるデータアプリが手に入ります。さあ、リリースしましょう。
手順
「セールス分析」という h1 のアプリタイトルを持つページヘッダーを追加しましょう。
ヒント: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">セールス分析</h1></header>` を使いましょう。
どこに書けばいい?
<!-- ここにフルダッシュボードを組み立てましょう -->11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
レスポンシブなグリッドコンテナを使ってKPIの行を追加しましょう。
bg-purple-500 の色でスタイルしたバーの div を使って、チャートセクションを追加しましょう。
最近の注文のデータテーブルを追加して、ダッシュボードを完成させましょう。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:「セールス分析」という h1 のアプリタイトルを持つページヘッダーを追加しましょう。