Build a dashboard that stays current
Charts that update when the server changes, without a refresh button.
The problem
A dashboard is only useful if the numbers are current, and most dashboards are current only at page load. The usual patch is a refresh button, or a timer that re-fetches everything every thirty seconds whether or not anything changed.
The real failure is quieter: nobody notices stale data. A number that is twenty minutes old looks exactly like a number that is correct, and decisions get made on it.
What you are building
Live surfaces, not screenshots — every one composed from the same components you would install.
Analytics dashboard
fancy-echarts with a stat band above it; the chart is the real ECharts, not an image.
The code
// An option object, not an imperative instance: no ref, no setOption, nothing to
// forget on update. A charting library that owns its own DOM is how dashboards
// end up stale without saying so.
<EChart
style={{ height: 240 }}
option={{
xAxis: { type: "category", data: months },
yAxis: { type: "value" },
series: [{ type: "bar", data: revenue }],
}}
/>// First paint is server data rather than a spinner; the panel then refreshes
// when its data actually changes. Polling is a tax you pay forever.
const { data } = useHydratedQuery({
queryKey: ["revenue", period],
initialData: page.props.revenue,
});
useEchoInvalidation("orders", ["revenue"]);How to solve it
Lay the page out with the primitives
Cards, tables, layout shells and stat blocks from the core library, so the dashboard chrome is not hand-rolled.
Run thisbash npm install @particle-academy/react-fancyAdd charts
A React wrapper over Apache ECharts — the full chart vocabulary, driven by props rather than by an imperative instance you have to manage.
Run thisbash npm install @particle-academy/fancy-echartsWire the data through the server-state layer
TanStack Query, Inertia hydration and Echo-driven invalidation together: the page arrives hydrated, then invalidates when the server says something changed. No polling, and no refresh button.
Run thisbash npm install @particle-academy/fancy-queryLet an agent read the charts too
The charts bridge exposes the same chart state to an assistant, so "why did this dip?" can be answered against the data on screen rather than a screenshot of it.