# What can go wrong

> Package `@umriss-ui/calculation`, version 0.40.0. Demo page: <https://romanhaendler.github.io/umriss-ui/calculation/what-can-go-wrong/>. 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).

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.

```ts
import { Calculation } from "@umriss-ui/calculation";
```

Demo page: https://romanhaendler.github.io/umriss-ui/calculation/what-can-go-wrong/

An absent given is never zero: every quantity that depends on it is absent too, with the reason, up to the result. A quotient by zero is absent with its own reason.

## Examples

### A number that is not there yet

A given with `value={null}` shows as missing, and so does every figure that depends on it – never carried on as zero.

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

const BOOKED = [
  { name: "Luis Moreno", hours: 34 },
  { name: "Hana Sato", hours: 38 },
  { name: "Kofi Mensah", hours: null },
  { name: "Freya Olsen", hours: 36 },
  { name: "David Kowalski", hours: 17 },
];

export default function Missing() {
  return (
    <Calculation aria-label="Utilisation of the Apps team, week 11">
      <Quotient label="Utilisation, Apps team" format="percent" target={0.85}>
        <Sum label="Hours booked" unit="h">
          {BOOKED.map((person) => (
            <Given key={person.name} label={person.name} value={person.hours} unit="h" source="Timesheets" />
          ))}
        </Sum>
        <Given label="Capacity, Apps team" value={172} unit="h" />
      </Quotient>
    </Calculation>
  );
}
```

### A division by zero

A tour that delivered nothing has no cost per parcel – not zero, not infinity; the quotient is absent with its own reason.

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

export default function DivisionByZero() {
  return (
    <Calculation aria-label="Planned cost of tomorrow's parcels, tour T-07">
      <Product label="Cost of tomorrow's 80 parcels" unit="€" decimals={2}>
        <Quotient label="Cost per parcel, tour T-07" unit="€/parcel" decimals={2}>
          <Sum label="Cost of tour T-07" unit="€" decimals={2}>
            <Given label="Driver, standby" value={69} unit="€" decimals={2} />
            <Given label="E-van, one day" value={72} unit="€" decimals={2} />
          </Sum>
          <Given label="Parcels delivered" value={0} unit="parcels" />
        </Quotient>
        <Given label="Parcels planned for tomorrow" value={80} unit="parcels" />
      </Product>
    </Calculation>
  );
}
```

### Rounded figures that do not add up

Operations use full values and only the screen rounds; where the rounded operands miss the rounded result, the line says so with ≈.

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

const PEOPLE = ["Arjun Mehta", "Chloe Durand", "Eva Novak"];

export default function Rounding() {
  return (
    <Calculation aria-label="Shares of the booking app release">
      <Sum label="All three" format="percent">
        {PEOPLE.map((person) => (
          <Quotient key={person} label={`Share, ${person}`} format="percent">
            <Given label={`Hours, ${person}`} value={12} unit="h" />
            <Given label="Hours on the release" value={36} unit="h" />
          </Quotient>
        ))}
      </Sum>
    </Calculation>
  );
}
```

### A limit violated deep inside

A folded line holding a worse verdict says so quietly – without taking the colour itself, since its own number is not the one in alarm.

```tsx
import { Calculation, Chain, Given, Interim, Plus, Product } from "@umriss-ui/calculation";

const ERROR_LIMITS = [
  { value: 0.01, side: "upper" as const, severity: "warning" as const },
  { value: 0.02, side: "upper" as const, severity: "alarm" as const },
];

export default function LimitInside() {
  return (
    <Calculation aria-label="Payments at risk, this morning">
      <Chain>
        <Product label="At risk, Billing" unit="€" decimals={2}>
          <Given label="Error rate, Billing" value={0.004} format="percent" limits={ERROR_LIMITS} />
          <Given label="Payments, Billing" value={24800} unit="€" decimals={2} />
        </Product>
        <Plus>
          <Product label="At risk, Checkout" unit="€" decimals={2}>
            <Given label="Error rate, Checkout" value={0.026} format="percent" limits={ERROR_LIMITS} />
            <Given label="Payments, Checkout" value={19650} unit="€" decimals={2} />
          </Product>
        </Plus>
        <Interim label="Payments at risk" unit="€" decimals={2} />
      </Chain>
    </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`. |
| [`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`. |
| [`limits`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#OperatorProps-limits) | `readonly `[`Limit`](https://romanhaendler.github.io/umriss-ui/calculation/tree/#type-Limit)`[]` | — | Bounds the quantity is assessed against, through core's `assess()`. From `QuantityProps`. |

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

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainProps-children) | `ReactNode` | — | The operands, top to bottom: a first quantity with no operator, then `Plus`, `Minus`, `Times` and `DividedBy` with their operands and `Interim`s naming the value where they stand. The last line is an `Interim`; a `Times` or `DividedBy` stands alone between two named values. |

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

| Prop | Type | Default | Description |
|---|---|---|---|
| [`children`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-children) | `ReactNode` | — | Instead of `label` and `value`: exactly one quantity - a tree, a `<Ref>` or a `<Chain>`. |
| [`source`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-source) | `string` | — | Where the number came from: a system, a report, a person. From `GivenProps`. |
| [`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`. |
| [`limits`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#ChainOperandProps-limits) | `readonly `[`Limit`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#type-Limit)`[]` | — | Bounds the quantity is assessed against, through core's `assess()`. 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. |
| [`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. |
| [`limits`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#QuantityProps-limits) | `readonly `[`Limit`](https://romanhaendler.github.io/umriss-ui/calculation/chain/#type-Limit)`[]` | — | Bounds the quantity is assessed against, through core's `assess()`. |

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. |
| [`source`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-source) | `string` | — | Where the number came from: a system, a report, a person. |
| [`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`. |
| [`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`. |
| [`limits`](https://romanhaendler.github.io/umriss-ui/calculation/given/#GivenProps-limits) | `readonly `[`Limit`](https://romanhaendler.github.io/umriss-ui/calculation/given/#type-Limit)`[]` | — | Bounds the quantity is assessed against, through core's `assess()`. From `QuantityProps`. |