Red/green direction coloring

direction.tsThe metric says whether up is good. The colour follows that, not the sign, and the market mapping is a parameter.Copy

/**
 * Direction is arithmetic. Whether it is good news is a property of the metric.
 *
 * Revenue up is good, churn up is bad, and both are "+12%". A token named for
 * sentiment forces the caller to lie about one of them, so the tokens are named
 * --direction-up / --direction-down and the polarity below decides which one a
 * given metric should wear.
 */
export type Polarity = "higher-is-better" | "lower-is-better" | "neutral";

/**
 * Which hue "up" wears is a market convention, not a constant. Several Asian
 * markets read red for up, so a platform serving both audiences keeps this as
 * a user preference and passes it through.
 */
export type Mapping = "western" | "inverted";

export function directionColor(delta: number, polarity: Polarity, mapping: Mapping = "western"): string {
  if (delta === 0 || polarity === "neutral") return "hsl(var(--direction-flat))";
  const good = polarity === "higher-is-better" ? delta > 0 : delta < 0;
  const up = mapping === "inverted" ? !good : good;
  return up ? "hsl(var(--direction-up))" : "hsl(var(--direction-down))";
}

/**
 * Colour is never the only carrier.
 *
 * The glyph goes with the sign, always, so the reading survives greyscale and
 * the roughly one man in twelve who cannot separate the two hues. In markets
 * that invert the convention this mapping is a user preference, not a constant.
 */
export const directionGlyph = (delta: number) => (delta === 0 ? "→" : delta > 0 ? "▲" : "▼");

MoveTable.tsxGlyph, sign, a bar either side of zero, and hue last. Every row carries direction three ways before colour gets a say.Copy

import { directionColor, directionGlyph, type Mapping, type Polarity } from "./direction";

export type Move = { ticker: string; move: number };

type Props = {
  rows: Move[];
  /** For a price, higher is better from the holder's side. A cost ladder
   *  would pass lower-is-better and the same rows would swap colour. */
  polarity?: Polarity;
  /** The market convention, threaded through from user settings. */
  mapping?: Mapping;
};

/** Signed always, with a real minus. The sign is the cheapest carrier there is. */
const signed = (n: number) => `${n > 0 ? "+" : n < 0 ? "−" : ""}${Math.abs(n).toFixed(2)}`;

/**
 * Four carriers per row and hue is the fourth. The glyph and the sign go
 * with the arithmetic; the bar sits left or right of a zero line, which is
 * structural and needs no colour at all; the tokens differ in lightness, so
 * the hue survives greyscale when it is all that is left.
 */
export function MoveTable({ rows, polarity = "higher-is-better", mapping = "western" }: Props) {
  const max = Math.max(...rows.map((r) => Math.abs(r.move)), 0.01);
  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="flex items-baseline border-b pb-2 text-[11px] uppercase tracking-wide text-muted-foreground">
        <span className="w-14">Ticker</span>
        <span className="w-[4.25rem] text-right">Move</span>
      </div>
      <ul className="mt-1 text-xs tabular-nums">
        {rows.map((r) => {
          const color = directionColor(r.move, polarity, mapping);
          const half = (Math.abs(r.move) / max) * 50;
          return (
            <li key={r.ticker} className="flex items-center gap-2 py-1.5">
              <span className="w-14 text-card-foreground">{r.ticker}</span>
              <span className="w-2.5 text-center text-[9px] leading-none" style={{ color }} aria-hidden="true">
                {directionGlyph(r.move)}
              </span>
              <span className="w-12 text-right" style={{ color }}>{signed(r.move)}</span>
              <span className="relative ml-2 h-2.5 flex-1" aria-hidden="true">
                <span className="absolute inset-y-[-2px] left-1/2 w-px bg-border" />
                <span
                  className="absolute h-full"
                  style={{ background: color, width: `${half}%`, [r.move >= 0 ? "left" : "right"]: "50%" }}
                />
              </span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

demo.tsxHow it is called: six moves, three each way, in the western mapping.Copy

import { MoveTable } from "./MoveTable";

/** Six price moves, three each way, in the western mapping. */
export default function Demo() {
  return (
    <div className="w-[320px]">
      <MoveTable
        rows={[
          { ticker: "AAPL", move: 1.24 },
          { ticker: "MSFT", move: -0.86 },
          { ticker: "NVDA", move: 2.05 },
          { ticker: "AMZN", move: -0.12 },
          { ticker: "META", move: 0.44 },
          { ticker: "TSLA", move: -1.91 },
        ]}
      />
    </div>
  );
}