solid-recharts 0.1.0

package/src/util/scale/index.ts

@@ -0,0 +1,3 @@
+// Ported from recharts 3.8.1 src/util/scale/index.ts (commit 7a23854).
+// Barrel so consumers can import `from '../../util/scale'` (the reference path).
+export { getNiceTickValues, getTickValuesFixedDomain } from "./getNiceTickValues";

package/src/util/scale/util/DecimalLite.ts

@@ -0,0 +1,194 @@
+// Replaces the decimal.js-light dependency for the tick-arithmetic pipeline
+// (arithmetic.ts + getNiceTickValues.ts). Exact decimal arithmetic on a BigInt
+// mantissa + base-10 exponent, covering precisely the API surface those two
+// files use: construct from number/Decimal, add/sub/mul/div/mod/pow/abs,
+// lt/isint/toNumber, and log(10).
+//
+// Parity notes vs decimal.js-light (the byte-exact tick spec matrix guards this):
+//  - add/sub/mul/mod are EXACT here. decimal.js-light rounds results to its
+//    20-significant-digit precision, but every operand in this pipeline comes
+//    from a double (≤17 significant digits) and the chains stay well under 20
+//    digits before `toNumber()`, so the results are identical.
+//  - div rounds to 20 significant digits, ROUND_HALF_UP — decimal.js-light's
+//    defaults — when the quotient does not terminate.
+//  - log(10) is only ever consumed as `Math.floor(…toNumber()) + 1` (digit
+//    count), so it returns the EXACT integer `floor(log10(|x|))` computed from
+//    the decimal representation. Any return value with the same floor is
+//    behavior-identical, and the exact floor avoids transcendental rounding.
+
+const PRECISION = 20;
+
+const parseRe = /^(-?)(\d+)(?:\.(\d+))?(?:e([+-]?\d+))?$/i;
+
+export default class Decimal {
+  /** Normalized mantissa (no trailing zero digits; carries the sign). */
+  private readonly m: bigint;
+  /** Base-10 exponent: value = m * 10^e. Zero is (0n, 0). */
+  private readonly e: number;
+
+  constructor(value: number | string | Decimal) {
+    if (value instanceof Decimal) {
+      this.m = value.m;
+      this.e = value.e;
+      return;
+    }
+    const str = typeof value === "number" ? String(value) : value;
+    const match = parseRe.exec(str);
+    if (match == null) {
+      throw new Error(`[DecimalLite] Invalid argument: ${str}`);
+    }
+    const [, sign, intPart, fracPart = "", expPart] = match;
+    const digits = `${intPart ?? ""}${fracPart}`;
+    let m = BigInt(digits);
+    let e = (expPart ? Number(expPart) : 0) - fracPart.length;
+    while (m !== 0n && m % 10n === 0n) {
+      m /= 10n;
+      e += 1;
+    }
+    if (m === 0n) {
+      e = 0;
+    }
+    this.m = sign === "-" ? -m : m;
+    this.e = e;
+  }
+
+  private static of(m: bigint, e: number): Decimal {
+    let nm = m;
+    let ne = e;
+    while (nm !== 0n && nm % 10n === 0n) {
+      nm /= 10n;
+      ne += 1;
+    }
+    const d = new Decimal(0);
+    // Reconstruct through the string form to keep the constructor the single
+    // normalization point (cheap: numbers here are small).
+    return nm === 0n ? d : new Decimal(`${nm}e${ne}`);
+  }
+
+  /** Both operands scaled to the smaller exponent: [am, bm, exp]. */
+  private static aligned(a: Decimal, b: Decimal): [bigint, bigint, number] {
+    const e = Math.min(a.e, b.e);
+    return [a.m * 10n ** BigInt(a.e - e), b.m * 10n ** BigInt(b.e - e), e];
+  }
+
+  add(other: number | Decimal): Decimal {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    const [am, bm, e] = Decimal.aligned(this, o);
+    return Decimal.of(am + bm, e);
+  }
+
+  sub(other: number | Decimal): Decimal {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    const [am, bm, e] = Decimal.aligned(this, o);
+    return Decimal.of(am - bm, e);
+  }
+
+  mul(other: number | Decimal): Decimal {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    return Decimal.of(this.m * o.m, this.e + o.e);
+  }
+
+  div(other: number | Decimal): Decimal {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    if (o.m === 0n) {
+      throw new Error("[DecimalLite] Division by zero");
+    }
+    if (this.m === 0n) {
+      return new Decimal(0);
+    }
+    // Compute PRECISION+1 quotient digits, then round half-up to PRECISION.
+    const digitsA = (this.m < 0n ? -this.m : this.m).toString().length;
+    const digitsB = (o.m < 0n ? -o.m : o.m).toString().length;
+    const shift = PRECISION + 1 + Math.max(0, digitsB - digitsA);
+    const num = this.m * 10n ** BigInt(shift);
+    let q = num / o.m;
+    const r = num % o.m;
+    if (r === 0n) {
+      return Decimal.of(q, this.e - o.e - shift);
+    }
+    // Non-terminating: keep exactly PRECISION significant digits, half-up.
+    const negative = q < 0n;
+    let qa = negative ? -q : q;
+    let e = this.e - o.e - shift;
+    const extra = qa.toString().length - PRECISION;
+    if (extra > 0) {
+      const scale = 10n ** BigInt(extra);
+      const rem = qa % scale;
+      qa /= scale;
+      e += extra;
+      if (rem * 2n >= scale) {
+        qa += 1n;
+      }
+    }
+    return Decimal.of(negative ? -qa : qa, e);
+  }
+
+  /** Truncated-division remainder (sign follows the dividend), exact. */
+  mod(other: number | Decimal): Decimal {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    if (o.m === 0n) {
+      throw new Error("[DecimalLite] Modulo by zero");
+    }
+    const [am, bm, e] = Decimal.aligned(this, o);
+    return Decimal.of(am % bm, e);
+  }
+
+  /** Integer exponents only (the tick pipeline raises 10 to digit counts). */
+  pow(n: number): Decimal {
+    if (!Number.isInteger(n)) {
+      throw new Error("[DecimalLite] pow supports integer exponents only");
+    }
+    if (n === 0) {
+      return new Decimal(1);
+    }
+    const positive = Math.abs(n);
+    let result = new Decimal(1);
+    for (let i = 0; i < positive; i++) {
+      result = result.mul(this);
+    }
+    return n > 0 ? result : new Decimal(1).div(result);
+  }
+
+  abs(): Decimal {
+    return this.m < 0n ? Decimal.of(-this.m, this.e) : this;
+  }
+
+  /**
+   * Base-10 logarithm, exact at floor precision: returns the integer
+   * `floor(log10(|x|))` (see file header — that floor is all consumers use).
+   */
+  log(base: number): Decimal {
+    if (base !== 10) {
+      throw new Error("[DecimalLite] log supports base 10 only");
+    }
+    if (this.m === 0n) {
+      throw new Error("[DecimalLite] log of zero");
+    }
+    const digits = (this.m < 0n ? -this.m : this.m).toString().length;
+    return new Decimal(digits - 1 + this.e);
+  }
+
+  lt(other: number | Decimal): boolean {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    const [am, bm] = Decimal.aligned(this, o);
+    return am < bm;
+  }
+
+  lte(other: number | Decimal): boolean {
+    const o = other instanceof Decimal ? other : new Decimal(other);
+    const [am, bm] = Decimal.aligned(this, o);
+    return am <= bm;
+  }
+
+  isint(): boolean {
+    return this.e >= 0;
+  }
+
+  toNumber(): number {
+    return Number(`${this.m}e${this.e}`);
+  }
+
+  toString(): string {
+    return String(this.toNumber());
+  }
+}

