solid-recharts 0.1.0

package/src/state/selectors/touchSelectors.ts

@@ -0,0 +1,29 @@
+// Ported from recharts 3.8.1 src/state/selectors/touchSelectors.ts (commit 7a23854).
+import { Coordinate } from "../../util/types";
+import { GraphicalItemId } from "../graphicalItemsSlice";
+import { RechartsRootState } from "../store";
+import { TooltipIndex, TooltipPayloadConfiguration } from "../tooltipSlice";
+import { selectTooltipState } from "./selectTooltipState";
+
+export const selectTooltipCoordinate = (
+  state: RechartsRootState,
+  tooltipIndex: TooltipIndex,
+  graphicalItemId: GraphicalItemId,
+): Coordinate | undefined => {
+  if (tooltipIndex == null) {
+    return undefined;
+  }
+  const allTooltipConfigurations: ReadonlyArray<TooltipPayloadConfiguration> =
+    selectTooltipState(state).tooltipItemPayloads;
+  const mostRelevantTooltipConfiguration = allTooltipConfigurations.find(
+    (tooltipConfiguration) => tooltipConfiguration.settings.graphicalItemId === graphicalItemId,
+  );
+  if (mostRelevantTooltipConfiguration == null) {
+    return undefined;
+  }
+  const { getPosition } = mostRelevantTooltipConfiguration;
+  if (getPosition == null) {
+    return undefined;
+  }
+  return getPosition(tooltipIndex);
+};

package/src/state/store.ts

