@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/series-chart-thin.ts

@@ -1,180 +0,0 @@
-// The row budget of a series chart: which rows of a long table reach recharts, when there
-// are more than it should draw (`SeriesChartProps.maxRows`). Pure, and apart from the
-// chart, so the rule is tested on numbers, as the axis budget is (`series-chart-budget.ts`).
-//
-// Kurvenschmiede asked for it (KS U2, from its F88; round 0.34 C10). A chart cannot draw
-// two hundred thousand points — the SVG would hold more path nodes than the plot has
-// pixels — so a long table is thinned before it reaches recharts, and HOW decides what
-// the reader sees. Keeping every `ceil(n / 2000)`th sample, which the app did first,
-// ALIASES: the 160 Hz top of an acoustic sweep sampled at 1 kHz was kept at about 167 Hz
-// and drawn as a slow 6.7 Hz wave at full amplitude, a shape the data does not have,
-// drawn with complete confidence. A stride also steps over a spike one sample wide
-// whenever it falls between two kept rows — the sample a reader of a jerk channel is
-// looking for. So the envelope is the only way the chart thins; there is no stride
-// option beside it, because a stride is the one decimation that lies.
-//
-// **What is kept.** The table is cut into buckets, in order, and from each bucket the row
-// where each drawn series is lowest and the row where it is highest — so every line
-// still reaches every extreme the table reaches, in the bucket it reaches it in. A tone
-// faster than the buckets draws as the band it fills, not as a wave it is not. Each
-// series' first and last sample are kept too (a line starts where its data starts, and
-// arrives where it arrives), and so are the table's first and last row. The kept rows
-// are returned in their order, so a line is still the path in time — which matters where
-// the abscissa doubles back (a hysteresis loop drawn against position), and there the
-// abscissa is enveloped as well, so the path's turning points stay.
-//
-// Nothing is interpolated, averaged or smoothed: every point drawn is a row the caller
-// handed in.
-
-/** A sample, or a hole: anything that is not a finite number draws nothing. */
-const sampled = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
-
-/** A table the rule reads: rows, and a cell by key. The chart's rows, or any others. */
-type ThinRow = Readonly<Record<string, unknown>>;
-
-/**
- * The fewest rows a budget can be met with for `channels` series: the table's first and
- * last row, each series' first and last sample, and one bucket's low and high of each.
- * A smaller `maxRows` is raised to this — an envelope cannot be drawn with less.
- */
-export function minimumRows(channels: number): number {
-  const c = Math.max(1, channels);
-  return 2 + 2 * c + 2 * c;
-}
-
-/**
- * The indices of `rows[from, to)` to draw `keys` from, in order — at most `maxRows` of
- * them (but see {@link minimumRows}). A range no longer than `maxRows` comes back whole.
- *
- * Several series share one set of rows (that is what a recharts row is), so the buckets
- * get fewer as the series get more: two rows per series per bucket, plus the first and
- * last ones, and the total stays within the budget, which is what the budget is for.
- * With no key to read an envelope off, each bucket keeps its first row.
- */
-export function envelopeIndices(
-  rows: readonly ThinRow[],
-  keys: readonly string[],
-  maxRows: number,
-  from = 0,
-  to = rows.length,
-): number[] {
-  const length = Math.max(0, to - from);
-  const budget = Math.max(Math.floor(maxRows), minimumRows(keys.length));
-  if (length <= budget) return Array.from({ length }, (_, offset) => from + offset);
-
-  const keep = new Uint8Array(length);
-  keep[0] = 1;
-  keep[length - 1] = 1;
-  for (const key of keys) {
-    // Where each line starts and stops, which for a series with holes at either end is
-    // not the table's first and last row.
-    let first = 0;
-    while (first < length && !sampled(rows[from + first][key])) first += 1;
-    let last = length - 1;
-    while (last > first && !sampled(rows[from + last][key])) last -= 1;
-    if (first < length) {
-      keep[first] = 1;
-      keep[last] = 1;
-    }
-  }
-
-  // What is left after the first and last rows, two per series per bucket.
-  const series = Math.max(1, keys.length);
-  const buckets = Math.max(1, Math.floor((budget - 2 - 2 * series) / (2 * series)));
-  for (let bucket = 0; bucket < buckets; bucket += 1) {
-    const start = Math.floor((bucket * length) / buckets);
-    const end = Math.floor(((bucket + 1) * length) / buckets);
-    if (keys.length === 0) {
-      keep[start] = 1;
-      continue;
-    }
-    for (const key of keys) {
-      let low = -1;
-      let high = -1;
-      let lowest = Infinity;
-      let highest = -Infinity;
-      for (let offset = start; offset < end; offset += 1) {
-        const value = rows[from + offset][key];
-        if (!sampled(value)) continue;
-        if (value < lowest) {
-          lowest = value;
-          low = offset;
-        }
-        if (value > highest) {
-          highest = value;
-          high = offset;
-        }
-      }
-      if (low >= 0) keep[low] = 1;
-      if (high >= 0) keep[high] = 1;
-    }
-  }
-
-  const indices: number[] = [];
-  for (let offset = 0; offset < length; offset += 1) if (keep[offset]) indices.push(from + offset);
-  return indices;
-}
-
-/** Whether `key` never decreases down the rows — a time axis, a sweep. Holes are skipped. */
-export function ascending(rows: readonly ThinRow[], key: string): boolean {
-  let previous = -Infinity;
-  for (const row of rows) {
-    const value = row[key];
-    if (!sampled(value)) continue;
-    if (value < previous) return false;
-    previous = value;
-  }
-  return true;
-}
-
-/**
- * The rows a chart draws under a row budget, as indices into `rows` — or `undefined` when
- * it draws them all (no more rows than the budget, or no budget), so the caller can hand
- * recharts its own array untouched.
- *
- * `xKey` is the abscissa, as plotted. Where it never decreases and the chart is zoomed to
- * `window`, only the rows inside the window are thinned — with one more on each side, so
- * the lines run to the plot's edges — and a zoom far enough in draws every sample there:
- * the budget is spent on what is on show. Where the abscissa doubles back, the window
- * does not cut the table into one stretch, so the whole table is thinned, and the
- * abscissa is one of the enveloped keys: its turning points are part of the shape.
- */
-export function thinnedRows(
-  rows: readonly ThinRow[],
-  xKey: string,
-  keys: readonly string[],
-  maxRows: number | undefined,
-  window?: readonly [number, number],
-): number[] | undefined {
-  if (maxRows === undefined || !(maxRows > 0) || rows.length <= maxRows) return undefined;
-  if (!ascending(rows, xKey)) {
-    const indices = envelopeIndices(rows, [...keys, xKey], maxRows);
-    return indices.length === rows.length ? undefined : indices;
-  }
-  let from = 0;
-  let to = rows.length;
-  if (window) {
-    // The first row at or past the window's start, less one; the last at or before its
-    // end, plus one. Holes in the abscissa are neither.
-    let first = -1;
-    let last = -1;
-    rows.forEach((row, index) => {
-      const at = row[xKey];
-      if (!sampled(at)) return;
-      if (first === -1 && at >= window[0]) first = index;
-      if (at <= window[1]) last = index;
-    });
-    if (first !== -1 && last >= first) {
-      from = Math.max(0, first - 1);
-      to = Math.min(rows.length, last + 2);
-    } else {
-      // A window between two samples: the two rows either side of it, so the line is
-      // still drawn across.
-      const after = first === -1 ? rows.length : first;
-      from = Math.max(0, after - 1);
-      to = Math.min(rows.length, after + 1);
-    }
-  }
-  const indices = envelopeIndices(rows, keys, maxRows, from, to);
-  return indices.length === rows.length ? undefined : indices;
-}

