solid-recharts 0.1.0

package/src/cartesian/ZAxis.tsx

@@ -0,0 +1,80 @@
+// Ported from recharts 3.8.1 src/cartesian/ZAxis.tsx (commit 7a23854).
+//
+// REGISTRATION-ONLY: ZAxis never renders (it has no ticks/line); it only pushes
+// settings into the cartesianAxis slice so Scatter can size its points by the z
+// value. Solid deviations: useLayoutEffect/prevRef → createEffect add/replace +
+// onCleanup remove (the XAxis/YAxis idiom); defaults via merge.
+import { createEffect, merge } from "solid-js";
+import { useAppStore } from "../state/hooks";
+import { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice";
+import { implicitZAxis } from "../state/selectors/axisSelectors";
+import { AxisDomain, DataKey, ScaleType } from "../util/types";
+import { AxisRange } from "../state/selectors/axisSelectors";
+import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+export interface ZAxisProps<DataPointType = unknown, DataValueType = unknown> {
+  zAxisId?: AxisId;
+  type?: "number" | "category";
+  dataKey?: DataKey<DataPointType, DataValueType>;
+  range?: AxisRange;
+  domain?: AxisDomain;
+  scale?: ScaleType | CustomScaleDefinition;
+  name?: string;
+  unit?: string;
+}
+
+export const zAxisDefaultProps = {
+  zAxisId: 0,
+  range: implicitZAxis.range,
+  scale: implicitZAxis.scale,
+  type: implicitZAxis.type,
+} as const;
+
+export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
+  props: ZAxisProps<DataPointType, DataValueType>,
+): null {
+  const store = useAppStore();
+  const merged = merge(zAxisDefaultProps, props);
+
+  let prev: ZAxisSettings | null = null;
+
+  createEffect(
+    (): ZAxisSettings => ({
+      id: merged.zAxisId,
+      type: merged.type,
+      dataKey: merged.dataKey,
+      range: merged.range,
+      domain: merged.domain,
+      scale: merged.scale,
+      // recharts registers the raw prop name/unit (undefined when unset); the
+      // implicit "" is only the fallback when NO ZAxis exists (selectZAxisSettings).
+      name: merged.name,
+      unit: merged.unit,
+      allowDataOverflow: implicitZAxis.allowDataOverflow,
+      allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
+      includeHidden: implicitZAxis.includeHidden,
+      reversed: implicitZAxis.reversed,
+    }),
+    (settings) => {
+      if (store == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.cartesianAxis.addZAxis(settings);
+      } else if (prev !== settings) {
+        store.actions.cartesianAxis.replaceZAxis({ prev, next: settings });
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.cartesianAxis.removeZAxis(prev);
+      prev = null;
+    }
+  });
+
+  return null;
+}

package/src/cartesian/getCartesianPosition.ts