@@ -0,0 +1,167 @@
+// Solid-native replacement for recharts 3.8.1 src/state/store.ts.
+//
+// recharts uses @reduxjs/toolkit `configureStore` + `combineReducers` over 16
+// slices. The Solid-native store has no reducers/dispatch: each slice is a
+// factory returning `{ state, actions }` (a Solid store + its setters), and the
+// root store composes them — `state` mirrors the slice state proxies, `actions`
+// namespaces the slice actions by slice name (symmetric with `state`).
+//
+// Grows as each slice lands (PORT_ORDER Tier 2 builds the core feature-vertically).
+import { createChartDataSlice, type ChartDataActions, type ChartDataState } from "./chartDataSlice";
+import {
+  createChartLayoutSlice,
+  type ChartLayoutActions,
+  type ChartLayoutState,
+} from "./layoutSlice";
+import { createOptionsSlice, type ChartOptions, type OptionsActions } from "./optionsSlice";
+import {
+  createEventSettingsSlice,
+  type EventSettingsActions,
+  type EventSettingsState,
+} from "./eventSettingsSlice";
+import {
+  createRootPropsSlice,
+  type RootPropsActions,
+  type UpdatableChartOptions,
+} from "./rootPropsSlice";
+import {
+  createGraphicalItemsSlice,
+  type GraphicalItemsActions,
+  type GraphicalItemsState,
+} from "./graphicalItemsSlice";
+import {
+  createCartesianAxisSlice,
+  type AxisMapState,
+  type CartesianAxisActions,
+} from "./cartesianAxisSlice";
+import { createPolarAxisSlice, type PolarAxisActions, type PolarAxisState } from "./polarAxisSlice";
+import {
+  createRenderedTicksSlice,
+  type RenderedTicksActions,
+  type RenderedTicksState,
+} from "./renderedTicksSlice";
+import { createZIndexSlice, type ZIndexActions, type ZIndexState } from "./zIndexSlice";
+import { createBrushSlice, type BrushActions, type BrushSettings } from "./brushSlice";
+import {
+  createPolarOptionsSlice,
+  type PolarChartState,
+  type PolarOptionsActions,
+} from "./polarOptionsSlice";
+import { createTooltipSlice, type TooltipActions, type TooltipState } from "./tooltipSlice";
+import { createLegendSlice, type LegendActions, type LegendState } from "./legendSlice";
+import {
+  createReferenceElementsSlice,
+  type ReferenceElementsActions,
+  type ReferenceElementState,
+} from "./referenceElementsSlice";
+import { createErrorBarSlice, type ErrorBarsActions, type ErrorBarsState } from "./errorBarSlice";
+
+export type RechartsRootState = {
+  chartData: ChartDataState;
+  layout: ChartLayoutState;
+  options: ChartOptions;
+  eventSettings: EventSettingsState;
+  rootProps: UpdatableChartOptions;
+  graphicalItems: GraphicalItemsState;
+  cartesianAxis: AxisMapState;
+  polarAxis: PolarAxisState;
+  renderedTicks: RenderedTicksState;
+  zIndex: ZIndexState;
+  brush: BrushSettings;
+  polarOptions: PolarChartState;
+  tooltip: TooltipState;
+  legend: LegendState;
+  referenceElements: ReferenceElementState;
+  errorBars: ErrorBarsState;
+};
+
+export type RechartsActions = {
+  chartData: ChartDataActions;
+  layout: ChartLayoutActions;
+  options: OptionsActions;
+  eventSettings: EventSettingsActions;
+  rootProps: RootPropsActions;
+  graphicalItems: GraphicalItemsActions;
+  cartesianAxis: CartesianAxisActions;
+  polarAxis: PolarAxisActions;
+  renderedTicks: RenderedTicksActions;
+  zIndex: ZIndexActions;
+  brush: BrushActions;
+  polarOptions: PolarOptionsActions;
+  tooltip: TooltipActions;
+  legend: LegendActions;
+  referenceElements: ReferenceElementsActions;
+  errorBars: ErrorBarsActions;
+};
+
+export interface RechartsStore {
+  readonly state: RechartsRootState;
+  readonly actions: RechartsActions;
+}
+
+/**
+ * Assembles the root store from the slice factories. Equivalent to recharts'
+ * `createRechartsStore(preloadedState, chartName)`, minus the Redux runtime:
+ * callers run `store.actions.<slice>.<fn>()` directly and read reactive state
+ * via `useAppSelector`.
+ */
+export function createRechartsStore(preloadedState?: Partial<RechartsRootState>): RechartsStore {
+  const chartData = createChartDataSlice(preloadedState?.chartData);
+  const layout = createChartLayoutSlice(preloadedState?.layout);
+  const options = createOptionsSlice(preloadedState?.options);
+  const eventSettings = createEventSettingsSlice(preloadedState?.eventSettings);
+  const rootProps = createRootPropsSlice(preloadedState?.rootProps);
+  const graphicalItems = createGraphicalItemsSlice(preloadedState?.graphicalItems);
+  const cartesianAxis = createCartesianAxisSlice(preloadedState?.cartesianAxis);
+  const polarAxis = createPolarAxisSlice(preloadedState?.polarAxis);
+  const renderedTicks = createRenderedTicksSlice(preloadedState?.renderedTicks);
+  const zIndex = createZIndexSlice(preloadedState?.zIndex);
+  const brush = createBrushSlice(preloadedState?.brush);
+  const polarOptions = createPolarOptionsSlice(preloadedState?.polarOptions ?? null);
+  const tooltip = createTooltipSlice(preloadedState?.tooltip);
+  const legend = createLegendSlice(preloadedState?.legend);
+  const referenceElements = createReferenceElementsSlice(preloadedState?.referenceElements);
+  const errorBars = createErrorBarSlice(preloadedState?.errorBars);
+
+  return {
+    state: {
+      chartData: chartData.state,
+      layout: layout.state,
+      options: options.state,
+      eventSettings: eventSettings.state,
+      rootProps: rootProps.state,
+      graphicalItems: graphicalItems.state,
+      cartesianAxis: cartesianAxis.state,
+      polarAxis: polarAxis.state,
+      renderedTicks: renderedTicks.state,
+      zIndex: zIndex.state,
+      brush: brush.state,
+      // Reactive unwrap of the nullable polar-options store (read tracks `current`).
+      get polarOptions(): PolarChartState {
+        return polarOptions.state.current;
+      },
+      tooltip: tooltip.state,
+      legend: legend.state,
+      referenceElements: referenceElements.state,
+      errorBars: errorBars.state,
+    },
+    actions: {
+      chartData: chartData.actions,
+      layout: layout.actions,
+      options: options.actions,
+      eventSettings: eventSettings.actions,
+      rootProps: rootProps.actions,
+      graphicalItems: graphicalItems.actions,
+      cartesianAxis: cartesianAxis.actions,
+      polarAxis: polarAxis.actions,
+      renderedTicks: renderedTicks.actions,
+      zIndex: zIndex.actions,
+      brush: brush.actions,
+      polarOptions: polarOptions.actions,
+      tooltip: tooltip.actions,
+      legend: legend.actions,
+      referenceElements: referenceElements.actions,
+      errorBars: errorBars.actions,
+    },
+  };
+}

