solid-recharts 0.1.0

package/src/shape/Symbols.tsx

@@ -0,0 +1,144 @@
+/**
+ * @fileOverview Symbols
+ *
+ * Ported from recharts 3.8.1 src/shape/Symbols.tsx (commit 7a23854).
+ * Pure d3-shape symbol math copied verbatim. Solid deviations: `className` →
+ * `class` (Omit the wide SVG `class`); destructuring defaults → `?? default`
+ * accessors; `clsx` → `class={[...]}`; `return null` → `<Show>`; the
+ * `registerSymbol` static is attached via `Object.assign` (no `as`).
+ */
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { Show, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  symbol as shapeSymbol,
+  symbolCircle,
+  symbolCross,
+  symbolDiamond,
+  symbolSquare,
+  symbolStar,
+  symbolTriangle,
+  symbolWye,
+  type SymbolType as D3SymbolType,
+} from "victory-vendor/d3-shape";
+import { SymbolType } from "../util/types";
+import { isNumber, upperFirst } from "../util/DataUtils";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+
+type SizeType = "area" | "diameter";
+
+interface SymbolFactory {
+  [type: string]: D3SymbolType;
+}
+
+const symbolFactories: SymbolFactory = {
+  symbolCircle,
+  symbolCross,
+  symbolDiamond,
+  symbolSquare,
+  symbolStar,
+  symbolTriangle,
+  symbolWye,
+};
+const RADIAN = Math.PI / 180;
+
+const getSymbolFactory = (type: SymbolType): D3SymbolType => {
+  const name = `symbol${upperFirst(type)}`;
+
+  return symbolFactories[name] || symbolCircle;
+};
+
+const calculateAreaSize = (size: number, sizeType: SizeType, type: SymbolType): number => {
+  if (sizeType === "area") {
+    return size;
+  }
+
+  switch (type) {
+    case "cross":
+      return (5 * size * size) / 9;
+    case "diamond":
+      return (0.5 * size * size) / Math.sqrt(3);
+    case "square":
+      return size * size;
+    case "star": {
+      const angle = 18 * RADIAN;
+
+      return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.tan(angle) ** 2);
+    }
+    case "triangle":
+      return (Math.sqrt(3) * size * size) / 4;
+    case "wye":
+      return ((21 - 10 * Math.sqrt(3)) * size * size) / 8;
+    default:
+      return (Math.PI * size * size) / 4;
+  }
+};
+
+export interface InnerSymbolsProp {
+  class?: string;
+  type?: SymbolType;
+  cx?: number;
+  cy?: number;
+  width?: number;
+  height?: number;
+  size?: number;
+  sizeType?: SizeType;
+  /** A data row's `name` rides through onto the symbol (recharts spreads `...entry`). */
+  name?: string | number;
+}
+
+export type SymbolsProps = Omit<
+  CamelSvgProps<JSX.PathSVGAttributes<SVGPathElement>>,
+  "type" | "class"
+> &
+  InnerSymbolsProp;
+
+const registerSymbol = (key: string, factory: D3SymbolType): void => {
+  symbolFactories[`symbol${upperFirst(key)}`] = factory;
+};
+
+/**
+ * Renders a symbol from a set of predefined shapes.
+ */
+const SymbolsComponent = (props: SymbolsProps): JSX.Element => {
+  const type = (): SymbolType => props.type ?? "circle";
+  const size = (): number => props.size ?? 64;
+  const sizeType = (): SizeType => props.sizeType ?? "area";
+
+  // Runtime guard: despite the type, `type` can be anything at runtime
+  // (https://github.com/recharts/recharts/issues/6197); fall back to 'circle'.
+  const realType = (): SymbolType => (typeof type() === "string" ? type() : "circle");
+
+  const getPath = (): string | undefined => {
+    const symbolFactory = getSymbolFactory(realType());
+    const symbol = shapeSymbol()
+      .type(symbolFactory)
+      .size(calculateAreaSize(size(), sizeType(), realType()));
+
+    const s = symbol();
+    if (s === null) {
+      return undefined;
+    }
+    return s;
+  };
+
+  const passthrough = (): Record<string, unknown> => ({
+    ...omit(props, "class", "type", "size", "sizeType"),
+    type: type(),
+    size: size(),
+    sizeType: sizeType(),
+  });
+
+  return (
+    <Show when={isNumber(props.cx) && isNumber(props.cy) && isNumber(size())}>
+      <path
+        {...svgPropertiesAndEvents(passthrough())}
+        class={["recharts-symbols", props.class]}
+        transform={`translate(${props.cx}, ${props.cy})`}
+        d={getPath()}
+      />
+    </Show>
+  );
+};
+
+export const Symbols = Object.assign(SymbolsComponent, { registerSymbol });

