# PipelineChart

## 2026-08-22 — `formatValue` prop for non-currency stages

**Prompted by:** design team (WealthX Kanban Boards V2)

### What changed
- New optional `formatValue?: (value: number) => string`, used for the tooltip and each segment's
  accessible label. Defaults to `formatCurrencyAbbrev`, so every existing consumer is unchanged.
- The module-local `formatValue` helper is gone — it only forwarded to `formatCurrencyAbbrev`,
  which is now the prop's default.
- `PipelineChartStage.value` is no longer documented as dollars.

### Why
- The chart was built for the loan pipeline, where values are money, and hardcoded that at a single
  choke point. The Kanban board reuses it to show how cards are spread across columns, where the
  same code rendered "$3" for three cards.
- Formatting is presentation, and the caller already owns the numbers — so it belongs in a prop
  rather than in a second chart component built to say the same thing in a different unit.

## 2026-05-19 — Single-color segments with gap separators

**Prompted by:** Thinh Tu Duc

### What changed
- All segments now share a single primary color instead of 5 cycling opacity shades
- 1px background-color gaps between segments provide visual separation
- Legend dots follow the same color logic (primary fallback, or explicit `stage.color`)

### Why
- The previous 5-opacity fallback palette repeated colors when there were more than 5 stages, creating misleading visual groupings
- A single primary color is tenant-adaptive and works for any number of stages

### Affected tokens / files
- `packages/shadcn/src/components/ui/pipeline-chart.tsx` — replaced `FALLBACK_COLORS` with `SEGMENT_COLOR = "var(--primary)"`, added `gap-px bg-background` to bar container