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.
import { Calculation, Given, Difference, Quotient, Ref } from "@umriss-ui/calculation";
npm install @umriss-ui/calculation @umriss-ui/core
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.
Write the figure as elements; the calculation computes every number on the screen and assesses the result against its target.
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>
);
}
The keys of Calculation apply here.
From CalculationProps — the full table stands on Calculation.
| Name | Type | Default | Description |
|---|---|---|---|
childrenrequired | 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.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The operands, in order: quantities, givens and references. |
labelrequired | string | — | What the quantity is called. It stands on its line, wherever it is an
operand, and in the accessible sentence. from QuantityProps |
id | string | — | Makes the quantity referable: <Ref to> stands for it elsewhere. Needed
only for a quantity used more than once. from QuantityProps |
unit | string | — | A label written after the number - "min", "pcs", "€". Never converted
and never checked; the calculation does no unit algebra. from 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. from 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. from QuantityProps |
target | number | — | The value this quantity is meant to reach - missed, never violated. from QuantityProps |
From RefProps — the full table stands on Tree.
| Name | Type | Default | Description |
|---|---|---|---|
torequired | string | — | The id of the quantity this reference stands for. |
From ChainOperandProps — the full table stands on Chain.
| Name | Type | Default | Description |
|---|---|---|---|
id | string | — | Makes the quantity referable: <Ref to> stands for it elsewhere. Needed
only for a quantity used more than once. from QuantityProps |
unit | string | — | A label written after the number - "min", "pcs", "€". Never converted
and never checked; the calculation does no unit algebra. from 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. from 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. from QuantityProps |
target | number | — | The value this quantity is meant to reach - missed, never violated. from QuantityProps |
From QuantityProps — the full table stands on Chain.
| Name | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | What the quantity is called. It stands on its line, wherever it is an operand, and in the accessible sentence. |
id | string | — | Makes the quantity referable: <Ref to> stands for it elsewhere. Needed
only for a quantity used more than once. |
unit | string | — | A label written after the number - "min", "pcs", "€". Never converted and never checked; the calculation does no unit algebra. |
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 | 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 | number | — | The value this quantity is meant to reach - missed, never violated. |
From GivenProps — the full table stands on Given.
| Name | Type | Default | Description |
|---|---|---|---|
valuerequired | | number | — | 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. |
labelrequired | string | — | What the quantity is called. It stands on its line, wherever it is an
operand, and in the accessible sentence. from QuantityProps |
id | string | — | Makes the quantity referable: <Ref to> stands for it elsewhere. Needed
only for a quantity used more than once. from QuantityProps |
unit | string | — | A label written after the number - "min", "pcs", "€". Never converted
and never checked; the calculation does no unit algebra. from 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. from 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. from QuantityProps |
target | number | — | The value this quantity is meant to reach - missed, never violated. from QuantityProps |