package/src/components/series-chart-ticks.ts

@@ -1,194 +0,0 @@
-// Round tick values for `SeriesChart` — internal, not re-exported by `@eifi1/ui-kit/chart`.
-//
-// Handed an explicit numeric domain, recharts divides it into equal parts and prints
-// wherever those land: a fitted band of [-11, 811] comes out as -11, 189, 389 … and a
-// padded [89, 1011] as 89, 289, 489 — numbers nobody can put a ruler against. These
-// are the ticks a person would draw instead: every multiple of a 1, 2 or 5 × 10^n step
-// that lies INSIDE the domain. The domain itself is left alone, so the 4 % of air the
-// fit leaves and a zoom window's exact edges both survive; the frame simply does not
-// get a number of its own.
-
-/** Roughly how many ticks to aim for. The 1/2/5 ladder lands anywhere from about half
- *  to about twice this, which is the price of every tick being a round number. */
-const TARGET_TICKS = 5;
-
-/** The aim at Large and Extra large (docs/text-size-harmonization.md §4): the labels are
- *  25–50 % wider and taller, so five of them crowd an axis that holds them at Normal. */
-export const LARGE_TEXT_TARGET_TICKS = 3;
-
-/** How many ticks to aim for at a text `scale` (`useTextSize().scale`): five at Normal,
- *  three from Large up. */
-export function tickTarget(scale = 1): number {
-  return scale > 1 ? LARGE_TEXT_TARGET_TICKS : TARGET_TICKS;
-}
-
-/** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */
-export function niceStep(span: number, target: number = TARGET_TICKS): number {
-  const rough = span / Math.max(1, target);
-  const magnitude = 10 ** Math.floor(Math.log10(rough));
-  const norm = rough / magnitude;
-  const factor = norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10;
-  return factor * magnitude;
-}
-
-/**
- * The round ticks inside `[low, high]`, ascending — or `undefined` when there is no
- * span to divide (no domain, a zero-height one, anything non-finite), which leaves the
- * choice to recharts.
- *
- * Each tick is computed as `k × step` and then rounded to the step's own decimals:
- * accumulating `+= 0.1` would print 0.30000000000000004 on the third tick.
- */
-export function niceTicks(
-  domain: readonly [number, number] | undefined,
-  target: number = TARGET_TICKS,
-): number[] | undefined {
-  if (!domain) return undefined;
-  const [low, high] = domain;
-  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;
-  const step = niceStep(high - low, target);
-  if (!(step > 0) || !Number.isFinite(step)) return undefined;
-  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
-  const ticks: number[] = [];
-  // Half a step's tolerance per end would admit ticks outside the frame; a millionth
-  // of one only forgives the float error in `low / step`.
-  const first = Math.ceil(low / step - 1e-6);
-  const last = Math.floor(high / step + 1e-6);
-  for (let k = first; k <= last; k++) {
-    // `+ 0` turns the -0 that `Number("-0.00")` gives back into a plain 0.
-    ticks.push(Number((k * step).toFixed(decimals)) + 0);
-  }
-  return ticks.length ? ticks : undefined;
-}
-
-/**
- * {@link niceTicks} on whole numbers only: the step never drops below 1, so a short
- * index series (a domain of [-0.2, 4.2]) is ticked 0 1 2 3 4 instead of every half.
- * `undefined` when the window holds no whole number at all, so the caller can fall
- * back to the fractional ticks of a deep zoom rather than show none.
- */
-export function integerTicks(
-  domain: readonly [number, number] | undefined,
-  target: number = TARGET_TICKS,
-): number[] | undefined {
-  if (!domain) return undefined;
-  const [low, high] = domain;
-  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high >= low)) return undefined;
-  const step = high > low ? Math.max(1, niceStep(high - low, target)) : 1;
-  const ticks: number[] = [];
-  const first = Math.ceil(low / step - 1e-6);
-  const last = Math.floor(high / step + 1e-6);
-  for (let k = first; k <= last; k++) ticks.push(k * step + 0);
-  return ticks.length ? ticks : undefined;
-}
-
-/**
- * The slots of a CATEGORY axis that lie inside a window over their positions.
- *
- * `SeriesChart` draws a category axis on the slot INDEX (see `x.type: "category"`), so a
- * zoom window is a range of fractional positions — [2.6, 8.3] after a drag across the
- * third to ninth month. A tick belongs on every whole slot inside it, and on nothing in
- * between: there is no month 2.5. Recharts' `minTickGap` thins them where they crowd.
- */
-export function categoryTicks(domain: readonly [number, number] | undefined, count: number): number[] | undefined {
-  if (!domain || !(count > 0)) return undefined;
-  const first = Math.max(0, Math.ceil(domain[0] - 1e-6));
-  const last = Math.min(count - 1, Math.floor(domain[1] + 1e-6));
-  const ticks: number[] = [];
-  for (let slot = first; slot <= last; slot++) ticks.push(slot);
-  return ticks.length ? ticks : undefined;
-}
-
-/** What one tick of a time axis stands for, which is also how its label is written. */
-export type TimeTickUnit = "hour" | "day" | "month" | "year";
-
-const HOUR = 3_600_000;
-const DAY = 24 * HOUR;
-
-/**
- * The calendar steps a time axis may tick in, with their rough length for choosing.
- * Months and years are stepped with `Date` setters, not by adding their "length":
- * thirty days from the 1st of February is the 3rd of March, and a tick that promises a
- * month start and prints the 3rd is the ruler lying.
- */
-const TIME_STEPS: readonly { unit: TimeTickUnit; n: number; ms: number }[] = [
-  { unit: "hour", n: 1, ms: HOUR },
-  { unit: "hour", n: 3, ms: 3 * HOUR },
-  { unit: "hour", n: 6, ms: 6 * HOUR },
-  { unit: "hour", n: 12, ms: 12 * HOUR },
-  { unit: "day", n: 1, ms: DAY },
-  { unit: "day", n: 2, ms: 2 * DAY },
-  { unit: "day", n: 7, ms: 7 * DAY },
-  { unit: "month", n: 1, ms: 30.44 * DAY },
-  { unit: "month", n: 2, ms: 60.88 * DAY },
-  { unit: "month", n: 3, ms: 91.31 * DAY },
-  { unit: "month", n: 6, ms: 182.62 * DAY },
-];
-
-/**
- * Calendar ticks inside a window of epoch milliseconds — midnights, Mondays, month and
- * quarter starts, new years, in LOCAL time — and the unit they are in, so the label can
- * say as much as the tick means ("Mar 26" for a month start, "14 Mar" for a day).
- *
- * The time counterpart of {@link niceTicks}: a 1/2/5 ladder over raw milliseconds lands
- * on 5 × 10⁹ ms, every 58 days, at whatever hour that happens to be. keksdose's price
- * history and cash buffer each thinned their own ticks by hand for exactly this reason.
- */
-export function timeTicksWithUnit(
-  domain: readonly [number, number] | undefined,
-  target: number = TARGET_TICKS,
-): { ticks: number[]; unit: TimeTickUnit } | undefined {
-  if (!domain) return undefined;
-  const [low, high] = domain;
-  if (!Number.isFinite(low) || !Number.isFinite(high) || !(high > low)) return undefined;
-  const rough = (high - low) / Math.max(1, target);
-  let unit: TimeTickUnit = "year";
-  let n = 1;
-  let best = Infinity;
-  for (const step of TIME_STEPS) {
-    const miss = Math.abs(Math.log(step.ms / rough));
-    if (miss < best) {
-      best = miss;
-      unit = step.unit;
-      n = step.n;
-    }
-  }
-  // The year ladder competes on the same terms as the table: one year is 365.25 days.
-  const yearN = Math.max(1, Math.round(niceStep((high - low) / (365.25 * DAY), target)));
-  if (Math.abs(Math.log((yearN * 365.25 * DAY) / rough)) < best) {
-    unit = "year";
-    n = yearN;
-  }
-
-  const start = new Date(low);
-  start.setMinutes(0, 0, 0);
-  if (unit !== "hour") start.setHours(0);
-  if (unit === "month" || unit === "year") start.setDate(1);
-  if (unit === "year") start.setMonth(0);
-  // Onto the step's own grid: hours of the day, Mondays, month indices, years — so a
-  // zoom window starting on a Wednesday still ticks on Mondays.
-  if (unit === "hour") start.setHours(start.getHours() - (start.getHours() % n));
-  if (unit === "day" && n === 7) start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
-  if (unit === "month") start.setMonth(start.getMonth() - (start.getMonth() % n));
-  if (unit === "year") start.setFullYear(start.getFullYear() - (start.getFullYear() % n));
-
-  const ticks: number[] = [];
-  const at = new Date(start);
-  // Bounded, so a window of a million years cannot hang the render.
-  for (let guard = 0; guard < 1000 && at.getTime() <= high; guard++) {
-    if (at.getTime() >= low) ticks.push(at.getTime());
-    if (unit === "hour") at.setHours(at.getHours() + n);
-    else if (unit === "day") at.setDate(at.getDate() + n);
-    else if (unit === "month") at.setMonth(at.getMonth() + n);
-    else at.setFullYear(at.getFullYear() + n);
-  }
-  return ticks.length ? { ticks, unit } : undefined;
-}
-
-/** {@link timeTicksWithUnit}, ticks only. */
-export function timeTicks(
-  domain: readonly [number, number] | undefined,
-  target: number = TARGET_TICKS,
-): number[] | undefined {
-  return timeTicksWithUnit(domain, target)?.ticks;
-}