チャートタイル [DB]
概要
チャートタイルは、ダッシュボード下部に5枚並ぶミニチャートエリアです。30日間のトレンドと資金マップ帯グラフを表示します。各チャートには拡大ページがあり、凡例・ツールチップ付きの大きなグラフと期間切替（30/60/90日）が利用できます。
5つのチャート
1. 仕入vs販売
| 項目 | 説明 |
|---|
| チャート種別 | 棒グラフ（青=販売、橙=仕入） |
| 切替 | 「日/週」ボタンで日別・週別を切替可能（選択はブラウザに記憶） |
| ドリルダウン | バーをクリック → その日/週のアイテム明細モーダル表示 |
| 拡大ページ | /dashboard/trend/balance |
2. 消化日数推移
| 項目 | 説明 |
|---|
| チャート種別 | 折れ線グラフ2本（紫=数量ベース、赤=仕入額ベース） |
| 計算 | 各日の在庫÷その日までの7日移動平均販売数。在庫データは6時間ごとの履歴スナップショット |
| 拡大ページ | /dashboard/trend/days |
3. FBA在庫推移
| 項目 | 説明 |
|---|
| チャート種別 | 面グラフ（積み上げ） |
| 内訳 | 7コンポーネント合計（販売可能+予約+販売不可+調査中+入庫中3種） |
| データソース | 6時間ごとの履歴スナップショットから復元 |
| 拡大ページ | /dashboard/trend/inventory |
4. 販売ペース
| 項目 | 説明 |
|---|
| チャート種別 | 棒グラフ（薄灰=日別販売数）+ 折れ線（緑=7日移動平均） |
| ドリルダウン | ポイントをクリック → その日のアイテム明細モーダル表示 |
| 拡大ページ | /dashboard/trend/pace |
5. 資金マップ
| 項目 | 説明 |
|---|
| チャート種別 | 横積みバー（帯グラフ） |
| 期間 | 直近5ハーフ月 |
| 区分 | 未処理・納品中・販売中・処理済みを横積み表示 |
| 強調 | 引落対象行は赤枠で強調 |
| 拡大ページ | 資金マップページ |
ドリルダウンモーダル
「仕入vs販売」と「販売ペース」では、バーやポイントをクリックするとアイテム明細モーダルが開きます。チャートの数字が正しいかをアイテム単位で検証できます。
| 項目 | 説明 |
|---|
| 表示内容 | SKU・ASIN・商品名・数量・金額のテーブル |
| 合計行 | 表の末尾に合計を表示 |
| 上限 | 最大200件表示 |
拡大チャートページ
各チャートの右上にある拡大アイコンをクリックすると、専用の拡大チャートページへ遷移します。
- 凡例・ツールチップ付きの大きなグラフ
- 期間切替: 30日 / 60日 / 90日
- ドリルダウン機能も利用可能
画面要素リファレンス
| ラベル | ID | 説明 |
|---|
| チャートエリア | DB-CHARTS | チャートタイル5枚のコンテナ |
| 仕入vs販売 | DB-CHART-BALANCE | 仕入と販売の棒グラフ比較。日/週切替可能 |
| 消化日数推移 | DB-CHART-DAYS | 在庫消化日数の30日推移（折れ線2本） |
| FBA在庫推移 | DB-CHART-INVENTORY | FBA在庫数の30日推移（面グラフ） |
| 販売ペース | DB-CHART-PACE | 7日移動平均の販売ペース |
| 資金マップ | DB-CHART-FUNDMAP | 資金の所在を帯グラフで表示 |
| ドリルダウンモーダル | DB-DRILLDOWN | アイテム明細モーダル。最大200件表示 |
関連ページ
