Taxi revenue put the analytics foundation through its first transport test

⁠Build log series⁠: I give an AI that has never seen Gunjo (@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. ⁠This third staff-facing taxi round⁠ covered a ⁠revenue and performance dashboard⁠ at depot level: trends, time of day, channels, and driver rankings.

Result: 4/5. The analytics foundation crossed intact into transport revenue

The desktop-density screen passed tsc. The agent reported:

⁠For an administrative dashboard of charts and metrics, @gunjo/ui comes closer to purpose-built than any general React UI library I have used without prior context.⁠ Prominent KPIs, a trend with a target line, time-of-day bars, a channel donut and distribution bar, a budget meter, and a twelve-row ranking came together ⁠almost entirely from library components.⁠ There was effectively no structural hand-rolling, and ⁠none of the charts caused trouble.⁠

Previous transport rounds had concentrated on operations consoles with queues, records, and boards. This was the first transport stress test of the analytics side, and every existing component fit without friction.

The analytics foundation that crossed industries

• ⁠Prominent KPIs⁠ used AnalyticsCard with Delta for revenue per vehicle, gross receipts, loaded-distance ratio, and utilization. Selecting variant="riskIncrease" when utilization fell correctly made the card red. Delta also embedded in table cells and allowed tone overrides for over or under budget. The agent called it ⁠the best-designed small component in the library.⁠
• ⁠Revenue trend⁠ used LineChart. referenceValue and referenceLabel added a dashed budget or target line with no extra wiring, the central analytical need. formatValue produced compact yen values.
• ⁠Time of day⁠ used a vertical BarChart, with peak periods highlighted through per-bar color.
• ⁠Acquisition channels⁠ used LabeledDonutCard, with gross receipts in the center, plus DistributionBar as a second useful view.
• ⁠Budget progress⁠ used Meter direction="fill-is-good", where reaching the target is good rather than a capacity filling up being bad.
• ⁠Period filters⁠ used ToggleGroup disallowEmpty for today, this week, and this month.

The agent: ⁠A generic chart library makes me wire axes, scales, legends, and tooltips. Here LineChart with referenceValue, BarChart, LabeledDonutCard, DistributionBar, AnalyticsCard, Delta, and Meter mapped one-to-one onto a real revenue dashboard. The period toggle replaced the data array and redrew the same chart with three datasets, so it also satisfied the data-editing control structurally.⁠

The core observation: Leaderboard was the only gap

⁠Driver ranking was the only real gap. There was no ranking or leaderboard component.⁠ The agent combined DataTable with hand-rolled rank badges, PersonCell, and Delta. ⁠Even the catalog honestly says ranking and leaderboards use DataTable or ListCard, acknowledging the lack of a dedicated component.⁠ A Leaderboard or RankingTable needs a rank column with medals or numbers and top-three emphasis, a bar or sparkline in the primary metric, rank-change delta, and row highlights for the current user or strong performers. The agent rebuilt all of that.

I recorded the first case on issue #395. Rankings recur for salespeople, drivers, branches, agencies, and products across administrative work. I also noted a small inference problem where per-point chart colors widened to string and required a cast to ChartColor.

⁠Nothing new was added under src this round.⁠ The 4/5 confirmed the analytics foundation across industries and logged Leaderboard.

What I took away: the analytics foundation had matured separately from operations

Transport had tested the operations line (DataTable, ActionQueue, SignedRecord, Meter, and boards) across four modes. This first transport test of the ⁠analytics line⁠ (LineChart, BarChart, LabeledDonutCard, DistributionBar, AnalyticsCard, and Delta) found the same maturity. Gunjo has two settled staff-facing families:

• ⁠Operations:⁠ monitoring, records, queues, and boards, confirmed across 14 industries and four transportation modes.
• ⁠Analytics:⁠ charts, KPIs, trends, and composition, confirmed in transport and closer to rendering a real dashboard directly than a generic chart library.

Their remaining gaps differed. The operations family has filled data structures such as boards and time against distance, plus axes such as expiry. Analytics covered KPIs, trends, composition, and distribution but lacked ⁠ranking⁠. Leaderboard was the last visible analytical pattern.

📊 Component scoreboard (⁠14 built⁠)

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge In progress: BottomActionBar approaching three of three, ⁠Leaderboard at one of three⁠, StatusLevel at two of three, TransitItinerary at two of three, and LineChip at two of three.

📋 Mode progress

• ✈️ Air and 🚆 rail: five staff + six passenger screens each ✅ / 🚌 Bus: two staff + three passenger screens
• 🚕 ⁠Taxi: three staff screens (dispatch, drivers, revenue)⁠ / remaining passenger ride-hailing app

Next up: build log #144

• A ⁠passenger-facing taxi app⁠ for requests, arrival estimates, fare estimates, the ride, and payment, testing the mobile passenger foundation in a fourth mode and the real-time request pattern.

The run

• ⁠gunjo.jp⁠ / ⁠AnalyticsCard⁠ / ⁠LineChart⁠ / ⁠Delta⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #142
• ⁠GunjoUI by UIXHERO⁠

The chart foundation was the closest thing to purpose-built the agent had used without context. Gunjo's operations and analytics lines had matured separately; ranking remained the final visible analytical gap.