solid-recharts 0.1.0

package/src/util/useAnimationId.tsx

@@ -0,0 +1,31 @@
+// Ported from recharts 3.8.1 src/util/useAnimationId.tsx (commit 7a23854).
+//
+// REACTIVE REDESIGN (see the porting-react-hooks-to-solid memory): recharts
+// detects an input change across re-renders via refs (`prevProps !== input`).
+// Solid components run once — there is no re-render to compare against — so the
+// faithful Solid form takes `input` as an `Accessor` and returns an
+// `Accessor<string>` backed by `createMemo`. The memo recomputes (yielding a
+// fresh id) exactly when `input` changes by reference, and returns the cached id
+// otherwise. Same behavior as recharts, expressed through Solid reactivity.
+import { createMemo, type Accessor } from "solid-js";
+import { uniqueId } from "./DataUtils";
+
+/**
+ * Returns a reactive unique animation id for the `input` accessor.
+ * The id changes (new value) whenever `input` changes by reference equality,
+ * and stays the same while `input` is unchanged.
+ *
+ * @param input Accessor for the object to watch (reference equality, `===`).
+ * @param prefix Optional prefix for the animation id.
+ * @returns An accessor for the current animation id.
+ */
+export function useAnimationId(
+  input: Accessor<unknown>,
+  prefix: string = "animation-",
+): Accessor<string> {
+  return createMemo(() => {
+    // Track `input`; a new reference re-runs this compute → fresh id.
+    input();
+    return uniqueId(prefix);
+  });
+}

package/src/util/useElementOffset.ts

