@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/Facet/panels.d.ts

@@ -0,0 +1,187 @@
+/**
+ * The grouping, ordering, capping and domain arithmetic behind `<Facet>`.
+ *
+ * Kept out of the component on purpose. Everything here is a pure function over
+ * plain rows, which means the part of faceting that is actually easy to get
+ * wrong — the shared domain, the sort direction, what happens to the tail past
+ * the cap — is unit-testable without a DOM, a rendering engine or a layout.
+ *
+ * Named `panels` rather than `facet` because macOS and Windows resolve paths
+ * case-insensitively: a `facet.ts` beside `Facet.tsx` makes `./Facet/Facet`
+ * ambiguous, and TypeScript resolves it to the wrong one of the two.
+ */
+/** How the panels are ordered. */
+type FacetSortKey = 'name' | 'input' | 'min' | 'max' | 'sum' | 'mean' | 'last';
+/**
+ * The panel order: a named key, an explicit list of group names, or a
+ * comparator over the groups' own statistics.
+ *
+ * An explicit list is the escape hatch for an order the data does not carry —
+ * a funnel's stages, a week's days, a severity scale. Names the list does not
+ * mention keep their relative order and follow the ones it does.
+ */
+type FacetSort<TRow> = FacetSortKey | string[] | ((a: FacetGroup<TRow>, b: FacetGroup<TRow>) => number);
+/** Whether every panel is drawn against one domain or against its own. */
+type FacetScales = 'shared' | 'independent';
+/** What happens to the groups past the cap. */
+type FacetOverflow = 'note' | 'fold';
+/** What one group's numbers add up to. The sort and the domain read these. */
+interface FacetStats {
+    /** The smallest finite value across the group's rows and value fields. */
+    min: number;
+    /** The largest finite value across the group's rows and value fields. */
+    max: number;
+    /** Every finite value added together — the group's grand total. */
+    sum: number;
+    /** `sum / count`, or 0 when the group holds no finite value. */
+    mean: number;
+    /**
+     * The last row that holds a finite number, summed across the value fields.
+     *
+     * "Where did this end up", which is the question a grid of trends is usually
+     * sorted by — and a different question from "how big was it overall".
+     */
+    last: number;
+    /** How many finite numbers the rest of these were computed from. */
+    count: number;
+}
+/** A group of rows and what its numbers add up to — what a custom sort sees. */
+interface FacetGroup<TRow> {
+    /** The group's value on the `by` field, as text. Also the panel's label. */
+    name: string;
+    /** The rows this panel draws. */
+    rows: TRow[];
+    stats: FacetStats;
+}
+/** One panel of the grid: a group, and the domain it draws against. */
+interface FacetPanel<TRow> extends FacetGroup<TRow> {
+    /**
+     * The `[min, max]` this panel's value axis should use.
+     *
+     * Under the default shared scales this is the SAME array for every panel,
+     * computed across all of them. Handing it to the panel's value axis is the
+     * whole point of the component — see the note on `FacetProps.scales`.
+     */
+    domain: [number, number];
+    /** Position in the grid, from 0. */
+    index: number;
+    /** How many panels the grid holds, so a panel can say "3 of 12". */
+    total: number;
+    /** How many source groups this panel stands for. Above 1 only for the fold. */
+    size: number;
+    /** True for the one panel the capped tail was folded into. */
+    isOther: boolean;
+}
+interface FacetOptions<TRow> {
+    /** The row field the data is split on. */
+    by: keyof TRow & string;
+    /** The row field, or fields, holding the numbers. */
+    value: (keyof TRow & string) | (keyof TRow & string)[];
+    /** The shared category field — the x axis. Only the fold needs it. */
+    xDataKey?: keyof TRow & string;
+    scales?: FacetScales;
+    /** Overrides the computed domain outright. */
+    domain?: [number, number];
+    includeZero?: boolean;
+    nice?: boolean;
+    sort?: FacetSort<TRow>;
+    order?: 'asc' | 'desc';
+    limit?: number | false;
+    overflow?: FacetOverflow;
+    otherLabel?: string;
+}
+interface FacetResult<TRow> {
+    /** The panels to render, in order, capped. */
+    panels: FacetPanel<TRow>[];
+    /** How many groups the data held, before the cap. */
+    total: number;
+    /** How many groups the cap left out — folded or simply not drawn. */
+    hidden: number;
+    /** The one domain every panel shares, or null under independent scales. */
+    domain: [number, number] | null;
+}
+/**
+ * Splits rows into groups, in the order the groups first appear.
+ *
+ * A row whose `by` field is null or undefined is dropped rather than collected
+ * under an "undefined" panel: a row that says nothing about which group it
+ * belongs to cannot be faceted, and a panel labelled `undefined` is a defect
+ * the reader is asked to interpret.
+ */
+declare function groupRows<TRow extends Record<string, unknown>>(data: TRow[], by: keyof TRow & string): {
+    name: string;
+    rows: TRow[];
+}[];
+/**
+ * One group's statistics.
+ *
+ * Empty and all-non-numeric groups return zeroes with `count: 0` rather than
+ * `Infinity`, so a sort never has to special-case them and a domain built from
+ * them is still a pair of numbers.
+ */
+declare function statsOf<TRow extends Record<string, unknown>>(rows: TRow[], value: FacetOptions<TRow>['value']): FacetStats;
+interface DomainOptions {
+    /**
+     * Pulls the domain out to include zero.
+     *
+     * On by default, and the same default Recharts applies on its own: a bar or
+     * an area read against a truncated baseline overstates every difference in
+     * the grid, and a grid exists to be compared. Turn it off when the values
+     * live far from zero and the differences between them ARE the reading —
+     * temperatures, latencies, ratings out of five.
+     */
+    includeZero?: boolean;
+    /** Rounds the domain out to round numbers, so the ticks are readable. */
+    nice?: boolean;
+}
+/**
+ * A `[min, max]` extended to something an axis can label.
+ *
+ * A degenerate extent — one row, or a group where every value is identical —
+ * is given a span rather than returned as a zero-height plot.
+ */
+declare function niceDomain(extent: [number, number], { includeZero, nice }?: DomainOptions): [number, number];
+/** The extent across every group — the shared domain, before it is rounded. */
+declare function sharedExtent(stats: FacetStats[]): [number, number];
+/**
+ * Orders the panels.
+ *
+ * `order` is optional because the natural direction depends on what is being
+ * sorted: names read A→Z, a statistic reads biggest first. Passing it makes the
+ * direction explicit either way.
+ *
+ * The sort is stable, so groups that tie keep the order the data gave them.
+ */
+declare function sortGroups<TRow, TGroup extends FacetGroup<TRow>>(groups: TGroup[], sort: FacetSort<TRow>, order?: 'asc' | 'desc'): TGroup[];
+/**
+ * Sums the capped tail into one group, aligned on the category axis.
+ *
+ * With `xDataKey` the tail's rows are added together at each category, which is
+ * what makes the "Other" panel a readable series rather than a scribble. Without
+ * one the rows are concatenated in the order they arrived, which is only
+ * meaningful for a chart that bins its own x — so pass the key.
+ */
+declare function foldGroups<TRow extends Record<string, unknown>>(tail: {
+    name: string;
+    rows: TRow[];
+}[], { by, value, xDataKey, label, }: {
+    by: keyof TRow & string;
+    value: FacetOptions<TRow>['value'];
+    xDataKey?: keyof TRow & string;
+    label: string;
+}): {
+    name: string;
+    rows: TRow[];
+};
+/**
+ * The whole pipeline: group, summarise, order, cap, and hand every panel a
+ * domain.
+ *
+ * One function rather than four calls at the call site, because the ORDER of
+ * those four is itself a decision — the domain is computed across the groups
+ * that survive the cap, so a folded "Other" panel cannot push the shared scale
+ * past every panel it is meant to be compared against.
+ */
+declare function buildPanels<TRow extends Record<string, unknown>>(data: TRow[], options: FacetOptions<TRow>): FacetResult<TRow>;
+
+export { type DomainOptions, type FacetGroup, type FacetOptions, type FacetOverflow, type FacetPanel, type FacetResult, type FacetScales, type FacetSort, type FacetSortKey, type FacetStats, buildPanels, foldGroups, groupRows, niceDomain, sharedExtent, sortGroups, statsOf };

