solid-recharts 0.1.0

package/src/chart/types.ts

@@ -0,0 +1,37 @@
+// Ported from recharts 3.8.1 src/chart/types.ts (commit 7a23854).
+//
+// Deviation: recharts' React event generics become native DOM events — Solid
+// event handlers receive native events, so `SyntheticEvent` → `Event`,
+// `MouseEvent<SVGGraphicsElement>` → the global `MouseEvent`, and
+// `TouchEvent<SVGGraphicsElement>` → the global `TouchEvent` (the element is on
+// `event.currentTarget`). No React import.
+import { MouseHandlerDataParam } from "../synchronisation/types";
+
+export type TooltipTrigger = "hover" | "click";
+
+export type CategoricalChartFunc<E = Event> = (nextState: MouseHandlerDataParam, event: E) => void;
+
+export interface ExternalMouseEvents {
+  /** Customized click handler for this chart. */
+  onClick?: CategoricalChartFunc<MouseEvent>;
+  /** Customized mouseleave handler for this chart. */
+  onMouseLeave?: CategoricalChartFunc<MouseEvent>;
+  /** Customized mouseenter handler for this chart. */
+  onMouseEnter?: CategoricalChartFunc<MouseEvent>;
+  /** Customized mousemove handler for this chart. */
+  onMouseMove?: CategoricalChartFunc<MouseEvent>;
+  /** Customized mousedown handler for this chart. */
+  onMouseDown?: CategoricalChartFunc<MouseEvent>;
+  /** Customized mouseup handler for this chart. */
+  onMouseUp?: CategoricalChartFunc<MouseEvent>;
+  /** Customized contextmenu handler for this chart. */
+  onContextMenu?: CategoricalChartFunc<MouseEvent>;
+  /** Customized dblclick handler for this chart. */
+  onDoubleClick?: CategoricalChartFunc<MouseEvent>;
+  /** Customized touchstart handler for this chart. */
+  onTouchStart?: CategoricalChartFunc<TouchEvent>;
+  /** Customized touchmove handler for this chart. */
+  onTouchMove?: CategoricalChartFunc<TouchEvent>;
+  /** Customized touchend handler for this chart. */
+  onTouchEnd?: CategoricalChartFunc<TouchEvent>;
+}

package/src/component/ActivePoints.tsx