@@ -0,0 +1,164 @@
+// Ported from recharts 3.8.1 src/util/useElementOffset.ts (commit 7a23854).
+//
+// Solid 2.0 port of a React hook. Deviations from the reference:
+//   - `useState<ElementOffset>` → `createSignal<ElementOffset>`; the hook returns
+//     `[Accessor<ElementOffset>, setter]` instead of `[value, setter]`, because the
+//     value changes over time (ResizeObserver) and Solid needs a reactive read.
+//   - `useRef(observer)` → a plain closure variable; the hook body runs once, so the
+//     closure persists for the lifetime of the owner (no ref cell needed).
+//   - `lastBoundingBoxRef` mirror is KEPT (as a plain closure variable): the ref
+//     and ResizeObserver callbacks are side-effect boundaries, not reactive scopes,
+//     so reading the signal there to diff against would fire STRICT_READ_UNTRACKED.
+//     The mirror lets them compare without a reactive read; it's updated in lockstep
+//     with the signal.
+//   - `useCallback` → a plain function (stable identity for the owner's lifetime).
+//   - `useEffect(() => () => disconnect(), [])` → `onCleanup(disconnect)`.
+//   - `extraDependencies` is kept in the signature for call-site parity but has no
+//     effect here: there is no re-render to re-trigger. If reactive re-measurement
+//     on dependency change is ever needed, callers pass accessors and we add a
+//     `createEffect` — deferred until a consumer requires it.
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+
+const EPS = 1;
+
+/**
+ * Stores the dimensions and position of a DOM element as returned by `getBoundingClientRect()`.
+ *
+ * Values are viewport-relative and may be fractional (subpixel precision).
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect}
+ */
+export type ElementOffset = {
+  /**
+   * Height of an element as returned by `getBoundingClientRect()`.
+   * This is the CSS height including padding and border, and may be a fractional value.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/height}
+   */
+  height: number;
+  /**
+   * Distance from the left edge of the viewport to the left edge of the element,
+   * as returned by `getBoundingClientRect()`.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/left}
+   */
+  left: number;
+  /**
+   * Distance from the top edge of the viewport to the top edge of the element,
+   * as returned by `getBoundingClientRect()`.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/top}
+   */
+  top: number;
+  /**
+   * Width of an element as returned by `getBoundingClientRect()`.
+   * This is the CSS width including padding and border, and may be a fractional value.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMRect/width}
+   */
+  width: number;
+};
+
+/**
+ * Callback ref setter returned by {@link useElementOffset}.
+ *
+ * Pass this to a DOM element's `ref` prop to start observing its layout.
+ *
+ * @param node - the DOM element to observe, or `null` when the element unmounts
+ */
+export type SetElementOffset = (node: HTMLElement | null) => void;
+
+/**
+ * Checks whether two ElementOffset values differ by more than `EPS` (1px) in any dimension.
+ *
+ * @param a - the first ElementOffset to compare
+ * @param b - the second ElementOffset to compare
+ * @returns true if any dimension differs by more than 1px
+ */
+function hasSignificantChange(a: ElementOffset, b: ElementOffset): boolean {
+  return (
+    Math.abs(a.height - b.height) > EPS ||
+    Math.abs(a.left - b.left) > EPS ||
+    Math.abs(a.top - b.top) > EPS ||
+    Math.abs(a.width - b.width) > EPS
+  );
+}
+
+/**
+ * Reads the current bounding box of a DOM element using `getBoundingClientRect()`.
+ *
+ * @param node - the DOM element to measure
+ * @returns an ElementOffset with the element's current dimensions and viewport-relative position
+ */
+function readElementOffset(node: HTMLElement): ElementOffset {
+  const rect = node.getBoundingClientRect();
+  return {
+    height: rect.height,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+  };
+}
+
+/**
+ * Use this to listen to element layout changes.
+ *
+ * Very useful for reading actual sizes of DOM elements relative to the viewport.
+ *
+ * Uses ResizeObserver to automatically detect size changes of the observed element.
+ *
+ * @param extraDependencies see the module note — kept for call-site parity, no effect in the Solid port.
+ * @returns [lastElementOffset, updateElementOffset] reactive accessor for the most recent value, and
+ *   the ref setter. Pass the setter to a DOM element ref like this: `<div ref={updateElementOffset}>`
+ */
+export function useElementOffset(
+  extraDependencies: ReadonlyArray<unknown> = [],
+): [Accessor<ElementOffset>, SetElementOffset] {
+  void extraDependencies; // parity with the recharts signature; no effect in the Solid port (see module note)
+
+  const initialOffset: ElementOffset = { height: 0, left: 0, top: 0, width: 0 };
+  const [lastBoundingBox, setLastBoundingBox] = createSignal<ElementOffset>(initialOffset);
+
+  // Plain mirror of the signal's current value: the ref/ResizeObserver callbacks
+  // below diff against THIS (a non-reactive read) instead of reading the signal,
+  // which in those side-effect scopes would fire STRICT_READ_UNTRACKED.
+  let current: ElementOffset = initialOffset;
+  const commit = (box: ElementOffset): void => {
+    if (hasSignificantChange(box, current)) {
+      current = box;
+      setLastBoundingBox(box);
+    }
+  };
+
+  // Replaces React's `observerRef` — the hook body runs once, so a closure holds the observer.
+  let observer: ResizeObserver | null = null;
+
+  const updateBoundingBox: SetElementOffset = (node) => {
+    // Disconnect any previously active ResizeObserver
+    if (observer != null) {
+      observer.disconnect();
+      observer = null;
+    }
+
+    if (node != null) {
+      // Measure immediately on ref attach
+      commit(readElementOffset(node));
+
+      // Set up ResizeObserver for future size changes
+      if (typeof ResizeObserver !== "undefined") {
+        const newObserver = new ResizeObserver(() => {
+          commit(readElementOffset(node));
+        });
+        newObserver.observe(node);
+        observer = newObserver;
+      }
+    }
+  };
+
+  // Cleanup on unmount
+  onCleanup(() => {
+    observer?.disconnect();
+  });
+
+  return [lastBoundingBox, updateBoundingBox];
+}

package/src/util/useId.ts

