Skip to main content

Command Centers

7 pages

A whole desk on one screen: headline numbers, the run against plan, and what decides it.

Where is revenue heading, and which stores carry it?

Analytics, scrolling and selection together on one retail use case: four KPIs, a monthly revenue LineChart with its average line, linear trend and a six-month seasonal forecast band (analytics[]), a 60-store BarChart ranking that scrolls with scrollbar="auto" and maxVisibleItems={16}, and a margin × revenue ScatterChart whose lasso (explicit confirm) drives the ranking and a selection-share KPI through createLocalSelectionDriver. Container-query layout, tokens only.

3 examples

What did the site draw, what did the market charge — and what did a period cost?

Two hourly series on one window: a LineChart of the spot price owns the navigator strip (scrollbar="miniChart", controlled window + onWindowChange) and an AreaChart of site consumption follows it through xDomain, with a 24-hour rolling mean and a one-sigma band from analytics[]. Preset buttons (24 h / 7 days / 30 days / All) jump the window; a range on the consumption chart's time axis picks a period, and the KPIs price it hour by hour — consumption × spot price — so the effective $/MWh the site pays sits beside the simple average.

4 examples

Which service pages, on which days — and what did it cost the on-call?

Two selection fields on one screen: an AreaChart of incidents per day whose time-axis range picks days, a horizontal BarChart of incidents by service whose click or axis range picks services, and a DataTable of the pager log that lists the intersection — with four KPIs (count, median time to resolve, severe share, still open) computed from the same rows. Both charts share ONE createLocalSelectionDriver (fields day and service) and paint their own field's states; severity is a StatusBadge with a glyph, so colour is never the only channel.

3 examples

Will we make the date, and what is in the way?

A launch on one screen: the Gantt carries the plan with summary rows, dependencies, a baseline under the task that slipped, a milestone and markers for today and go-live; selecting a task spells out its dates, baseline, what it waits for and its progress in a Descriptions panel. The headline counts the days left and the tasks past baseline.

2 examples

What is happening right now, and what needs me?

An operations wall that moves: a LiveLineChart streaming one reading a second, three Gauge dials with their targets on the dial, a Timeline of what the on-call already knows, services sorted worst first with a Sparkline and a status badge each, and a HeatmapChart of when the load arrives. The headline is computed from the services; paused freezes the stream.

3 examples

Where is the market, and what moved it?

A rate desk: a tape of lanes across the top with price, move and a 20-day Sparkline each, over a CandlestickChart of the index and a BarChart of daily volume. Every move carries an arrow and a sign as well as a colour; the chart title is computed from the first open and the last close.

2 examples

How is the quarter going, and what decides it?

A revenue desk in one block: a MetricGrid of four headline numbers that each name their baseline and carry a 13-week Sparkline, a ComposedChart of weekly revenue with its trailing average against a labelled plan rule, a donut PieChart of the service-line mix, a BumpChart of which line is climbing, and the accounts that decide the quarter with a Meter each. Container-query layout, so it holds in a dashboard column and on a full page.

4 examples