solid-recharts 0.1.0

package/src/state/brushSlice.ts

@@ -0,0 +1,60 @@
+// Ported from recharts 3.8.1 src/state/brushSlice.ts (commit 7a23854).
+// FULL SOLID-NATIVE REWRITE (no Redux). Brush is a deferred vertical; this slice
+// is wired into the store so the offset can read `brush.height` (0 by default).
+import { createStore } from "solid-js";
+import { Padding } from "../util/types";
+
+/**
+ * Of all Brush properties, only `height` has a default and is always defined.
+ * The others are nullable and computed from offsets/margins when not set.
+ */
+export type BrushSettings = {
+  x: number | undefined;
+  y: number | undefined;
+  width: number | undefined;
+  height: number;
+  padding: Padding;
+};
+
+export const initialBrushState: BrushSettings = {
+  // x/y/width are nullable: when unset, selectBrushDimensions derives them from the
+  // chart offset (brush spans the plot width, just below the plot area).
+  x: undefined,
+  y: undefined,
+  width: undefined,
+  height: 0,
+  padding: { top: 0, right: 0, bottom: 0, left: 0 },
+};
+
+export interface BrushActions {
+  setBrushSettings(payload: BrushSettings | null): void;
+}
+
+export interface BrushSlice {
+  readonly state: BrushSettings;
+  readonly actions: BrushActions;
+}
+
+export function createBrushSlice(initialState: BrushSettings = initialBrushState): BrushSlice {
+  const [state, setState] = createStore<BrushSettings>({
+    ...initialState,
+    padding: { ...initialState.padding },
+  });
+
+  const actions: BrushActions = {
+    // The reducer replaces the whole settings object (or resets to initial when
+    // null); draft-first assignment of every field applies the full replacement.
+    setBrushSettings(payload) {
+      const next = payload ?? initialBrushState;
+      setState((s) => {
+        s.x = next.x;
+        s.y = next.y;
+        s.width = next.width;
+        s.height = next.height;
+        s.padding = { ...next.padding };
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/cartesianAxisSlice.ts

@@ -0,0 +1,288 @@
+// Ported from recharts 3.8.1 src/state/cartesianAxisSlice.ts (commit 7a23854).
+//
+// FULL SOLID-NATIVE REWRITE of the state layer (no Redux/immer — see the
+// state-architecture decision). recharts' `createSlice` becomes a factory
+// returning `{ state, actions }` (a Solid store + draft-first setters); the X/Y
+// axis maps are `Record<AxisId, …Settings>` stored as a Solid store.
+//
+// Deviations: `DataKey<any>`/`TickProp<any>` → `<unknown>` (this repo bans
+// `any`). `castDraft`/immer are unnecessary — Solid's setter takes a mutable
+// draft. The `add/replace/remove` reducers (RTK `prepareAutoBatched`) become
+// plain action functions; batching is handled by Solid's store microtask.
+import { createStore } from "solid-js";
+import type {
+  AxisDomain,
+  AxisInterval,
+  AxisTick,
+  CartesianTickContentProps,
+  DataKey,
+  EvaluatedAxisDomainType,
+  ScaleType,
+  TickFormatter,
+  TickProp,
+} from "../util/types";
+import type { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
+// Type-only import; axisSelectors imports types back from here — the cycle is
+// erased at runtime (same as the reference's `import type { AxisRange }`).
+import type { AxisRange } from "./selectors/axisSelectors";
+
+/**
+ * Identifies an axis within a chart. Users may give an axis a string or number
+ * id; graphical items reference the axis they use by this id. Every chart has a
+ * default axis under {@link defaultAxisId}.
+ */
+export type AxisId = string | number;
+
+export const defaultAxisId: AxisId = 0;
+
+export type XAxisPadding = { left?: number; right?: number } | "gap" | "no-gap";
+export type YAxisPadding = { top?: number; bottom?: number } | "gap" | "no-gap";
+
+export type XAxisOrientation = "top" | "bottom";
+export type YAxisOrientation = "left" | "right";
+
+/**
+ * Properties shared in X, Y, and Z axes. User-defined axis settings, coming
+ * from props.
+ */
+export type BaseCartesianAxis = {
+  id: AxisId;
+  scale:
+    | ScaleType
+    | CustomScaleDefinition
+    | CustomScaleDefinition<string>
+    | CustomScaleDefinition<number>
+    | CustomScaleDefinition<Date>;
+  /**
+   * Before creating this object, the domain type is evaluated based on the chart
+   * layout so that we have the 'auto' resolved.
+   */
+  type: EvaluatedAxisDomainType;
+  /**
+   * The axis functionality is severely restricted without a dataKey — but there
+   * is still something left, and the prop is optional, so this can be undefined
+   * even in real charts. There are no defaults.
+   */
+  dataKey: DataKey<never> | undefined;
+  unit: string | undefined;
+  name: string | undefined;
+  allowDuplicatedCategory: boolean;
+  allowDataOverflow: boolean;
+  reversed: boolean;
+  includeHidden: boolean;
+  domain: AxisDomain | undefined;
+};
+
+/**
+ * Controls how Recharts calculates "nice" tick values for numerical axes.
+ *
+ * - `'none'`: no tick-rounding algorithm; positions come entirely from d3 (evenly
+ *   spaced but not rounded). No domain-extension logic.
+ * - `'auto'` *(default)*: decides whether/how to apply niceties from the domain
+ *   definition; `'auto'` keyword → `'adaptive'` with possible domain extension,
+ *   otherwise the same algorithm within the fixed domain (mirrors Recharts v2).
+ * - `'adaptive'`: always the space-efficient algorithm (`getAdaptiveStep`).
+ * - `'snap125'`: always the round-numbers algorithm (`getSnap125Step`), snapping
+ *   steps to {1, 2, 2.5, 5} × 10ⁿ.
+ *
+ * @see {@link https://recharts.github.io/guide/axisTicks/}
+ */
+export type NiceTicksAlgorithm = "none" | "auto" | "adaptive" | "snap125";
+
+export type TicksSettings = {
+  allowDecimals: boolean;
+  /**
+   * Suggested number of ticks passed to d3 (a hint; d3 may return more or fewer).
+   * If undefined, d3 decides on its own (default 10, varies by domain).
+   */
+  tickCount: number | undefined;
+  /**
+   * Ticks can be any type on a category axis; must be numbers on a number axis.
+   */
+  ticks: ReadonlyArray<AxisTick> | undefined;
+  tick: TickProp<CartesianTickContentProps>;
+  /**
+   * Controls how Recharts calculates "nice" tick values for this axis.
+   * @defaultValue 'auto'
+   */
+  niceTicks: NiceTicksAlgorithm;
+};
+
+/**
+ * External props, visible to users via the public API. All sorts of internal
+ * computed things derive from these, but they come through selectors.
+ *
+ * Properties shared between X and Y axes.
+ */
+export type CartesianAxisSettings = BaseCartesianAxis &
+  TicksSettings & {
+    interval: AxisInterval;
+    mirror: boolean;
+    minTickGap: number;
+    angle: number;
+    hide: boolean;
+    tickFormatter: TickFormatter | undefined;
+  };
+
+export type XAxisSettings = CartesianAxisSettings & {
+  padding: XAxisPadding;
+  height: number;
+  orientation: XAxisOrientation;
+};
+
+export type YAxisWidth = number | "auto";
+
+export type YAxisSettings = CartesianAxisSettings & {
+  padding: YAxisPadding;
+  width: YAxisWidth;
+  orientation: YAxisOrientation;
+  widthHistory?: number[];
+};
+
+/**
+ * Z axis is special — it's never displayed. It controls the size of Scatter
+ * dots but never shows ticks anywhere.
+ */
+export type ZAxisSettings = BaseCartesianAxis & {
+  range: AxisRange;
+};
+
+export type AxisMapState = {
+  xAxis: Record<AxisId, XAxisSettings>;
+  yAxis: Record<AxisId, YAxisSettings>;
+  zAxis: Record<AxisId, ZAxisSettings>;
+};
+
+export const initialCartesianAxisState: AxisMapState = {
+  xAxis: {},
+  yAxis: {},
+  zAxis: {},
+};
+
+interface ReplacePayload<T> {
+  prev: T;
+  next: T;
+}
+
+export interface CartesianAxisActions {
+  addXAxis(axis: XAxisSettings): void;
+  replaceXAxis(payload: ReplacePayload<XAxisSettings>): void;
+  removeXAxis(axis: XAxisSettings): void;
+  addYAxis(axis: YAxisSettings): void;
+  replaceYAxis(payload: ReplacePayload<YAxisSettings>): void;
+  removeYAxis(axis: YAxisSettings): void;
+  addZAxis(axis: ZAxisSettings): void;
+  replaceZAxis(payload: ReplacePayload<ZAxisSettings>): void;
+  removeZAxis(axis: ZAxisSettings): void;
+  updateYAxisWidth(payload: { id: AxisId; width: number }): void;
+}
+
+export interface CartesianAxisSlice {
+  readonly state: AxisMapState;
+  readonly actions: CartesianAxisActions;
+}
+
+/**
+ * This is the slice where each individual Axis element pushes its own
+ * configuration. Prefer this one over the legacy axisSlice.
+ */
+export function createCartesianAxisSlice(
+  initialState: AxisMapState = initialCartesianAxisState,
+): CartesianAxisSlice {
+  const [state, setState] = createStore<AxisMapState>({
+    xAxis: { ...initialState.xAxis },
+    yAxis: { ...initialState.yAxis },
+    zAxis: { ...initialState.zAxis },
+  });
+
+  const actions: CartesianAxisActions = {
+    addXAxis(axis) {
+      setState((s) => {
+        s.xAxis[axis.id] = axis;
+      });
+    },
+    replaceXAxis({ prev, next }) {
+      setState((s) => {
+        if (s.xAxis[prev.id] !== undefined) {
+          if (prev.id !== next.id) {
+            delete s.xAxis[prev.id];
+          }
+          s.xAxis[next.id] = next;
+        }
+      });
+    },
+    removeXAxis(axis) {
+      setState((s) => {
+        delete s.xAxis[axis.id];
+      });
+    },
+    addYAxis(axis) {
+      setState((s) => {
+        s.yAxis[axis.id] = axis;
+      });
+    },
+    replaceYAxis({ prev, next }) {
+      setState((s) => {
+        if (s.yAxis[prev.id] !== undefined) {
+          if (prev.id !== next.id) {
+            delete s.yAxis[prev.id];
+          }
+          s.yAxis[next.id] = next;
+        }
+      });
+    },
+    removeYAxis(axis) {
+      setState((s) => {
+        delete s.yAxis[axis.id];
+      });
+    },
+    addZAxis(axis) {
+      setState((s) => {
+        s.zAxis[axis.id] = axis;
+      });
+    },
+    replaceZAxis({ prev, next }) {
+      setState((s) => {
+        if (s.zAxis[prev.id] !== undefined) {
+          if (prev.id !== next.id) {
+            delete s.zAxis[prev.id];
+          }
+          s.zAxis[next.id] = next;
+        }
+      });
+    },
+    removeZAxis(axis) {
+      setState((s) => {
+        delete s.zAxis[axis.id];
+      });
+    },
+    updateYAxisWidth({ id, width }) {
+      setState((s) => {
+        const axis = s.yAxis[id];
+        if (axis) {
+          const history = axis.widthHistory || [];
+          // An oscillation is detected when the new width matches the width
+          // before the last one — a simple A -> B -> A pattern. If the next
+          // width is B and the difference is under 1 pixel, we ignore it.
+          if (
+            history.length === 3 &&
+            history[0] === history[2] &&
+            width === history[1] &&
+            width !== axis.width &&
+            Math.abs(width - (history[0] ?? 0)) <= 1
+          ) {
+            return;
+          }
+          const newHistory = [...history, width].slice(-3);
+          s.yAxis[id] = {
+            ...axis,
+            width,
+            widthHistory: newHistory,
+          };
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/chartDataSlice.ts

@@ -0,0 +1,115 @@
+// Ported from recharts 3.8.1 src/state/chartDataSlice.ts (commit 7a23854).
+//
+// FULL SOLID-NATIVE REWRITE of the state layer (no Redux — see the project's
+// state-architecture decision). A "slice" becomes a factory that creates a Solid
+// `createStore` plus action functions that update it with draft-first setters.
+// The reducer + action-creator shape of RTK is gone; consumers call the action
+// functions directly, and selectors read `state` inside a `createMemo`.
+//
+// `castDraft`/immer are unnecessary — Solid's store setter takes a mutable draft.
+import { createStore } from "solid-js";
+import { BrushStartEndIndex } from "../context/brushUpdateContext";
+
+/**
+ * This is the data that's coming through main chart `data` prop
+ * Recharts is very flexible in what it accepts so the type is very flexible too.
+ * This will typically be an object, and various components will provide various `dataKey`
+ * that dictates how to pull data from that object.
+ *
+ * TL;DR: before dataKey
+ *
+ * @inline
+ */
+export type ChartData<DataPointType = unknown> = ReadonlyArray<DataPointType>;
+
+/**
+ * So this is the same unknown type as ChartData but this is after the dataKey has been applied.
+ * We still don't know what the type is - that depends on what exactly it was before the dataKey application,
+ * and the dataKey can return whatever anyway - but let's keep it separate as a form of documentation.
+ *
+ * TL;DR: ChartData after dataKey.
+ */
+export type AppliedChartData = ReadonlyArray<{ value: unknown }>;
+
+export type ChartDataState = {
+  chartData: ChartData | undefined;
+  /**
+   * store a copy of chart data after it has been processed by each chart's specific
+   * compute functions. TODO: add other charts besides Sankey
+   */
+  computedData: unknown;
+  /**
+   * Using Brush, users can choose where they want to zoom in.
+   * This is zero-based index of the starting data point.
+   */
+  dataStartIndex: number;
+  /**
+   * Using Brush, users can choose where they want to zoom in.
+   * This is zero-based index of the last data point.
+   */
+  dataEndIndex: number;
+};
+
+export const initialChartDataState: ChartDataState = {
+  chartData: undefined,
+  computedData: undefined,
+  dataStartIndex: 0,
+  dataEndIndex: 0,
+};
+
+type BrushStartEndIndexActionPayload = Partial<BrushStartEndIndex>;
+
+export interface ChartDataActions {
+  setChartData(chartData: ChartData | undefined): void;
+  setComputedData(computedData: unknown): void;
+  setDataStartEndIndexes(payload: BrushStartEndIndexActionPayload): void;
+}
+
+export interface ChartDataSlice {
+  readonly state: ChartDataState;
+  readonly actions: ChartDataActions;
+}
+
+/**
+ * Creates the chartData slice: a reactive store plus its action functions.
+ * Equivalent to recharts' `createSlice({ name: 'chartData', ... })`, but the
+ * store is a Solid store and the actions mutate it directly.
+ */
+export function createChartDataSlice(
+  initialState: ChartDataState = initialChartDataState,
+): ChartDataSlice {
+  const [state, setState] = createStore<ChartDataState>({ ...initialState });
+
+  const actions: ChartDataActions = {
+    setChartData(chartData) {
+      setState((s) => {
+        s.chartData = chartData;
+        if (chartData == null) {
+          s.dataStartIndex = 0;
+          s.dataEndIndex = 0;
+          return;
+        }
+        if (chartData.length > 0 && s.dataEndIndex !== chartData.length - 1) {
+          s.dataEndIndex = chartData.length - 1;
+        }
+      });
+    },
+    setComputedData(computedData) {
+      setState((s) => {
+        s.computedData = computedData;
+      });
+    },
+    setDataStartEndIndexes({ startIndex, endIndex }) {
+      setState((s) => {
+        if (startIndex != null) {
+          s.dataStartIndex = startIndex;
+        }
+        if (endIndex != null) {
+          s.dataEndIndex = endIndex;
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/errorBarSlice.ts

@@ -0,0 +1,84 @@
+// Ported from recharts 3.8.1 src/state/errorBarSlice.ts (commit 7a23854).
+//
+// FULL SOLID-NATIVE REWRITE (no Redux/immer). Keyed by the graphical item's id;
+// each item holds an array of ErrorBarsSettings. recharts matches for
+// replace/remove by (dataKey, direction) — kept verbatim (these are the error
+// bar's identity within an item).
+import { createStore } from "solid-js";
+import type { ErrorBarDirection } from "../cartesian/ErrorBar";
+import { DataKey } from "../util/types";
+import { GraphicalItemId } from "./graphicalItemsSlice";
+
+/**
+ * ErrorBars have many settings, but only the ones an axis needs to extend its
+ * domain are reported to the store: the direction and the dataKey.
+ */
+export type ErrorBarsSettings = {
+  /**
+   * Only meaningful in Scatter (both directions possible); elsewhere it's derived
+   * from the chart layout.
+   */
+  direction: ErrorBarDirection;
+  /** Which data property each ErrorBar reads; can stretch the axis domain. */
+  dataKey: DataKey<unknown>;
+};
+
+export type ErrorBarsState = Record<GraphicalItemId, ReadonlyArray<ErrorBarsSettings>>;
+
+export const initialErrorBarsState: ErrorBarsState = {};
+
+interface AddPayload {
+  itemId: GraphicalItemId;
+  errorBar: ErrorBarsSettings;
+}
+interface ReplacePayload {
+  itemId: GraphicalItemId;
+  prev: ErrorBarsSettings;
+  next: ErrorBarsSettings;
+}
+
+export interface ErrorBarsActions {
+  addErrorBar(payload: AddPayload): void;
+  replaceErrorBar(payload: ReplacePayload): void;
+  removeErrorBar(payload: AddPayload): void;
+}
+
+export interface ErrorBarsSlice {
+  readonly state: ErrorBarsState;
+  readonly actions: ErrorBarsActions;
+}
+
+const sameErrorBar = (a: ErrorBarsSettings, b: ErrorBarsSettings): boolean =>
+  a.dataKey === b.dataKey && a.direction === b.direction;
+
+export function createErrorBarSlice(
+  initialState: ErrorBarsState = initialErrorBarsState,
+): ErrorBarsSlice {
+  const [state, setState] = createStore<ErrorBarsState>({ ...initialState });
+
+  const actions: ErrorBarsActions = {
+    addErrorBar({ itemId, errorBar }) {
+      setState((s) => {
+        s[itemId] = [...(s[itemId] ?? []), errorBar];
+      });
+    },
+    replaceErrorBar({ itemId, prev, next }) {
+      setState((s) => {
+        const list = s[itemId];
+        if (list) {
+          s[itemId] = list.map((e) => (sameErrorBar(e, prev) ? next : e));
+        }
+      });
+    },
+    removeErrorBar({ itemId, errorBar }) {
+      setState((s) => {
+        const list = s[itemId];
+        if (list) {
+          s[itemId] = list.filter((e) => !sameErrorBar(e, errorBar));
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}

package/src/state/eventSettingsSlice.ts

@@ -0,0 +1,41 @@
+// Ported from recharts 3.8.1 src/state/eventSettingsSlice.ts (commit 7a23854).
+// Solid-native slice; immer's `castDraft` is unnecessary with a Solid store.
+import { createStore } from "solid-js";
+import { EventThrottlingProps } from "../util/types";
+
+export type EventSettingsState = Required<EventThrottlingProps>;
+
+export const initialEventSettingsState: EventSettingsState = {
+  throttleDelay: "raf",
+  throttledEvents: ["mousemove", "touchmove", "pointermove", "scroll", "wheel"],
+};
+
+export interface EventSettingsActions {
+  setEventSettings(payload: EventThrottlingProps): void;
+}
+
+export interface EventSettingsSlice {
+  readonly state: EventSettingsState;
+  readonly actions: EventSettingsActions;
+}
+
+export function createEventSettingsSlice(
+  initialState: EventSettingsState = initialEventSettingsState,
+): EventSettingsSlice {
+  const [state, setState] = createStore<EventSettingsState>({ ...initialState });
+
+  const actions: EventSettingsActions = {
+    setEventSettings(payload) {
+      setState((s) => {
+        if (payload.throttleDelay != null) {
+          s.throttleDelay = payload.throttleDelay;
+        }
+        if (payload.throttledEvents != null) {
+          s.throttledEvents = payload.throttledEvents;
+        }
+      });
+    },
+  };
+
+  return { state, actions };
+}