package/src/state/tooltipSlice.ts

@@ -0,0 +1,289 @@
+// Ported from recharts 3.8.1 src/state/tooltipSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux/immer): createStore + draft-first nested
+// setters. Deviations: `DataKey<any>` → `DataKey<unknown>`; the by-reference
+// matching of `replaceTooltipEntrySettings`/`removeTooltipEntrySettings`
+// (recharts `indexOf(prev)`) can't match Solid store proxies, so they match by
+// `settings.graphicalItemId` instead — the same proxy-safe strategy as
+// graphicalItemsSlice (SetTooltipEntrySettings is the sole caller and each
+// graphical item registers exactly one entry, so the id is unique).
+import { createStore } from "solid-js";
+import { TooltipTrigger } from "../chart/types";
+import type { NameType, Payload, ValueType } from "../component/DefaultTooltipContent";
+import { CartesianViewBoxRequired, Coordinate, DataKey, PolarCoordinate } from "../util/types";
+import { AxisId } from "./cartesianAxisSlice";
+import { GraphicalItemId } from "./graphicalItemsSlice";
+
+/** One Tooltip can display multiple TooltipPayloadEntries at a time. */
+export type TooltipPayloadEntry = Payload<ValueType, NameType>;
+
+export type TooltipEntrySettings = Omit<TooltipPayloadEntry, "payload" | "value"> & {
+  nameKey: DataKey<unknown> | undefined;
+};
+
+/** What Tooltip renders. */
+export type TooltipPayload = ReadonlyArray<TooltipPayloadEntry>;
+
+/**
+ * `null` means no active index; a `string` is the index into the chart data
+ * (the chart provides a searcher that maps it back to data).
+ */
+export type TooltipIndex = string | null;
+
+export type TooltipPayloadSearcher<T = unknown> = (
+  data: T,
+  index: TooltipIndex,
+  computedData?: unknown,
+  nameKey?: DataKey<unknown>,
+) => unknown;
+
+export type TooltipPayloadConfiguration = {
+  settings: TooltipEntrySettings;
+  /** All the data the item provided; the searcher + activeIndex resolve the payload. */
+  dataDefinedOnItem: unknown;
+  /** The item's preferred tooltip coordinates, instead of relying on the axes. */
+  getPosition: (tooltipIndex: NonNullable<TooltipIndex>) => Coordinate | undefined;
+};
+
+export type ActiveTooltipProps = {
+  activeIndex: TooltipIndex;
+  activeCoordinate: Coordinate | undefined;
+};
+
+/** `undefined` means "use the chart default". */
+export type SharedTooltipSettings = boolean | undefined;
+
+export type TooltipSettingsState = {
+  shared: SharedTooltipSettings;
+  trigger: TooltipTrigger;
+  axisId: AxisId;
+  /** "active after interaction ends" (not "always active"); undefined = depends on interaction. */
+  active: boolean | undefined;
+  /** Set the tooltip active before user interaction. */
+  defaultIndex: TooltipIndex | undefined;
+};
+
+export type TooltipInteractionState = {
+  active: boolean;
+  index: TooltipIndex | undefined;
+  dataKey: DataKey<unknown> | undefined;
+  graphicalItemId: string | undefined;
+  coordinate: Coordinate | PolarCoordinate | undefined;
+};
+
+export type TooltipSyncState = TooltipInteractionState & {
+  label: string | undefined;
+  sourceViewBox: CartesianViewBoxRequired | undefined;
+};
+
+export const noInteraction: TooltipInteractionState = {
+  active: false,
+  index: null,
+  dataKey: undefined,
+  graphicalItemId: undefined,
+  coordinate: undefined,
+};
+
+export type TooltipState = {
+  itemInteraction: {
+    click: TooltipInteractionState;
+    hover: TooltipInteractionState;
+  };
+  axisInteraction: {
+    click: TooltipInteractionState;
+    hover: TooltipInteractionState;
+  };
+  keyboardInteraction: TooltipInteractionState;
+  syncInteraction: TooltipSyncState;
+  tooltipItemPayloads: ReadonlyArray<TooltipPayloadConfiguration>;
+  settings: TooltipSettingsState;
+};
+
+export const initialTooltipState: TooltipState = {
+  itemInteraction: { click: noInteraction, hover: noInteraction },
+  axisInteraction: { click: noInteraction, hover: noInteraction },
+  keyboardInteraction: noInteraction,
+  syncInteraction: {
+    active: false,
+    index: null,
+    dataKey: undefined,
+    label: undefined,
+    coordinate: undefined,
+    sourceViewBox: undefined,
+    graphicalItemId: undefined,
+  },
+  tooltipItemPayloads: [],
+  settings: {
+    shared: undefined,
+    trigger: "hover",
+    axisId: 0,
+    active: false,
+    defaultIndex: undefined,
+  },
+};
+
+export type GraphicalItemTooltipActionPayload = {
+  activeIndex: TooltipIndex;
+  activeDataKey: DataKey<unknown> | undefined;
+  activeCoordinate: Coordinate | undefined;
+  activeGraphicalItemId: GraphicalItemId;
+};
+
+export type AxisTooltipActionPayload = {
+  activeIndex: TooltipIndex;
+  activeDataKey: DataKey<unknown> | undefined;
+  activeCoordinate?: Coordinate;
+};
+
+export type KeyboardTooltipActionPayload = {
+  active: boolean;
+  activeIndex: TooltipIndex | undefined;
+  activeCoordinate: Coordinate | undefined;
+};
+
+export interface TooltipActions {
+  addTooltipEntrySettings(payload: TooltipPayloadConfiguration): void;
+  replaceTooltipEntrySettings(payload: {
+    prev: TooltipPayloadConfiguration;
+    next: TooltipPayloadConfiguration;
+  }): void;
+  removeTooltipEntrySettings(payload: TooltipPayloadConfiguration): void;
+  setTooltipSettingsState(payload: TooltipSettingsState): void;
+  setActiveMouseOverItemIndex(payload: GraphicalItemTooltipActionPayload): void;
+  mouseLeaveChart(): void;
+  mouseLeaveItem(): void;
+  setActiveClickItemIndex(payload: GraphicalItemTooltipActionPayload): void;
+  setMouseOverAxisIndex(payload: AxisTooltipActionPayload): void;
+  setMouseClickAxisIndex(payload: AxisTooltipActionPayload): void;
+  setSyncInteraction(payload: TooltipSyncState): void;
+  setKeyboardInteraction(payload: KeyboardTooltipActionPayload): void;
+}
+
+export interface TooltipSlice {
+  readonly state: TooltipState;
+  readonly actions: TooltipActions;
+}
+
+export function createTooltipSlice(initialState: TooltipState = initialTooltipState): TooltipSlice {
+  const [state, setState] = createStore<TooltipState>({
+    itemInteraction: {
+      click: { ...initialState.itemInteraction.click },
+      hover: { ...initialState.itemInteraction.hover },
+    },
+    axisInteraction: {
+      click: { ...initialState.axisInteraction.click },
+      hover: { ...initialState.axisInteraction.hover },
+    },
+    keyboardInteraction: { ...initialState.keyboardInteraction },
+    syncInteraction: { ...initialState.syncInteraction },
+    tooltipItemPayloads: [...initialState.tooltipItemPayloads],
+    settings: { ...initialState.settings },
+  });
+
+  const actions: TooltipActions = {
+    addTooltipEntrySettings(payload) {
+      setState((s) => {
+        s.tooltipItemPayloads = [...s.tooltipItemPayloads, payload];
+      });
+    },
+    replaceTooltipEntrySettings({ prev, next }) {
+      setState((s) => {
+        // Deviation: recharts matches `prev` by reference (`indexOf`), but a
+        // Solid store proxies stored objects so the raw `prev` never `===` the
+        // proxied element. Match by `settings.graphicalItemId` instead — the
+        // same proxy-safe identity strategy as graphicalItemsSlice. Each
+        // graphical item registers exactly one entry, so the id is unique.
+        const index = s.tooltipItemPayloads.findIndex(
+          (p) => p.settings.graphicalItemId === prev.settings.graphicalItemId,
+        );
+        if (index > -1) {
+          const nextItems = s.tooltipItemPayloads.slice();
+          nextItems[index] = next;
+          s.tooltipItemPayloads = nextItems;
+        }
+      });
+    },
+    removeTooltipEntrySettings(payload) {
+      setState((s) => {
+        s.tooltipItemPayloads = s.tooltipItemPayloads.filter(
+          (p) => p.settings.graphicalItemId !== payload.settings.graphicalItemId,
+        );
+      });
+    },
+    setTooltipSettingsState(payload) {
+      setState((s) => {
+        s.settings = payload;
+      });
+    },
+    setActiveMouseOverItemIndex(payload) {
+      setState((s) => {
+        s.syncInteraction.active = false;
+        s.syncInteraction.sourceViewBox = undefined;
+        s.keyboardInteraction.active = false;
+        s.itemInteraction.hover.active = true;
+        s.itemInteraction.hover.index = payload.activeIndex;
+        s.itemInteraction.hover.dataKey = payload.activeDataKey;
+        s.itemInteraction.hover.graphicalItemId = payload.activeGraphicalItemId;
+        s.itemInteraction.hover.coordinate = payload.activeCoordinate;
+      });
+    },
+    mouseLeaveChart() {
+      setState((s) => {
+        s.itemInteraction.hover.active = false;
+        s.axisInteraction.hover.active = false;
+      });
+    },
+    mouseLeaveItem() {
+      setState((s) => {
+        s.itemInteraction.hover.active = false;
+      });
+    },
+    setActiveClickItemIndex(payload) {
+      setState((s) => {
+        s.syncInteraction.active = false;
+        s.syncInteraction.sourceViewBox = undefined;
+        s.itemInteraction.click.active = true;
+        s.keyboardInteraction.active = false;
+        s.itemInteraction.click.index = payload.activeIndex;
+        s.itemInteraction.click.dataKey = payload.activeDataKey;
+        s.itemInteraction.click.graphicalItemId = payload.activeGraphicalItemId;
+        s.itemInteraction.click.coordinate = payload.activeCoordinate;
+      });
+    },
+    setMouseOverAxisIndex(payload) {
+      setState((s) => {
+        s.syncInteraction.active = false;
+        s.syncInteraction.sourceViewBox = undefined;
+        s.axisInteraction.hover.active = true;
+        s.keyboardInteraction.active = false;
+        s.axisInteraction.hover.index = payload.activeIndex;
+        s.axisInteraction.hover.dataKey = payload.activeDataKey;
+        s.axisInteraction.hover.coordinate = payload.activeCoordinate;
+      });
+    },
+    setMouseClickAxisIndex(payload) {
+      setState((s) => {
+        s.syncInteraction.active = false;
+        s.syncInteraction.sourceViewBox = undefined;
+        s.keyboardInteraction.active = false;
+        s.axisInteraction.click.active = true;
+        s.axisInteraction.click.index = payload.activeIndex;
+        s.axisInteraction.click.dataKey = payload.activeDataKey;
+        s.axisInteraction.click.coordinate = payload.activeCoordinate;
+      });
+    },
+    setSyncInteraction(payload) {
+      setState((s) => {
+        s.syncInteraction = payload;
+      });
+    },
+    setKeyboardInteraction(payload) {
+      setState((s) => {
+        s.keyboardInteraction.active = payload.active;
+        s.keyboardInteraction.index = payload.activeIndex;
+        s.keyboardInteraction.coordinate = payload.activeCoordinate;
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/types/AreaSettings.ts

@@ -0,0 +1,17 @@
+// Ported from recharts 3.8.1 src/state/types/AreaSettings.ts (commit 7a23854).
+// Deviations: `BaseValue` imported from '../../util/types' (where it already
+// lives) instead of the unported '../../cartesian/Area'; `DataKey<any>` →
+// `DataKey<unknown>`.
+import { BaseValue, DataKey } from "../../util/types";
+import { ChartData } from "../chartDataSlice";
+import { MaybeStackedGraphicalItem } from "./StackedGraphicalItem";
+import { BaseCartesianGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export type AreaSettings = BaseCartesianGraphicalItemSettings &
+  MaybeStackedGraphicalItem & {
+    type: "area";
+    connectNulls: boolean;
+    baseValue: BaseValue | undefined;
+    dataKey: DataKey<unknown>;
+    data: ChartData | undefined;
+  };

package/src/state/types/BarSettings.ts

@@ -0,0 +1,16 @@
+// Ported from recharts 3.8.1 src/state/types/BarSettings.ts (commit 7a23854).
+import { MinPointSize } from "../../util/BarUtils";
+import { MaybeStackedGraphicalItem } from "./StackedGraphicalItem";
+import { BaseCartesianGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export type BarSettings = BaseCartesianGraphicalItemSettings &
+  MaybeStackedGraphicalItem & {
+    type: "bar";
+    maxBarSize: number | undefined;
+    minPointSize: MinPointSize;
+    /**
+     * When true, zero-dimension bars are not filtered out because the custom
+     * shape may still render something visible.
+     */
+    hasCustomShape: boolean;
+  };

package/src/state/types/LineSettings.ts

@@ -0,0 +1,12 @@
+// Ported from recharts 3.8.1 src/state/types/LineSettings.ts (commit 7a23854).
+// Deviation: `DataKey<any>` → `DataKey<unknown>` (this repo bans `any`; the
+// state layer stores the row-erased dataKey form).
+import { ChartData } from "../chartDataSlice";
+import { DataKey } from "../../util/types";
+import { BaseCartesianGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export type LineSettings = BaseCartesianGraphicalItemSettings & {
+  type: "line";
+  data: ChartData | undefined;
+  dataKey: DataKey<unknown> | undefined;
+};

package/src/state/types/PieSettings.ts

@@ -0,0 +1,32 @@
+// Ported from recharts 3.8.1 src/state/types/PieSettings.ts (commit 7a23854).
+//
+// MINIMAL PORT. Deviation: recharts carries arbitrary path presentation props in
+// `presentationProps: PiePresentationProps | null` (the full SVG-prop passthrough
+// from `svgPropertiesNoEvents`). The minimal Pie reduces this to the two props the
+// sector actually needs — `fill` and `stroke` — and defers the general
+// passthrough (and per-data-row presentation via Cells) to a later step.
+import { BasePolarGraphicalItemSettings } from "../graphicalItemsSlice";
+import { DataKey, LegendType, TooltipType } from "../../util/types";
+
+export interface PieSettings extends BasePolarGraphicalItemSettings {
+  type: "pie";
+  name: string | number | undefined;
+  nameKey: DataKey<unknown> | undefined;
+  tooltipType: TooltipType | undefined;
+
+  legendType: LegendType;
+  fill: string;
+  /** DEVIATION: stands in for recharts' `presentationProps` (reduced to stroke). */
+  stroke: string | undefined;
+
+  cx: number | string;
+  cy: number | string;
+  startAngle: number;
+  endAngle: number;
+  paddingAngle: number;
+  minAngle: number;
+  innerRadius: number | string;
+  outerRadius: number | string | ((element: unknown) => number | string);
+  maxRadius: number | undefined;
+  cornerRadius: number | string | undefined;
+}

package/src/state/types/RadarSettings.ts

@@ -0,0 +1,6 @@
+// Ported from recharts 3.8.1 src/state/types/RadarSettings.ts (commit 7a23854).
+import { BasePolarGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export interface RadarSettings extends BasePolarGraphicalItemSettings {
+  type: "radar";
+}

package/src/state/types/RadialBarSettings.ts

@@ -0,0 +1,10 @@
+// Ported from recharts 3.8.1 src/state/types/RadialBarSettings.ts (commit 7a23854).
+import { MaybeStackedGraphicalItem } from "./StackedGraphicalItem";
+import { BasePolarGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export interface RadialBarSettings
+  extends BasePolarGraphicalItemSettings, MaybeStackedGraphicalItem {
+  type: "radialBar";
+  minPointSize: number;
+  maxBarSize: number | undefined;
+}

package/src/state/types/ScatterSettings.ts

@@ -0,0 +1,13 @@
+// Ported from recharts 3.8.1 src/state/types/ScatterSettings.ts (commit 7a23854).
+// Deviation: `DataKey<any>` → `DataKey<unknown>`.
+import { ChartData } from "../chartDataSlice";
+import { DataKey, TooltipType } from "../../util/types";
+import { BaseCartesianGraphicalItemSettings } from "../graphicalItemsSlice";
+
+export type ScatterSettings = BaseCartesianGraphicalItemSettings & {
+  type: "scatter";
+  data: ChartData | undefined;
+  dataKey: DataKey<unknown> | undefined;
+  tooltipType: TooltipType | undefined;
+  name: string | number | undefined;
+};

package/src/state/types/StackedGraphicalItem.ts

@@ -0,0 +1,33 @@
+// Ported from recharts 3.8.1 src/state/types/StackedGraphicalItem.ts (commit 7a23854).
+import { GraphicalItemSettings } from "../graphicalItemsSlice";
+import { NormalizedStackId } from "../../util/ChartUtils";
+import { DataKey } from "../../util/types";
+
+/**
+ * Some graphical items allow data stacking. The stacks are optional, so all
+ * props here are optional too.
+ */
+export interface MaybeStackedGraphicalItem extends GraphicalItemSettings {
+  stackId: NormalizedStackId | undefined;
+  /**
+   * Bars have a size but Area does not.
+   */
+  barSize: number | string | undefined;
+}
+
+/**
+ * Items that are actually stacked because the user provided both `stackId` and
+ * `dataKey`.
+ */
+export interface DefinitelyStackedGraphicalItem extends MaybeStackedGraphicalItem {
+  stackId: NormalizedStackId;
+  dataKey: DataKey<unknown>;
+}
+
+export function isStacked<T extends GraphicalItemSettings>(
+  graphicalItem: T,
+): graphicalItem is T & DefinitelyStackedGraphicalItem {
+  return (
+    "stackId" in graphicalItem && graphicalItem.stackId != null && graphicalItem.dataKey != null
+  );
+}

package/src/state/unregisterOnCleanup.ts

@@ -0,0 +1,26 @@
+// The register-while-mounted idiom: a component adds its settings to the chart
+// store in an effect and removes them again when it unmounts. The removal is
+// the one lifecycle moment where a store write is otherwise illegal: when the
+// router (or a <Show>) disposes a subtree, `onCleanup` callbacks run inside the
+// disposing computation's context, and Solid 2.0 throws
+// SIGNAL_WRITE_IN_OWNED_SCOPE for any signal/store write made there.
+//
+// An unregistration is not derived state — it is an external transition on a
+// store that outlives the component — so it must not execute under the dying
+// scope. `runWithOwner(null, …)` runs the callback owner- and context-free,
+// which is the documented way to "move the write outside" without deferring it
+// (synchronous removal keeps selector state consistent within the same flush).
+import { onCleanup, runWithOwner } from "solid-js";
+
+/** `onCleanup` for store unregistrations: runs `fn` outside the disposing scope. */
+export function unregisterOnCleanup(fn: () => void): void {
+  onCleanup(() => runWithOwner(null, fn));
+}
+
+/**
+ * Same escape for cleanups *returned* from an effect apply phase or `onSettled`
+ * (those also run inside the disposing computation's context on unmount).
+ */
+export function unregisterCleanup(fn: () => void): () => void {
+  return () => runWithOwner(null, fn);
+}