We built this in-house to show how the thing works. It was not built for a customer, so there are no business figures anywhere on this page.
The situation
What this kind of business is dealing with
Common in the trade, not a description of anybody in particular. If two or three of these sound like your week, the build below is the shape of the answer.
- The number everyone quotes in the meeting came from an export that is three days old.
- A dashboard already exists, has forty tiles, and nobody looks at any of them.
- Two departments report the same figure differently and both are right.
- Somebody rebuilds the same view every Monday morning.
- Nobody finds out something has gone wrong until a customer mentions it.
What we built
The pieces of it
Each of these exists and runs. Ask for a walkthrough of any one of them.
- A few numbers, chosen on purpose
- The build starts by cutting: which figures would actually change what somebody does today. Everything else goes on a second page, or nowhere.
- Live updates without a refresh
- Figures move as the underlying events happen, over a WebSocket, so the screen on the wall is current rather than current as of whenever it was last opened.
- One definition per number
- Each figure carries its definition next to it, so "active jobs" means the same thing in two departments and the meeting is about the number rather than the maths.
- Trend without decoration
- A small chart under each figure showing where it has been, sized to be read from across the room instead of leaned into.
- Thresholds and alerts
- A figure crossing a line changes colour and sends a message, so noticing does not depend on somebody watching the screen at the time.
- The same view on a wall screen and a phone
- One build for both, with the wall version stripped back to the figures and the phone version keeping the detail behind a tap.
How it works
What actually happens, in order
- 01
Each source system sends events as they happen, or is polled where it cannot.
- 02
Events are written to a store that keeps the history as well as the current value.
- 03
Every figure is calculated from that store against a definition written down in one place.
- 04
Browsers hold a connection open and are pushed the new value when it changes.
- 05
If the connection drops, the page falls back to polling and shows how old the number is.
- 06
Crossing a threshold changes the tile and sends the alert.
- 07
The history behind any figure can be opened, so a surprise gets checked rather than argued about.
The build
Facts about the thing itself
What it is made of. There are no customer figures on this page, because there is no customer.
Built with
- Next.js
- TypeScript
- WebSocket
- PostgreSQL
- Charts