Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import { cn } from "@/lib/utils";
import {
capitalFactorLabel,
capitalFactorsFromPayload,
formatAmountWithUnit,
} from "../../capital/economicsCapitalFactors";
import type { MetricFormulaBreakdown } from "../model/formulaBreakdownModel";
import { RESULT_TABLE_TEXT_CLASS } from "../tables/resultStyles";
export function MetricFormulaSummary({
breakdown,
}: {
breakdown: MetricFormulaBreakdown;
}) {
return (
<dl className="max-w-xl space-y-2.5">
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-3">
<dt
className={cn(
"font-semibold text-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
Formula
</dt>
<dd
className={cn(
"justify-self-end text-right text-muted-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{breakdown.formula}
</dd>
</div>
{breakdown.rows.map((row) => (
<div
key={row.label}
className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-3"
>
<dt
className={cn(
"min-w-0 text-muted-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{row.label}
</dt>
<dd
className={cn(
"justify-self-end text-right tabular-nums text-muted-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{row.value}
</dd>
</div>
))}
</dl>
);
}
export function CapitalFactorSummary({
factors,
totalAmount,
unit,
}: {
factors: ReturnType<typeof capitalFactorsFromPayload>;
totalAmount: string | number | null | undefined;
unit: string;
}) {
return (
<dl className="max-w-xl space-y-2.5">
{factors.map((factor, index) => (
<div
key={`${factor.kind}-${index}`}
className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-3"
>
<dt
className={cn(
"min-w-0 truncate text-muted-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{capitalFactorLabel(factor)}
</dt>
<dd
className={cn(
"justify-self-end text-right tabular-nums text-muted-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{formatAmountWithUnit(factor.amount, unit)}
</dd>
</div>
))}
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 border-t border-input/70 pt-2">
<dt
className={cn(
"font-semibold text-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
Total
</dt>
<dd
className={cn(
"justify-self-end text-right font-semibold tabular-nums text-foreground",
RESULT_TABLE_TEXT_CLASS,
)}
>
{formatAmountWithUnit(totalAmount, unit)}
</dd>
</div>
</dl>
);
}
|