package/src/util/scale/util/arithmetic.ts

@@ -0,0 +1,56 @@
+// Ported from recharts 3.8.1 src/util/scale/util/arithmetic.ts (commit 7a23854).
+// Pure math — no framework surface — so behavior is byte-identical to recharts.
+/**
+ * @fileOverview Some common arithmetic methods
+ * @author xile611
+ * @date 2015-09-17
+ */
+import Decimal from "./DecimalLite";
+
+/**
+ * Get the digit count of a number.
+ * If the absolute value is in the interval [0.1, 1), the result is 0.
+ * If the absolute value is in the interval [0.01, 0.1), the digit count is -1.
+ * If the absolute value is in the interval [0.001, 0.01), the digit count is -2.
+ *
+ * @param  {Number} value The number
+ * @return {Integer}      Digit count
+ */
+function getDigitCount(value: number): number {
+  let result;
+
+  if (value === 0) {
+    result = 1;
+  } else {
+    result = Math.floor(new Decimal(value).abs().log(10).toNumber()) + 1;
+  }
+
+  return result;
+}
+
+/**
+ * Get the data in the interval [start, end) with a fixed step.
+ * Also handles JS calculation precision issues.
+ *
+ * @param  {Decimal} start Start point
+ * @param  {Decimal} end   End point, not included
+ * @param  {Decimal} step  Step size
+ * @return {Array}         Array of numbers
+ */
+function rangeStep(start: Decimal, end: Decimal, step: Decimal): Array<number> {
+  let num = new Decimal(start);
+  let i = 0;
+  const result: Array<number> = [];
+
+  // magic number to prevent infinite loop
+  while (num.lt(end) && i < 100000) {
+    result.push(num.toNumber());
+
+    num = num.add(step);
+    i++;
+  }
+
+  return result;
+}
+
+export { rangeStep, getDigitCount };

