solid-recharts 0.2.0 → 0.2.1

package/src/cartesian/ZAxis.tsx

@@ -4,14 +4,14 @@
 // settings into the cartesianAxis slice so Scatter can size its points by the z
 // value. Solid deviations: useLayoutEffect/prevRef → createEffect add/replace +
 // onCleanup remove (the XAxis/YAxis idiom); defaults via merge.
-import { createEffect, merge } from "solid-js";
+import { merge } from "solid-js";
 import { useAppStore } from "../state/hooks";
 import { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice";
 import { implicitZAxis } from "../state/selectors/axisSelectors";
 import { AxisDomain, DataKey, ScaleType } from "../util/types";
 import { AxisRange } from "../state/selectors/axisSelectors";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ZAxisProps<DataPointType = unknown, DataValueType = unknown> {
   zAxisId?: AxisId;
@@ -37,44 +37,31 @@ export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
   const store = useAppStore();
   const merged = merge(zAxisDefaultProps, props);
 
-  let prev: ZAxisSettings | null = null;
-
-  createEffect(
-    (): ZAxisSettings => ({
-      id: merged.zAxisId,
-      type: merged.type,
-      dataKey: merged.dataKey,
-      range: merged.range,
-      domain: merged.domain,
-      scale: merged.scale,
-      // recharts registers the raw prop name/unit (undefined when unset); the
-      // implicit "" is only the fallback when NO ZAxis exists (selectZAxisSettings).
-      name: merged.name,
-      unit: merged.unit,
-      allowDataOverflow: implicitZAxis.allowDataOverflow,
-      allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
-      includeHidden: implicitZAxis.includeHidden,
-      reversed: implicitZAxis.reversed,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.cartesianAxis.addZAxis(settings);
-      } else if (prev !== settings) {
-        store.actions.cartesianAxis.replaceZAxis({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.cartesianAxis.removeZAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<ZAxisSettings>(
+      () => ({
+        id: merged.zAxisId,
+        type: merged.type,
+        dataKey: merged.dataKey,
+        range: merged.range,
+        domain: merged.domain,
+        scale: merged.scale,
+        // recharts registers the raw prop name/unit (undefined when unset); the
+        // implicit "" is only the fallback when NO ZAxis exists (selectZAxisSettings).
+        name: merged.name,
+        unit: merged.unit,
+        allowDataOverflow: implicitZAxis.allowDataOverflow,
+        allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
+        includeHidden: implicitZAxis.includeHidden,
+        reversed: implicitZAxis.reversed,
+      }),
+      {
+        add: (next) => store.actions.cartesianAxis.addZAxis(next),
+        replace: (prev, next) => store.actions.cartesianAxis.replaceZAxis({ prev, next }),
+        remove: (prev) => store.actions.cartesianAxis.removeZAxis(prev),
+      },
+    );
+  }
 
   return null;
 }

package/src/chart/SunburstChart.tsx

@@ -14,7 +14,7 @@
 // DEFERRED: event throttling nuances.
 import { createMemo, For, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
-import { scaleLinear } from "victory-vendor/d3-scale";
+import { scaleLinear } from "d3-scale";
 import { Surface } from "../container/Surface";
 import { Layer } from "../container/Layer";
 import { Sector } from "../shape/Sector";

package/src/component/ActivePoints.tsx

@@ -125,12 +125,3 @@ export function renderActivePointsLayerFromState(
     </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/Dots.tsx

@@ -109,11 +109,15 @@ export function Dots(props: DotsProps): JSX.Element {
   return (
     <Show when={shouldRenderDots(props.points, props.dot)}>
       <Layer class={props.class} clipPath={layerClip()}>
-        <For each={props.points}>
+        {/* keyed={false} (index-keyed): during animation `points` is a fresh
+            array with fresh point objects every frame; reference-keyed <For>
+            would dispose+recreate every dot's DOM node per frame. Index-keying
+            reuses the rows and only updates cx/cy reactively. */}
+        <For each={props.points} keyed={false}>
           {(entry, i) => (
             <DotRenderer
-              entry={entry}
-              index={i()}
+              entry={entry()}
+              index={i}
               dot={props.dot}
               baseProps={props.baseProps}
               dataKey={props.dataKey}

package/src/context/ErrorBarContext.tsx

@@ -7,7 +7,7 @@
 // Solid deviations: context value carries an `Accessor` (Solid context is fixed
 // at provide-time; the accessor keeps `data` reactive). useEffect add/replace +
 // cleanup remove → createEffect + onCleanup. useGraphicalItemId provides the id.
-import { createContext, createEffect, useContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
 import type { Accessor } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { AxisId } from "../state/cartesianAxisSlice";
@@ -15,7 +15,7 @@ import type { ErrorBarDataPointFormatter } from "../cartesian/ErrorBar";
 import type { ErrorBarsSettings } from "../state/errorBarSlice";
 import { useAppStore } from "../state/hooks";
 import { useGraphicalItemId } from "./RegisterGraphicalItemId";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export interface ErrorBarContextValue {
   data: ReadonlyArray<unknown> | undefined;
@@ -57,29 +57,20 @@ export const useErrorBarContext = (): Accessor<ErrorBarContextValue> => useConte
 export function ReportErrorBarSettings(props: ErrorBarsSettings): JSX.Element {
   const store = useAppStore();
   const graphicalItemId = useGraphicalItemId();
-  let prev: ErrorBarsSettings | null = null;
 
-  createEffect(
-    (): ErrorBarsSettings => ({ dataKey: props.dataKey, direction: props.direction }),
-    (settings) => {
-      if (store == null || graphicalItemId == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.errorBars.addErrorBar({ itemId: graphicalItemId, errorBar: settings });
-      } else if (prev !== settings) {
-        store.actions.errorBars.replaceErrorBar({ itemId: graphicalItemId, prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev != null && store != null && graphicalItemId != null) {
-      store.actions.errorBars.removeErrorBar({ itemId: graphicalItemId, errorBar: prev });
-      prev = null;
-    }
-  });
+  if (store != null && graphicalItemId != null) {
+    registerInStore<ErrorBarsSettings>(
+      () => ({ dataKey: props.dataKey, direction: props.direction }),
+      {
+        add: (next) =>
+          store.actions.errorBars.addErrorBar({ itemId: graphicalItemId, errorBar: next }),
+        replace: (prev, next) =>
+          store.actions.errorBars.replaceErrorBar({ itemId: graphicalItemId, prev, next }),
+        remove: (prev) =>
+          store.actions.errorBars.removeErrorBar({ itemId: graphicalItemId, errorBar: prev }),
+      },
+    );
+  }
 
   return null;
 }

package/src/polar/Pie.tsx

@@ -81,7 +81,7 @@ import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 import { getMaxRadius, polarToCartesian } from "../util/PolarUtils";
 import { getPercentValue, interpolate, isNumber, isNumOrStr, mathSign } from "../util/DataUtils";
 import { getValueByDataKey } from "../util/ChartUtils";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 export type PieCoordinate = {
   cx: number;
@@ -583,53 +583,41 @@ export function Pie<DataPointType = Record<string, unknown>, DataValueType = unk
   const merged = merge(pieDefaultProps, props);
   const id = useUniqueId("recharts-pie", props.id);
 
-  let prev: PieSettings | null = null;
-
-  createEffect(
-    (): PieSettings => ({
-      id,
-      type: "pie",
-      data: merged.data,
-      dataKey: merged.dataKey,
-      hide: merged.hide,
-      angleAxisId: merged.angleAxisId ?? 0,
-      radiusAxisId: merged.radiusAxisId ?? 0,
-      name: merged.name,
-      nameKey: merged.nameKey,
-      tooltipType: merged.tooltipType,
-      legendType: merged.legendType,
-      fill: merged.fill,
-      stroke: merged.stroke,
-      cx: merged.cx,
-      cy: merged.cy,
-      startAngle: merged.startAngle,
-      endAngle: merged.endAngle,
-      paddingAngle: merged.paddingAngle,
-      minAngle: merged.minAngle,
-      innerRadius: merged.innerRadius,
-      outerRadius: merged.outerRadius,
-      cornerRadius: merged.cornerRadius,
-      maxRadius: merged.maxRadius,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<PieSettings>(
+      () => ({
+        id,
+        type: "pie",
+        data: merged.data,
+        dataKey: merged.dataKey,
+        hide: merged.hide,
+        angleAxisId: merged.angleAxisId ?? 0,
+        radiusAxisId: merged.radiusAxisId ?? 0,
+        name: merged.name,
+        nameKey: merged.nameKey,
+        tooltipType: merged.tooltipType,
+        legendType: merged.legendType,
+        fill: merged.fill,
+        stroke: merged.stroke,
+        cx: merged.cx,
+        cy: merged.cy,
+        startAngle: merged.startAngle,
+        endAngle: merged.endAngle,
+        paddingAngle: merged.paddingAngle,
+        minAngle: merged.minAngle,
+        innerRadius: merged.innerRadius,
+        outerRadius: merged.outerRadius,
+        cornerRadius: merged.cornerRadius,
+        maxRadius: merged.maxRadius,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+      },
+    );
+  }
 
   // Per-slice <Cell> overrides (collected from children, in data order).
   const cells = collectCells(() => props.children);

package/src/polar/PolarAngleAxis.tsx

@@ -17,7 +17,7 @@
 // evaluated element to inject computed x/y/payload — use the function form
 // instead). NOTE: the reference PolarAngleAxis renders no axis `label` title
 // either (only PolarRadiusAxis does) — no gap there.
-import { createEffect, For, merge, Show } from "solid-js";
+import { For, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
 import { useAppSelector, useAppStore } from "../state/hooks";
@@ -48,7 +48,7 @@ import { useIsPanorama } from "../context/PanoramaContext";
 import { usePolarChartLayout } from "../context/chartLayoutContext";
 import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
 import { ZIndexLayer } from "../zIndex/ZIndexLayer";
 
@@ -334,54 +334,45 @@ export function PolarAngleAxis<DataPointType = unknown, DataValueType = unknown>
   const merged = merge(polarAngleAxisDefaultProps, props);
   const isPanorama = useIsPanorama();
 
-  let prev: AngleAxisSettings | null = null;
-
-  createEffect(
-    (): AngleAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(layout(), "angleAxis", merged.type);
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: merged.angleAxisId,
-        scale: merged.scale,
-        type: evaluatedType,
-        dataKey: merged.dataKey,
-        unit: undefined,
-        name: merged.name,
-        // Ignored on purpose: axis calc behaves as if false (recharts note).
-        allowDuplicatedCategory: false,
-        allowDataOverflow: false,
-        reversed: merged.reversed,
-        includeHidden: false,
-        domain: merged.domain,
-        allowDecimals: merged.allowDecimals,
-        tickCount: merged.tickCount,
-        ticks: merged.ticks,
-        // DEVIATION: the settings slice shares the cartesian tick renderer type,
-        // so a polar function-form renderer is recorded as `true` (presence only —
-        // the renderer itself stays local to this component's render; no selector
-        // reads the function back out of the store).
-        tick: typeof merged.tick === "function" ? true : merged.tick,
-        niceTicks: merged.niceTicks,
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      // addAngleAxis overwrites by id, so it doubles as replace-on-change.
-      store.actions.polarAxis.addAngleAxis(settings);
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.polarAxis.removeAngleAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<AngleAxisSettings>(
+      (): AngleAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(layout(), "angleAxis", merged.type);
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: merged.angleAxisId,
+          scale: merged.scale,
+          type: evaluatedType,
+          dataKey: merged.dataKey,
+          unit: undefined,
+          name: merged.name,
+          // Ignored on purpose: axis calc behaves as if false (recharts note).
+          allowDuplicatedCategory: false,
+          allowDataOverflow: false,
+          reversed: merged.reversed,
+          includeHidden: false,
+          domain: merged.domain,
+          allowDecimals: merged.allowDecimals,
+          tickCount: merged.tickCount,
+          ticks: merged.ticks,
+          // DEVIATION: the settings slice shares the cartesian tick renderer type,
+          // so a polar function-form renderer is recorded as `true` (presence only —
+          // the renderer itself stays local to this component's render; no selector
+          // reads the function back out of the store).
+          tick: typeof merged.tick === "function" ? true : merged.tick,
+          niceTicks: merged.niceTicks,
+        };
+      },
+      {
+        // addAngleAxis overwrites by id, so it doubles as replace-on-change.
+        add: (next) => store.actions.polarAxis.addAngleAxis(next),
+        replace: (_prev, next) => store.actions.polarAxis.addAngleAxis(next),
+        remove: (prev) => store.actions.polarAxis.removeAngleAxis(prev),
+      },
+    );
+  }
 
   const viewBox = useAppSelector(selectPolarViewBox);
   const scale = useAppSelector((state) =>

package/src/polar/PolarRadiusAxis.tsx

@@ -14,7 +14,7 @@
 // DefaultZIndexes.axis).
 // DEFERRED (documented): ELEMENT-form `tick` (Solid can't clone-and-inject
 // computed props into an evaluated node — use the function form instead).
-import { createEffect, For, merge, Show } from "solid-js";
+import { For, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
 import { useAppSelector, useAppStore } from "../state/hooks";
@@ -47,7 +47,7 @@ import { usePolarChartLayout } from "../context/chartLayoutContext";
 import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
 import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
 import type { PolarAxisLineObjectProps, PolarTickEventHandler } from "./PolarAngleAxis";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 type TickOrientation = "left" | "right" | "middle";
 
@@ -265,52 +265,44 @@ export function PolarRadiusAxis<DataPointType = unknown, DataValueType = unknown
   const layout = usePolarChartLayout();
   const merged = merge(polarRadiusAxisDefaultProps, props);
 
-  let prev: RadiusAxisSettings | null = null;
-
-  createEffect(
-    (): RadiusAxisSettings | undefined => {
-      const evaluatedType = getAxisTypeBasedOnLayout(layout(), "radiusAxis", merged.type);
-      if (evaluatedType == null) {
-        return undefined;
-      }
-      return {
-        id: merged.radiusAxisId,
-        scale: merged.scale,
-        type: evaluatedType,
-        dataKey: merged.dataKey,
-        unit: undefined,
-        name: merged.name,
-        allowDuplicatedCategory: merged.allowDuplicatedCategory,
-        allowDataOverflow: merged.allowDataOverflow,
-        reversed: merged.reversed,
-        includeHidden: merged.includeHidden,
-        domain: merged.domain,
-        allowDecimals: merged.allowDecimals,
-        tickCount: merged.tickCount,
-        ticks: merged.ticks,
-        // DEVIATION: the settings slice shares the cartesian tick renderer type,
-        // so a polar function-form renderer is recorded as `true` (presence only —
-        // the renderer itself stays local to this component's render; no selector
-        // reads the function back out of the store).
-        tick: typeof merged.tick === "function" ? true : merged.tick,
-        niceTicks: merged.niceTicks,
-      };
-    },
-    (settings) => {
-      if (settings == null || store == null) {
-        return;
-      }
-      store.actions.polarAxis.addRadiusAxis(settings);
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.polarAxis.removeRadiusAxis(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadiusAxisSettings>(
+      (): RadiusAxisSettings | undefined => {
+        const evaluatedType = getAxisTypeBasedOnLayout(layout(), "radiusAxis", merged.type);
+        if (evaluatedType == null) {
+          return undefined;
+        }
+        return {
+          id: merged.radiusAxisId,
+          scale: merged.scale,
+          type: evaluatedType,
+          dataKey: merged.dataKey,
+          unit: undefined,
+          name: merged.name,
+          allowDuplicatedCategory: merged.allowDuplicatedCategory,
+          allowDataOverflow: merged.allowDataOverflow,
+          reversed: merged.reversed,
+          includeHidden: merged.includeHidden,
+          domain: merged.domain,
+          allowDecimals: merged.allowDecimals,
+          tickCount: merged.tickCount,
+          ticks: merged.ticks,
+          // DEVIATION: the settings slice shares the cartesian tick renderer type,
+          // so a polar function-form renderer is recorded as `true` (presence only —
+          // the renderer itself stays local to this component's render; no selector
+          // reads the function back out of the store).
+          tick: typeof merged.tick === "function" ? true : merged.tick,
+          niceTicks: merged.niceTicks,
+        };
+      },
+      {
+        // addRadiusAxis overwrites by id, so it doubles as replace-on-change.
+        add: (next) => store.actions.polarAxis.addRadiusAxis(next),
+        replace: (_prev, next) => store.actions.polarAxis.addRadiusAxis(next),
+        remove: (prev) => store.actions.polarAxis.removeRadiusAxis(prev),
+      },
+    );
+  }
 
   const viewBox = useAppSelector(selectPolarViewBox);
   const scale = useAppSelector((state) =>

package/src/polar/Radar.tsx

@@ -21,7 +21,7 @@
 // cloneElement). PERMANENT-N/A: element-form `shape`. DEFERRED: object-form
 // `shape`. zIndex relayering IS wired: the `.recharts-radar` Layer is wrapped in
 // <ZIndexLayer> (default DefaultZIndexes.area = 100), matching recharts.
-import { createEffect, createMemo, merge, Show } from "solid-js";
+import { createMemo, merge, Show } from "solid-js";
 import type { JSX } from "@solidjs/web";
 import { useAppSelector, useAppStore } from "../state/hooks";
 import { useIsPanorama } from "../context/PanoramaContext";
@@ -74,7 +74,7 @@ import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings";
 import { SetLegendPayload } from "../state/SetLegendPayload";
 import { LegendPayload } from "../component/DefaultLegendContent";
 import { TooltipPayloadConfiguration } from "../state/tooltipSlice";
-import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+import { registerInStore } from "../state/registerInStore";
 
 /** recharts: stroke (if not "none") wins as the legend/tooltip color, else fill. */
 const getLegendItemColor = (
@@ -295,38 +295,26 @@ export function Radar<DataPointType = Record<string, unknown>, DataValueType = u
   const isPanorama = useIsPanorama();
   const id = useUniqueId("recharts-radar", props.id);
 
-  let prev: RadarSettings | null = null;
-
-  createEffect(
-    (): RadarSettings => ({
-      id,
-      type: "radar",
-      // Radar has no own data prop — it always reads the chart data.
-      data: undefined,
-      dataKey: merged.dataKey,
-      hide: merged.hide,
-      angleAxisId: merged.angleAxisId,
-      radiusAxisId: merged.radiusAxisId,
-    }),
-    (settings) => {
-      if (store == null) {
-        return;
-      }
-      if (prev === null) {
-        store.actions.graphicalItems.addPolarGraphicalItem(settings);
-      } else if (prev !== settings) {
-        store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next: settings });
-      }
-      prev = settings;
-    },
-  );
-
-  unregisterOnCleanup(() => {
-    if (prev && store != null) {
-      store.actions.graphicalItems.removePolarGraphicalItem(prev);
-      prev = null;
-    }
-  });
+  if (store != null) {
+    registerInStore<RadarSettings>(
+      () => ({
+        id,
+        type: "radar",
+        // Radar has no own data prop — it always reads the chart data.
+        data: undefined,
+        dataKey: merged.dataKey,
+        hide: merged.hide,
+        angleAxisId: merged.angleAxisId,
+        radiusAxisId: merged.radiusAxisId,
+      }),
+      {
+        add: (next) => store.actions.graphicalItems.addPolarGraphicalItem(next),
+        replace: (prev, next) =>
+          store.actions.graphicalItems.replacePolarGraphicalItem({ prev, next }),
+        remove: (prev) => store.actions.graphicalItems.removePolarGraphicalItem(prev),
+      },
+    );
+  }
 
   const radar = useAppSelector((state) =>
     selectRadarPoints(state, merged.radiusAxisId, merged.angleAxisId, isPanorama, id),