# Installation

> Package `@umriss-ui/calculation`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/calculation/installation/>. Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/calculation/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/calculation/llms-full.txt).

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.

```ts
import { Calculation, Given, Difference, Quotient, Ref } from "@umriss-ui/calculation";
```

```sh
npm install @umriss-ui/calculation @umriss-ui/core
```

Demo page: https://romanhaendler.github.io/umriss-ui/calculation/installation/

The command brings the core package along, a peer dependency: it gives the calculation its formats, its wording and the assessment of targets and limits. React 19 or newer is a peer as well and stays the application's own.

The stylesheet loads itself: the package imports it and marks CSS as a side effect, so a bundler keeps it. `@umriss-ui/calculation/styles.css` stays exported for setups that link stylesheets by hand.

You write the figure as elements and hand in only the givens; the calculation performs every operation it shows, so the screen cannot disagree with the number. Start with [Calculation](https://romanhaendler.github.io/umriss-ui/calculation/calculation/).

## Examples

### The availability of a service

Write the figure as elements; the calculation computes every number on the screen and assesses the result against its `target`.

```tsx
import { Calculation, Difference, Given, Quotient, Ref } from "@umriss-ui/calculation";

export default function Availability() {
  return (
    <Calculation aria-label="Availability of Checkout, March so far">
      <Quotient label="Availability, Checkout" format="percent" decimals={2} target={0.9995}>
        <Difference label="Minutes up" unit="min">
          <Given id="month" label="Minutes this month" value={23670} unit="min" />
          <Given label="Minutes down" value={34} unit="min" />
        </Difference>
        <Ref to="month" />
      </Quotient>
    </Calculation>
  );
}
```

## Keyboard

The keys of [Calculation](https://romanhaendler.github.io/umriss-ui/calculation/calculation/#keyboard-calculation) apply here.

## Props on this page

From `CalculationProps` — the full table stands on [Calculation](https://romanhaendler.github.io/umriss-ui/calculation/calculation/#type-CalculationProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/calculation/calculation/#CalculationProps-children) *required* | `ReactNode` | — | The result: exactly one quantity - a tree (`<Sum>`, `<Difference>`, `<Product>`, `<Quotient>` with their operands, `<Given>` as leaves) or a `<Chain>`, the two mixing freely; `<Ref>` for a quantity defined elsewhere. |

From `OperatorProps` — the full table stands on [Tree](https://romanhaendler.github.io/umriss-ui/calculation/tree/#type-OperatorProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-children) | `ReactNode` | — | The operands, in order: quantities, givens and references. |
| [`label`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-label) *required* | `string` | — | What the quantity is called. It stands on its line, wherever it is an operand, and in the accessible sentence. From `QuantityProps`. |
| [`id`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-id) | `string` | — | Makes the quantity referable: `<Ref to>` stands for it elsewhere. Needed only for a quantity used more than once. From `QuantityProps`. |
| [`unit`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-unit) | `string` | — | A label written after the number - "min", "pcs", "€". Never converted and never checked; the calculation does no unit algebra. From `QuantityProps`. |
| [`format`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-format) | `"percent"` | — | `percent` presents a plain ratio as per cent: 0.916 is shown as 91.6 %. The quantity stays a ratio in every operation. From `QuantityProps`. |
| [`decimals`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-decimals) | `number` | one digit for a percentage, at most two for a derived number, a given as it was given | Fixed number of fraction digits as shown. Rounding happens only in presentation; every operation uses the full value. From `QuantityProps`. |
| [`target`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-target) | `number` | — | The value this quantity is meant to reach - missed, never violated. From `QuantityProps`. |

From `RefProps` — the full table stands on [Tree](https://romanhaendler.github.io/umriss-ui/calculation/tree/#type-RefProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`to`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#RefProps-to) *required* | `string` | — | The `id` of the quantity this reference stands for. |

From `ChainOperandProps` — the full table stands on [Chain](https://romanhaendler.github.io/umriss-ui/calculation/chain/#type-ChainOperandProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`id`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-id) | `string` | — | Makes the quantity referable: `<Ref to>` stands for it elsewhere. Needed only for a quantity used more than once. From `QuantityProps`. |
| [`unit`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-unit) | `string` | — | A label written after the number - "min", "pcs", "€". Never converted and never checked; the calculation does no unit algebra. From `QuantityProps`. |
| [`format`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-format) | `"percent"` | — | `percent` presents a plain ratio as per cent: 0.916 is shown as 91.6 %. The quantity stays a ratio in every operation. From `QuantityProps`. |
| [`decimals`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-decimals) | `number` | one digit for a percentage, at most two for a derived number, a given as it was given | Fixed number of fraction digits as shown. Rounding happens only in presentation; every operation uses the full value. From `QuantityProps`. |
| [`target`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-target) | `number` | — | The value this quantity is meant to reach - missed, never violated. From `QuantityProps`. |

From `QuantityProps` — the full table stands on [Chain](https://romanhaendler.github.io/umriss-ui/calculation/chain/#type-QuantityProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`label`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-label) *required* | `string` | — | What the quantity is called. It stands on its line, wherever it is an operand, and in the accessible sentence. |
| [`id`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-id) | `string` | — | Makes the quantity referable: `<Ref to>` stands for it elsewhere. Needed only for a quantity used more than once. |
| [`unit`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-unit) | `string` | — | A label written after the number - "min", "pcs", "€". Never converted and never checked; the calculation does no unit algebra. |
| [`format`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-format) | `"percent"` | — | `percent` presents a plain ratio as per cent: 0.916 is shown as 91.6 %. The quantity stays a ratio in every operation. |
| [`decimals`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-decimals) | `number` | one digit for a percentage, at most two for a derived number, a given as it was given | Fixed number of fraction digits as shown. Rounding happens only in presentation; every operation uses the full value. |
| [`target`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-target) | `number` | — | The value this quantity is meant to reach - missed, never violated. |

From `GivenProps` — the full table stands on [Given](https://romanhaendler.github.io/umriss-ui/calculation/given/#type-GivenProps).

| Prop | Type | Default | Description |
|---|---|---|---|
| [`value`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-value) *required* | `number \| null \| undefined \| `[`MetricValues`](https://romanhaendler.github.io/umriss-ui/calculation/given/#type-MetricValues) | — | The number the calculation starts from. Absent (`null`, `undefined`, not finite) makes every quantity that depends on it absent, with the reason - never zero. Where the calculation has `metrics`, an object with a number for each metric id instead; absence then stays in its metric. |
| [`label`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-label) *required* | `string` | — | What the quantity is called. It stands on its line, wherever it is an operand, and in the accessible sentence. From `QuantityProps`. |
| [`id`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-id) | `string` | — | Makes the quantity referable: `<Ref to>` stands for it elsewhere. Needed only for a quantity used more than once. From `QuantityProps`. |
| [`unit`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-unit) | `string` | — | A label written after the number - "min", "pcs", "€". Never converted and never checked; the calculation does no unit algebra. From `QuantityProps`. |
| [`format`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-format) | `"percent"` | — | `percent` presents a plain ratio as per cent: 0.916 is shown as 91.6 %. The quantity stays a ratio in every operation. From `QuantityProps`. |
| [`decimals`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-decimals) | `number` | one digit for a percentage, at most two for a derived number, a given as it was given | Fixed number of fraction digits as shown. Rounding happens only in presentation; every operation uses the full value. From `QuantityProps`. |
| [`target`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-target) | `number` | — | The value this quantity is meant to reach - missed, never violated. From `QuantityProps`. |