package/dist/charts/Facet/panels.js

@@ -0,0 +1,203 @@
+function keys(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function numbers(row, fields) {
+  const found = [];
+  for (const field of fields) {
+    const raw = row[field];
+    if (raw === null || raw === void 0 || raw === "") continue;
+    const entry = Number(raw);
+    if (Number.isFinite(entry)) found.push(entry);
+  }
+  return found;
+}
+function groupRows(data, by) {
+  const found = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const raw = row[by];
+    if (raw === null || raw === void 0) continue;
+    const name = String(raw);
+    const rows = found.get(name);
+    if (rows) rows.push(row);
+    else found.set(name, [row]);
+  }
+  return [...found].map(([name, rows]) => ({ name, rows }));
+}
+function statsOf(rows, value) {
+  const fields = keys(value);
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  let sum = 0;
+  let count = 0;
+  let last = 0;
+  for (const row of rows) {
+    const found = numbers(row, fields);
+    if (found.length === 0) continue;
+    last = found.reduce((total, entry) => total + entry, 0);
+    for (const entry of found) {
+      if (entry < min) min = entry;
+      if (entry > max) max = entry;
+      sum += entry;
+      count += 1;
+    }
+  }
+  if (count === 0) return { min: 0, max: 0, sum: 0, mean: 0, last: 0, count: 0 };
+  return { min, max, sum, mean: sum / count, last, count };
+}
+function tickStep(span, count) {
+  if (!(span > 0)) return 1;
+  const raw = span / count;
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  const normalised = raw / magnitude;
+  const step = normalised >= 7.5 ? 10 : normalised >= 3.5 ? 5 : normalised >= 1.5 ? 2 : 1;
+  return step * magnitude;
+}
+function clean(value) {
+  return Number(value.toPrecision(12));
+}
+function niceDomain(extent, { includeZero = true, nice = true } = {}) {
+  let [min, max] = extent;
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];
+  if (includeZero) {
+    min = Math.min(min, 0);
+    max = Math.max(max, 0);
+  }
+  if (max === min) max = min + (Math.abs(min) || 1);
+  if (!nice) return [min, max];
+  const step = tickStep(max - min, 5);
+  return [clean(Math.floor(min / step) * step), clean(Math.ceil(max / step) * step)];
+}
+function sharedExtent(stats) {
+  const scored = stats.filter((entry) => entry.count > 0);
+  if (scored.length === 0) return [0, 1];
+  return [
+    Math.min(...scored.map((entry) => entry.min)),
+    Math.max(...scored.map((entry) => entry.max))
+  ];
+}
+function statistic(stats, key) {
+  switch (key) {
+    case "min":
+      return stats.min;
+    case "sum":
+      return stats.sum;
+    case "mean":
+      return stats.mean;
+    case "last":
+      return stats.last;
+    default:
+      return stats.max;
+  }
+}
+function sortGroups(groups, sort, order) {
+  const sorted = [...groups];
+  if (sort === "input") return order === "desc" ? sorted.reverse() : sorted;
+  const compare = comparator(sort);
+  const sign = (order ?? defaultOrder(sort)) === "desc" ? -1 : 1;
+  sorted.sort((a, b) => compare(a, b) * sign);
+  return sorted;
+}
+function defaultOrder(sort) {
+  if (typeof sort === "function" || Array.isArray(sort) || sort === "name") return "asc";
+  return "desc";
+}
+function comparator(sort) {
+  if (typeof sort === "function") return sort;
+  if (Array.isArray(sort)) {
+    const rank = new Map(sort.map((name, index) => [name, index]));
+    const place = (name) => rank.get(name) ?? Number.MAX_SAFE_INTEGER;
+    return (a, b) => place(a.name) - place(b.name);
+  }
+  if (sort === "name") {
+    return (a, b) => a.name.localeCompare(b.name, void 0, { numeric: true });
+  }
+  return (a, b) => statistic(a.stats, sort) - statistic(b.stats, sort);
+}
+function foldGroups(tail, {
+  by,
+  value,
+  xDataKey,
+  label
+}) {
+  const rows = tail.flatMap((group) => group.rows);
+  if (!xDataKey) return { name: label, rows };
+  const fields = keys(value);
+  const bins = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const category = String(row[xDataKey]);
+    let bin = bins.get(category);
+    if (!bin) {
+      bin = { [xDataKey]: row[xDataKey], [by]: label };
+      for (const field of fields) bin[field] = 0;
+      bins.set(category, bin);
+    }
+    for (const field of fields) {
+      const raw = row[field];
+      if (raw === null || raw === void 0 || raw === "") continue;
+      const entry = Number(raw);
+      if (Number.isFinite(entry)) bin[field] = Number(bin[field]) + entry;
+    }
+  }
+  return { name: label, rows: [...bins.values()] };
+}
+function buildPanels(data, options) {
+  const {
+    by,
+    value,
+    xDataKey,
+    scales = "shared",
+    domain,
+    includeZero = true,
+    nice = true,
+    sort = "max",
+    order,
+    limit = 12,
+    overflow = "note",
+    otherLabel = "Other"
+  } = options;
+  const grouped = groupRows(data, by).map((group) => ({
+    ...group,
+    stats: statsOf(group.rows, value)
+  }));
+  const total = grouped.length;
+  if (total === 0) return { panels: [], total: 0, hidden: 0, domain: null };
+  const ordered = sortGroups(grouped, sort, order);
+  const capped = typeof limit === "number" && limit >= 0 && ordered.length > limit;
+  const head = capped ? ordered.slice(0, limit) : ordered;
+  const tail = capped ? ordered.slice(limit) : [];
+  const folded = capped && overflow === "fold" ? foldGroups(tail, { by, value, xDataKey, label: otherLabel }) : void 0;
+  const shown = [
+    ...head.map((group) => ({ ...group, size: 1, isOther: false })),
+    ...folded ? [
+      {
+        ...folded,
+        stats: statsOf(folded.rows, value),
+        size: tail.length,
+        isOther: true
+      }
+    ] : []
+  ];
+  const sharedDomain = domain ?? niceDomain(sharedExtent(shown.map((group) => group.stats)), { includeZero, nice });
+  const independent = scales === "independent" && !domain;
+  const panels = shown.map((group, index) => ({
+    name: group.name,
+    rows: group.rows,
+    domain: independent ? niceDomain([group.stats.min, group.stats.max], { includeZero, nice }) : sharedDomain,
+    stats: group.stats,
+    index,
+    total: shown.length,
+    size: group.size,
+    isOther: group.isOther
+  }));
+  return { panels, total, hidden: tail.length, domain: independent ? null : sharedDomain };
+}
+export {
+  buildPanels,
+  foldGroups,
+  groupRows,
+  niceDomain,
+  sharedExtent,
+  sortGroups,
+  statsOf
+};
+//# sourceMappingURL=panels.js.map

