AI にタクシー営収ダッシュボードを作らせてみた — チャート床が「最も purpose-built」と評された回（やってみた #143）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。タクシー toB を厚く（配車・乗務員管理に続く3枚目）——営収・実績ダッシュボード（営業所レベルの営収分析・推移・時間帯・チャネル・乗務員ランキング）。

結果 — 4/5、チャート/アナリティクス床が交通営収に丸ごと越境

tsc 緑・デスクトップ密度。cold AI（群青を一度も触っていない設定）：

charts-and-metrics の back-office ダッシュボードとして、@gunjo/ui は私が cold で使った汎用 React UI の中で最も『purpose-built』に近い。 KPI hero・target 線つき推移・時間帯バー・チャネル donut+分布バー・予算 Meter・12行ランキングをほぼ全部 kit 部品で組めた。構造的な手組みは実質ゼロ。チャートと一切戦わなかった。

これまで運輸アークは ops コンソール（キュー/記録/盤）中心だったが、今回はアナリティクス側＝チャート床を初めて運輸でストレステスト。結果は全 zero-friction：

越境したチャート/アナリティクス床

• KPI hero → AnalyticsCard+Delta（日車営収/総水揚/実車率/稼働率・前日比・稼働率低下で riskIncrease が赤）。Delta は表セル内でも合成でき（前日比カラム）、符号ごとのトーン上書きで「予算超過/未達」も表現。「kit で最も設計の良い atom。」
• 営収推移 → LineChart（referenceValue+referenceLabel で予算/目標の破線が無料＝アナリティクスの本命）。formatValue で compact 円。
• 時間帯別 → BarChart vertical（ピーク帯を per-bar color で強調）。
• 獲得チャネル構成比 → LabeledDonutCard（中心に総水揚のカード型 donut）＋DistributionBar（1本バー）＝2つの良い選択肢。
• 予算達成 → Meter direction="fill-is-good"（容量型「満杯=悪」でなく「目標に満ちる=良」モード）。
• 期間フィルタ → ToggleGroup disallowEmpty（本日/今週/今月）。

cold AI「汎用チャートライブラリなら軸/スケール/凡例/ツールチップを自分で配線するが、ここは LineChart+referenceValue・BarChart・LabeledDonutCard・DistributionBar・AnalyticsCard・Delta・Meter(fill-is-good) が実 revenue ダッシュボードのウィジェットに1:1。期間トグルが下のデータ配列を差し替えるので同じチャートが3データセットに live で再描画＝『データ編集コントロール』要件も構造的に満たす。」

観測の核 — 唯一の穴＝Leaderboard/RankingTable

cold AI「乗務員別ランキングが唯一の本当の穴。ランキング/リーダーボード primitive が無い。 DataTable＋手組み rank バッジ＋PersonCell＋Delta で組んだ。索引すら『ランキング/リーダーボードは DataTable/ListCard』と正直に認める＝専用部品が無い。 Leaderboard/RankingTable が欲しい：rank 列（メダル/数値・top3 強調）・主指標列にバー/スパークライン・rank-change delta・自分/優良の行ハイライト——全部手で再構築した。」

→ #395 起票。売上担当・運転士・支店・代理店・商品——あらゆる back-office で普遍のランキング＝1回目。ChartColor の型推論 papercut（per-point color が string に広がり as キャスト要）も併記。

今回 src build なし（4/5・チャート床越境＋Leaderboard 起票）。

学び — 「アナリティクス床は、ops 床とは別系統で既に成熟していた」

運輸アークで toB は ops コンソール（DataTable/ActionQueue/SignedRecord/Meter/盤）を4モード確かめてきた。だが #143 で初めて**アナリティクス系統（LineChart/BarChart/DonutCard/DistributionBar/AnalyticsCard/Delta）**を運輸でストレスし、全 zero-friction。つまり群青には2つの成熟した toB 系統がある：

• ops 系統（監視・記録・キュー・盤）＝14業種＋4交通モードで確認済み。
• analytics 系統（チャート・KPI・トレンド・構成比）＝今回 運輸でも確認、汎用チャートライブラリ以上に「描くだけ」。

残る穴も系統別：ops 側は「データの形（board/time-distance）」「軸（期限）」で埋めてきた。analytics 側の穴は Leaderboard（ランキング）——KPI/トレンド/構成比/分布は揃うが「順位づけ」だけ専用部品が無い。アナリティクスの最後のピースが見えた。

📊 結晶化スコアボード（build 済 14個）

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge 進行中：BottomActionBar 3/3接近・Leaderboard 1/3・StatusLevel 2/3・TransitItinerary 2/3・LineChip 2/3

📋 モード進捗

• ✈️🚆 航空/鉄道：各 toB5+toC6 ✅／🚌 バス：toB2+toC3
• 🚕 タクシー：toB 3枚（配車/乗務員/営収） ／ 残り toC（呼出アプリ）

次回予告（やってみた #144）

• タクシー toC 配車アプリ（呼出・到着まで○分・料金見積・乗車・決済）＝モバイル消費者床の4モード目越境＋リアルタイム呼出 archetype（BottomActionBar 4回目で build トリガーに）。

試す

• gunjo.jp ／ アナリティクスカード AnalyticsCard ／ 折れ線 LineChart ／ デルタ Delta ／ npm @gunjo/ui ／ GitHub ／ 前回まで #1〜#142
• GunjoUI by UIXHERO

チャート床が「cold で最も purpose-built」と評され、唯一の穴はランキング——群青には ops と analytics の2つの成熟した toB 系統があり、最後のピースは Leaderboard。

---

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