package/src/shape/Trapezoid.tsx

@@ -0,0 +1,228 @@
+/**
+ * @fileOverview Trapezoid
+ *
+ * Ported from recharts 3.8.1 src/shape/Trapezoid.tsx (commit 7a23854).
+ * Pure `getTrapezoidPath` copied verbatim. Solid deviations: `className` →
+ * `class` (Omit the wide SVG `class`); destructuring defaults → `?? default`;
+ * `clsx` → `class={[...]}`; `return null` → `<Show>`.
+ *
+ * The update-animation path (`isUpdateAnimationActive`) is WIRED, mirroring the
+ * Rectangle port: JavascriptAnimate keyed on a geometry animationId, per-frame
+ * geometry interpolation from prev-value closures, and the strokeDasharray
+ * fade-in driven by a CSS transition. It defaults to false, so the common path
+ * stays the static shape.
+ */
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createEffect, createSignal, Show, omit, untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import type { AnimationDuration } from "../util/types";
+import type { EasingInput } from "../animation/easing";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { roundTemplateLiteral } from "../util/round";
+import { interpolate } from "../util/DataUtils";
+import { useAnimationId } from "../util/useAnimationId";
+import { getTransitionVal } from "../animation/util";
+import { JavascriptAnimate } from "../animation/JavascriptAnimate";
+
+const getTrapezoidPath = (
+  x: number,
+  y: number,
+  upperWidth: number,
+  lowerWidth: number,
+  height: number,
+): string => {
+  const widthGap = upperWidth - lowerWidth;
+  let path;
+  path = roundTemplateLiteral`M ${x},${y}`;
+  path += roundTemplateLiteral`L ${x + upperWidth},${y}`;
+  path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2},${y + height}`;
+  path += roundTemplateLiteral`L ${x + upperWidth - widthGap / 2 - lowerWidth},${y + height}`;
+  path += roundTemplateLiteral`L ${x},${y} Z`;
+  return path;
+};
+
+interface TrapezoidOwnProps {
+  class?: string;
+  /** Rides through to the <path> as a bare `name` attribute (React's SVGProps
+   * accepts it; Solid's PathSVGAttributes doesn't, so it's declared here). */
+  name?: string | number;
+  /** The x-coordinate of top left point of the trapezoid. @default 0 */
+  x?: number;
+  /** The y-coordinate of top left point of the trapezoid. @default 0 */
+  y?: number;
+  /** Width of the upper horizontal side of the trapezoid in pixels. @default 0 */
+  upperWidth?: number;
+  /** Width of the lower horizontal side of the trapezoid in pixels. @default 0 */
+  lowerWidth?: number;
+  /** Height of the trapezoid in pixels. @default 0 */
+  height?: number;
+  /** If true, the trapezoid updates and renders with a gradual fade-in animation. @default false */
+  isUpdateAnimationActive?: boolean;
+  animationBegin?: number;
+  animationDuration?: AnimationDuration;
+  animationEasing?: EasingInput;
+}
+
+export type TrapezoidProps = Omit<CamelSvgProps<JSX.PathSVGAttributes<SVGPathElement>>, "class"> &
+  TrapezoidOwnProps;
+
+export const Trapezoid = (props: TrapezoidProps): JSX.Element => {
+  const x = (): number => props.x ?? 0;
+  const y = (): number => props.y ?? 0;
+  const upperWidth = (): number => props.upperWidth ?? 0;
+  const lowerWidth = (): number => props.lowerWidth ?? 0;
+  const height = (): number => props.height ?? 0;
+
+  const valid = (): boolean =>
+    !(
+      x() !== +x() ||
+      y() !== +y() ||
+      upperWidth() !== +upperWidth() ||
+      lowerWidth() !== +lowerWidth() ||
+      height() !== +height() ||
+      (upperWidth() === 0 && lowerWidth() === 0) ||
+      height() === 0
+    );
+
+  const isUpdateAnimationActive = (): boolean => props.isUpdateAnimationActive ?? false;
+  const animationDuration = (): AnimationDuration => props.animationDuration ?? 1500;
+  const animationEasing = (): EasingInput => props.animationEasing ?? "ease";
+  const animationBegin = (): number => props.animationBegin ?? 0;
+
+  const layerClass = (): Array<string | undefined> => ["recharts-trapezoid", props.class];
+
+  // Animation (update path) state: a ref to read the path length + prev-value
+  // closures the animation interpolates from. The ref only captures the element
+  // (refs fire before the dynamic `d` lands, where getTotalLength() is 0/throws);
+  // the measuring effect runs after attributes land and re-measures on geometry
+  // change.
+  let pathEl: SVGPathElement | undefined;
+  const [totalLength, setTotalLength] = createSignal(-1);
+  const measurePath = (el: SVGPathElement): void => {
+    pathEl = el;
+  };
+  createEffect(
+    () => ({
+      x: x(),
+      y: y(),
+      upperWidth: upperWidth(),
+      lowerWidth: lowerWidth(),
+      height: height(),
+    }),
+    () => {
+      if (pathEl?.getTotalLength == null) {
+        return;
+      }
+      let len = 0;
+      try {
+        len = pathEl.getTotalLength();
+      } catch {
+        return; // getTotalLength can throw on detached/empty paths — keep the last value.
+      }
+      if (len) {
+        setTotalLength(len);
+      }
+    },
+  );
+
+  const animationId = useAnimationId(
+    () => ({
+      x: x(),
+      y: y(),
+      upperWidth: upperWidth(),
+      lowerWidth: lowerWidth(),
+      height: height(),
+    }),
+    "trapezoid-",
+  );
+
+  // Seed prev-values without a tracked top-level read (untrack avoids STRICT_READ).
+  let prevUpperWidth = untrack(upperWidth);
+  let prevLowerWidth = untrack(lowerWidth);
+  let prevHeight = untrack(height);
+  let prevX = untrack(x);
+  let prevY = untrack(y);
+
+  const staticPath = (): JSX.Element => (
+    <path
+      {...svgPropertiesAndEvents({ ...omit(props, "class") })}
+      class={layerClass()}
+      d={getTrapezoidPath(x(), y(), upperWidth(), lowerWidth(), height())}
+    />
+  );
+
+  return (
+    <Show when={valid()}>
+      <g>
+        <Show when={isUpdateAnimationActive()} fallback={staticPath()}>
+          {/* Keyed on animationId: a geometry change → new id → this recreates
+              the JavascriptAnimate, restarting the animation from the (updated)
+              prev values — the Solid equivalent of recharts' key={animationId}. */}
+          <Show when={animationId()} keyed>
+            {(animId) => (
+              <JavascriptAnimate
+                animationId={animId}
+                canBegin={totalLength() > 0}
+                duration={animationDuration()}
+                easing={animationEasing()}
+                isActive={isUpdateAnimationActive()}
+                begin={animationBegin()}
+              >
+                {(t) => {
+                  // The render-prop child is NOT an auto-tracking scope: read a
+                  // per-frame SNAPSHOT via untrack (prop changes restart the
+                  // animation via the keyed id, so each invocation sees fresh
+                  // values; untrack also clears STRICT_READ).
+                  const snap = untrack(() => ({
+                    uw: upperWidth(),
+                    lw: lowerWidth(),
+                    h: height(),
+                    cx: x(),
+                    cy: y(),
+                    len: totalLength(),
+                    dur: animationDuration(),
+                    easing: animationEasing(),
+                  }));
+                  const currUpperWidth = interpolate(prevUpperWidth, snap.uw, t);
+                  const currLowerWidth = interpolate(prevLowerWidth, snap.lw, t);
+                  const currHeight = interpolate(prevHeight, snap.h, t);
+                  const currX = interpolate(prevX, snap.cx, t);
+                  const currY = interpolate(prevY, snap.cy, t);
+                  if (pathEl) {
+                    prevUpperWidth = currUpperWidth;
+                    prevLowerWidth = currLowerWidth;
+                    prevHeight = currHeight;
+                    prevX = currX;
+                    prevY = currY;
+                  }
+                  const len = snap.len;
+                  const from = `0px ${len === -1 ? 1 : len}px`;
+                  const to = `${len}px ${len}px`;
+                  const transition = getTransitionVal(
+                    ["strokeDasharray"],
+                    snap.dur,
+                    typeof snap.easing === "string" ? snap.easing : "ease",
+                  );
+                  const dashStyle: JSX.CSSProperties =
+                    t > 0 ? { transition, "stroke-dasharray": to } : { "stroke-dasharray": from };
+                  // `props.style` may be a string in Solid JSX; only merge object styles.
+                  const userStyle: JSX.CSSProperties =
+                    typeof props.style === "object" && props.style != null ? props.style : {};
+                  return (
+                    <path
+                      {...svgPropertiesAndEvents({ ...omit(props, "class", "style") })}
+                      ref={measurePath}
+                      class={layerClass()}
+                      d={getTrapezoidPath(currX, currY, currUpperWidth, currLowerWidth, currHeight)}
+                      style={{ ...dashStyle, ...userStyle }}
+                    />
+                  );
+                }}
+              </JavascriptAnimate>
+            )}
+          </Show>
+        </Show>
+      </g>
+    </Show>
+  );
+};

package/src/state/RechartsReduxContext.tsx

@@ -0,0 +1,8 @@
+// SKIPPED — intentionally NOT ported to the SolidJS port.
+//
+// Reason: Redux react-redux context — Solid-native store, no Redux
+//
+// TODO: do not port this file as-is. The Solid-native port replaces it (see the
+// reason above). If a consumer needs this path, wire it to the Solid equivalent
+// instead. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
+export {};

package/src/state/RechartsStoreContext.ts

@@ -0,0 +1,15 @@
+// Solid-native replacement for recharts 3.8.1 src/state/RechartsReduxContext.tsx.
+//
+// recharts used a dedicated react-redux context (so embedding Recharts inside a
+// host app's own Redux store wouldn't clash). The Solid-native equivalent is a
+// context carrying the composed `{ state, actions }` store.
+//
+// The default is `null` (a real value), NOT `undefined`: Solid treats an
+// `undefined` default as "no default" and makes `useContext` THROW
+// `ContextNotFoundError` outside a Provider. recharts' `useAppSelector`
+// deliberately returns `undefined` outside a chart (so a component works
+// standalone), so we default to `null` and the hooks map `null` → `undefined`.
+import { createContext } from "solid-js";
+import type { RechartsStore } from "./store";
+
+export const RechartsStoreContext = createContext<RechartsStore | null>(null);

package/src/state/RechartsStoreProvider.tsx

@@ -0,0 +1,27 @@
+// Solid-native replacement for recharts 3.8.1 src/state/RechartsStoreProvider.tsx.
+//
+// recharts created the store once in a `useRef` and provided it via react-redux's
+// <Provider>. In Solid the component body runs once, so creating the store in the
+// body is the natural "create once per chart instance" — each chart gets its own
+// independent store (recharts supports many charts per page). The context value
+// IS the provider in Solid 2.0: `<RechartsStoreContext value={store}>`.
+//
+// NOTE: the panorama branch (Brush's preview chart reuses the parent store by
+// rendering no Provider) is deferred until PanoramaContext is ported.
+import { untrack } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { RechartsStoreContext } from "./RechartsStoreContext";
+import { createRechartsStore, type RechartsRootState } from "./store";
+
+export interface RechartsStoreProviderProps {
+  children: JSX.Element;
+  preloadedState?: Partial<RechartsRootState>;
+}
+
+export function RechartsStoreProvider(props: RechartsStoreProviderProps): JSX.Element {
+  // Create the store once. `preloadedState` is one-time config, so read it
+  // untracked (it should not make store creation reactive).
+  const store = createRechartsStore(untrack(() => props.preloadedState));
+
+  return <RechartsStoreContext value={store}>{props.children}</RechartsStoreContext>;
+}

package/src/state/ReportChartProps.tsx

@@ -0,0 +1,19 @@
+// Ported from recharts 3.8.1 src/state/ReportChartProps.tsx (commit 7a23854).
+// useAppDispatch → useAppStore().actions; useEffect → createEffect.
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { UpdatableChartOptions } from "./rootPropsSlice";
+import { useAppStore } from "./hooks";
+
+export const ReportChartProps = (props: UpdatableChartOptions): JSX.Element => {
+  const store = useAppStore();
+
+  createEffect(
+    () => ({ ...props }),
+    (options) => {
+      store?.actions.rootProps.updateOptions(options);
+    },
+  );
+
+  return null;
+};

package/src/state/ReportEventSettings.tsx

@@ -0,0 +1,19 @@
+// Ported from recharts 3.8.1 src/state/ReportEventSettings.tsx (commit 7a23854).
+// memo/propsAreEqual dropped; useAppDispatch → useAppStore().actions; useEffect → createEffect.
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppStore } from "./hooks";
+import { EventThrottlingProps } from "../util/types";
+
+export const ReportEventSettings = (props: EventThrottlingProps): JSX.Element => {
+  const store = useAppStore();
+
+  createEffect(
+    () => ({ throttleDelay: props.throttleDelay, throttledEvents: props.throttledEvents }),
+    (settings) => {
+      store?.actions.eventSettings.setEventSettings(settings);
+    },
+  );
+
+  return null;
+};

package/src/state/ReportMainChartProps.tsx

@@ -0,0 +1,35 @@
+// Ported from recharts 3.8.1 src/state/ReportMainChartProps.tsx (commit 7a23854).
+//
+// Solid deviations: `memo(..., propsAreEqual)` is dropped (Solid doesn't
+// re-render; the comparator has no equivalent); `useAppDispatch` + action
+// creators → `useAppStore().actions`; `useEffect` → two-arg `createEffect`.
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { LayoutType, Margin } from "../util/types";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { useAppStore } from "./hooks";
+
+/** Props accepted only on the main chart (not the Brush panorama). */
+interface MainChartProps {
+  layout: LayoutType;
+  margin: Partial<Margin>;
+}
+
+export const ReportMainChartProps = (props: MainChartProps): JSX.Element => {
+  const store = useAppStore();
+  // Skip in panorama: the root chart owns these, and Brush reads them from the
+  // store, so they must stay stable to avoid a re-render loop.
+  const isPanorama = useIsPanorama();
+
+  createEffect(
+    () => ({ layout: props.layout, margin: props.margin }),
+    ({ layout, margin }) => {
+      if (!isPanorama) {
+        store?.actions.layout.setLayout(layout);
+        store?.actions.layout.setMargin(margin);
+      }
+    },
+  );
+
+  return null;
+};

package/src/state/ReportPolarOptions.tsx

@@ -0,0 +1,28 @@
+// Ported from recharts 3.8.1 src/state/ReportPolarOptions.tsx (commit 7a23854).
+//
+// Solid deviations: `useAppDispatch` + action creator → `useAppStore().actions`;
+// `useEffect` → two-arg `createEffect` (compute the payload, dispatch in apply).
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { PolarChartOptions } from "./polarOptionsSlice";
+import { useAppStore } from "./hooks";
+
+export const ReportPolarOptions = (props: PolarChartOptions): JSX.Element => {
+  const store = useAppStore();
+
+  createEffect(
+    () => ({
+      cx: props.cx,
+      cy: props.cy,
+      startAngle: props.startAngle,
+      endAngle: props.endAngle,
+      innerRadius: props.innerRadius,
+      outerRadius: props.outerRadius,
+    }),
+    (payload) => {
+      store?.actions.polarOptions.updatePolarOptions(payload);
+    },
+  );
+
+  return null;
+};

package/src/state/SetLegendPayload.ts

@@ -0,0 +1,50 @@
+// Ported from recharts 3.8.1 src/state/SetLegendPayload.tsx (commit 7a23854).
+//
+// Registers a graphical item's legend payload. Deviations: the two useLayoutEffects
+// → createEffect (add/replace) + onCleanup (remove), the effect-dispatch idiom; an
+// explicit `id` prop (the graphical item's id) keys the entry so replace/remove are
+// proxy-safe (recharts matches the array by reference, which Solid stores break).
+// `SetPolarLegendPayload` lands with the polar vertical. Returns nothing.
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppStore } from "./hooks";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { LegendPayload } from "../component/DefaultLegendContent";
+import { unregisterOnCleanup } from "./unregisterOnCleanup";
+
+export function SetLegendPayload(props: {
+  id: string;
+  legendPayload: ReadonlyArray<LegendPayload>;
+}): JSX.Element {
+  const store = useAppStore();
+  const isPanorama = useIsPanorama();
+
+  let prevId: string | null = null;
+
+  createEffect(
+    () => ({ id: props.id, items: props.legendPayload }),
+    (entry) => {
+      if (store == null || isPanorama) {
+        return;
+      }
+      if (prevId === null) {
+        store.actions.legend.addLegendPayload(entry);
+      } else {
+        store.actions.legend.replaceLegendPayload({
+          prev: { id: prevId, items: [] },
+          next: entry,
+        });
+      }
+      prevId = entry.id;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prevId != null && store != null) {
+      store.actions.legend.removeLegendPayload({ id: prevId, items: [] });
+      prevId = null;
+    }
+  });
+
+  return null;
+}

package/src/state/SetTooltipEntrySettings.tsx

@@ -0,0 +1,46 @@
+// Ported from recharts 3.8.1 src/state/SetTooltipEntrySettings.tsx (commit 7a23854).
+//
+// Deviations: the two useLayoutEffects become a single createEffect (add/replace
+// on change) + onCleanup (remove), the same effect-dispatch idiom Line/Bar/Area
+// use for their graphical-item registration. Returns null (renders nothing) — it
+// exists purely to register the item's tooltip payload entry in the store.
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppStore } from "./hooks";
+import { TooltipPayloadConfiguration } from "./tooltipSlice";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { unregisterOnCleanup } from "./unregisterOnCleanup";
+
+export function SetTooltipEntrySettings(props: {
+  tooltipEntrySettings: TooltipPayloadConfiguration;
+}): JSX.Element {
+  const store = useAppStore();
+  const isPanorama = useIsPanorama();
+
+  let prev: TooltipPayloadConfiguration | null = null;
+
+  createEffect(
+    () => props.tooltipEntrySettings,
+    (settings) => {
+      if (store == null || isPanorama) {
+        // Panorama graphical items never contribute to the Tooltip payload.
+        return;
+      }
+      if (prev === null) {
+        store.actions.tooltip.addTooltipEntrySettings(settings);
+      } else if (prev !== settings) {
+        store.actions.tooltip.replaceTooltipEntrySettings({ prev, next: settings });
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.tooltip.removeTooltipEntrySettings(prev);
+      prev = null;
+    }
+  });
+
+  return null;
+}