solid-recharts 0.1.0

package/src/state/legendSlice.ts

@@ -0,0 +1,107 @@
+// Ported from recharts 3.8.1 src/state/legendSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux/immer): createStore + draft-first setters.
+//
+// Deviation: recharts stores `payload: ReadonlyArray<ReadonlyArray<LegendPayload>>`
+// and matches entries by reference for replace/remove (`indexOf`). A Solid store
+// proxies stored arrays, so reference matching breaks — instead each registered
+// entry carries the graphical item's `id` (`{ id, items }`) and replace/remove
+// match by it (the same proxy-safe strategy as graphicalItemsSlice/tooltipSlice).
+// `selectLegendPayload` flattens `items` back to the reference's flat shape.
+import { createStore } from "solid-js";
+import { LayoutType, Size } from "../util/types";
+import {
+  HorizontalAlignmentType,
+  LegendItemSorter,
+  LegendPayload,
+  VerticalAlignmentType,
+} from "../component/DefaultLegendContent";
+
+export type LegendSettings = {
+  layout: LayoutType;
+  align: HorizontalAlignmentType;
+  verticalAlign: VerticalAlignmentType;
+  itemSorter: LegendItemSorter | null;
+};
+
+/** One graphical item's registered legend entry, keyed by its id (Solid deviation). */
+export type LegendPayloadEntry = {
+  id: string;
+  items: ReadonlyArray<LegendPayload>;
+};
+
+export type LegendState = {
+  settings: LegendSettings;
+  size: Size;
+  payload: ReadonlyArray<LegendPayloadEntry>;
+};
+
+export const initialLegendState: LegendState = {
+  settings: {
+    layout: "horizontal",
+    align: "center",
+    verticalAlign: "bottom",
+    itemSorter: "value",
+  },
+  size: { width: 0, height: 0 },
+  payload: [],
+};
+
+export interface LegendActions {
+  setLegendSize(payload: Size): void;
+  setLegendSettings(payload: LegendSettings): void;
+  addLegendPayload(payload: LegendPayloadEntry): void;
+  replaceLegendPayload(payload: { prev: LegendPayloadEntry; next: LegendPayloadEntry }): void;
+  removeLegendPayload(payload: LegendPayloadEntry): void;
+}
+
+export interface LegendSlice {
+  readonly state: LegendState;
+  readonly actions: LegendActions;
+}
+
+export function createLegendSlice(initialState: LegendState = initialLegendState): LegendSlice {
+  const [state, setState] = createStore<LegendState>({
+    settings: { ...initialState.settings },
+    size: { ...initialState.size },
+    payload: [...initialState.payload],
+  });
+
+  const actions: LegendActions = {
+    setLegendSize(payload) {
+      setState((s) => {
+        s.size.width = payload.width;
+        s.size.height = payload.height;
+      });
+    },
+    setLegendSettings(payload) {
+      setState((s) => {
+        s.settings.align = payload.align;
+        s.settings.layout = payload.layout;
+        s.settings.verticalAlign = payload.verticalAlign;
+        s.settings.itemSorter = payload.itemSorter;
+      });
+    },
+    addLegendPayload(payload) {
+      setState((s) => {
+        s.payload = [...s.payload, payload];
+      });
+    },
+    replaceLegendPayload({ prev, next }) {
+      setState((s) => {
+        const index = s.payload.findIndex((e) => e.id === prev.id);
+        if (index > -1) {
+          const nextItems = s.payload.slice();
+          nextItems[index] = next;
+          s.payload = nextItems;
+        }
+      });
+    },
+    removeLegendPayload(payload) {
+      setState((s) => {
+        s.payload = s.payload.filter((e) => e.id !== payload.id);
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/mouseEventsMiddleware.ts

@@ -0,0 +1,103 @@
+// Ported from recharts 3.8.1 src/state/mouseEventsMiddleware.ts (commit 7a23854).
+//
+// Solid rewrite: redux listener middleware → `dispatchMouseMove(store, pointer)`.
+// Throttling via eventSettings matches reference (raf / ms / allowlist).
+import { getRelativeCoordinate } from "../util/getRelativeCoordinate";
+import type { HTMLMousePointer, RelativePointer } from "../util/types";
+import { selectActivePropsFromChartPointer } from "./selectors/tooltipSelectors";
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
+import type { RechartsStore } from "./store";
+
+export type MouseMoveAction = { type: "mouseMove"; payload: HTMLMousePointer };
+export type MouseClickAction = { type: "mouseClick"; payload: HTMLMousePointer };
+
+export function mouseMoveAction(payload: HTMLMousePointer): MouseMoveAction {
+  return { type: "mouseMove", payload };
+}
+
+export function mouseClickAction(payload: HTMLMousePointer): MouseClickAction {
+  return { type: "mouseClick", payload };
+}
+
+/*
+ * This single rafId is safe because:
+ * 1. Each chart has its own store instance
+ * 2. mouseMove only fires from one DOM element (the chart wrapper)
+ * 3. Rapid mousemove events from the same element SHOULD throttle — we only care about the latest position
+ */
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestChartPointer: RelativePointer | null = null;
+
+export function dispatchMouseClick(store: RechartsStore, mousePointer: HTMLMousePointer): void {
+  const activeProps = selectActivePropsFromChartPointer(
+    store.state,
+    getRelativeCoordinate(mousePointer),
+  );
+  if (activeProps?.activeIndex != null) {
+    store.actions.tooltip.setMouseClickAxisIndex({
+      activeIndex: activeProps.activeIndex,
+      activeDataKey: undefined,
+      activeCoordinate: activeProps.activeCoordinate,
+    });
+  }
+}
+
+export function dispatchMouseMove(store: RechartsStore, mousePointer: HTMLMousePointer): void {
+  const state = store.state;
+  const { throttleDelay, throttledEvents } = state.eventSettings;
+  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
+  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("mousemove");
+
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+  if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+
+  latestChartPointer = getRelativeCoordinate(mousePointer);
+
+  const callback = (): void => {
+    const currentState = store.state;
+    const tooltipEventType = selectTooltipEventType(
+      currentState,
+      currentState.tooltip.settings.shared,
+    );
+    if (!latestChartPointer) {
+      rafId = null;
+      timeoutId = null;
+      return;
+    }
+
+    if (tooltipEventType === "axis") {
+      const activeProps = selectActivePropsFromChartPointer(currentState, latestChartPointer);
+      if (activeProps?.activeIndex != null) {
+        store.actions.tooltip.setMouseOverAxisIndex({
+          activeIndex: activeProps.activeIndex,
+          activeDataKey: undefined,
+          activeCoordinate: activeProps.activeCoordinate,
+        });
+      } else {
+        store.actions.tooltip.mouseLeaveChart();
+      }
+    }
+    rafId = null;
+    timeoutId = null;
+  };
+
+  if (!isThrottled) {
+    callback();
+    return;
+  }
+
+  if (throttleDelay === "raf") {
+    rafId = requestAnimationFrame(callback);
+  } else if (typeof throttleDelay === "number") {
+    if (timeoutId === null) {
+      timeoutId = setTimeout(callback, throttleDelay);
+    }
+  }
+}

package/src/state/optionsSlice.ts

@@ -0,0 +1,64 @@
+// Ported from recharts 3.8.1 src/state/optionsSlice.ts (commit 7a23854).
+// Solid-native slice.
+import { createStore } from "solid-js";
+import { TooltipEventType } from "../util/types";
+import { TooltipIndex, TooltipPayloadSearcher } from "./tooltipSlice";
+import { isNan } from "../util/DataUtils";
+
+/**
+ * These chart options are decided internally by Recharts and do not change
+ * during the chart's lifetime (changing them swaps the root element → a new store).
+ */
+export type ChartOptions = {
+  chartName: string;
+  defaultTooltipEventType: TooltipEventType;
+  validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>;
+  tooltipPayloadSearcher: TooltipPayloadSearcher;
+  /** Identifies which chart is emitting events when synchronising. */
+  eventEmitter: symbol | undefined;
+};
+
+export const arrayTooltipSearcher: TooltipPayloadSearcher = (
+  data: unknown,
+  strIndex: TooltipIndex,
+): unknown => {
+  if (!strIndex) return undefined;
+  if (!Array.isArray(data)) return undefined;
+  const numIndex = Number.parseInt(strIndex, 10);
+  if (isNan(numIndex)) {
+    return undefined;
+  }
+  return data[numIndex];
+};
+
+export const initialOptionsState: ChartOptions = {
+  chartName: "",
+  tooltipPayloadSearcher: () => undefined,
+  eventEmitter: undefined,
+  defaultTooltipEventType: "axis",
+};
+
+export interface OptionsActions {
+  createEventEmitter(): void;
+}
+
+export interface OptionsSlice {
+  readonly state: ChartOptions;
+  readonly actions: OptionsActions;
+}
+
+export function createOptionsSlice(initialState: ChartOptions = initialOptionsState): OptionsSlice {
+  const [state, setState] = createStore<ChartOptions>({ ...initialState });
+
+  const actions: OptionsActions = {
+    createEventEmitter() {
+      setState((s) => {
+        if (s.eventEmitter == null) {
+          s.eventEmitter = Symbol("rechartsEventEmitter");
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/polarAxisSlice.ts

@@ -0,0 +1,65 @@
+// Ported from recharts 3.8.1 src/state/polarAxisSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux/immer): createStore + draft-first actions.
+// Polar charts are a deferred vertical; this slice is wired into the store so the
+// polar axis registration path is ready when Radar/RadialBar/Pie land.
+import { createStore } from "solid-js";
+import { AxisId, BaseCartesianAxis, TicksSettings } from "./cartesianAxisSlice";
+
+export type RadiusAxisSettings = BaseCartesianAxis & TicksSettings;
+export type AngleAxisSettings = BaseCartesianAxis & TicksSettings;
+
+export type PolarAxisState = {
+  radiusAxis: Record<AxisId, RadiusAxisSettings>;
+  angleAxis: Record<AxisId, AngleAxisSettings>;
+};
+
+export const initialPolarAxisState: PolarAxisState = {
+  radiusAxis: {},
+  angleAxis: {},
+};
+
+export interface PolarAxisActions {
+  addRadiusAxis(axis: RadiusAxisSettings): void;
+  removeRadiusAxis(axis: RadiusAxisSettings): void;
+  addAngleAxis(axis: AngleAxisSettings): void;
+  removeAngleAxis(axis: AngleAxisSettings): void;
+}
+
+export interface PolarAxisSlice {
+  readonly state: PolarAxisState;
+  readonly actions: PolarAxisActions;
+}
+
+export function createPolarAxisSlice(
+  initialState: PolarAxisState = initialPolarAxisState,
+): PolarAxisSlice {
+  const [state, setState] = createStore<PolarAxisState>({
+    radiusAxis: { ...initialState.radiusAxis },
+    angleAxis: { ...initialState.angleAxis },
+  });
+
+  const actions: PolarAxisActions = {
+    addRadiusAxis(axis) {
+      setState((s) => {
+        s.radiusAxis[axis.id] = axis;
+      });
+    },
+    removeRadiusAxis(axis) {
+      setState((s) => {
+        delete s.radiusAxis[axis.id];
+      });
+    },
+    addAngleAxis(axis) {
+      setState((s) => {
+        s.angleAxis[axis.id] = axis;
+      });
+    },
+    removeAngleAxis(axis) {
+      setState((s) => {
+        delete s.angleAxis[axis.id];
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/polarOptionsSlice.ts

@@ -0,0 +1,54 @@
+// Ported from recharts 3.8.1 src/state/polarOptionsSlice.ts (commit 7a23854).
+//
+// FULL SOLID-NATIVE REWRITE. recharts' slice state is `PolarChartOptions | null`
+// (a nullable top-level value). Solid's `createStore` requires an object, so the
+// nullable value is wrapped in a `{ current }` store; `store.ts` re-exposes it as
+// a reactive `polarOptions` getter so `state.polarOptions` stays `… | null`.
+// The reducer mutates fields in place when already set (preserving identity),
+// matching the reference.
+import { createStore } from "solid-js";
+
+export type PolarChartOptions = {
+  cx: number | string;
+  cy: number | string;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number | string;
+  outerRadius: number | string;
+};
+
+export type PolarChartState = PolarChartOptions | null;
+
+export interface PolarOptionsActions {
+  updatePolarOptions(payload: PolarChartOptions): void;
+}
+
+export interface PolarOptionsSlice {
+  /** Wrapper around the nullable value; read `state.current`. */
+  readonly state: { readonly current: PolarChartState };
+  readonly actions: PolarOptionsActions;
+}
+
+export function createPolarOptionsSlice(initialState: PolarChartState = null): PolarOptionsSlice {
+  const [state, setState] = createStore<{ current: PolarChartState }>({ current: initialState });
+
+  const actions: PolarOptionsActions = {
+    updatePolarOptions(payload) {
+      setState((s) => {
+        const prev = s.current;
+        if (prev === null) {
+          s.current = payload;
+          return;
+        }
+        prev.startAngle = payload.startAngle;
+        prev.endAngle = payload.endAngle;
+        prev.cx = payload.cx;
+        prev.cy = payload.cy;
+        prev.innerRadius = payload.innerRadius;
+        prev.outerRadius = payload.outerRadius;
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/reduxDevtoolsJsonStringifyReplacer.ts

@@ -0,0 +1,15 @@
+// Ported from recharts 3.8.1 src/state/reduxDevtoolsJsonStringifyReplacer.ts
+// Pure util — no framework surface — behavior is byte-identical to recharts.
+
+export function reduxDevtoolsJsonStringifyReplacer(key: string, value: unknown) {
+  if (value instanceof HTMLElement) {
+    return `HTMLElement <${value.tagName} class="${value.className}">`;
+  }
+  if (value === window) {
+    return "global.window";
+  }
+  if (key === "children" && typeof value === "object" && value !== null) {
+    return "<<CHILDREN>>";
+  }
+  return value;
+}

package/src/state/referenceElementsSlice.ts

@@ -0,0 +1,121 @@
+// Ported from recharts 3.8.1 src/state/referenceElementsSlice.ts (commit 7a23854).
+//
+// FULL SOLID-NATIVE REWRITE (no Redux/immer — see the state-architecture
+// decision). `createSlice` → a factory returning `{ state, actions }` (a Solid
+// store + draft-first setters), wired into state/store.ts.
+//
+// Key deviation: recharts matches dots/areas/lines for removal by OBJECT
+// REFERENCE (`current(state).dots.findIndex(dot => dot === payload)`). Solid
+// stores wrap stored objects in proxies, so a read no longer `===` the raw
+// object the caller passed — reference matching can't work. Each settings object
+// therefore carries a generated `id` (the Report* component mints it via
+// useUniqueId) and we match by `id`, the same proxy-safe strategy as
+// graphicalItemsSlice / tooltipSlice / legendSlice.
+import { createStore } from "solid-js";
+import type { AxisId } from "./cartesianAxisSlice";
+import type { IfOverflow } from "../util/IfOverflow";
+import type { ReferenceLineSegment } from "../cartesian/ReferenceLine";
+
+export type ReferenceElementSettings = {
+  /**
+   * Deviation from recharts: a stable id used for proxy-safe removal (recharts
+   * matches by object reference, which Solid store proxies break).
+   */
+  id: string;
+  yAxisId: AxisId;
+  xAxisId: AxisId;
+  ifOverflow: IfOverflow;
+};
+
+export type ReferenceDotSettings = ReferenceElementSettings & {
+  x: unknown;
+  y: unknown;
+  r: number;
+};
+
+export type ReferenceAreaSettings = ReferenceElementSettings & {
+  x1: unknown;
+  x2: unknown;
+  y1: unknown;
+  y2: unknown;
+};
+
+export type ReferenceLineSettings = ReferenceElementSettings & {
+  x: unknown;
+  y: unknown;
+  segment: ReferenceLineSegment | undefined;
+};
+
+export type ReferenceElementState = {
+  dots: ReadonlyArray<ReferenceDotSettings>;
+  areas: ReadonlyArray<ReferenceAreaSettings>;
+  lines: ReadonlyArray<ReferenceLineSettings>;
+};
+
+export const initialReferenceElementState: ReferenceElementState = {
+  dots: [],
+  areas: [],
+  lines: [],
+};
+
+export interface ReferenceElementsActions {
+  addDot(dot: ReferenceDotSettings): void;
+  removeDot(dot: ReferenceDotSettings): void;
+  addArea(area: ReferenceAreaSettings): void;
+  removeArea(area: ReferenceAreaSettings): void;
+  addLine(line: ReferenceLineSettings): void;
+  removeLine(line: ReferenceLineSettings): void;
+}
+
+export interface ReferenceElementsSlice {
+  readonly state: ReferenceElementState;
+  readonly actions: ReferenceElementsActions;
+}
+
+export function createReferenceElementsSlice(
+  initialState: ReferenceElementState = initialReferenceElementState,
+): ReferenceElementsSlice {
+  const [state, setState] = createStore<ReferenceElementState>({
+    dots: [...initialState.dots],
+    areas: [...initialState.areas],
+    lines: [...initialState.lines],
+  });
+
+  const actions: ReferenceElementsActions = {
+    // State arrays are typed ReadonlyArray (immutable external API), so actions
+    // REASSIGN the whole array rather than mutate in place — Solid's fine-grained
+    // store still tracks the change, and the readonly type stays honest.
+    addDot(dot) {
+      setState((s) => {
+        s.dots = [...s.dots, dot];
+      });
+    },
+    removeDot(dot) {
+      setState((s) => {
+        s.dots = s.dots.filter((d) => d.id !== dot.id);
+      });
+    },
+    addArea(area) {
+      setState((s) => {
+        s.areas = [...s.areas, area];
+      });
+    },
+    removeArea(area) {
+      setState((s) => {
+        s.areas = s.areas.filter((a) => a.id !== area.id);
+      });
+    },
+    addLine(line) {
+      setState((s) => {
+        s.lines = [...s.lines, line];
+      });
+    },
+    removeLine(line) {
+      setState((s) => {
+        s.lines = s.lines.filter((l) => l.id !== line.id);
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/renderedTicksSlice.ts

@@ -0,0 +1,61 @@
+// Ported from recharts 3.8.1 src/state/renderedTicksSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux/immer).
+//
+// Stores the ACTUALLY rendered ticks. The domain→ticks mapping lives in the
+// cartesianAxis selectors, but CartesianAxis uses DOM measurement to decide which
+// ticks to actually render; this slice stores those so a hook can return them.
+import { createStore } from "solid-js";
+import { TickItem } from "../util/types";
+import { AxisId } from "./cartesianAxisSlice";
+
+type RenderedTicksAxisState = {
+  [axisId: AxisId]: ReadonlyArray<TickItem>;
+};
+
+export type RenderedTicksState = {
+  xAxis: RenderedTicksAxisState;
+  yAxis: RenderedTicksAxisState;
+};
+
+export const initialRenderedTicksState: RenderedTicksState = {
+  xAxis: {},
+  yAxis: {},
+};
+
+export interface RenderedTicksActions {
+  setRenderedTicks(payload: {
+    axisType: "xAxis" | "yAxis";
+    axisId: AxisId;
+    ticks: ReadonlyArray<TickItem>;
+  }): void;
+  removeRenderedTicks(payload: { axisType: "xAxis" | "yAxis"; axisId: AxisId }): void;
+}
+
+export interface RenderedTicksSlice {
+  readonly state: RenderedTicksState;
+  readonly actions: RenderedTicksActions;
+}
+
+export function createRenderedTicksSlice(
+  initialState: RenderedTicksState = initialRenderedTicksState,
+): RenderedTicksSlice {
+  const [state, setState] = createStore<RenderedTicksState>({
+    xAxis: { ...initialState.xAxis },
+    yAxis: { ...initialState.yAxis },
+  });
+
+  const actions: RenderedTicksActions = {
+    setRenderedTicks({ axisType, axisId, ticks }) {
+      setState((s) => {
+        s[axisType][axisId] = ticks;
+      });
+    },
+    removeRenderedTicks({ axisType, axisId }) {
+      setState((s) => {
+        delete s[axisType][axisId];
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/rootPropsSlice.ts

@@ -0,0 +1,70 @@
+// Ported from recharts 3.8.1 src/state/rootPropsSlice.ts (commit 7a23854).
+// Solid-native slice. `BaseValue`/`SyncMethod` come from the (seeded) util/types.
+import { createStore } from "solid-js";
+import { StackOffsetType, SyncMethod, BaseValue } from "../util/types";
+
+/**
+ * Chart options users can change at runtime (changing them re-renders the chart).
+ */
+export type UpdatableChartOptions = {
+  accessibilityLayer: boolean;
+  barCategoryGap: number | string;
+  barGap: number | string;
+  barSize: string | number | undefined;
+  class: string | undefined;
+  maxBarSize: number | undefined;
+  stackOffset: StackOffsetType;
+  syncId: number | string | undefined;
+  syncMethod: SyncMethod;
+  baseValue: BaseValue | undefined;
+  reverseStackOrder: boolean;
+};
+
+export const initialRootPropsState: UpdatableChartOptions = {
+  accessibilityLayer: true,
+  barCategoryGap: "10%",
+  barGap: 4,
+  barSize: undefined,
+  class: undefined,
+  maxBarSize: undefined,
+  stackOffset: "none",
+  syncId: undefined,
+  syncMethod: "index",
+  baseValue: undefined,
+  reverseStackOrder: false,
+};
+
+export interface RootPropsActions {
+  updateOptions(payload: UpdatableChartOptions): void;
+}
+
+export interface RootPropsSlice {
+  readonly state: UpdatableChartOptions;
+  readonly actions: RootPropsActions;
+}
+
+export function createRootPropsSlice(
+  initialState: UpdatableChartOptions = initialRootPropsState,
+): RootPropsSlice {
+  const [state, setState] = createStore<UpdatableChartOptions>({ ...initialState });
+
+  const actions: RootPropsActions = {
+    updateOptions(payload) {
+      setState((s) => {
+        s.accessibilityLayer = payload.accessibilityLayer;
+        s.barCategoryGap = payload.barCategoryGap;
+        s.barGap = payload.barGap ?? initialRootPropsState.barGap;
+        s.barSize = payload.barSize;
+        s.maxBarSize = payload.maxBarSize;
+        s.stackOffset = payload.stackOffset;
+        s.syncId = payload.syncId;
+        s.syncMethod = payload.syncMethod;
+        s.class = payload.class;
+        s.baseValue = payload.baseValue;
+        s.reverseStackOrder = payload.reverseStackOrder;
+      });
+    },
+  };
+
+  return { state, actions };
+}