package/dist/charts/Facet/panels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/Facet/panels.ts"],"sourcesContent":["/**\n * The grouping, ordering, capping and domain arithmetic behind `<Facet>`.\n *\n * Kept out of the component on purpose. Everything here is a pure function over\n * plain rows, which means the part of faceting that is actually easy to get\n * wrong — the shared domain, the sort direction, what happens to the tail past\n * the cap — is unit-testable without a DOM, a rendering engine or a layout.\n *\n * Named `panels` rather than `facet` because macOS and Windows resolve paths\n * case-insensitively: a `facet.ts` beside `Facet.tsx` makes `./Facet/Facet`\n * ambiguous, and TypeScript resolves it to the wrong one of the two.\n */\n\n/** How the panels are ordered. */\nexport type FacetSortKey = 'name' | 'input' | 'min' | 'max' | 'sum' | 'mean' | 'last'\n\n/**\n * The panel order: a named key, an explicit list of group names, or a\n * comparator over the groups' own statistics.\n *\n * An explicit list is the escape hatch for an order the data does not carry —\n * a funnel's stages, a week's days, a severity scale. Names the list does not\n * mention keep their relative order and follow the ones it does.\n */\nexport type FacetSort<TRow> =\n  | FacetSortKey\n  | string[]\n  | ((a: FacetGroup<TRow>, b: FacetGroup<TRow>) => number)\n\n/** Whether every panel is drawn against one domain or against its own. */\nexport type FacetScales = 'shared' | 'independent'\n\n/** What happens to the groups past the cap. */\nexport type FacetOverflow = 'note' | 'fold'\n\n/** What one group's numbers add up to. The sort and the domain read these. */\nexport interface FacetStats {\n  /** The smallest finite value across the group's rows and value fields. */\n  min: number\n  /** The largest finite value across the group's rows and value fields. */\n  max: number\n  /** Every finite value added together — the group's grand total. */\n  sum: number\n  /** `sum / count`, or 0 when the group holds no finite value. */\n  mean: number\n  /**\n   * The last row that holds a finite number, summed across the value fields.\n   *\n   * \"Where did this end up\", which is the question a grid of trends is usually\n   * sorted by — and a different question from \"how big was it overall\".\n   */\n  last: number\n  /** How many finite numbers the rest of these were computed from. */\n  count: number\n}\n\n/** A group of rows and what its numbers add up to — what a custom sort sees. */\nexport interface FacetGroup<TRow> {\n  /** The group's value on the `by` field, as text. Also the panel's label. */\n  name: string\n  /** The rows this panel draws. */\n  rows: TRow[]\n  stats: FacetStats\n}\n\n/** One panel of the grid: a group, and the domain it draws against. */\nexport interface FacetPanel<TRow> extends FacetGroup<TRow> {\n  /**\n   * The `[min, max]` this panel's value axis should use.\n   *\n   * Under the default shared scales this is the SAME array for every panel,\n   * computed across all of them. Handing it to the panel's value axis is the\n   * whole point of the component — see the note on `FacetProps.scales`.\n   */\n  domain: [number, number]\n  /** Position in the grid, from 0. */\n  index: number\n  /** How many panels the grid holds, so a panel can say \"3 of 12\". */\n  total: number\n  /** How many source groups this panel stands for. Above 1 only for the fold. */\n  size: number\n  /** True for the one panel the capped tail was folded into. */\n  isOther: boolean\n}\n\nexport interface FacetOptions<TRow> {\n  /** The row field the data is split on. */\n  by: keyof TRow & string\n  /** The row field, or fields, holding the numbers. */\n  value: (keyof TRow & string) | (keyof TRow & string)[]\n  /** The shared category field — the x axis. Only the fold needs it. */\n  xDataKey?: keyof TRow & string\n  scales?: FacetScales\n  /** Overrides the computed domain outright. */\n  domain?: [number, number]\n  includeZero?: boolean\n  nice?: boolean\n  sort?: FacetSort<TRow>\n  order?: 'asc' | 'desc'\n  limit?: number | false\n  overflow?: FacetOverflow\n  otherLabel?: string\n}\n\nexport interface FacetResult<TRow> {\n  /** The panels to render, in order, capped. */\n  panels: FacetPanel<TRow>[]\n  /** How many groups the data held, before the cap. */\n  total: number\n  /** How many groups the cap left out — folded or simply not drawn. */\n  hidden: number\n  /** The one domain every panel shares, or null under independent scales. */\n  domain: [number, number] | null\n}\n\n/** The value option, always as a list. */\nfunction keys<TRow>(value: FacetOptions<TRow>['value']): (keyof TRow & string)[] {\n  return Array.isArray(value) ? value : [value]\n}\n\n/**\n * A row's finite numbers under the value fields, in field order.\n *\n * `null` and `''` are skipped before the coercion rather than after it, because\n * `Number(null)` is 0 — so a gap in the data would otherwise read as a series\n * that fell to zero, and both the domain and a sort by \"where it ended up\"\n * would be built on it.\n */\nfunction numbers<TRow>(row: TRow, fields: (keyof TRow & string)[]): number[] {\n  const found: number[] = []\n  for (const field of fields) {\n    const raw = row[field]\n    if (raw === null || raw === undefined || raw === '') continue\n    const entry = Number(raw)\n    if (Number.isFinite(entry)) found.push(entry)\n  }\n  return found\n}\n\n/**\n * Splits rows into groups, in the order the groups first appear.\n *\n * A row whose `by` field is null or undefined is dropped rather than collected\n * under an \"undefined\" panel: a row that says nothing about which group it\n * belongs to cannot be faceted, and a panel labelled `undefined` is a defect\n * the reader is asked to interpret.\n */\nexport function groupRows<TRow extends Record<string, unknown>>(\n  data: TRow[],\n  by: keyof TRow & string,\n): { name: string; rows: TRow[] }[] {\n  const found = new Map<string, TRow[]>()\n\n  for (const row of data) {\n    const raw = row[by]\n    if (raw === null || raw === undefined) continue\n    const name = String(raw)\n    const rows = found.get(name)\n    if (rows) rows.push(row)\n    else found.set(name, [row])\n  }\n\n  return [...found].map(([name, rows]) => ({ name, rows }))\n}\n\n/**\n * One group's statistics.\n *\n * Empty and all-non-numeric groups return zeroes with `count: 0` rather than\n * `Infinity`, so a sort never has to special-case them and a domain built from\n * them is still a pair of numbers.\n */\nexport function statsOf<TRow extends Record<string, unknown>>(\n  rows: TRow[],\n  value: FacetOptions<TRow>['value'],\n): FacetStats {\n  const fields = keys<TRow>(value)\n  let min = Number.POSITIVE_INFINITY\n  let max = Number.NEGATIVE_INFINITY\n  let sum = 0\n  let count = 0\n  let last = 0\n\n  for (const row of rows) {\n    const found = numbers(row, fields)\n    if (found.length === 0) continue\n    // The LAST row that carried anything, not the last row — a trailing row of\n    // nulls should not read as a series that fell to zero.\n    last = found.reduce((total, entry) => total + entry, 0)\n    for (const entry of found) {\n      if (entry < min) min = entry\n      if (entry > max) max = entry\n      sum += entry\n      count += 1\n    }\n  }\n\n  if (count === 0) return { min: 0, max: 0, sum: 0, mean: 0, last: 0, count: 0 }\n  return { min, max, sum, mean: sum / count, last, count }\n}\n\n/**\n * The tick interval a reader recognises for a span — d3's rule, because it is\n * the one every axis in every tool already agrees on.\n *\n * Without it a shared domain of `[0, 314]` gives ticks at 78.5 and 157, and the\n * component would have made the panels comparable and the numbers unreadable in\n * the same move.\n */\nfunction tickStep(span: number, count: number): number {\n  if (!(span > 0)) return 1\n  const raw = span / count\n  const magnitude = 10 ** Math.floor(Math.log10(raw))\n  const normalised = raw / magnitude\n  const step = normalised >= 7.5 ? 10 : normalised >= 3.5 ? 5 : normalised >= 1.5 ? 2 : 1\n  return step * magnitude\n}\n\n/** Kills the float dust `Math.floor(0.3 / 0.1) * 0.1` leaves behind. */\nfunction clean(value: number): number {\n  return Number(value.toPrecision(12))\n}\n\nexport interface DomainOptions {\n  /**\n   * Pulls the domain out to include zero.\n   *\n   * On by default, and the same default Recharts applies on its own: a bar or\n   * an area read against a truncated baseline overstates every difference in\n   * the grid, and a grid exists to be compared. Turn it off when the values\n   * live far from zero and the differences between them ARE the reading —\n   * temperatures, latencies, ratings out of five.\n   */\n  includeZero?: boolean\n  /** Rounds the domain out to round numbers, so the ticks are readable. */\n  nice?: boolean\n}\n\n/**\n * A `[min, max]` extended to something an axis can label.\n *\n * A degenerate extent — one row, or a group where every value is identical —\n * is given a span rather than returned as a zero-height plot.\n */\nexport function niceDomain(\n  extent: [number, number],\n  { includeZero = true, nice = true }: DomainOptions = {},\n): [number, number] {\n  let [min, max] = extent\n  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1]\n\n  if (includeZero) {\n    min = Math.min(min, 0)\n    max = Math.max(max, 0)\n  }\n  if (max === min) max = min + (Math.abs(min) || 1)\n  if (!nice) return [min, max]\n\n  const step = tickStep(max - min, 5)\n  return [clean(Math.floor(min / step) * step), clean(Math.ceil(max / step) * step)]\n}\n\n/** The extent across every group — the shared domain, before it is rounded. */\nexport function sharedExtent(stats: FacetStats[]): [number, number] {\n  const scored = stats.filter((entry) => entry.count > 0)\n  if (scored.length === 0) return [0, 1]\n  return [\n    Math.min(...scored.map((entry) => entry.min)),\n    Math.max(...scored.map((entry) => entry.max)),\n  ]\n}\n\n/** Reads the statistic a named sort orders on. */\nfunction statistic(stats: FacetStats, key: FacetSortKey): number {\n  switch (key) {\n    case 'min':\n      return stats.min\n    case 'sum':\n      return stats.sum\n    case 'mean':\n      return stats.mean\n    case 'last':\n      return stats.last\n    default:\n      return stats.max\n  }\n}\n\n/**\n * Orders the panels.\n *\n * `order` is optional because the natural direction depends on what is being\n * sorted: names read A→Z, a statistic reads biggest first. Passing it makes the\n * direction explicit either way.\n *\n * The sort is stable, so groups that tie keep the order the data gave them.\n */\nexport function sortGroups<TRow, TGroup extends FacetGroup<TRow>>(\n  groups: TGroup[],\n  sort: FacetSort<TRow>,\n  order?: 'asc' | 'desc',\n): TGroup[] {\n  const sorted = [...groups]\n\n  // Reversing the array would reverse the ties along with everything else. A\n  // sign on the comparator leaves equal groups in the order the data gave them,\n  // which is what makes a re-render deterministic.\n  if (sort === 'input') return order === 'desc' ? sorted.reverse() : sorted\n\n  const compare = comparator<TRow, TGroup>(sort)\n  const sign = (order ?? defaultOrder(sort)) === 'desc' ? -1 : 1\n  sorted.sort((a, b) => compare(a, b) * sign)\n  return sorted\n}\n\n/** Ascending for a name or an explicit list, descending for a statistic. */\nfunction defaultOrder<TRow>(sort: FacetSort<TRow>): 'asc' | 'desc' {\n  if (typeof sort === 'function' || Array.isArray(sort) || sort === 'name') return 'asc'\n  return 'desc'\n}\n\n/** The ascending comparator behind one sort. */\nfunction comparator<TRow, TGroup extends FacetGroup<TRow>>(\n  sort: Exclude<FacetSort<TRow>, 'input'>,\n): (a: TGroup, b: TGroup) => number {\n  if (typeof sort === 'function') return sort\n\n  if (Array.isArray(sort)) {\n    // Names the list does not mention sort after the ones it does, keeping the\n    // order the data gave them — a partial list is a partial instruction, not\n    // an instruction to discard everything it forgot.\n    const rank = new Map(sort.map((name, index) => [name, index]))\n    const place = (name: string) => rank.get(name) ?? Number.MAX_SAFE_INTEGER\n    return (a, b) => place(a.name) - place(b.name)\n  }\n\n  if (sort === 'name') {\n    // `numeric` so \"Region 2\" precedes \"Region 10\", which is the one thing a\n    // plain string sort gets wrong on every dataset that numbers its groups.\n    return (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true })\n  }\n\n  return (a, b) => statistic(a.stats, sort) - statistic(b.stats, sort)\n}\n\n/**\n * Sums the capped tail into one group, aligned on the category axis.\n *\n * With `xDataKey` the tail's rows are added together at each category, which is\n * what makes the \"Other\" panel a readable series rather than a scribble. Without\n * one the rows are concatenated in the order they arrived, which is only\n * meaningful for a chart that bins its own x — so pass the key.\n */\nexport function foldGroups<TRow extends Record<string, unknown>>(\n  tail: { name: string; rows: TRow[] }[],\n  {\n    by,\n    value,\n    xDataKey,\n    label,\n  }: {\n    by: keyof TRow & string\n    value: FacetOptions<TRow>['value']\n    xDataKey?: keyof TRow & string\n    label: string\n  },\n): { name: string; rows: TRow[] } {\n  const rows = tail.flatMap((group) => group.rows)\n  if (!xDataKey) return { name: label, rows }\n\n  const fields = keys<TRow>(value)\n  const bins = new Map<string, Record<string, unknown>>()\n\n  for (const row of rows) {\n    const category = String(row[xDataKey])\n    let bin = bins.get(category)\n    if (!bin) {\n      bin = { [xDataKey]: row[xDataKey], [by]: label }\n      for (const field of fields) bin[field] = 0\n      bins.set(category, bin)\n    }\n    for (const field of fields) {\n      const raw = row[field]\n      if (raw === null || raw === undefined || raw === '') continue\n      const entry = Number(raw)\n      if (Number.isFinite(entry)) bin[field] = Number(bin[field]) + entry\n    }\n  }\n\n  // A summed row is a row this module built, not one the caller handed in. The\n  // cast is the boundary where that is admitted: it carries the same fields the\n  // panels read, and nothing else the caller's own type may promise.\n  return { name: label, rows: [...bins.values()] as unknown as TRow[] }\n}\n\n/**\n * The whole pipeline: group, summarise, order, cap, and hand every panel a\n * domain.\n *\n * One function rather than four calls at the call site, because the ORDER of\n * those four is itself a decision — the domain is computed across the groups\n * that survive the cap, so a folded \"Other\" panel cannot push the shared scale\n * past every panel it is meant to be compared against.\n */\nexport function buildPanels<TRow extends Record<string, unknown>>(\n  data: TRow[],\n  options: FacetOptions<TRow>,\n): FacetResult<TRow> {\n  const {\n    by,\n    value,\n    xDataKey,\n    scales = 'shared',\n    domain,\n    includeZero = true,\n    nice = true,\n    sort = 'max',\n    order,\n    limit = 12,\n    overflow = 'note',\n    otherLabel = 'Other',\n  } = options\n\n  const grouped: FacetGroup<TRow>[] = groupRows(data, by).map((group) => ({\n    ...group,\n    stats: statsOf(group.rows, value),\n  }))\n\n  const total = grouped.length\n  if (total === 0) return { panels: [], total: 0, hidden: 0, domain: null }\n\n  const ordered = sortGroups<TRow, FacetGroup<TRow>>(grouped, sort, order)\n\n  const capped = typeof limit === 'number' && limit >= 0 && ordered.length > limit\n  const head = capped ? ordered.slice(0, limit) : ordered\n  const tail = capped ? ordered.slice(limit) : []\n\n  const folded =\n    capped && overflow === 'fold'\n      ? foldGroups(tail, { by, value, xDataKey, label: otherLabel })\n      : undefined\n\n  const shown: (FacetGroup<TRow> & { size: number; isOther: boolean })[] = [\n    ...head.map((group) => ({ ...group, size: 1, isOther: false })),\n    ...(folded\n      ? [\n          {\n            ...folded,\n            stats: statsOf(folded.rows, value),\n            size: tail.length,\n            isOther: true,\n          },\n        ]\n      : []),\n  ]\n\n  // Computed after the cap and after the fold, so it covers exactly what is\n  // drawn: a group the cap left out cannot stretch the scale into dead space,\n  // and a folded \"Other\" — which IS drawn, and on this same axis — cannot\n  // overflow the plot it is drawn in.\n  const sharedDomain =\n    domain ?? niceDomain(sharedExtent(shown.map((group) => group.stats)), { includeZero, nice })\n\n  const independent = scales === 'independent' && !domain\n\n  const panels = shown.map((group, index) => ({\n    name: group.name,\n    rows: group.rows,\n    domain: independent\n      ? niceDomain([group.stats.min, group.stats.max], { includeZero, nice })\n      : sharedDomain,\n    stats: group.stats,\n    index,\n    total: shown.length,\n    size: group.size,\n    isOther: group.isOther,\n  }))\n\n  return { panels, total, hidden: tail.length, domain: independent ? null : sharedDomain }\n}\n"],"mappings":"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","names":[]}

package/dist/charts/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,101 @@
+import * as react from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import { FunnelChart as FunnelChart$1, Funnel, LabelList } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartTooltipSlotProps } from '../AreaChart/AreaChart.js';
+import '../lib/empty.js';
+import '../lib/values.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/background.js';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/dot.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/annotations.js';
+
+/**
+ * How each stage is painted.
+ *
+ * `stepped` is the honest default: every stage keeps the same fill and the
+ * TAPER carries the drop. A ramp that also darkens each stage encodes the same
+ * fact twice and invites the reader to compare two things that are one.
+ */
+type FunnelVariant = 'stepped' | 'ramp';
+interface FunnelChartProps<TData extends Record<string, unknown>> {
+    /** Stage names → their label and paint. Keys must match the `nameKey` values. */
+    config: ChartConfig;
+    /** The stages, widest first. Order is the funnel; it is not sorted for you. */
+    data: TData[];
+    /** The row field holding each stage's number. */
+    dataKey: keyof TData & string;
+    /** The row field naming each stage. */
+    nameKey: keyof TData & string;
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /** The composed parts — `<Funnel>`, `<Tooltip>`. */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof FunnelChart$1>;
+    /** Drops the hidden table view. Only correct when the page prints the data itself. */
+    hideDataTable?: boolean;
+}
+/**
+ * Stages that only ever narrow — a signup flow, a hiring pipeline, a checkout.
+ *
+ * The caveat is the same one every funnel has: the taper encodes a RATIO
+ * between neighbouring stages, and the eye reads the enclosed area, so a funnel
+ * exaggerates a shallow drop and flattens a steep one. Where the exact fall-off
+ * is the point, put the percentages on the stages — `<Funnel.Label>` does — or
+ * use a `<BarChart>`, which encodes each stage on one honest scale.
+ *
+ * Reach for `<SankeyChart>` instead when the flow can SPLIT rather than only
+ * shrink: a funnel has one path through it by construction.
+ *
+ * @example
+ * <FunnelChart title="Signup funnel" config={config} data={stages} dataKey="people" nameKey="stage">
+ *   <FunnelChart.Funnel>
+ *     <FunnelChart.Label />
+ *   </FunnelChart.Funnel>
+ *   <FunnelChart.Tooltip />
+ * </FunnelChart>
+ */
+declare function FunnelChart<TData extends Record<string, unknown>>({ config, data, dataKey, nameKey, title, showTitle, description, children, className, chartProps, hideDataTable, }: FunnelChartProps<TData>): react.JSX.Element;
+declare namespace FunnelChart {
+    var Funnel: ({ variant, orientation, gap, children, funnelProps, }: FunnelProps) => react.JSX.Element;
+    var Label: ({ dataKey, position, labelListProps }: FunnelLabelProps) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element;
+}
+interface FunnelProps {
+    variant?: FunnelVariant;
+    /** Whether the funnel narrows downward or along the inline axis. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Gap between stages, in pixels. */
+    gap?: number;
+    /** `<FunnelChart.Label>`. */
+    children?: ReactNode;
+    funnelProps?: Omit<ComponentProps<typeof Funnel>, 'data' | 'dataKey'>;
+}
+interface FunnelLabelProps {
+    /** The field printed on each stage. Defaults to the stage's name. */
+    dataKey?: string;
+    /** Where the label sits relative to its stage. */
+    position?: ComponentProps<typeof LabelList>['position'];
+    labelListProps?: Omit<ComponentProps<typeof LabelList>, 'dataKey'>;
+}
+
+export { FunnelChart, type FunnelChartProps, type FunnelLabelProps, type FunnelProps, type FunnelVariant, FunnelChart as default };