package/src/util/stacks/getStackSeriesIdentifier.ts

@@ -0,0 +1,20 @@
+// Ported from recharts 3.8.1 src/util/stacks/getStackSeriesIdentifier.ts
+// (commit 7a23854).
+import { StackSeriesIdentifier } from "./stackTypes";
+import { MaybeStackedGraphicalItem } from "../../state/types/StackedGraphicalItem";
+
+export function getStackSeriesIdentifier(
+  graphicalItem: MaybeStackedGraphicalItem,
+): StackSeriesIdentifier;
+export function getStackSeriesIdentifier(graphicalItem: undefined): undefined;
+export function getStackSeriesIdentifier(
+  graphicalItem: MaybeStackedGraphicalItem | undefined,
+): StackSeriesIdentifier | undefined;
+/**
+ * Returns the identifier for a stack series (one graphical item in the stack).
+ */
+export function getStackSeriesIdentifier(
+  graphicalItem: MaybeStackedGraphicalItem | undefined,
+): StackSeriesIdentifier | undefined {
+  return graphicalItem?.id;
+}

package/src/util/stacks/stackTypes.ts

@@ -0,0 +1,53 @@
+// Ported from recharts 3.8.1 src/util/stacks/stackTypes.ts (commit 7a23854).
+import { Series } from "victory-vendor/d3-shape";
+import { StackId } from "../ChartUtils";
+import { DataKey } from "../types";
+import { GraphicalItemId } from "../../state/graphicalItemsSlice";
+import { MaybeStackedGraphicalItem } from "../../state/types/StackedGraphicalItem";
+
+/*
+ * Chart stacks come in layers:
+ * - The top layer is the stack itself, a collection of series, identified by `StackId`
+ *   (from the graphical items' `stackId` prop). A chart may have multiple stacks.
+ * - One stack has multiple series — the individual data series that make it up. One
+ *   series is one `GraphicalItem`; this module identifies it.
+ * - The third layer is the data point: a tuple of two numbers.
+ */
+
+/**
+ * Collection of all stacks in the chart. A simple stacked chart has a single
+ * stack; an empty object means no stacks.
+ */
+export type AllStackGroups = Record<StackId, StackGroup>;
+
+/**
+ * A collection of series stacked together. The series and graphical items are
+ * joined by the {@link StackSeriesIdentifier}.
+ */
+export type StackGroup = {
+  readonly stackedData: ReadonlyArray<StackSeries>;
+  readonly graphicalItems: ReadonlyArray<MaybeStackedGraphicalItem>;
+};
+
+/**
+ * A collection of data points representing one graphical item in the stack. The
+ * coordinates already include the baseline of the previous series in the stack.
+ *
+ * Deviation from recharts: the d3 `Series<Datum, Key>` Datum param is the SOURCE
+ * data record, not the [number, number] point (recharts declares it as
+ * StackDataPoint and bridges with `@ts-expect-error`). We type it to what
+ * `getStackedData` actually produces so the assignment is sound without a cast;
+ * each series element is still structurally a `StackDataPoint` ([number, number]).
+ */
+export type StackSeries = Series<Record<string, unknown>, DataKey<unknown>>;
+
+/**
+ * A tuple of two numbers: where the previous stack series ended and where this
+ * one ends — letting the next series set its baseline.
+ */
+export type StackDataPoint = [number, number];
+
+/**
+ * Identifier joining a stack series with its graphical item.
+ */
+export type StackSeriesIdentifier = GraphicalItemId;

