bar-list

import type * as React from "react"
import { cn } from "@/lib/utils"

// RANKED THINGS AS BARS: the top pages, referrers, countries, a plan split. A row per
// item, its label over a bar as long as its share of the largest, its value at the
// end in mono with tabular figures, so a column of numbers lines up its digits.
//
//   <BarList
//     label="top pages"
//     items={[{ label: "/pricing", value: 1203, href: "/analytics/pricing" }, …]}
//     format={(n) => `${n} views`}
//   />
//
// THE ORDER IS THE CALLER'S: a ranking is usually sorted by value, but a funnel's
// steps or a week's days are not, and a list that re-sorted them would say something
// else. Each bar is its value as a share of `max`, by default the largest value: the
// first of a ranking runs the whole width. A zero is no bar at all (a sliver would
// say there was something); a negative value, or one past `max`, throws: a share of a
// whole cannot be either.
//
// The values sit in a column of their own, as wide as the widest one (every row on
// one grid), so the bars are measured against the same width and their lengths
// compare. A label too long for its bar's row is cut with an ellipsis and whole in its
// title. A row is a link when it has `href`, lit under the hand; `icon` sits before
// its label. Nothing to show, `empty` says so.
//
// In the text's colour on whatever holds it: the bars are its ink at 10%. No
// "use client": it renders in a server component as it is, `format` included.

export interface BarListItem {
  /** What the row is. Unique in the list. */
  label: string
  /** Its value, from zero. */
  value: number
  /** The row is a link to here. */
  href?: string
  /** A mark before the label (an icon, a flag, a favicon), about 16 px. */
  icon?: React.ReactNode
}

const plain = new Intl.NumberFormat("en-US")

export type BarListProps = Omit<React.ComponentProps<"ol">, "children"> & {
  items: readonly BarListItem[]
  /** What the list is, for a screen reader ("top pages"). */
  label: string
  /** How a value is said. Default grouped digits ("48,210"). */
  format?: (value: number) => string
  /** The value a full bar stands for. Default the largest value. */
  max?: number
  /** What the list says with no items. Default "nothing yet". */
  empty?: React.ReactNode
}

/** A row's two cells: the bar with its label over it, the value after it. */
const ROW =
  "col-span-2 grid min-h-8 grid-cols-subgrid items-center rounded-md text-[13px]"

export function BarList({
  items,
  label,
  format = plain.format,
  max,
  empty = "nothing yet",
  className,
  ...props
}: BarListProps) {
  const labels = new Set<string>()
  for (const item of items) {
    if (!(Number.isFinite(item.value) && item.value >= 0))
      throw new Error(
        `BarList "${label}": "${item.label}" is ${item.value}, and a bar is a share from zero`,
      )
    if (labels.has(item.label))
      throw new Error(`BarList "${label}": two rows are "${item.label}"`)
    labels.add(item.label)
  }
  const whole = max ?? Math.max(0, ...items.map((i) => i.value))
  for (const item of items)
    if (item.value > whole)
      throw new Error(
        `BarList "${label}": "${item.label}" is ${item.value}, past max ${whole}`,
      )

  if (items.length === 0)
    return (
      <p
        data-slot="bar-list-empty"
        className={cn("m-0 text-[13px] text-current/55", className)}
      >
        {empty}
      </p>
    )

  return (
    <ol
      aria-label={label}
      data-slot="bar-list"
      className={cn(
        "m-0 grid list-none grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 p-0",
        className,
      )}
      {...props}
    >
      {items.map((item) => {
        const cells = (
          <>
            <span className="relative flex h-8 min-w-0 items-center">
              <span
                aria-hidden
                data-slot="bar-list-bar"
                className="absolute inset-y-0 left-0 w-(--ag-bar-list-share) rounded-md bg-current/10"
                style={
                  {
                    "--ag-bar-list-share": `${whole === 0 ? 0 : (item.value / whole) * 100}%`,
                  } as React.CSSProperties
                }
              />
              <span
                data-slot="bar-list-label"
                className="relative flex min-w-0 items-center gap-2 px-2.5 [&_svg]:size-4 [&_svg]:shrink-0"
              >
                {item.icon}
                <span title={item.label} className="truncate text-current/90">
                  {item.label}
                </span>
              </span>
            </span>
            <span
              data-slot="bar-list-value"
              className="pr-1 text-right font-mono text-current/75 text-xs tabular-nums"
            >
              {format(item.value)}
            </span>
          </>
        )
        return (
          <li key={item.label} data-slot="bar-list-row" className={ROW}>
            {item.href ? (
              <a
                href={item.href}
                className={cn(
                  ROW,
                  "text-current outline-none hover:bg-current/5 focus-visible:bg-current/5 focus-visible:-outline-offset-2",
                )}
              >
                {cells}
              </a>
            ) : (
              cells
            )}
          </li>
        )
      })}
    </ol>
  )
}