Scott/chart styles

[sagrimson]

Overview

Adds styled bar chart variants (vertical and horizontal) and line chart improvements to chart cards, replaces hardcoded chart dimensions with responsive containers, and fixes several layout issues around card resizing, table scrolling, and wheel event propagation.

Changes Made

• Add DataChartBarVertical and DataChartBarHorizontal components using Recharts BarChart with design token colors, tooltips, compact number formatting, and custom cursors/axis lines
• Refactor DataChartLine to use ResponsiveContainer instead of fixed width/height props; add tooltip, custom cursor, active dot styling, and full-width axis line
• Wire up chart style selector so bar-vertical, bar-horizontal, and line each render the correct chart component
• Fix card auto-height not updating when Recharts renders chart SVGs asynchronously by adding a MutationObserver alongside the existing ResizeObserver
• Fix wheel/scroll propagation in card base — walk from event target up to container to detect any scrollable ancestor, rather than only checking the container itself
• Style the data table view: alternating row backgrounds, sticky thead, standard (non-compact) number formatting, and bottom margin
• Make the chart/table tab panel scrollable when it contains a table (sticky header, overflow-y: auto)
• Increase chart card max height from 520 → 720 to accommodate taller responsive charts
• Adjust chart container CSS to flex-grow and remove bottom padding so charts fill available space

[gemini-code-assist]

Code Review

This pull request introduces horizontal and vertical bar charts, refactors the line chart to be responsive, and updates card auto-height calculations to handle asynchronous SVG rendering via a MutationObserver. Feedback focuses on optimizing wheel event propagation to prevent layout thrashing, fixing visual misalignment bugs in custom chart cursors, simplifying the auto-height observer architecture to avoid performance issues, and removing hardcoded locales to support internationalization.

[PauloMFJ]

Let's use:

Suggested change

	z-index: 1;
	z-index: $z-index-above-content;

[sagrimson]

done!

[PauloMFJ]

Suggested change

	className={clsx(s.panel)}
	className={s.panel}

[sagrimson]

Good catch! done

[PauloMFJ]

I reckon all chart colours should probably just be directly tokenized for ease. I.e:

Suggested change

	const BAR_COLOR = `rgb(${COLORS['card-surface-selected']})`;
	const GRID_COLOR = `rgb(${COLORS['card-chart-grid']})`;
	const AXIS_COLOR = `rgb(${COLORS['card-content-muted']})`;
	const BAR_COLOR = `rgb(${COLORS['card-chart-bar']})`;
	const GRID_COLOR = `rgb(${COLORS['card-chart-grid']})`;
	const AXIS_COLOR = `rgb(${COLORS['card-chart-axis']})`;

[nick-nlb]

In doing the query relating to poverty in South East Asian countries, we encounter a two errors:

intercept-console-error.ts:48 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

We see significant jitter on the chart cards when this error occurs (the error then ocurs repeatedly, indicating an infinite loop, as implied by the error.

Another console error occurs regardless of the query, as long as a chart appears:

forward-logs-shared.ts:95 The width(0) and height(0) of chart should be greater than 0,
       please check the style of container, or the props width(100%) and height(undefined),
       or add a minWidth(0) or minHeight(undefined) or use aspect(1.78) to control the
       height and width.

[nick-nlb]

We've been going with the principle of category-first naming: tooltip_custom (along with this component).

[nick-nlb]

The FRONTEND.md guide specifies no bare hovers (see the Section 8)

[nick-nlb]

The notation specified here is standard, but the formatter itself is still called compactFormatter - we could rename the variable, but perhaps this is a sign that this variable name is overspecified.