Cash runway
days
Charts
Signature set
The charts that make the Octagon OS dashboard recognisable — copied exactly, motion included. Change the controls: every chart answers.
Diverging bars
Income up, expense down, mirrored on zero. Hover, tap or arrow-key a month; switch the period, year or mode and the bars grow again from the middle.
JanFebMarAprMayJunJulAugSepOctNovDec
| Prop | Values | Default | What it does |
|---|---|---|---|
labels / a / b | string[] · number[] · number[] | — | Periods and the two flows |
aLabel / bLabel | string | 'Income' · 'Expense' | Names in the tooltip |
show | 'both' | 'a' | 'b' | 'both' | Both sides with net, or one side |
title(i) / format(v) | functions | — | Tooltip heading; how numbers read |
max / height | number · px | auto · 340 | Axis top (rounded automatically); plot height (250 on phones) |
Donut
Rounded slices with gaps, the hatched “other”, a warm glow. Hover a slice or its legend row.
Expense analysis · 2026
- Materials37%
- Labour24%
- Vehicles21%
- Other18%
Expense ratio · 2026 63%
20262025
Spending is 62.7% of income, 2.4 points lower than 2025.
Segment bar
The income split: strips sized by share above their figures.
Income overview · 2026
Contracts €207,666 54%
Change orders €96,142 25%
Retention released €80,759 21%
3D skyline
One block per job, height by budget. Drag or throw it to turn; click a block.
ActivePlanningDone Drag to turn · click a block to open it
Vitals cards
Saturated gradients, grain, thin white drawings and a lime dot that breathes. The ellipse stacks breathe with the scroll.
Overdue bills
Needs a look bills
Profit margin
Healthy %
Jobs over budget
of 47 jobs
Low risk LowMediumHigh
Jobs finished on time
%
Optimal 0100
Crew load · next week
% Crew insight
23 of 40 crew-days are booked. Room for 17 more.
Glow bars
One figure over a few periods, big and calm: soft frosted bars, one lit — glossy and glowing, its value in a white pill. Point, tap or arrow to another period and that one lit bar glides across and takes its height, so the chart feels like one living object.
Spent this week
€1,284.60
Thu 15Fri 16Sat 17Sun 18Mon 19Tue 20Today
Came in this week
€12,600.00
Thu 15Fri 16Sat 17Sun 18Mon 19Tue 20Today
| Prop | Values | Default | What it does |
|---|---|---|---|
items | { label, value }[] | — | One bar each |
highlight | number | the last | The bar lit at rest |
tone | 'violet' | 'blue' | 'orange' | 'green' | 'violet' | From the chart palette: blue income, orange expense |
format · height · label | | — |
Tick wave
The loan bar grown into a wave: a few fine ticks per period, each as tall as its value; the periods so far run red → green, the rest stay grey. It rises in as a wave from the left; under the pointer the ticks swell like a magnifier and a pill names the period. Arrow keys move along it.
Spent this month · October
21 Oct · €1,284.60
1 Oct31 Oct
| Prop | Values | Default | What it does |
|---|---|---|---|
values | (number | null)[] | — | null = a period still to come (grey) |
labels | string[] | — | One per value, for the pill and the ends |
per | number | 4 | Ticks per period |
format · height · label | | — |
Track bars
Each period a full-height soft track with its value filled from the bottom; one bar lit, its value in a white pill. Good for a goal over time: saved against remaining, spent against a normal day.
Spent each day
Monthly goal · billed
| Prop | Values | Default | What it does |
|---|---|---|---|
items | { label, value | null }[] | — | null = an empty track |
max | number | largest value | What a full track means |
highlight | number | last with a value | The lit bar |
tone | 'blue' | 'orange' | 'green' | 'violet' | 'violet' | From the chart palette |
format · height · label | | — |