SmallMultiples

Two components: MiniVarianceMultiples, a ready-made grid of mini variance panels (one per group), and the generic SmallMultiples, which renders any chart per item and hands each panel the shared scale.

When to use

Structure / comparison across many groups - regions, products, business units - where one big chart would be cluttered. Shared scaling keeps panels honestly comparable.

Example

import { MiniVarianceMultiples, SmallMultiples } from "ibcs-react";

// Built-in: one mini ΔPY panel per group, shared scale
<MiniVarianceMultiples groups={byRegion} comparison="PY" columns={3} />

// Generic: render any chart per item with a shared scale
<SmallMultiples
  items={regions}
  valuesOf={(r) => r.points.flatMap((p) => [p.AC, p.PY])}
  renderItem={(r, scale) => <TrendChart data={r.points} /* map scale -> axis */ />}
/>

valuesOf is what makes the grid honest: every number a panel contributes goes into one shared domain, so a bar in one panel means the same as a bar in the next. sharedScale on MiniVarianceMultiples additionally rounds that domain to a nice symmetric bound (and, via showScaleHint, states it once as a caption above the grid); clampPercentile stops one extreme group flattening the others.

Props

MiniVarianceMultiples

SmallMultiples