solid-recharts 0.1.0

package/src/state/externalEventsMiddleware.ts

@@ -0,0 +1,136 @@
+// Ported from recharts 3.8.1 src/state/externalEventsMiddleware.ts (commit 7a23854).
+//
+// Solid rewrite: redux listener middleware → `dispatchExternalEvent(store, payload)`.
+import { createEventProxy } from "../util/createEventProxy";
+import type { CategoricalChartFunc } from "../chart/types";
+import type { MouseHandlerDataParam } from "../synchronisation/types";
+import {
+  selectActiveCoordinate,
+  selectActiveLabel,
+  selectActiveTooltipDataKey,
+  selectActiveTooltipIndex,
+  selectIsTooltipActive,
+} from "./selectors/tooltipSelectors";
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
+import type { RechartsStore } from "./store";
+
+export type ExternalEventActionPayload<E = Event> = {
+  reactEvent: E;
+  handler: CategoricalChartFunc<E> | undefined;
+};
+
+export type ExternalEventAction = {
+  type: "externalEvent";
+  payload: ExternalEventActionPayload;
+};
+
+export function externalEventAction(payload: ExternalEventActionPayload): ExternalEventAction {
+  return { type: "externalEvent", payload };
+}
+
+const rafIdMap = new Map<string, number>();
+const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>();
+const latestEventMap = new Map<
+  string,
+  {
+    reactEvent: Event & { currentTarget: unknown };
+    invoke: (state: MouseHandlerDataParam) => void;
+  }
+>();
+
+export function dispatchExternalEvent<E extends Event & { currentTarget: unknown }>(
+  store: RechartsStore,
+  payload: ExternalEventActionPayload<E>,
+): void {
+  const { handler, reactEvent } = payload;
+  if (handler == null) {
+    return;
+  }
+
+  const eventType = reactEvent.type;
+  const eventProxy = createEventProxy(reactEvent);
+
+  latestEventMap.set(eventType, {
+    reactEvent: eventProxy,
+    invoke: (nextState) => {
+      handler(nextState, eventProxy);
+    },
+  });
+
+  const existingRafId = rafIdMap.get(eventType);
+  if (existingRafId !== undefined) {
+    cancelAnimationFrame(existingRafId);
+    rafIdMap.delete(eventType);
+  }
+
+  const state = store.state;
+  const { throttleDelay, throttledEvents } = state.eventSettings;
+  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
+  const isThrottled = eventListAsString === "all" || eventListAsString?.includes(eventType);
+
+  const existingTimeoutId = timeoutIdMap.get(eventType);
+  if (existingTimeoutId !== undefined && (typeof throttleDelay !== "number" || !isThrottled)) {
+    clearTimeout(existingTimeoutId);
+    timeoutIdMap.delete(eventType);
+  }
+
+  const callback = (): void => {
+    const latestAction = latestEventMap.get(eventType);
+
+    try {
+      if (!latestAction) {
+        return;
+      }
+
+      const { invoke } = latestAction;
+      const currentState = store.state;
+      const tooltipEventType = selectTooltipEventType(
+        currentState,
+        currentState.tooltip.settings.shared,
+      );
+      const { trigger, defaultIndex } = currentState.tooltip.settings;
+      const nextState: MouseHandlerDataParam = {
+        activeCoordinate: selectActiveCoordinate(
+          currentState,
+          tooltipEventType,
+          trigger,
+          defaultIndex,
+        ),
+        activeDataKey: selectActiveTooltipDataKey(currentState),
+        activeIndex: selectActiveTooltipIndex(currentState),
+        activeLabel: selectActiveLabel(currentState, tooltipEventType, trigger, defaultIndex),
+        activeTooltipIndex: selectActiveTooltipIndex(currentState),
+        isTooltipActive: selectIsTooltipActive(
+          currentState,
+          tooltipEventType,
+          trigger,
+          defaultIndex,
+        ).isActive,
+      };
+
+      invoke(nextState);
+    } finally {
+      rafIdMap.delete(eventType);
+      timeoutIdMap.delete(eventType);
+      latestEventMap.delete(eventType);
+    }
+  };
+
+  if (!isThrottled) {
+    callback();
+    return;
+  }
+
+  if (throttleDelay === "raf") {
+    const rafId = requestAnimationFrame(callback);
+    rafIdMap.set(eventType, rafId);
+  } else if (typeof throttleDelay === "number") {
+    if (!timeoutIdMap.has(eventType)) {
+      callback();
+      const timeoutId = setTimeout(callback, throttleDelay);
+      timeoutIdMap.set(eventType, timeoutId);
+    }
+  } else {
+    callback();
+  }
+}

