The charts held, but the money-formatting layer around them was empty

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. Banking again, one layer deeper: an ⁠asset dashboard⁠ (total assets, day-over-day change, an asset trend chart, an allocation donut, a holdings table).

A reader set the policy: several screens per industry before moving on. #32 was the transfer flow (the form layer); this round probes the same bank's ⁠chart and visualization layer⁠.

Result: 4/5

tsc and build passed, the console stayed clear, I verified 375px and desktop, the page had a single h1, and gains and losses never leaned on color alone (sign and arrow included).

The chart layer was the real thing

Financial data is where charts go to die (unrealized losses are negative, yen amounts are huge, the data is a time series, allocations must sum to 100%). The agent's assessment:

⁠The chart layer holds up against real data.⁠ LineChart is an SVG that follows the container width (no fixed width), ⁠draws negative values correctly⁠ (one-year red, all-time green, confirmed on the device), and takes a referenceValue for the zero line. DonutChart uses conic-gradient, normalizes to 100%, and colors from the tokens. Statistic and AnalyticsCard show gains and losses with ⁠icon plus sign plus color⁠, never color alone.

On top of that, ⁠ToggleGroup disallowEmpty (issue #170), shipped after #31, powered the period switcher (1M, 3M, 6M, 1Y, all) and was praised as "a real segmented control you can drive from the keyboard."⁠ A fix from two rounds back paid off again.

The new gaps piled up in the number-formatting layer, two rounds running

Gaps that generic screens never surfaced came spilling out of a screen made of financial numbers:

• 🟠 ⁠No currency or number formatting utilities⁠ (the biggest gap). defaultChartValueFormatter is hard-coded to en-US, with no yen, no sign handling, no compact notation. Total assets, KPIs, cells, tooltips, the donut center: everything needs yen formatting, so the agent hand-rolled it. ⁠The transfer screen in #32 hand-rolled the same yen and signedYen helpers, which makes two rounds in a row⁠ (issue #180).
• 🟠 ⁠AnalyticsCard locks its title to <h3>⁠, breaking the heading order in a KPI row (issue #181, the same heading family as CardTitle issue #116 and AlertTitle issue #163).
• 🔴 ⁠The vertical ChartLegend triggers horizontal scrolling on long values⁠ (¥4,100,000 at 33.5% refuses to shrink and pushes past the page width, issue #182).

What I fixed this round

Three fixes went into source safely (PR #187):

• ⁠formatCurrency, formatNumber, and formatPercent⁠ (issue #180): JPY defaults with sign and compact-notation support, shipping the formatting that fintech, ecommerce, and analytics screens kept hand-rolling. A runtime utility needing no .pen (the design-source format), published as a Utility alongside cn and ThemeProvider.
• ⁠AnalyticsCard titleAs⁠ (issue #181), delegating to CardTitle's as, with the h3 default unchanged.
• ⁠The ChartLegend overflow fix⁠ (issue #182): the label shrinks first and the value truncates last, ⁠horizontal scrolling confirmed gone in a browser⁠.

Period controls (issue #183), chart heights and baselines (issue #184), a consolidated look at chart tones, axes, and series (issue #185), and the chart docs page returning 404 (issue #186) went to the issue tracker.

What I took away: same industry, different layer, different gaps

Bank #32 (the form layer):  Form's hidden accessibility bug (issue #175)
Bank #33 (the chart layer): missing number formatting (issue #180), headings (issue #181), legend overflow (issue #182)

⁠Going deep on an industry means changing layers screen by screen, and each layer surfaces what a single screen cannot.⁠ The charts themselves were strong; the empty part was the layer that dresses financial numbers around them. The reader's "several screens before moving on" was the right call.

Next up: build log #34

• ⁠A bit more banking⁠ (a loan-review screen, or statements and transaction history), or another money-heavy industry.

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 through #32
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.