@@ -0,0 +1,255 @@
+// Ported from recharts 3.8.1 src/cartesian/getCartesianPosition.tsx (commit 7a23854).
+// Pure geometry — no framework surface — so behavior is byte-identical to recharts.
+import { getPercentValue, isNumber, isPercent } from "../util/DataUtils";
+import { CartesianViewBoxRequired, TrapezoidViewBox } from "../util/types";
+import { TextAnchor, TextVerticalAnchor } from "../component/Text";
+import { cartesianViewBoxToTrapezoid } from "../context/chartLayoutContext";
+
+export type CartesianLabelPosition =
+  | "top"
+  | "left"
+  | "right"
+  | "bottom"
+  | "inside"
+  | "outside"
+  | "insideLeft"
+  | "insideRight"
+  | "insideTop"
+  | "insideBottom"
+  | "insideTopLeft"
+  | "insideBottomLeft"
+  | "insideTopRight"
+  | "insideBottomRight"
+  | "insideStart"
+  | "insideEnd"
+  | "end"
+  | "center"
+  | "centerTop"
+  | "centerBottom"
+  | "middle"
+  | {
+      x?: number | string;
+      y?: number | string;
+    };
+
+export type GetCartesianPositionOptions = {
+  viewBox: TrapezoidViewBox | CartesianViewBoxRequired;
+  parentViewBox?: CartesianViewBoxRequired;
+  /** The offset to the specified "position". Direction depends on the position. */
+  offset?: number;
+  /** The position of the element relative to the view box. */
+  position?: CartesianLabelPosition;
+  /**
+   * If true, the returned width and height are clamped to keep the element within
+   * the parentViewBox (prevents labels from overflowing the chart area).
+   */
+  clamp?: boolean;
+};
+
+export type CartesianPosition = {
+  x: number;
+  y: number;
+  horizontalAnchor: TextAnchor;
+  verticalAnchor: TextVerticalAnchor;
+  width?: number;
+  height?: number;
+};
+
+/**
+ * Calculates the position and alignment for a generic element in a Cartesian
+ * coordinate system.
+ */
+export const getCartesianPosition = (options: GetCartesianPositionOptions): CartesianPosition => {
+  const { viewBox, position, offset = 0, parentViewBox: parentViewBoxFromOptions, clamp } = options;
+
+  const { x, y, height, upperWidth, lowerWidth } = cartesianViewBoxToTrapezoid(viewBox);
+
+  // Funnel.tsx provides a viewBox where `x` is the top-left of the trapezoid shape.
+  const upperX = x;
+  // The trapezoid is centered, so we calculate the other corners from the top-left.
+  const lowerX = x + (upperWidth - lowerWidth) / 2;
+  // middleX is the x-coordinate of the left edge at the vertical midpoint.
+  const middleX = (upperX + lowerX) / 2;
+  // The width of the trapezoid at its vertical midpoint.
+  const midHeightWidth = (upperWidth + lowerWidth) / 2;
+  // The center x-coordinate is constant for the entire height of the trapezoid.
+  const centerX = upperX + upperWidth / 2;
+
+  // Vertical offsets/inverts based on the value being positive or negative,
+  // so labels position correctly for bars with negative height.
+  const verticalSign = height >= 0 ? 1 : -1;
+  const verticalOffset = verticalSign * offset;
+  const verticalEnd = verticalSign > 0 ? "end" : "start";
+  const verticalStart = verticalSign > 0 ? "start" : "end";
+
+  // Horizontal offsets/inverts based on the value being positive or negative.
+  const horizontalSign = upperWidth >= 0 ? 1 : -1;
+  const horizontalOffset = horizontalSign * offset;
+  const horizontalEnd = horizontalSign > 0 ? "end" : "start";
+  const horizontalStart = horizontalSign > 0 ? "start" : "end";
+
+  const parentViewBox = parentViewBoxFromOptions;
+
+  if (position === "top") {
+    const result: CartesianPosition = {
+      x: upperX + upperWidth / 2,
+      y: y - verticalOffset,
+      horizontalAnchor: "middle",
+      verticalAnchor: verticalEnd,
+    };
+    if (clamp && parentViewBox) {
+      result.height = Math.max(y - parentViewBox.y, 0);
+      result.width = upperWidth;
+    }
+    return result;
+  }
+
+  if (position === "bottom") {
+    const result: CartesianPosition = {
+      x: lowerX + lowerWidth / 2,
+      y: y + height + verticalOffset,
+      horizontalAnchor: "middle",
+      verticalAnchor: verticalStart,
+    };
+    if (clamp && parentViewBox) {
+      result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0);
+      result.width = lowerWidth;
+    }
+    return result;
+  }
+
+  if (position === "left") {
+    const result: CartesianPosition = {
+      x: middleX - horizontalOffset,
+      y: y + height / 2,
+      horizontalAnchor: horizontalEnd,
+      verticalAnchor: "middle",
+    };
+    if (clamp && parentViewBox) {
+      result.width = Math.max(result.x - parentViewBox.x, 0);
+      result.height = height;
+    }
+    return result;
+  }
+
+  if (position === "right") {
+    const result: CartesianPosition = {
+      x: middleX + midHeightWidth + horizontalOffset,
+      y: y + height / 2,
+      horizontalAnchor: horizontalStart,
+      verticalAnchor: "middle",
+    };
+    if (clamp && parentViewBox) {
+      result.width = Math.max(parentViewBox.x + parentViewBox.width - result.x, 0);
+      result.height = height;
+    }
+    return result;
+  }
+
+  const sizeAttrs = clamp && parentViewBox ? { width: midHeightWidth, height } : {};
+
+  if (position === "insideLeft") {
+    return {
+      x: middleX + horizontalOffset,
+      y: y + height / 2,
+      horizontalAnchor: horizontalStart,
+      verticalAnchor: "middle",
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideRight") {
+    return {
+      x: middleX + midHeightWidth - horizontalOffset,
+      y: y + height / 2,
+      horizontalAnchor: horizontalEnd,
+      verticalAnchor: "middle",
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideTop") {
+    return {
+      x: upperX + upperWidth / 2,
+      y: y + verticalOffset,
+      horizontalAnchor: "middle",
+      verticalAnchor: verticalStart,
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideBottom") {
+    return {
+      x: lowerX + lowerWidth / 2,
+      y: y + height - verticalOffset,
+      horizontalAnchor: "middle",
+      verticalAnchor: verticalEnd,
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideTopLeft") {
+    return {
+      x: upperX + horizontalOffset,
+      y: y + verticalOffset,
+      horizontalAnchor: horizontalStart,
+      verticalAnchor: verticalStart,
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideTopRight") {
+    return {
+      x: upperX + upperWidth - horizontalOffset,
+      y: y + verticalOffset,
+      horizontalAnchor: horizontalEnd,
+      verticalAnchor: verticalStart,
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideBottomLeft") {
+    return {
+      x: lowerX + horizontalOffset,
+      y: y + height - verticalOffset,
+      horizontalAnchor: horizontalStart,
+      verticalAnchor: verticalEnd,
+      ...sizeAttrs,
+    };
+  }
+
+  if (position === "insideBottomRight") {
+    return {
+      x: lowerX + lowerWidth - horizontalOffset,
+      y: y + height - verticalOffset,
+      horizontalAnchor: horizontalEnd,
+      verticalAnchor: verticalEnd,
+      ...sizeAttrs,
+    };
+  }
+
+  if (
+    !!position &&
+    typeof position === "object" &&
+    (isNumber(position.x) || isPercent(position.x)) &&
+    (isNumber(position.y) || isPercent(position.y))
+  ) {
+    // Percentage x is approximated against the mid-height width (the trapezoid
+    // width changes with y; recharts notes this as a known approximation).
+    return {
+      x: x + getPercentValue(position.x, midHeightWidth),
+      y: y + getPercentValue(position.y, height),
+      horizontalAnchor: "end",
+      verticalAnchor: "end",
+      ...sizeAttrs,
+    };
+  }
+
+  return {
+    x: centerX,
+    y: y + height / 2,
+    horizontalAnchor: "middle",
+    verticalAnchor: "middle",
+    ...sizeAttrs,
+  };
+};

package/src/cartesian/getEquidistantTicks.ts

@@ -0,0 +1,126 @@
+// Ported from recharts 3.8.1 src/cartesian/getEquidistantTicks.ts (commit 7a23854).
+import { isVisible } from "../util/TickUtils";
+import { CartesianTickItem } from "../util/types";
+import { getEveryNth } from "../util/getEveryNth";
+import { Sign } from "./getTicks";
+
+export function getEquidistantTicks(
+  sign: Sign,
+  boundaries: { start: number; end: number },
+  getTickSize: (tick: CartesianTickItem, index: number) => number,
+  ticks: ReadonlyArray<CartesianTickItem>,
+  minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+  const result = (ticks || []).slice();
+
+  const { start: initialStart, end } = boundaries;
+  let index = 0;
+  let stepsize = 1;
+  let start = initialStart;
+
+  while (stepsize <= result.length) {
+    // Given stepsize, evaluate whether every stepsize-th tick can be shown. If
+    // not, increase the stepsize by 1 and try again.
+    const entry = ticks?.[index];
+
+    // Break condition: all ticks evaluated.
+    if (entry === undefined) {
+      return getEveryNth(ticks, stepsize);
+    }
+
+    const i = index;
+    let size: number | undefined;
+    const getSize = (): number => {
+      if (size === undefined) {
+        size = getTickSize(entry, i);
+      }
+      return size;
+    };
+
+    const tickCoord = entry.coordinate;
+    // Always show the first tick.
+    const isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end);
+
+    if (!isShow) {
+      // Start over with a larger stepsize.
+      index = 0;
+      start = initialStart;
+      stepsize += 1;
+    }
+
+    if (isShow) {
+      start = tickCoord + sign * (getSize() / 2 + minTickGap);
+      index += stepsize;
+    }
+  }
+
+  return [];
+}
+
+export function getEquidistantPreserveEndTicks(
+  sign: Sign,
+  boundaries: { start: number; end: number },
+  getTickSize: (tick: CartesianTickItem, index: number) => number,
+  ticks: ReadonlyArray<CartesianTickItem>,
+  minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+  const result = (ticks || []).slice();
+  const len = result.length;
+
+  if (len === 0) {
+    return [];
+  }
+
+  const { start: initialStart, end } = boundaries;
+
+  // stepsize = 1 (every tick) up to the maximum possible stepsize (len).
+  for (let stepsize = 1; stepsize <= len; stepsize++) {
+    // Offset so the last tick (index len - 1) is always included.
+    const offset = (len - 1) % stepsize;
+    let start = initialStart; // coordinate of the last drawn tick + gap
+    let ok = true;
+
+    // Iterate the end-anchored sequence: offset, offset + stepsize, …, len - 1.
+    for (let index = offset; index < len; index += stepsize) {
+      const entry = ticks[index];
+      if (entry == null) {
+        continue;
+      }
+      const i = index;
+      let size: number | undefined;
+
+      const getSize = (): number => {
+        if (size === undefined) {
+          size = getTickSize(entry, i);
+        }
+        return size;
+      };
+
+      const tickCoord = entry.coordinate;
+
+      const isShow = index === offset || isVisible(sign, tickCoord, getSize, start, end);
+
+      if (!isShow) {
+        // Any tick failing visibility/collision rejects this stepsize.
+        ok = false;
+        break;
+      }
+
+      start = tickCoord + sign * (getSize() / 2 + minTickGap);
+    }
+
+    if (ok) {
+      const finalTicks: CartesianTickItem[] = [];
+      for (let index = offset; index < len; index += stepsize) {
+        const tick = ticks[index];
+        if (tick != null) {
+          finalTicks.push(tick);
+        }
+      }
+      return finalTicks;
+    }
+  }
+
+  // No stepsize works (only if minTickGap is huge).
+  return [];
+}

package/src/cartesian/getTicks.ts

@@ -0,0 +1,225 @@
+// Ported from recharts 3.8.1 src/cartesian/getTicks.ts (commit 7a23854).
+// Deviation: a tick's `value` is typed `unknown` here (recharts: `any`), so it is
+// narrowed to `string | number` (via isNumOrStr, else String()) before being
+// passed to getStringSize — behavior-equivalent for the normal string/number case.
+import { CartesianTickItem, CartesianViewBoxRequired, Size } from "../util/types";
+import { isNumOrStr, isNumber, mathSign } from "../util/DataUtils";
+import { getStringSize } from "../util/DOMUtils";
+import { Global } from "../util/Global";
+import {
+  getAngledTickWidth,
+  getNumberIntervalTicks,
+  getTickBoundaries,
+  isVisible,
+} from "../util/TickUtils";
+import { getEquidistantPreserveEndTicks, getEquidistantTicks } from "./getEquidistantTicks";
+import {
+  CartesianAxisSettings,
+  XAxisOrientation,
+  YAxisOrientation,
+} from "../state/cartesianAxisSlice";
+
+export type Sign = 0 | 1 | -1;
+
+function getTicksEnd(
+  sign: Sign,
+  boundaries: { start: number; end: number },
+  getTickSize: (tick: CartesianTickItem, index: number) => number,
+  ticks: ReadonlyArray<CartesianTickItem>,
+  minTickGap: number,
+): ReadonlyArray<CartesianTickItem> {
+  const result = (ticks || []).slice();
+  const len = result.length;
+
+  const { start } = boundaries;
+  let { end } = boundaries;
+
+  for (let i = len - 1; i >= 0; i--) {
+    const initialEntry = result[i];
+    if (initialEntry == null) {
+      continue;
+    }
+    let entry = initialEntry;
+    let size: number | undefined;
+    const getSize = (): number => {
+      if (size === undefined) {
+        size = getTickSize(initialEntry, i);
+      }
+      return size;
+    };
+
+    if (i === len - 1) {
+      const gap = sign * (entry.coordinate + (sign * getSize()) / 2 - end);
+      result[i] = entry = {
+        ...entry,
+        tickCoord: gap > 0 ? entry.coordinate - gap * sign : entry.coordinate,
+      };
+    } else {
+      result[i] = entry = { ...entry, tickCoord: entry.coordinate };
+    }
+
+    if (entry.tickCoord != null) {
+      const isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
+
+      if (isShow) {
+        end = entry.tickCoord - sign * (getSize() / 2 + minTickGap);
+        result[i] = { ...entry, isShow: true };
+      }
+    }
+  }
+
+  return result;
+}
+
+function getTicksStart(
+  sign: Sign,
+  boundaries: { start: number; end: number },
+  getTickSize: (tick: CartesianTickItem, index: number) => number,
+  ticks: ReadonlyArray<CartesianTickItem>,
+  minTickGap: number,
+  preserveEnd?: boolean,
+): ReadonlyArray<CartesianTickItem> {
+  // This method mutates the array, so the clone is necessary.
+  const result: Array<CartesianTickItem> = (ticks || []).slice();
+  const len = result.length;
+
+  let { start, end } = boundaries;
+
+  if (preserveEnd) {
+    // Try to guarantee the tail is displayed.
+    let tail = ticks[len - 1];
+    if (tail != null) {
+      const tailSize = getTickSize(tail, len - 1);
+      const tailGap = sign * (tail.coordinate + (sign * tailSize) / 2 - end);
+      result[len - 1] = tail = {
+        ...tail,
+        tickCoord: tailGap > 0 ? tail.coordinate - tailGap * sign : tail.coordinate,
+      };
+
+      if (tail.tickCoord != null) {
+        const isTailShow = isVisible(sign, tail.tickCoord, () => tailSize, start, end);
+
+        if (isTailShow) {
+          end = tail.tickCoord - sign * (tailSize / 2 + minTickGap);
+          result[len - 1] = { ...tail, isShow: true };
+        }
+      }
+    }
+  }
+
+  const count = preserveEnd ? len - 1 : len;
+  for (let i = 0; i < count; i++) {
+    const initialEntry = result[i];
+    if (initialEntry == null) {
+      continue;
+    }
+    let entry = initialEntry;
+    let size: number | undefined;
+    const getSize = (): number => {
+      if (size === undefined) {
+        size = getTickSize(initialEntry, i);
+      }
+      return size;
+    };
+
+    if (i === 0) {
+      const gap = sign * (entry.coordinate - (sign * getSize()) / 2 - start);
+      result[i] = entry = {
+        ...entry,
+        tickCoord: gap < 0 ? entry.coordinate - gap * sign : entry.coordinate,
+      };
+    } else {
+      result[i] = entry = { ...entry, tickCoord: entry.coordinate };
+    }
+
+    if (entry.tickCoord != null) {
+      const isShow = isVisible(sign, entry.tickCoord, getSize, start, end);
+
+      if (isShow) {
+        start = entry.tickCoord + sign * (getSize() / 2 + minTickGap);
+        result[i] = { ...entry, isShow: true };
+      }
+    }
+  }
+
+  return result;
+}
+
+export type GetTicksInput = {
+  angle?: number;
+  interval: CartesianAxisSettings["interval"] | undefined;
+  minTickGap: number;
+  orientation: XAxisOrientation | YAxisOrientation;
+  tick: CartesianAxisSettings["tick"];
+  tickFormatter?: CartesianAxisSettings["tickFormatter"];
+  ticks: ReadonlyArray<CartesianTickItem> | null;
+  unit?: CartesianAxisSettings["unit"];
+  viewBox: CartesianViewBoxRequired;
+};
+
+export function getTicks(
+  props: GetTicksInput,
+  fontSize?: string,
+  letterSpacing?: string,
+): ReadonlyArray<CartesianTickItem> {
+  const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } =
+    props;
+
+  if (!ticks || !ticks.length || !tick) {
+    return [];
+  }
+
+  if (isNumber(interval) || Global.isSsr) {
+    return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+  }
+
+  let candidates: ReadonlyArray<CartesianTickItem> = [];
+
+  const sizeKey = orientation === "top" || orientation === "bottom" ? "width" : "height";
+  const unitSize: Size =
+    unit && sizeKey === "width"
+      ? getStringSize(unit, { fontSize, letterSpacing })
+      : { width: 0, height: 0 };
+
+  const getTickSize = (content: CartesianTickItem, index: number): number => {
+    const raw: unknown =
+      typeof tickFormatter === "function" ? tickFormatter(content.value, index) : content.value;
+    const value: string | number = isNumOrStr(raw) ? raw : String(raw);
+    // Recharts only supports angles when sizeKey === 'width'.
+    return sizeKey === "width"
+      ? getAngledTickWidth(getStringSize(value, { fontSize, letterSpacing }), unitSize, angle)
+      : getStringSize(value, { fontSize, letterSpacing })[sizeKey];
+  };
+
+  const tick0 = ticks[0];
+  const tick1 = ticks[1];
+  const rawSign =
+    ticks.length >= 2 && tick0 != null && tick1 != null
+      ? mathSign(tick1.coordinate - tick0.coordinate)
+      : 1;
+  // mathSign returns `number`; narrow to the Sign union (its values are -1|0|1).
+  const sign: Sign = rawSign > 0 ? 1 : rawSign < 0 ? -1 : 0;
+  const boundaries = getTickBoundaries(viewBox, sign, sizeKey);
+
+  if (interval === "equidistantPreserveStart") {
+    return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+  }
+  if (interval === "equidistantPreserveEnd") {
+    return getEquidistantPreserveEndTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+  }
+
+  if (interval === "preserveStart" || interval === "preserveStartEnd") {
+    candidates = getTicksStart(
+      sign,
+      boundaries,
+      getTickSize,
+      ticks,
+      minTickGap,
+      interval === "preserveStartEnd",
+    );
+  } else {
+    candidates = getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap);
+  }
+
+  return candidates.filter((entry) => entry.isShow);
+}