package/src/util/svgPropertiesAndEvents.ts

@@ -0,0 +1,84 @@
+// Ported from recharts 3.8.1.
+// recharts uses React's `isValidElement`/`element.props` in
+// `svgPropertiesAndEventsFromUnknown` — there is NO Solid equivalent (a Solid
+// element is a DOM node, not a `{ props }` structure), so the element branch
+// is deferred until the Tier-2 "shape can be an element or a props object"
+// pattern lands (ActiveShapeUtils). Element inputs currently fall through to
+// `null`. React's `SVGProps`/`CSSProperties` types are replaced with JSX.*
+// from '@solidjs/web'.
+import { isEventKey } from "./excludeEventProps";
+import { isDataAttribute, isSvgElementPropKey, toSvgAttributeName } from "./svgPropertiesNoEvents";
+import { svgPropertiesNoEventsKeepCase } from "./svgPropertiesNoEvents";
+
+/**
+ * Filters an object to only include SVG properties, data attributes, and event
+ * handlers, renaming camelCase SVG presentation keys to their real (kebab/namespaced)
+ * DOM attribute names so a Solid spread emits valid SVG. Event keys (`on*`) and
+ * genuinely-camelCase SVG attributes pass through unchanged. Returns a DOM-ready
+ * record (not keyed by the input keys), hence `Record<string, unknown>`.
+ * @param obj - The object to filter.
+ * @returns A new object containing only valid SVG attributes, data attributes, and event handlers.
+ */
+export function svgPropertiesAndEvents(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  // for ... in loop is 10x faster than Object.entries + filter + Object.fromEntries in Chrome.
+  // Note: for...in only iterates string (and numeric-as-string) keys; symbols are naturally excluded.
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      if (isSvgElementPropKey(key) || isDataAttribute(key)) {
+        // Presentation/data attributes get the camelCase → DOM-name rename.
+        result[toSvgAttributeName(key)] = obj[key];
+      } else if (isEventKey(key)) {
+        // Solid event props (`onMouseEnter`, …) must keep their camelCase key.
+        result[key] = obj[key];
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Vendor-verbatim variant of {@link svgPropertiesAndEvents}: keeps camelCase
+ * key names (see svgPropertiesNoEventsKeepCase). For building component-input
+ * payload records; the consuming component applies the DOM rename itself.
+ */
+export function svgPropertiesAndEventsKeepCase(
+  obj: Record<string, unknown>,
+): Record<string, unknown> {
+  const result = svgPropertiesNoEventsKeepCase(obj);
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key) && isEventKey(key)) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Function to filter SVG properties and events from various input types.
+ * The input types can be:
+ * - A plain (non-array) object, in which case it returns a record of only SVG
+ *   properties, data attributes, and event handlers.
+ * - Anything else, in which case it returns null.
+ *
+ * DEVIATION from recharts: recharts also accepts a React element here (via
+ * `isValidElement` + `element.props`) so callers can pass `dot={<circle .../>}`.
+ * Solid has no element-props introspection — a rendered Solid element is a DOM
+ * node, not a `{ props }` data structure — so the element branch is deferred
+ * until the Tier-2 "shape can be an element or a props object" pattern is
+ * designed (ActiveShapeUtils). Element inputs currently fall through to `null`.
+ *
+ * @param input - The input to filter.
+ * @returns A filtered record of SVG properties if the input is a plain object, otherwise null.
+ */
+export function svgPropertiesAndEventsFromUnknown(input: unknown): Record<string, unknown> | null {
+  if (input == null) {
+    return null;
+  }
+
+  if (typeof input === "object" && !Array.isArray(input)) {
+    return svgPropertiesAndEvents({ ...input });
+  }
+
+  return null;
+}