AI に飲食の売上分析ダッシュボードを作らせてみた — SVGを1つも書かずに7チャート（やってみた #98）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。飲食・レストラン 4枚目——売上分析ダッシュボード（時間帯別/メニュー別ABC/カテゴリ構成/曜日×時間ヒートマップ/前年比）。

運営オペ3枚（予約/フロア/シフト）とは別の分析系。観測：チャート層が飲食でどれだけ効くか＋StatGroup の継続再利用。

結果 — 4.5/5・チャート手組みゼロ

tsc/build 緑・375px 横溢れゼロ・0 console error。KPI・日次推移・時間帯別・ABC分析・カテゴリ構成・ヒートマップ・客単価推移——SVGを1つも書かずにダッシュボード全体を。

観測 — チャート層が丸ごと飲食に越境

cold AI に「(a)KPI行 (b)各チャート (c)期間切替」を聞いた：

ほぼ全部既製——StatGroup+Statistic+AnalyticsCard（KPI strip・「literally what these are for」・飲食4連続）・LineChart（referenceValue で予算ラインが無料・多系列 今年/前年）・ParetoChart（ABC分析・「the standout・sort/threshold=80/累積%軸 内蔵・大抵の kit は2チャート重ねで偽装するのを1 prop で」）・HeatmapChart（曜日×時間）・StackedBarChart（時間帯×フード/ドリンク）・LabeledDonutCard（カテゴリ構成）・DataTable（ABCランキング）。formatCurrency/formatNumber/formatPercent は JPY/ja-JP 既定。「SVGを1本も描かなかった——これが headline」。

チャート層（銀行#33/会計で育てた BarChart/LineChart/ParetoChart#66 等）が飲食売上分析に丸ごと越境＝60%が普通カスタムチャートになる画面が、~95% kit に。手組みは「フード/ドリンク2値構成カード」だけ。

残る課題は機能でなく、また「発見可能性」

今回 src build なし（4.5/5）。だが #98 は #325（発見可能性）がもう連載の支配的課題だと決定づけた：

• 🔵 ParetoChart が「kit が隠している単一最大の発見可能性の勝ち」——名前が「ABC分析」を叫ばず、barrel 全読でしか見つからない。
• 🔵 Meter が「金額を整形できない」と誤報された——cold AI は「formatValue prop が無い」と結論して上に手書き整形を置いた。だが formatValue は実在し readout 全体を整形する（formatValue={formatCurrency} → ¥16,842,300 / ¥17,500,000（96%））。prop を見落としただけ＝純粋な発見可能性（source/JSDoc にはある、採用者が見つけられない）。
• 🔵 LabeledDonutCard vs DonutChart vs PieChart（3つの donut・showCallouts vs showLegend・「危うく違うのを使う所だった」）。
• 🟢 ToggleGroup の onValueChange が single でも緩い型（#330）。

学び — 「在る最高の部品を見つけさせる」が、最後の山

EventCalendar(#82)・TreeView(#84)・ReferenceValue/SignedRecord(#91)・ScheduleGrid(#95/#97)・StatGroup(#96)・そして ParetoChart/Meter.formatValue(#98)——毎回、kit は完璧な部品を持っているのに、cold AI が見つけられず手組みしかける。JSDoc の「use this, not that」だけが救い続けてきたが、それは source を開いた時だけ見える。残る最大の仕事は機能でなく、ユースケース別索引＋prop の発見可能性（「ABC分析」→ParetoChart、「Meterで金額整形」→Meter.formatValue を名前/検索で出す）。98枚やって、部品は揃った——揃った部品を見つけさせるのが #100 を前にした宿題。

次回予告（やってみた #99→#100）

• 飲食5枚目（在庫/発注 など）or 次業界。#100 の節目が近い。StatusTile族3回目＝build トリガーの観測も継続。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#97
• GunjoUI by UIXHERO

まだ alpha。だが飲食の売上分析が SVG手組みゼロで組めた——チャート層も業界を越える、13業界目の4枚目。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->