@@ -0,0 +1,20 @@
+// Ported from recharts 3.8.1 src/util/useId.ts (commit 7a23854).
+//
+// recharts picks `React.useId` (React 18+) with a counter fallback for older
+// React. Solid has no React.useId; we mimic React 18's `:rN:` shape so prefixed
+// ids (`recharts-bar-:r0:`) satisfy the recharts test regex `^prefix-[:a-z0-9]+$`.
+// `useIdFallback` keeps the counter form (via `uniqueId`) for the legacy path.
+import { uniqueId } from "./DataUtils";
+
+/**
+ * Counter-based unique id. Generated once per call; stable for the caller's lifetime.
+ */
+export const useIdFallback = (): string => uniqueId("uid-");
+
+let reactStyleIdCounter = 0;
+
+/**
+ * SSR-safe unique id in React 18 `useId` shape (`:r0:`, `:r1:`, …).
+ * Stable for the caller's lifetime (Solid components run once).
+ */
+export const useId = (): string => `:r${reactStyleIdCounter++}:`;

package/src/util/usePrefersReducedMotion.ts

@@ -0,0 +1,44 @@
+// Ported from recharts 3.8.1 src/util/usePrefersReducedMotion.ts (commit 7a23854).
+//
+// Solid 2.0 port of a React hook. Deviations:
+//   - `useState(() => initial)` → `createSignal(initial)`; the hook returns an
+//     `Accessor<boolean>` (not a bare boolean) because the value changes
+//     reactively as the media query toggles.
+//   - `useEffect(() => { addEventListener; return () => removeEventListener }, [])`
+//     → the listener is registered once in the (run-once) hook body with
+//     `onCleanup` for teardown.
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+
+import { Global } from "./Global";
+
+/**
+ * Detects and subscribes to the user's `prefers-reduced-motion` system preference.
+ * Returns `true` when the user prefers reduced motion, `false` otherwise.
+ * SSR-safe: always returns `false` during server-side rendering.
+ */
+export function usePrefersReducedMotion(): Accessor<boolean> {
+  const getInitial = (): boolean => {
+    if (Global.isSsr) {
+      return false;
+    }
+    if (!window.matchMedia) {
+      return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  };
+
+  const [prefersReducedMotion, setPrefersReducedMotion] = createSignal<boolean>(getInitial());
+
+  if (window.matchMedia) {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (): void => {
+      setPrefersReducedMotion(mediaQuery.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    onCleanup(() => {
+      mediaQuery.removeEventListener("change", handleChange);
+    });
+  }
+
+  return prefersReducedMotion;
+}

package/src/util/useUniqueId.ts

@@ -0,0 +1,34 @@
+// Ported from recharts 3.8.1 src/util/useUniqueId.ts (commit 7a23854).
+// Returns a stable string (computed once); no Solid-specific reactivity needed.
+import { useId } from "./useId";
+
+/**
+ * A hook that generates a unique ID, SSR-safe via `useId`. The ID stays the same
+ * for the caller's lifetime; you can optionally provide a prefix or a custom ID.
+ *
+ * @param [prefix] - An optional prefix for the generated ID.
+ * @param [customId] - An optional custom ID to override the generated one.
+ * @returns The unique ID.
+ */
+export function useUniqueId(prefix?: string, customId?: string): string {
+  // Always call the hook (do not call conditionally).
+  const generatedId = useId();
+
+  // If a custom ID is provided, it always takes precedence.
+  if (customId) {
+    return customId;
+  }
+
+  // Apply the prefix if one was provided.
+  return prefix ? `${prefix}-${generatedId}` : generatedId;
+}
+
+/**
+ * The useUniqueId hook returns a unique ID that is either reused from external props or generated internally.
+ * Either way the ID is now guaranteed to be present so no more nulls or undefined.
+ */
+export type WithIdRequired<T> = T & {
+  id: string;
+};
+
+export type WithoutId<T> = Omit<T, "id">;

package/src/zIndex/DefaultZIndexes.tsx

@@ -0,0 +1,87 @@
+// Ported from recharts 3.8.1 src/zIndex/DefaultZIndexes.tsx (commit 7a23854).
+// Pure data (no JSX despite the .tsx extension, kept for path parity) — the
+// implementation is byte-identical to the reference.
+
+/**
+ * A collection of all default zIndex values used by Recharts.
+ *
+ * You can reuse these, or you can define your own.
+ */
+export const DefaultZIndexes = {
+  /**
+   * CartesianGrid and PolarGrid
+   */
+  grid: -100,
+  /**
+   * Background of Bar and RadialBar.
+   * This is not visible by default but can be enabled by setting background={true} on Bar or RadialBar.
+   */
+  barBackground: -50,
+
+  /*
+   * other chart elements or custom elements without specific zIndex
+   * render in here, at zIndex 0
+   */
+
+  /**
+   * Area, Pie, Radar, and ReferenceArea
+   */
+  area: 100,
+
+  /**
+   * Cursor is embedded inside Tooltip and controlled by it.
+   * The Tooltip itself has a separate portal and is not included in the zIndex system;
+   * Cursor is the decoration inside the chart area. CursorRectangle is a rectangle box.
+   * It renders below bar so that in a stacked bar chart the cursor rectangle does not hide the other bars.
+   */
+  cursorRectangle: 200,
+
+  /**
+   * Bar and RadialBar
+   */
+  bar: 300,
+
+  /**
+   * Line and ReferenceLine, and ErrorBor
+   */
+  line: 400,
+
+  /**
+   * XAxis and YAxis and PolarAngleAxis and PolarRadiusAxis ticks and lines and children
+   */
+  axis: 500,
+
+  /**
+   * Scatter and ReferenceDot,
+   * and Dots of Line and Area and Radar if they have dot=true
+   */
+  scatter: 600,
+
+  /**
+   * Hovering over a Bar or RadialBar renders a highlight rectangle
+   */
+  activeBar: 1000,
+
+  /**
+   * Cursor is embedded inside Tooltip and controlled by it.
+   * The Tooltip itself has a separate portal and is not included in the zIndex system;
+   * Cursor is the decoration inside the chart area, usually a cross or a box.
+   * CursorLine is a line cursor rendered in Line, Area, Scatter, Radar charts.
+   * It renders above the Line and Scatter so that it is always visible.
+   * It renders below active dot so that the dot is always visible and shows the current point.
+   * We're also assuming that the active dot is small enough that it does not fully cover the cursor line.
+   *
+   * This also applies to the radial cursor in RadialBarChart.
+   */
+  cursorLine: 1100,
+
+  /**
+   * Hovering over a Point in Line, Area, Scatter, Radar renders a highlight dot
+   */
+  activeDot: 1200,
+
+  /**
+   * LabelList and Label, including Axis labels
+   */
+  label: 2000,
+} as const satisfies Record<string, number>;

package/src/zIndex/ZIndexLayer.tsx

@@ -0,0 +1,126 @@
+// Ported from recharts 3.8.1 src/zIndex/ZIndexLayer.tsx (commit 7a23854).
+// Solid deviations: `useLayoutEffect` → two-arg `createEffect`; `createPortal` →
+// `<Portal mount>`; dispatch → `store.actions.zIndex`.
+import {
+  createEffect,
+  createMemo,
+  createRoot,
+  getOwner,
+  onCleanup,
+  onSettled,
+  runWithOwner,
+  Show,
+} from "solid-js";
+import { Portal, type JSX } from "@solidjs/web";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { unregisterCleanup } from "../state/unregisterOnCleanup";
+import { selectZIndexPortalElement } from "./zIndexSelectors";
+import { useIsInChartContext } from "../context/chartLayoutContext";
+import { useIsPanorama } from "../context/PanoramaContext";
+
+export interface ZIndexable {
+  /**
+   * Z-Index of this component and its children. The higher the value,
+   * the more on top it will be rendered.
+   */
+  zIndex?: number;
+}
+
+export function ZIndexLayer(props: {
+  zIndex: number | undefined;
+  children?: JSX.Element;
+}): JSX.Element {
+  const isInChartContext = useIsInChartContext();
+  const isPanorama = useIsPanorama();
+  const store = useAppStore();
+  const zIndexActions = store?.actions.zIndex;
+
+  let lastPortalElement: Element | undefined;
+  const registeredZIndexes = new Set<number>();
+
+  const shouldRenderInPortal = createMemo(() => {
+    const zIndex = props.zIndex;
+    return isInChartContext() && zIndex !== undefined && zIndex !== 0;
+  });
+
+  const portalElement = useAppSelector((state) =>
+    selectZIndexPortalElement(state, props.zIndex, isPanorama),
+  );
+
+  createEffect(
+    () => ({
+      should: shouldRenderInPortal(),
+      zIndex: props.zIndex,
+      portal: portalElement(),
+    }),
+    ({ should, zIndex, portal }) => {
+      const actions = zIndexActions;
+      if (!should || zIndex === undefined || actions == null) {
+        registeredZIndexes.forEach((z) => {
+          actions?.unregisterZIndexPortal({ zIndex: z });
+        });
+        registeredZIndexes.clear();
+        lastPortalElement = undefined;
+        return;
+      }
+
+      if (!registeredZIndexes.has(zIndex)) {
+        actions.registerZIndexPortal({ zIndex });
+        registeredZIndexes.add(zIndex);
+      }
+
+      if (portal) {
+        lastPortalElement = portal;
+        registeredZIndexes.forEach((z) => {
+          if (z !== zIndex) {
+            actions.unregisterZIndexPortal({ zIndex: z });
+            registeredZIndexes.delete(z);
+          }
+        });
+      }
+    },
+  );
+
+  onSettled(() => {
+    return unregisterCleanup(() => {
+      const actions = zIndexActions;
+      registeredZIndexes.forEach((z) => {
+        actions?.unregisterZIndexPortal({ zIndex: z });
+      });
+      registeredZIndexes.clear();
+    });
+  });
+
+  const targetElement = createMemo(() => portalElement() ?? lastPortalElement);
+
+  // The portal target settles asynchronously (the <g> ref → register → selector),
+  // so this Portal is created during a flush, NOT during the initial owned render.
+  // Solid's runEffect invokes an effect's APPLY phase without re-establishing the
+  // effect as owner, so <Portal>'s apply-phase `insert()` would create its child
+  // render-effects with no owner (NO_OWNER_EFFECT — they never dispose). Capture the
+  // component owner and create the Portal inside a `createRoot` parented to it, so
+  // those effects are owned. The root's manual `dispose` is hooked to the keyed
+  // <Show> branch's cleanup: when the target identity changes, the old Portal
+  // subtree is torn down (parenting it to the component owner alone would leave
+  // every previous Portal alive until the whole layer unmounts — stale chart
+  // content stays portal'd into the old <g>).
+  const owner = getOwner();
+
+  return (
+    <Show when={shouldRenderInPortal()} fallback={props.children}>
+      <Show when={targetElement()} keyed>
+        {(mount) => {
+          let disposePortal: (() => void) | undefined;
+          const rendered = runWithOwner(owner, () =>
+            createRoot((dispose) => {
+              disposePortal = dispose;
+              return <Portal mount={mount}>{props.children}</Portal>;
+            }),
+          );
+          onCleanup(() => disposePortal?.());
+          return rendered;
+        }}
+      </Show>
+    </Show>
+  );
+}

package/src/zIndex/ZIndexPortal.tsx

@@ -0,0 +1,69 @@
+// Ported from recharts 3.8.1 src/zIndex/ZIndexPortal.tsx (commit 7a23854).
+// Solid deviations: `useLayoutEffect` → two-arg `createEffect`; `className` → `class`.
+import { createEffect, createMemo, createSignal, For, onSettled } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import { unregisterCleanup } from "../state/unregisterOnCleanup";
+import { selectAllRegisteredZIndexes } from "./zIndexSelectors";
+
+function ZIndexSvgPortal(props: { zIndex: number; isPanorama: boolean }): JSX.Element {
+  const store = useAppStore();
+  const zIndexActions = store?.actions.zIndex;
+  const [gRef, setGRef] = createSignal<SVGGElement | undefined>();
+
+  createEffect(
+    () => ({
+      zIndex: props.zIndex,
+      isPanorama: props.isPanorama,
+      element: gRef(),
+    }),
+    ({ zIndex, isPanorama, element }) => {
+      const actions = zIndexActions;
+      if (element != null && actions != null) {
+        actions.registerZIndexPortalElement({
+          zIndex,
+          element,
+          isPanorama,
+        });
+      }
+    },
+  );
+
+  onSettled(() => {
+    const zIndex = props.zIndex;
+    const isPanorama = props.isPanorama;
+    return unregisterCleanup(() => {
+      zIndexActions?.unregisterZIndexPortalElement({
+        zIndex,
+        isPanorama,
+      });
+    });
+  });
+
+  return <g tabindex={-1} class={`recharts-zIndex-layer_${props.zIndex}`} ref={setGRef} />;
+}
+
+export const AllZIndexPortals = (props: {
+  children?: JSX.Element;
+  isPanorama: boolean;
+}): JSX.Element => {
+  const allRegisteredZIndexes = useAppSelector(selectAllRegisteredZIndexes);
+  const negativeZIndexes = createMemo(() =>
+    (allRegisteredZIndexes() ?? []).filter((zIndex) => zIndex < 0),
+  );
+  const positiveZIndexes = createMemo(() =>
+    (allRegisteredZIndexes() ?? []).filter((zIndex) => zIndex > 0),
+  );
+
+  return (
+    <>
+      <For each={negativeZIndexes()}>
+        {(zIndex) => <ZIndexSvgPortal zIndex={zIndex} isPanorama={props.isPanorama} />}
+      </For>
+      {props.children}
+      <For each={positiveZIndexes()}>
+        {(zIndex) => <ZIndexSvgPortal zIndex={zIndex} isPanorama={props.isPanorama} />}
+      </For>
+    </>
+  );
+};

package/src/zIndex/getZIndexFromUnknown.tsx

@@ -0,0 +1,17 @@
+// Ported from recharts 3.8.1 src/zIndex/getZIndexFromUnknown.tsx.
+// Pure utility — no framework surface — behavior is byte-identical to recharts.
+
+import { isWellBehavedNumber } from "../util/isWellBehavedNumber";
+
+export function getZIndexFromUnknown(input: unknown, defaultZIndex: number): number {
+  if (
+    input &&
+    typeof input === "object" &&
+    "zIndex" in input &&
+    typeof input.zIndex === "number" &&
+    isWellBehavedNumber(input.zIndex)
+  ) {
+    return input.zIndex;
+  }
+  return defaultZIndex;
+}

package/src/zIndex/zIndexSelectors.ts

@@ -0,0 +1,46 @@
+// Ported from recharts 3.8.1 src/zIndex/zIndexSelectors.ts (commit 7a23854).
+import { RechartsRootState } from "../state/store";
+import { DefaultZIndexes } from "./DefaultZIndexes";
+
+/**
+ * Given a zIndex, returns the corresponding portal element reference.
+ * If no zIndex is provided or if the zIndex is not registered, returns undefined.
+ *
+ * It also returns undefined in case the z-index portal has not been rendered yet.
+ */
+export const selectZIndexPortalElement = (
+  state: RechartsRootState,
+  zIndex: number | undefined,
+  isPanorama: boolean,
+): Element | undefined => {
+  if (zIndex == null) {
+    return undefined;
+  }
+  const entry = state.zIndex.zIndexMap[zIndex];
+  if (entry == null) {
+    return undefined;
+  }
+  if (isPanorama) {
+    return entry.panoramaElement;
+  }
+  return entry.element;
+};
+
+let cachedZIndexMapKeys = "";
+let cachedAllRegisteredZIndexes: ReadonlyArray<number> = [];
+
+export const selectAllRegisteredZIndexes = (state: RechartsRootState): ReadonlyArray<number> => {
+  const zIndexMapKeys = Object.keys(state.zIndex.zIndexMap).sort().join(",");
+  if (zIndexMapKeys === cachedZIndexMapKeys) {
+    return cachedAllRegisteredZIndexes;
+  }
+  const allNumbers = zIndexMapKeys
+    .split(",")
+    .filter((key) => key.length > 0)
+    .map((zIndexStr) => Number.parseInt(zIndexStr, 10))
+    .concat(Object.values(DefaultZIndexes));
+  const uniqueNumbers = Array.from(new Set(allNumbers));
+  cachedZIndexMapKeys = zIndexMapKeys;
+  cachedAllRegisteredZIndexes = uniqueNumbers.sort((a, b) => a - b);
+  return cachedAllRegisteredZIndexes;
+};