dashboard

ダッシュボードスキル

1画面で完結する管理／分析ダッシュボードを作成します。

ワークフロー

1. 有効な DESIGN.md を読みます（上部に挿入されています）。色、タイポグラフィ、余白、コンポーネントのスタイルはすべてここに従います。新しいトークンを独自に作成しないでください。
2. 分類します。概要から、ダッシュボードが監視する対象（売上、トラフィック、使用状況、インシデント、運用など）を判別します。具体的で妥当な指標名と値を生成し、「指標 A／指標 B」のようなプレースホルダーは使わないでください。
3. 必要な領域を配置します。
   • 左サイドバー（220～260px）：上部にブランドマーク、アイコン付きのナビゲーションリンクを6～8個配置し、アクティブ状態には DS のアクセントカラーを使用します。
   • トップバー：左側にページタイトル、右側に検索入力欄とユーザーのアバター／ステータスを配置します。
   • メイン領域：
     • 1行目：KPI カードを3～4枚（ラベル＋大きな数値＋前期間との比較）。
     • 2行目：主要チャートを1つ（全幅または2/3幅）。実際にありそうな数値をもとに、インライン SVG の折れ線／棒／面グラフを描画します。
     • 3行目：副次的なチャートまたはテーブルを1つ（最近のイベント、上位項目など）。
4. 作成します。自己完結型の HTML ドキュメントを1つ作成します。
   • <!doctype html> から </html> までを含め、CSS はインラインの <style> ブロック1つに記述します。
   • 全体のレイアウトには CSS Grid、カード内には Flexbox を使用します。
   • セマンティック HTML を使用します：<aside>、<header>、<main>、<section>。
   • コメントモード用に、論理的な各領域へ data-od-id="slug" を付けます。
5. チャート：インライン SVG のみを使用し、JavaScript ライブラリは使いません。折れ線グラフは、控えめな塗りつぶしを加えた <polyline> 約10行で作成します。棒グラフは DS のアクセントカラーで塗った <rect> を N 個使用します。軸ラベルは控えめに表示します（薄い色、小さめの文字）。
6. セルフチェック：
   • すべての色が DESIGN.md のトークンに基づいていること。
   • アクセントカラーの使用は最大2か所（サイドバーのアクティブ状態＋チャートのハイライト1か所）にすること。
   • サイドバーとトップバーはスティッキーにし、メイン領域は独立してスクロールすること。
   • 情報密度を DS の雰囲気に合わせること。余白の多い DS ではパディングを広めにし、密度の高い DS（トレーディング、暗号資産など）では行間を詰めます。

出力要件

<artifact> タグで囲んで出力します。

<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文だけ記述し、その後には何も記述しないでください。