Fix chart y axis and other small styling tweaks

[tudddorrr]

No description provided.

[claude]

PR Review: Fix chart y axis and other small styling tweaks

---

🟡 Code Quality / Performance

useMemo memoization is broken due to inline transformer functions

In useYAxisWidth, the memo depends on [data, transformer]:

const yAxisWidth = useMemo(() => {
  const maxValue = Math.max(...transformer(data), 0)
  return maxValue.toLocaleString().length * pxPerChar
}, [data, transformer])

Every caller passes an inline arrow function, which creates a new reference each render:

// BarChartCard.tsx — new function reference every render
const { yAxisProps } = useYAxis({
  data,
  transformer: (d) => {
    return d.flatMap((item) => bars.map((bar) => ...))
  }
})

Since transformer always has a new identity, the useMemo recomputes on every render, making it a no-op. Callers should wrap their transformer in useCallback, or the hook can use a ref pattern to avoid the stale closure issue:

const transformerRef = useRef(transformer)
transformerRef.current = transformer

const yAxisWidth = useMemo(() => {
  const maxValue = Math.max(...transformerRef.current(data), 0)
  return maxValue.toLocaleString().length * pxPerChar
}, [data])

---

🔵 Minor

StatGlobalValueChart missing hasData prop — inconsistent with new pattern

BarChartCard passes hasData={data.length > 0} to ChartCard, which triggers the "No data for this date range" message. StatGlobalValueChart does not pass hasData, so ChartCard defaults to true and renders an empty chart instead of the message when dataPoints is empty:

// StatGlobalValueChart.tsx — hasData not passed
<ChartCard
  title='Global value'
  loading={loading}
  error={error}
  // hasData={dataPoints.length > 0}  <-- missing
>