@@ -0,0 +1,136 @@
+// Ported from recharts 3.8.1 src/component/ActivePoints.tsx (commit 7a23854).
+// Solid deviations: state is computed in a parent createMemo (plain data only);
+// JSX is built in the parent's JSX scope via `renderActivePointsLayerFromState`.
+// Mounting a child component that subscribes to tooltip selectors trips STRICT_READ.
+// ZIndexLayer deferred.
+import type { JSX } from "@solidjs/web";
+import { isNullish } from "../util/DataUtils";
+import type { ActiveDotProps, ActiveDotType, DataKey } from "../util/types";
+import { svgPropertiesNoEventsFromUnknownKeepCase } from "../util/svgPropertiesNoEvents";
+import type { TooltipIndex } from "../state/tooltipSlice";
+
+export interface PointType {
+  readonly x: number | null;
+  readonly y: number | null;
+  readonly value?: unknown;
+  readonly payload?: unknown;
+}
+
+export interface ActivePointsProps {
+  points: ReadonlyArray<PointType>;
+  mainColor: string | undefined;
+  itemDataKey: DataKey<unknown> | undefined;
+  activeDot: ActiveDotType;
+  clipPath?: string;
+  zIndex?: number;
+}
+
+export interface ActivePointsLayerArgs extends ActivePointsProps {
+  activeTooltipIndex: TooltipIndex | null | undefined;
+  activeDataPoints: ReadonlyArray<unknown> | undefined;
+}
+
+export interface ActivePointState {
+  point: PointType;
+  /** Narrowed coordinates of `point` (guaranteed non-null when this state exists). */
+  cx: number;
+  cy: number;
+  childIndex: number;
+}
+
+export function findActivePointByIndex(
+  points: ReadonlyArray<PointType>,
+  activeDot: ActiveDotType,
+  activeIndex: TooltipIndex | null | undefined,
+): PointType | undefined {
+  if (activeDot === false || activeIndex == null) {
+    return undefined;
+  }
+  const indexNum = Number(activeIndex);
+  if (!Number.isFinite(indexNum)) {
+    return undefined;
+  }
+  return points[indexNum];
+}
+
+/** Resolve the active point from plain inputs (safe inside a parent createMemo). */
+export function computeActivePointState(args: ActivePointsLayerArgs): ActivePointState | null {
+  if (args.points == null || args.activeDataPoints == null || args.activeDot === false) {
+    return null;
+  }
+
+  const activeDataPoints = args.activeDataPoints;
+  const activePoint = args.points.find((p) => activeDataPoints.includes(p.payload));
+  if (isNullish(activePoint) || activePoint.x == null || activePoint.y == null) {
+    return null;
+  }
+
+  return {
+    point: activePoint,
+    cx: activePoint.x,
+    cy: activePoint.y,
+    childIndex: Number(args.activeTooltipIndex ?? 0),
+  };
+}
+
+function renderActiveDot(activeDot: ActiveDotType, dotProps: ActiveDotProps): JSX.Element {
+  if (typeof activeDot === "function") {
+    return activeDot(dotProps);
+  }
+  if (typeof activeDot === "object" && activeDot != null && "type" in activeDot) {
+    return activeDot;
+  }
+  // Default <Dot> uses <Show> internally, which trips STRICT_READ when this
+  // layer mounts during tooltip effect-apply — render the circle directly instead.
+  // An object-form activeDot's `class`/`className` is dropped by the svg-prop
+  // renamer (it allowlists out `class`), so apply it explicitly here.
+  const customClass =
+    typeof activeDot === "object" && activeDot != null && "class" in activeDot
+      ? activeDot.class
+      : undefined;
+  return (
+    <circle
+      class={["recharts-dot", customClass]}
+      cx={dotProps.cx}
+      cy={dotProps.cy}
+      r={dotProps.r}
+      fill={dotProps.fill}
+      stroke={dotProps.stroke}
+      stroke-width={dotProps.strokeWidth}
+    />
+  );
+}
+
+/** Render the active-dot layer from pre-resolved state (call in parent JSX). */
+export function renderActivePointsLayerFromState(
+  state: ActivePointState,
+  args: ActivePointsProps,
+): JSX.Element {
+  const dotProps: ActiveDotProps = {
+    index: state.childIndex,
+    dataKey: args.itemDataKey,
+    cx: state.cx,
+    cy: state.cy,
+    r: 4,
+    fill: args.mainColor ?? "none",
+    strokeWidth: 2,
+    stroke: "#fff",
+    payload: state.point.payload,
+    value: state.point.value,
+    ...svgPropertiesNoEventsFromUnknownKeepCase(args.activeDot),
+  };
+  return (
+    <g class={["recharts-layer", "recharts-active-dot"]} clip-path={args.clipPath}>
+      {renderActiveDot(args.activeDot, dotProps)}
+    </g>
+  );
+}
+
+/** @deprecated Use computeActivePointState + renderActivePointsLayerFromState */
+export function renderActivePointsLayer(args: ActivePointsLayerArgs): JSX.Element | null {
+  const state = computeActivePointState(args);
+  if (state == null) {
+    return null;
+  }
+  return renderActivePointsLayerFromState(state, args);
+}

package/src/component/Cell.tsx

