Build: The Dashboard in React

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

mount point

The one element, <div id="root">, that React draws into.

D3Box

Our wrapper in src/parts/D3Box.jsx: it hands one empty <div> to a plain D3 chart and cleans up after it.

adapter

A small function that makes a chart with a different shape look like draw(container, data, options), as map-with-trips.js does.

portal

createPortal(children, element): React draws children inside an element that is outside its own root, such as #kpis.

useLoad

Our small hook in App.jsx: it runs a loader once and reports loading, ready or error.

state per box

Each box decides on its own what to show: loading text, an error, or the chart.

1. 1

   Break one file

   In the example's stand-in loaders change "station-month.csv" to "stations-month.csv". The stations box and the stacked months box each show 404 Not Found, and the console prints stations bars in July: 0 and stacked 0. The rides line, heatmap and treemap still work: that is the point of one state per box.

2. 2

   Make every month empty

   In StationsBox change d.rides > 0 to d.rides > 1e9. The console prints stations bars in July: 0 and the box shows No stations had any rides in this period. instead of an empty frame.

3. 3

   Mount one more chart in one line

   The heatmap box is <D3Box draw={drawJuneHeatmap} data={june.value} />. Write the same line for another plain chart you built and it is on the page: D3Box asks only for draw(container, data, options).

Your lumen-dashboard project after this topic. Click a file to see it in full.

// Vite's settings. The React plugin turns JSX (the HTML-looking code in .jsx files) into plain JavaScript calls.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Arjun's need is met. The dashboard runs as React components, mounted by src/main.jsx. It can be dropped into the company's app as one <App />, shares its React and its login, and its parts can take props from the app's own state. The company's pages did not have to learn D3, and the team did not have to rewrite eight charts.

2. 2

   Starting point: the Phase 13 dashboard. This is the newest committed complete build: the Vite project with the loaders (src/data/load.js, clean.js), format.js, config.js, the themes (theme.css, charts.css, resize.js), the rides line with crosshair, brush and presets, the stations chart, the stacked months, the June heatmap, the station map with hit-testing and its trips layer, and the fleet treemap. Every one of those files stays exactly as Phase 13 left it, except src/main.js, which index.html no longer loads (delete it; main.jsx and App.jsx replace it).

3. 3

   The pattern: D3 owns the DOM inside a ref. src/parts/D3Box.jsx renders one empty <div> and never looks inside it. In an effect it calls the chart's own draw(container, data, options), remembers the { update, resize } it returns, calls update(data) when the data prop changes, calls resize(width) when the box changes width, and in its cleanup removes everything the chart drew. That is the one-owner rule of Topic 14.1 and the cleanup rule of Topic 14.2, written once. The stacked months, the heatmap and the treemap are one line each: <D3Box draw={drawStationsStacked} data={data} />.

4. 4

   The map is the same wrapper with a small adapter. The station map and its trips layer need each other and need redrawing after a theme change, so src/parts/map-with-trips.js draws both and returns one { update, resize, destroy }. src/utils/theme.js now holds the theme button's code and lets a chart listen for theme changes, because the old main.js kept that in a variable that React cannot reach. The hit-testing, the keyboard arrows and the click handler inside the map are untouched.

5. 5

   Two charts are rewritten, as showcases. RidesLine.jsx is Topics 14.1 and 14.2 together: scales and path text in useMemo, JSX marks, the axes and the brush drawn by D3 into empty <g> refs with cleanup, and the crosshair as React state. It keeps the keyboard reading, the tap tooltip, the quietest-day note, the gaps, the reveal of the first draw, the small-screen layout, and the brush and the June, Summer and Whole year buttons. StationsBar.jsx is Recharts (Topic 14.4) with the shared maximum and the summed months kept. The picked dates are one range state in App.jsx that the brush, the buttons and the stations chart all read.

6. 6

   What the dashboard can do now that it could not before: run inside any React app, re-render from props and state, show each chart's loading, error and empty state separately (a failed stations file no longer hides the rides chart), and be driven by the app's own state. Everything it could do before still works: the key numbers, loaders and cleaning, all seven charts, the brush and presets, motion, the light, dark and automatic themes, redraw on resize, the map's hit-testing and keyboard use, and the hand-made week and low-stations pictures.

7. 7

   Still missing: the table twin and full accessibility work (Phase 15), a live feed, filters and tests (Phase 16), and the polish of the story pages (Phase 17).

• ↔

  A React dashboard is easier to embed and to drive from app state, and it costs a React runtime and a build step the plain version did not need (the bundle grew from the plain project's size to 687.88 kB, 212.43 kB gzipped).

• ↔

  D3Box keeps old charts working at no cost, and leaves them outside React's rendering: their output is not server-rendered and React tools do not see inside them. Rewrite a chart in React only when you need that.

• I can add React and Recharts to a Vite project and switch index.html to mount points.

• I can write D3Box and explain why its cleanup empties the box.

• I can mount an existing plain D3 chart with one line, and an adapter when two charts depend on each other.

• I can write a loader hook and give each box its own state.

• I can run npm run build and read its size line.