package/src/state/graphicalItemsSlice.ts

@@ -0,0 +1,162 @@
+// Ported from recharts 3.8.1 src/state/graphicalItemsSlice.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).
+//
+// Key deviation: recharts matches items for replace/remove by OBJECT REFERENCE
+// (`current(state).cartesianItems.indexOf(payload)` + immer `castDraft`). Solid
+// stores wrap stored objects in proxies, so a read no longer `===` the raw object
+// the caller passed — reference matching can't work. We match by the required
+// unique `id` instead, which is the items' real identity and gives identical
+// ordering/replacement semantics.
+import { createStore } from "solid-js";
+import { ChartData } from "./chartDataSlice";
+import { AxisId } from "./cartesianAxisSlice";
+import { DataKey } from "../util/types";
+import { LineSettings } from "./types/LineSettings";
+import { AreaSettings } from "./types/AreaSettings";
+import { BarSettings } from "./types/BarSettings";
+import { ScatterSettings } from "./types/ScatterSettings";
+import { PieSettings } from "./types/PieSettings";
+import { RadarSettings } from "./types/RadarSettings";
+import { RadialBarSettings } from "./types/RadialBarSettings";
+
+/**
+ * Unique ID of a graphical item — provided by the user or generated. Used to
+ * identify the item in state.
+ */
+export type GraphicalItemId = string;
+
+export interface GraphicalItemSettings {
+  id: GraphicalItemId;
+  /**
+   * If the item has its own data array it appears here; otherwise data is taken
+   * from the chart root `data` prop.
+   */
+  data: ChartData | undefined;
+  dataKey: DataKey<unknown> | undefined;
+  /**
+   * Hidden items stay in state because some components (e.g. Legend) still show
+   * a record for them, and stacks ignore them.
+   */
+  hide: boolean;
+}
+
+export interface BaseCartesianGraphicalItemSettings extends GraphicalItemSettings {
+  xAxisId: AxisId;
+  yAxisId: AxisId;
+  zAxisId: AxisId;
+  /**
+   * Items inside a Brush panorama must not interact with the main items.
+   */
+  isPanorama: boolean;
+}
+
+// Scatter/RadialBar/Pie/Radar settings are deferred to their verticals; this
+// union grows as those land.
+export type CartesianGraphicalItemSettings =
+  | AreaSettings
+  | BarSettings
+  | LineSettings
+  | ScatterSettings;
+
+export interface BasePolarGraphicalItemSettings extends GraphicalItemSettings {
+  angleAxisId: AxisId;
+  radiusAxisId: AxisId;
+}
+
+export type PolarGraphicalItemSettings = PieSettings | RadarSettings | RadialBarSettings;
+
+export type GraphicalItemsState = {
+  /**
+   * All cartesian graphical items and their settings. Order is arbitrary; do not
+   * assume indexes here match indexes elsewhere.
+   */
+  cartesianItems: ReadonlyArray<CartesianGraphicalItemSettings>;
+  /**
+   * All polar graphical items and their settings.
+   */
+  polarItems: ReadonlyArray<PolarGraphicalItemSettings>;
+};
+
+export const initialGraphicalItemsState: GraphicalItemsState = {
+  cartesianItems: [],
+  polarItems: [],
+};
+
+interface ReplacePayload<T> {
+  prev: T;
+  next: T;
+}
+
+export interface GraphicalItemsActions {
+  addCartesianGraphicalItem(item: CartesianGraphicalItemSettings): void;
+  replaceCartesianGraphicalItem(payload: ReplacePayload<CartesianGraphicalItemSettings>): void;
+  removeCartesianGraphicalItem(item: CartesianGraphicalItemSettings): void;
+  addPolarGraphicalItem(item: PolarGraphicalItemSettings): void;
+  replacePolarGraphicalItem(payload: ReplacePayload<PolarGraphicalItemSettings>): void;
+  removePolarGraphicalItem(item: PolarGraphicalItemSettings): void;
+}
+
+export interface GraphicalItemsSlice {
+  readonly state: GraphicalItemsState;
+  readonly actions: GraphicalItemsActions;
+}
+
+export function createGraphicalItemsSlice(
+  initialState: GraphicalItemsState = initialGraphicalItemsState,
+): GraphicalItemsSlice {
+  const [state, setState] = createStore<GraphicalItemsState>({
+    cartesianItems: [...initialState.cartesianItems],
+    polarItems: [...initialState.polarItems],
+  });
+
+  const actions: GraphicalItemsActions = {
+    // 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.
+    addCartesianGraphicalItem(item) {
+      setState((s) => {
+        s.cartesianItems = [...s.cartesianItems, item];
+      });
+    },
+    replaceCartesianGraphicalItem({ prev, next }) {
+      setState((s) => {
+        const index = s.cartesianItems.findIndex((it) => it.id === prev.id);
+        if (index > -1) {
+          const nextItems = s.cartesianItems.slice();
+          nextItems[index] = next;
+          s.cartesianItems = nextItems;
+        }
+      });
+    },
+    removeCartesianGraphicalItem(item) {
+      setState((s) => {
+        s.cartesianItems = s.cartesianItems.filter((it) => it.id !== item.id);
+      });
+    },
+    addPolarGraphicalItem(item) {
+      setState((s) => {
+        s.polarItems = [...s.polarItems, item];
+      });
+    },
+    replacePolarGraphicalItem({ prev, next }) {
+      setState((s) => {
+        const index = s.polarItems.findIndex((it) => it.id === prev.id);
+        if (index > -1) {
+          const nextItems = s.polarItems.slice();
+          nextItems[index] = next;
+          s.polarItems = nextItems;
+        }
+      });
+    },
+    removePolarGraphicalItem(item) {
+      setState((s) => {
+        s.polarItems = s.polarItems.filter((it) => it.id !== item.id);
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/hooks.ts

@@ -0,0 +1,42 @@
+// Solid-native replacement for recharts 3.8.1 src/state/hooks.ts.
+//
+// recharts bridged react-redux via `useSyncExternalStoreWithSelector`
+// (`useAppSelector`) and `store.dispatch` (`useAppDispatch`). Solid needs neither:
+//   - `useAppSelector(sel)` returns a reactive `Accessor` backed by `createMemo`,
+//     so consumers read `selector(state)` and re-read fine-grainedly. Outside a
+//     chart it returns `() => undefined` (recharts returned `undefined`), so a
+//     component can still be used standalone.
+//   - There is no `dispatch`/action-object indirection: `useAppStore()` exposes
+//     the `{ state, actions }` store, and callers run `store.actions.<slice>.<fn>()`.
+import { createMemo, useContext, type Accessor } from "solid-js";
+import { RechartsStoreContext } from "./RechartsStoreContext";
+import type { RechartsRootState, RechartsStore } from "./store";
+
+/**
+ * Returns the chart's store (`{ state, actions }`), or `undefined` when used
+ * outside a chart. Replaces recharts' `useAppDispatch` — call action functions
+ * directly: `useAppStore()?.actions.chartData.setChartData(...)`.
+ */
+export function useAppStore(): RechartsStore | undefined {
+  return useContext(RechartsStoreContext) ?? undefined;
+}
+
+/**
+ * Recharts variant of react-redux's `useSelector`, ported to Solid.
+ *
+ * Unlike react-redux (which throws outside its Provider), this returns an
+ * accessor that yields `undefined` outside a chart — so components work both
+ * inside a chart (props read from the store) and standalone (props explicit).
+ *
+ * @param selector pulls a value out of the root state; only called inside a chart.
+ * @returns an accessor for the selected value, or `undefined` outside a chart.
+ */
+export function useAppSelector<T>(
+  selector: (state: RechartsRootState) => T,
+): Accessor<T | undefined> {
+  const store = useContext(RechartsStoreContext);
+  if (store == null) {
+    return () => undefined;
+  }
+  return createMemo(() => selector(store.state));
+}

package/src/state/keyboardEventsMiddleware.ts

@@ -0,0 +1,213 @@
+// Ported from recharts 3.8.1 src/state/keyboardEventsMiddleware.ts (commit 7a23854).
+//
+// Solid rewrite: redux listener middleware → dispatchKeyDown / handleFocusEvent /
+// handleBlurEvent. Throttling via eventSettings matches reference.
+import { RechartsStore } from "./store";
+import { TooltipInteractionState } from "./tooltipSlice";
+import {
+  selectTooltipAxisDataKey,
+  selectTooltipAxisDomain,
+  selectTooltipAxisTicks,
+  selectTooltipDisplayedData,
+  selectCoordinateForDefaultIndex,
+} from "./selectors/tooltipSelectors";
+import { selectChartDirection } from "./selectors/axisSelectors";
+import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex";
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType";
+
+const mkInteraction = (index: number): TooltipInteractionState => ({
+  active: false,
+  index: String(index),
+  dataKey: undefined,
+  graphicalItemId: undefined,
+  coordinate: undefined,
+});
+
+export type KeyDownAction = { type: "keyDown"; payload: KeyboardEvent["key"] };
+
+export function keyDownAction(payload: KeyboardEvent["key"]): KeyDownAction {
+  return { type: "keyDown", payload };
+}
+
+let rafId: number | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+let latestKeyboardActionPayload: KeyboardEvent["key"] | null = null;
+
+export function dispatchKeyDown(store: RechartsStore, key: KeyboardEvent["key"]): void {
+  latestKeyboardActionPayload = key;
+
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+
+  const state = store.state;
+  const { throttleDelay, throttledEvents } = state.eventSettings;
+  const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents;
+  const isThrottled = eventListAsString === "all" || eventListAsString?.includes("keydown");
+
+  if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+
+  const callback = (): void => {
+    try {
+      const keyPayload = latestKeyboardActionPayload;
+      if (keyPayload != null) {
+        handleKeyboardEvent(store, keyPayload);
+      }
+    } finally {
+      rafId = null;
+      timeoutId = null;
+    }
+  };
+
+  if (!isThrottled) {
+    callback();
+    return;
+  }
+
+  if (throttleDelay === "raf") {
+    rafId = requestAnimationFrame(callback);
+  } else if (typeof throttleDelay === "number") {
+    if (timeoutId === null) {
+      callback();
+      latestKeyboardActionPayload = null;
+
+      timeoutId = setTimeout(() => {
+        if (latestKeyboardActionPayload) {
+          callback();
+        } else {
+          timeoutId = null;
+          rafId = null;
+        }
+      }, throttleDelay);
+    }
+  }
+}
+
+export function handleKeyboardEvent(store: RechartsStore, key: string): void {
+  const state = store.state;
+  if (state.rootProps.accessibilityLayer === false) {
+    return;
+  }
+  if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "Enter") {
+    return;
+  }
+  const { keyboardInteraction } = state.tooltip;
+
+  const resolvedIndex = combineActiveTooltipIndex(
+    keyboardInteraction,
+    selectTooltipDisplayedData(state),
+    selectTooltipAxisDataKey(state),
+    selectTooltipAxisDomain(state),
+  );
+  const currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
+  const isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
+  const tooltipTicks = selectTooltipAxisTicks(state);
+  const displayedData = selectTooltipDisplayedData(state);
+  const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+
+  if (key === "Enter") {
+    if (isOutsideDomain) {
+      return;
+    }
+    const coordinate = selectCoordinateForDefaultIndex(
+      state,
+      tooltipEventType,
+      "hover",
+      String(keyboardInteraction.index),
+    );
+    store.actions.tooltip.setKeyboardInteraction({
+      active: !keyboardInteraction.active,
+      activeIndex: keyboardInteraction.index,
+      activeCoordinate: coordinate,
+    });
+    return;
+  }
+
+  const direction = selectChartDirection(state);
+  const directionMultiplier = direction === "left-to-right" ? 1 : -1;
+  const movement = key === "ArrowRight" ? 1 : -1;
+  let nextIndex: number;
+  if (isOutsideDomain) {
+    const axisDataKey = selectTooltipAxisDataKey(state);
+    const domain = selectTooltipAxisDomain(state);
+    const effectiveMovement = movement * directionMultiplier;
+    nextIndex = -1;
+    if (effectiveMovement > 0) {
+      for (let i = 0; i < displayedData.length; i++) {
+        if (
+          combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) != null
+        ) {
+          nextIndex = i;
+          break;
+        }
+      }
+    } else {
+      for (let i = displayedData.length - 1; i >= 0; i--) {
+        if (
+          combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) != null
+        ) {
+          nextIndex = i;
+          break;
+        }
+      }
+    }
+    if (nextIndex < 0) {
+      return;
+    }
+  } else {
+    nextIndex = currentIndex + movement * directionMultiplier;
+    const dataLength = tooltipTicks?.length || displayedData.length;
+    if (dataLength === 0 || nextIndex >= dataLength || nextIndex < 0) {
+      return;
+    }
+  }
+  const coordinate = selectCoordinateForDefaultIndex(
+    state,
+    tooltipEventType,
+    "hover",
+    String(nextIndex),
+  );
+  store.actions.tooltip.setKeyboardInteraction({
+    active: true,
+    activeIndex: nextIndex.toString(),
+    activeCoordinate: coordinate,
+  });
+}
+
+export function handleFocusEvent(store: RechartsStore): void {
+  const state = store.state;
+  if (state.rootProps.accessibilityLayer === false) {
+    return;
+  }
+  const { keyboardInteraction } = state.tooltip;
+  if (keyboardInteraction.active || keyboardInteraction.index != null) {
+    return;
+  }
+  const nextIndex = "0";
+  const tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+  const coordinate = selectCoordinateForDefaultIndex(state, tooltipEventType, "hover", nextIndex);
+  store.actions.tooltip.setKeyboardInteraction({
+    active: true,
+    activeIndex: nextIndex,
+    activeCoordinate: coordinate,
+  });
+}
+
+export function handleBlurEvent(store: RechartsStore): void {
+  const state = store.state;
+  if (state.rootProps.accessibilityLayer === false) {
+    return;
+  }
+  const { keyboardInteraction } = state.tooltip;
+  if (keyboardInteraction.active) {
+    store.actions.tooltip.setKeyboardInteraction({
+      active: false,
+      activeIndex: keyboardInteraction.index,
+      activeCoordinate: keyboardInteraction.coordinate,
+    });
+  }
+}

package/src/state/layoutSlice.ts

@@ -0,0 +1,71 @@
+// Ported from recharts 3.8.1 src/state/layoutSlice.ts (commit 7a23854).
+// Solid-native slice (no Redux): createStore + draft-first action setters.
+import { createStore } from "solid-js";
+import { LayoutType, Margin, Size } from "../util/types";
+
+export type ChartLayoutState = {
+  layoutType: LayoutType;
+  width: number;
+  height: number;
+  margin: Margin;
+  /** How much the chart is zoomed in; used to scale mouse coordinates. */
+  scale: number;
+};
+
+export const initialChartLayoutState: ChartLayoutState = {
+  layoutType: "horizontal",
+  width: 0,
+  height: 0,
+  margin: { top: 5, right: 5, bottom: 5, left: 5 },
+  scale: 1,
+};
+
+export interface ChartLayoutActions {
+  setLayout(layoutType: LayoutType): void;
+  setChartSize(size: Size): void;
+  setMargin(margin: Partial<Margin>): void;
+  setScale(scale: number): void;
+}
+
+export interface ChartLayoutSlice {
+  readonly state: ChartLayoutState;
+  readonly actions: ChartLayoutActions;
+}
+
+export function createChartLayoutSlice(
+  initialState: ChartLayoutState = initialChartLayoutState,
+): ChartLayoutSlice {
+  const [state, setState] = createStore<ChartLayoutState>({
+    ...initialState,
+    margin: { ...initialState.margin },
+  });
+
+  const actions: ChartLayoutActions = {
+    setLayout(layoutType) {
+      setState((s) => {
+        s.layoutType = layoutType;
+      });
+    },
+    setChartSize(size) {
+      setState((s) => {
+        s.width = size.width;
+        s.height = size.height;
+      });
+    },
+    setMargin(margin) {
+      setState((s) => {
+        s.margin.top = margin.top ?? 0;
+        s.margin.right = margin.right ?? 0;
+        s.margin.bottom = margin.bottom ?? 0;
+        s.margin.left = margin.left ?? 0;
+      });
+    },
+    setScale(scale) {
+      setState((s) => {
+        s.scale = scale;
+      });
+    },
+  };
+
+  return { state, actions };
+}