@@ -0,0 +1,72 @@
+// Ported from recharts 3.8.1 src/component/Cell.tsx (commit 7a23854).
+// Deviations: React's `SVGProps<SVGElement>` → Solid's `CamelSvgProps<JSX.SVGAttributes<SVGElement>>`
+// (which already names the class prop `class`); React's `displayName` is dropped.
+//
+// The CellReader pattern: recharts extracts cells by walking the React element
+// tree (`findAllByType(children, Cell)`). Solid has no element-descriptor tree —
+// `props.children` is already-evaluated, so `<Cell>` returns nothing renderable.
+// Instead each <Cell> registers its props into a module-level registrar while a
+// parent (Bar/Pie/RadialBar) synchronously resolves its children inside
+// `collectCells`. Cells render no DOM (the standalone <Cell /> spec asserts this).
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+
+export interface CellProps extends CamelSvgProps<JSX.SVGAttributes<SVGElement>> {
+  /**
+   * The fill color.
+   */
+  fill?: string;
+  /**
+   * The stroke color.
+   */
+  stroke?: string;
+}
+
+/**
+ * Set while a parent collects its <Cell> children (see {@link collectCells}).
+ * A stack-discipline save/restore in collectCells keeps nested collections sound.
+ */
+let currentCellRegistrar: ((cell: CellProps) => void) | undefined;
+
+/**
+ * Cell component used to define colors and styles of chart elements.
+ *
+ * This component is now deprecated and will be removed in Recharts 4.0.
+ *
+ * Please use the `shape` prop or `content` prop on the respective chart components
+ * to customize the rendering of chart elements instead of using `Cell`.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/cell/ Guide: Migrate from Cell component to shape prop}
+ *
+ * @deprecated
+ * @consumes CellReader
+ */
+export const Cell = (props: CellProps): JSX.Element => {
+  // Registers into the parent's collector when rendered inside one; renders
+  // nothing either way (standalone <Cell /> → empty DOM).
+  currentCellRegistrar?.(props);
+  return undefined;
+};
+
+/**
+ * Resolves `childrenAccessor` synchronously with the cell registrar active, so
+ * every nested <Cell> reports its (reactive) props in document order. Returns the
+ * collected cells as an accessor — recomputes if the children change, mirroring
+ * recharts' `useMemo(() => findAllByType(children, Cell), [children])`.
+ */
+export const collectCells = (
+  childrenAccessor: () => JSX.Element,
+): Accessor<ReadonlyArray<CellProps>> =>
+  createMemo<ReadonlyArray<CellProps>>(() => {
+    const collected: CellProps[] = [];
+    const prev = currentCellRegistrar;
+    currentCellRegistrar = (cell) => collected.push(cell);
+    try {
+      // Accessing children evaluates each <Cell>, triggering its registration.
+      void childrenAccessor();
+    } finally {
+      currentCellRegistrar = prev;
+    }
+    return collected;
+  });

package/src/component/Cursor.tsx

