RevenueWaterfall

"use client";
import { axisLabel, niceTicks, vizColorFor } from "@/lib/ledger/chart-utils";
import { DataTableToggle } from "@/components/ledger/chart-primitives";
import { Money } from "@/components/ledger/money";

export type RecognitionBucket = {
  period: string;
  /** Minor units, by performance obligation. */
  byObligation: Record<string, number>;
};

export interface RevenueWaterfallProps {
  buckets: RecognitionBucket[];
  className?: string;
  currency: string;
  obligations: string[];
}

/**
 * The deferred revenue balance recognizing by future period, by performance
 * obligation. The number every SaaS board asks for.
 */
export function RevenueWaterfall({ buckets, obligations, currency, className }: RevenueWaterfallProps) {
  const width = 720;
  const height = 280;
  const PAD = { bottom: 40, left: 72, right: 16, top: 16 };

  const totals = buckets.map((b) => obligations.reduce((s, o) => s + (b.byObligation[o] ?? 0), 0));
  const ticks = niceTicks(0, Math.max(...totals, 1));
  const max = ticks[ticks.length - 1];
  const plotW = width - PAD.left - PAD.right;
  const plotH = height - PAD.top - PAD.bottom;
  const y = (v: number) => PAD.top + plotH - (v / (max || 1)) * plotH;
  const slot = plotW / buckets.length;
  const barW = slot * 0.66;

  return (
    <DataTableToggle
      className={className}
      table={
        <table className="w-full text-body">
          <caption className="sr-only">Deferred revenue recognition schedule</caption>
          <thead>
            <tr className="border-b border-border-subtle">
              <th className="py-2 text-left text-label text-text-secondary" scope="col">
                Period
              </th>
              {obligations.map((o) => (
                <th className="py-2 text-right text-label text-text-secondary" key={o} scope="col">
                  {o}
                </th>
              ))}
              <th className="py-2 text-right text-label text-text-secondary" scope="col">
                Total
              </th>
            </tr>
          </thead>
          <tbody>
            {buckets.map((b, i) => (
              <tr className="border-b border-border-subtle" key={b.period}>
                <th className="py-2 text-left font-normal" scope="row">
                  {b.period}
                </th>
                {obligations.map((o) => (
                  <td className="py-2 text-right" key={o}>
                    <Money accounting value={{ amount: b.byObligation[o] ?? 0, currency }} />
                  </td>
                ))}
                <td className="py-2 text-right">
                  <Money accounting value={{ amount: totals[i], currency }} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      }
    >
      <svg
        aria-label="Deferred revenue recognizing by future period"
        className="w-full"
        role="img"
        style={{ height }}
        viewBox={`0 0 ${width} ${height}`}
      >
        {ticks.map((t) => (
          <g key={t}>
            <line stroke="var(--border-subtle)" x1={PAD.left} x2={width - PAD.right} y1={y(t)} y2={y(t)} />
            <text
              className="numeric"
              fill="var(--text-tertiary)"
              fontSize="12"
              textAnchor="end"
              x={PAD.left - 8}
              y={y(t) + 4}
            >
              {axisLabel(t, currency)}
            </text>
          </g>
        ))}
        <line stroke="var(--border-strong)" x1={PAD.left} x2={width - PAD.right} y1={y(0)} y2={y(0)} />

        {buckets.map((b, i) => {
          const x = PAD.left + i * slot + (slot - barW) / 2;
          let cursor = 0;
          return (
            <g key={b.period}>
              {obligations.map((o) => {
                const v = b.byObligation[o] ?? 0;
                const top = y(cursor + v);
                const h = Math.max(0, y(cursor) - y(cursor + v));
                cursor += v;
                return <rect fill={vizColorFor(o)} height={h} key={o} width={barW} x={x} y={top} />;
              })}
              <text
                className="numeric"
                fill="var(--text-secondary)"
                fontSize="11"
                textAnchor="middle"
                x={x + barW / 2}
                y={y(totals[i]) - 6}
              >
                {axisLabel(totals[i], currency)}
              </text>
              <text
                className="numeric"
                fill="var(--text-tertiary)"
                fontSize="12"
                textAnchor="middle"
                x={x + barW / 2}
                y={height - 20}
              >
                {b.period}
              </text>
            </g>
          );
        })}
      </svg>
      <ul className="mt-3 flex flex-wrap gap-4">
        {obligations.map((o) => (
          <li className="flex items-center gap-2 text-caption" key={o}>
            <span
              aria-hidden="true"
              className="size-2.5 rounded-[2px]"
              style={{ background: vizColorFor(o) }}
            />
            {o}
          </li>
        ))}
      </ul>
    </DataTableToggle>
  );
}