# @umriss-ui/calculation

> React calculation view for data-dense applications - a derivation written as it is shown, evaluated by the library, folded and read line by line.

Version 0.5.0. Install with `npm install @umriss-ui/calculation @umriss-ui/core`. Each link below leads to that page as Markdown. Every page below in full - its examples' source, its props tables generated from the code, and what it deliberately does not do - stands in one file: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/calculation/llms-full.txt). The npm package carries the same text for the installed version as `docs/llms-full.md`; prefer that one when the package is installed.

## Scenarios

Composed, realistic screens built from the package.

- [Check a service's availability for the month](https://romanhaendler.github.io/umriss-ui/calculation/index.md): A team lead at Quillmere checks, before the monthly review, whether a service keeps its availability promise and how much error budget is left.
- [Price a tour](https://romanhaendler.github.io/umriss-ui/calculation/index.md): A dispatcher at Ferrow Parcel prices a day's tour - energy, driver and vehicle - to see what each stop costs before quoting a customer.
- [Check an invoice before approving it](https://romanhaendler.github.io/umriss-ui/calculation/index.md): A cost-centre owner or the finance team at Carrow & Lisle checks what an invoice adds up to - discounts, VAT per rate - before signing it off.
- [Explain the shift's OEE](https://romanhaendler.github.io/umriss-ui/calculation/index.md): A shift lead at Brenholt Tile Works explains at the 10:30 handover why the kiln line's OEE stands where it stands.

## Getting started

What a calculation is for, and what an application sets up before the first one.

- [Installation](https://romanhaendler.github.io/umriss-ui/calculation/installation.md): Show a figure together with how it came about (a derivation, a statement of account): the operator before each number, the result above a double rule, and every figure opening into the numbers it came from.

## Writing a calculation

Two forms written as elements: a tree for a figure put together from factors, a chain for a sheet read top to bottom.

- [Calculation](https://romanhaendler.github.io/umriss-ui/calculation/calculation.md): Lets a reader follow and redo a figure (also called a KPI tree or calculation tree): each line a quantity with its operator, derived lines folded until opened beneath themselves. Reach for it where a number on the screen gets questioned: a cost, an availability, an invoice total.
- [Tree](https://romanhaendler.github.io/umriss-ui/calculation/tree.md): Sum, difference, product and quotient, each holding its operands: the form for a figure put together from factors, folded to its formula until a reader opens it.
- [Chain](https://romanhaendler.github.io/umriss-ui/calculation/chain.md): A sheet read top to bottom (a running calculation): each line worked into the value before it, and interims naming the value where they stand. Reach for it for invoices, budgets and cost sheets.
- [Given](https://romanhaendler.github.io/umriss-ui/calculation/given.md): The numbers a calculation starts from (inputs, leaves): where they came from, when they were true, and whether they are still fresh.
- [Metrics](https://romanhaendler.github.io/umriss-ui/calculation/metrics.md): Several numbers on every line, side by side (columns, measures): headcount and full-time equivalents of the same teams, summed by the same derivation. Reach for it where one sheet has to answer in more than one unit.

## In practice

What a calculation does when the numbers are not what they should be, and whole figures worked in full.

- [What can go wrong](https://romanhaendler.github.io/umriss-ui/calculation/what-can-go-wrong.md): A number not there yet, a division by zero, rounded figures that do not add up, and a limit crossed inside a folded line: what a calculation shows in each case.
- [Worked examples](https://romanhaendler.github.io/umriss-ui/calculation/worked-examples.md): Whole figures as a screen shows them: the cost per stop of a day's tours, invoices with discount and VAT, and the equipment effectiveness of a hall, each built from data.

## API index

Every name the package exports, in one place.

- [API index](https://romanhaendler.github.io/umriss-ui/calculation/api.md): Everything `@umriss-ui/calculation` exports, with its signature. A component's props stand on its own page.