@@ -0,0 +1,249 @@
+// Ported from recharts 3.8.1 src/component/Cursor.tsx (commit 7a23854).
+//
+// Draws the default cursor highlight: a Curve (line) for Line/Area/Composed
+// charts, a band Rectangle for BarChart, a Cross for ScatterChart, and a Sector
+// for radial-layout charts. `cursor` is acted on as a boolean (show/hide) plus an
+// optional SVG-props object (className/styling); a custom cursor ELEMENT
+// (recharts' `ReactElement` + cloneElement) is PERMANENT-N/A — there is no Solid
+// equivalent of React.isValidElement/cloneElement. Solid deviations: `clsx` →
+// `class={[...]}`; the connected `Cursor` resolves context then delegates to
+// `CursorInternal`, which (like recharts) takes fully-resolved props so it can be
+// rendered standalone in tests; all reactive reads live in a tracking memo that
+// returns plain shape DATA, so the <Show> children read only plain properties.
+import { createMemo, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  ChartOffsetInternal,
+  Coordinate,
+  isPolarCoordinate,
+  LayoutType,
+  PolarCoordinate,
+  RectanglePosition,
+  TooltipEventType,
+} from "../util/types";
+import { Curve } from "../shape/Curve";
+import { Cross } from "../shape/Cross";
+import { Rectangle } from "../shape/Rectangle";
+import { Sector } from "../shape/Sector";
+import { getCursorPoints } from "../util/cursor/getCursorPoints";
+import { getCursorRectangle } from "../util/cursor/getCursorRectangle";
+import { getRadialCursorPoints } from "../util/cursor/getRadialCursorPoints";
+import { useChartLayout, useOffsetInternal } from "../context/chartLayoutContext";
+import { useTooltipAxisBandSize } from "../context/useTooltipAxis";
+import { useAppSelector } from "../state/hooks";
+import { selectChartName } from "../state/selectors/rootPropsSelectors";
+import { TooltipIndex, TooltipPayload } from "../state/tooltipSlice";
+import { ZIndexLayer, type ZIndexable } from "../zIndex/ZIndexLayer";
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+
+/**
+ * `false` hides the cursor; the default (`true`) draws the shape below. A
+ * customizing SVG-props object is accepted (its `className` is appended); a custom
+ * cursor element is deferred (see header). Deviation: recharts' union includes a
+ * `ReactElement`; the port drops it because Solid's `JSX.Element` already subsumes
+ * `boolean`, which would make the show/hide flag redundant.
+ */
+export type CursorDefinition = boolean | Record<string, unknown>;
+
+export interface CursorProps extends ZIndexable {
+  cursor: CursorDefinition;
+  tooltipEventType: TooltipEventType;
+  coordinate: Coordinate | PolarCoordinate | undefined;
+  payload: TooltipPayload;
+  index: TooltipIndex | undefined;
+}
+
+export type CursorConnectedProps = CursorProps & {
+  tooltipAxisBandSize: number;
+  layout: LayoutType;
+  offset: ChartOffsetInternal;
+  chartName: string;
+};
+
+type CursorShape =
+  | { kind: "rect"; rect: RectanglePosition & { stroke: string; fill: string } }
+  | { kind: "curve"; points: ReadonlyArray<Coordinate> }
+  | { kind: "cross"; coordinate: Coordinate }
+  | {
+      kind: "sector";
+      cx: number;
+      cy: number;
+      startAngle: number;
+      endAngle: number;
+      radius: number;
+    }
+  | null;
+
+/**
+ * The shared cursor class, with an optional extra className from an object-form
+ * `cursor` appended (the shape components type `class` as a plain string, so this
+ * is joined rather than passed as a `class={[...]}` array).
+ */
+function cursorClass(cursor: CursorDefinition): string {
+  if (typeof cursor === "object" && cursor != null && typeof cursor.className === "string") {
+    return `recharts-tooltip-cursor ${cursor.className}`;
+  }
+  return "recharts-tooltip-cursor";
+}
+
+/**
+ * Connected (fully-resolved) cursor. Mirrors recharts' `CursorInternal`: takes
+ * layout/offset/chartName/tooltipAxisBandSize directly so tests can render it
+ * standalone inside an <svg>.
+ */
+export function CursorInternal(props: CursorConnectedProps): JSX.Element {
+  // All reactive reads happen in this memo (a tracking scope); it returns plain
+  // shape DATA so the <Show> children below only read plain object properties.
+  const cursorShape = createMemo<CursorShape>(() => {
+    const coordinate = props.coordinate;
+    if (
+      !props.cursor ||
+      coordinate == null ||
+      (props.chartName !== "ScatterChart" && props.tooltipEventType !== "axis")
+    ) {
+      return null;
+    }
+    if (props.chartName === "ScatterChart") {
+      return { kind: "cross", coordinate };
+    }
+    if (props.chartName === "BarChart") {
+      return {
+        kind: "rect",
+        rect: getCursorRectangle(props.layout, coordinate, props.offset, props.tooltipAxisBandSize),
+      };
+    }
+    if (props.layout === "radial" && isPolarCoordinate(coordinate)) {
+      const { cx, cy, radius, startAngle, endAngle } = getRadialCursorPoints(coordinate);
+      return {
+        kind: "sector",
+        cx: cx ?? 0,
+        cy: cy ?? 0,
+        startAngle: startAngle ?? 0,
+        endAngle: endAngle ?? 0,
+        radius: radius ?? 0,
+      };
+    }
+    const points = getCursorPoints(props.layout, coordinate, props.offset);
+    if (!Array.isArray(points)) {
+      return null;
+    }
+    return { kind: "curve", points };
+  });
+
+  // One derived memo per shape kind so each <Show> child reads its accessor INSIDE
+  // the returned JSX (where reads track) rather than in the callback body.
+  const rect = createMemo(() => {
+    const s = cursorShape();
+    return s?.kind === "rect" ? s.rect : null;
+  });
+  const curvePoints = createMemo(() => {
+    const s = cursorShape();
+    return s?.kind === "curve" ? s.points : null;
+  });
+  const cross = createMemo(() => {
+    const s = cursorShape();
+    return s?.kind === "cross" ? s.coordinate : null;
+  });
+  const sector = createMemo(() => {
+    const s = cursorShape();
+    return s?.kind === "sector" ? s : null;
+  });
+  const cls = (): string => cursorClass(props.cursor);
+
+  // recharts portals the cursor at a shape-dependent default z-index (the band
+  // rectangle below bars, the line/cross/sector above the series) unless the
+  // caller provides an explicit zIndex.
+  const preferredZIndex = (): number =>
+    cursorShape()?.kind === "rect" ? DefaultZIndexes.cursorRectangle : DefaultZIndexes.cursorLine;
+
+  return (
+    <Show when={cursorShape()}>
+      <ZIndexLayer zIndex={props.zIndex ?? preferredZIndex()}>
+        <Show when={rect()}>
+          {(r) => (
+            <Rectangle
+              class={cls()}
+              x={r().x}
+              y={r().y}
+              width={r().width}
+              height={r().height}
+              stroke={r().stroke}
+              fill={r().fill}
+            />
+          )}
+        </Show>
+        <Show when={curvePoints()}>
+          {(pts) => <Curve class={cls()} points={pts()} stroke="#ccc" fill="none" />}
+        </Show>
+        <Show when={cross()}>
+          {(c) => (
+            <Cross
+              class={cls()}
+              x={c().x}
+              y={c().y}
+              top={props.offset.top}
+              left={props.offset.left}
+              width={props.offset.width}
+              height={props.offset.height}
+              stroke="#ccc"
+            />
+          )}
+        </Show>
+        <Show when={sector()}>
+          {(s) => (
+            <Sector
+              class={cls()}
+              cx={s().cx}
+              cy={s().cy}
+              startAngle={s().startAngle}
+              endAngle={s().endAngle}
+              innerRadius={s().radius}
+              outerRadius={s().radius}
+              stroke="#ccc"
+              fill="none"
+            />
+          )}
+        </Show>
+      </ZIndexLayer>
+    </Show>
+  );
+}
+
+export const Cursor = (props: CursorProps): JSX.Element => {
+  const tooltipAxisBandSize = useTooltipAxisBandSize();
+  const offset = useOffsetInternal();
+  const layout = useChartLayout();
+  const chartName = useAppSelector(selectChartName);
+
+  // Resolve the context-derived props into one bundle; null until all are ready,
+  // so the keyed <Show> hands CursorInternal fully-typed (non-null) values.
+  const resolved = createMemo(() => {
+    const band = tooltipAxisBandSize();
+    const off = offset();
+    const lay = layout();
+    const name = chartName();
+    if (band == null || off == null || lay == null || name == null) {
+      return null;
+    }
+    return { band, off, lay, name };
+  });
+
+  return (
+    <Show when={resolved()}>
+      {(r) => (
+        <CursorInternal
+          cursor={props.cursor}
+          tooltipEventType={props.tooltipEventType}
+          coordinate={props.coordinate}
+          payload={props.payload}
+          index={props.index}
+          zIndex={props.zIndex}
+          offset={r().off}
+          layout={r().lay}
+          tooltipAxisBandSize={r().band}
+          chartName={r().name}
+        />
+      )}
+    </Show>
+  );
+};

package/src/component/Customized.tsx

@@ -0,0 +1,8 @@
+// SKIPPED — intentionally NOT ported to the SolidJS port.
+//
+// Reason: deprecated React-element-cloning shim (cloneElement/createElement/isValidElement) — Solid has no element cloning; render components directly
+//
+// TODO: do not port this file as-is. The Solid-native port replaces it (see the
+// reason above). If a consumer needs this path, wire it to the Solid equivalent
+// instead. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
+export {};