HeatmapChart finally landed in the job it was actually built for

⁠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 sixth staff-facing taxi round⁠ covered ⁠demand forecasting and dispatch optimization⁠: an area-by-time heatmap, a supply and demand map, forecasts, and optimization suggestions.

Result: 4/5. Forecasting and optimization fit the analytics foundation

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

⁠The analytics side of this library was clearly made for this screen.⁠ Its two main pieces, HeatmapChart and ChoroplethMap, fit with almost no adaptation. Components that would have been baggage on a consumer or transaction screen were finally doing their real work.

The core observation: HeatmapChart moved from false lead to proper home

Earlier in the series, the by-use-case catalog had misdirected the agents to HeatmapChart: bus crowding in #138 and a taxi status board in #141. I corrected both in PR#389 and PR#393: a crowding level belongs in a badge, a status board belongs in StatusBoard, and ⁠neither is a heatmap.⁠

Here the agent used it for the right job:

⁠HeatmapChart finally had a perfect home.⁠ data {x,y,value} plus xLabels and yLabels mapped one-to-one onto areas as rows and time bands as columns. Color intensity came automatically; onCellSelect opened cell details; each cell was a <button> with aria-label and aria-pressed. It matched the docstring's weekday-by-time intensity example, with area replacing weekday.

This confirmed the catalog corrections. Moving HeatmapChart away from crowding pills and status boards was right, while its true scope remained valuable: ⁠a matrix whose values are encoded by color intensity.⁠ Correct guidance needs both edges of the boundary, where a component does not belong and where it does. ChoroplethMap also proved an unexpectedly good fit for supply and demand geography plus ranking.

What it flagged: only the confidence band had no home

⁠The only thing with no home was a confidence band.⁠ LineChart had multiple series and horizontal referenceValue lines but no concept of filling the space between two series. The agent approximated upper and lower bounds as two muted lines, but without the filled band four series became cluttered. The area variant fills each series to the baseline, not the interval between them.

I opened issue #400 for a band mode on LineChart or an ⁠AreaRangeChart⁠, accepting {label,value,lower,upper} for a central line plus lower-to-upper fill. Forecast confidence intervals, observed ranges, and min-to-max bands all need it. I also noted that both heatmaps and choropleth maps force consumers to hand-roll a light-to-dark color-scale legend.

⁠Nothing new was added under src this round.⁠ The 4/5 established the proper role of HeatmapChart, confirmed ChoroplethMap, and logged the missing confidence band.

What I took away: scope needs both a no and a yes

The path of HeatmapChart captured how a component boundary becomes precise:

• #138 and #141 supplied ⁠false leads⁠, so the catalog learned where the component does not belong.
• #146 supplied the ⁠right job⁠, an area-by-time intensity matrix, so the catalog learned where it does.

Building StatusLevel or StatusBoard for the displaced patterns and finding the correct role for HeatmapChart are two sides of the same scope decision. The component itself did not change, but three screens fully mapped its place. Clarifying a boundary can improve the catalog even when no component is added.

📊 Component scoreboard (⁠14 built⁠)

Earlier components plus Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge In progress: AreaRange or a confidence band, DesktopPageHeader at four cases, CaseTable and Leaderboard as DataTable skeletons, and BottomActionBar at three of three.

📋 Taxi progress

• 🚕 ⁠Taxi: six staff screens (dispatch, drivers, revenue, fleet, complaints, demand forecasting)⁠ / no passenger screens yet

Next up: build log #147

• With six staff screens complete and HeatmapChart finally in its proper role, I'll decide whether to test passenger ride hailing or leave taxi there.

The run

• ⁠gunjo.jp⁠ / ⁠HeatmapChart⁠ / ⁠ChoroplethMap⁠ / ⁠Delta⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #145
• ⁠GunjoUI by UIXHERO⁠

A component once used as a false lead finally landed in its proper area-by-time matrix. Accurate scope comes from establishing both where a component does not belong and where it does.