solid-recharts 0.1.0

package/src/cartesian/XAxis.tsx

@@ -0,0 +1,293 @@
+// Ported from recharts 3.8.1 src/cartesian/XAxis.tsx (commit 7a23854).
+//
+// BOTH HALVES of the reference XAxis are ported: `SetXAxisSettings` (pushes axis
+// config into the cartesianAxis slice, so graphical items like <Line> get a scale)
+// and the `XAxisImpl` visual (the `<CartesianAxis>` render at the bottom of this
+// file — ticks + labels + axis line, skipped inside a Brush panorama).
+//
+// Solid deviations: `useAppDispatch` + `useLayoutEffect`/`prevSettingsRef` →
+// `useAppStore()` + a single `createEffect((compute) => settings, (apply) => add/replace)`
+// plus `onCleanup` for removal. Defaults are resolved field-by-field to match
+// recharts' `resolveDefaultProps`: explicit `undefined` falls back to defaults.
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createEffect, createMemo, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import {
+  NiceTicksAlgorithm,
+  XAxisOrientation,
+  XAxisPadding,
+  XAxisSettings,
+} from "../state/cartesianAxisSlice";
+import {
+  implicitXAxis,
+  selectTicksOfAxis,
+  selectXAxisPosition,
+  selectXAxisSize,
+} from "../state/selectors/axisSelectors";
+import { CartesianAxis, type CartesianTickEventHandler } from "./CartesianAxis";
+import type { ImplicitLabelType } from "../component/Label";
+import { RenderedTicksReporter } from "./RenderedTicksReporter";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { useCartesianChartLayout } from "../context/chartLayoutContext";
+import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
+import {
+  AxisDomain,
+  AxisDomainTypeInput,
+  AxisInterval,
+  AxisTick,
+  DataKey,
+  ScaleType,
+  type CartesianTickContentProps,
+  TickFormatter,
+  TickProp,
+} from "../util/types";
+import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+export interface XAxisProps<DataPointType = unknown, DataValueType = unknown> {
+  xAxisId?: string | number;
+  type?: AxisDomainTypeInput;
+  dataKey?: DataKey<DataPointType, DataValueType>;
+  domain?: AxisDomain;
+  scale?:
+    | ScaleType
+    | CustomScaleDefinition
+    | CustomScaleDefinition<string>
+    | CustomScaleDefinition<number>
+    | CustomScaleDefinition<Date>;
+  ticks?: ReadonlyArray<AxisTick>;
+  tick?: TickProp<CartesianTickContentProps>;
+  tickCount?: number;
+  tickFormatter?: TickFormatter;
+  padding?: XAxisPadding;
+  height?: number;
+  orientation?: XAxisOrientation;
+  mirror?: boolean;
+  minTickGap?: number;
+  interval?: AxisInterval;
+  angle?: number;
+  hide?: boolean;
+  includeHidden?: boolean;
+  reversed?: boolean;
+  allowDataOverflow?: boolean;
+  allowDecimals?: boolean;
+  allowDuplicatedCategory?: boolean;
+  name?: string;
+  unit?: string;
+  /** Extra CSS class(es) for the axis layer (recharts: `className`). */
+  class?: string;
+  /**
+   * Font size of the tick text; also feeds the tick-width measurement used to
+   * decide how many ticks render without overlapping (recharts `fontSize`).
+   */
+  fontSize?: number | string;
+  /** Letter spacing of the tick text; measured together with `fontSize`. */
+  letterSpacing?: number | string;
+  /** Axis-line color/opacity (forwarded to CartesianAxis). */
+  stroke?: string;
+  strokeOpacity?: number | string;
+  /** Toggle/style the axis line. boolean or SVG props object. @defaultValue true */
+  axisLine?: boolean | CamelSvgProps<JSX.LineSVGAttributes<SVGLineElement>>;
+  tickLine?: boolean;
+  /** Length of the tick line. @defaultValue 6 */
+  tickSize?: number;
+  /** Gap between the tick line and the tick text. @defaultValue 2 */
+  tickMargin?: number;
+  /** When set, relocates the axis into that z-index portal (unset = inline). */
+  zIndex?: number;
+  /** Per-tick pointer handlers, called props-first `(tickItem, index, event)`. */
+  onClick?: CartesianTickEventHandler<MouseEvent>;
+  onMouseEnter?: CartesianTickEventHandler<MouseEvent>;
+  onMouseLeave?: CartesianTickEventHandler<MouseEvent>;
+  onMouseOver?: CartesianTickEventHandler<MouseEvent>;
+  onMouseOut?: CartesianTickEventHandler<MouseEvent>;
+  onMouseMove?: CartesianTickEventHandler<MouseEvent>;
+  onMouseDown?: CartesianTickEventHandler<MouseEvent>;
+  onMouseUp?: CartesianTickEventHandler<MouseEvent>;
+  onTouchStart?: CartesianTickEventHandler<TouchEvent>;
+  onTouchMove?: CartesianTickEventHandler<TouchEvent>;
+  onTouchEnd?: CartesianTickEventHandler<TouchEvent>;
+  niceTicks?: NiceTicksAlgorithm;
+  /** Axis title — string/number/object/function/`true`, or a `<Label>` child. */
+  label?: ImplicitLabelType;
+  children?: JSX.Element;
+}
+
+export const xAxisDefaultProps = {
+  allowDataOverflow: implicitXAxis.allowDataOverflow,
+  allowDecimals: implicitXAxis.allowDecimals,
+  allowDuplicatedCategory: implicitXAxis.allowDuplicatedCategory,
+  angle: implicitXAxis.angle,
+  height: implicitXAxis.height,
+  hide: false,
+  includeHidden: implicitXAxis.includeHidden,
+  interval: implicitXAxis.interval,
+  minTickGap: implicitXAxis.minTickGap,
+  mirror: implicitXAxis.mirror,
+  orientation: implicitXAxis.orientation,
+  padding: implicitXAxis.padding,
+  reversed: implicitXAxis.reversed,
+  scale: implicitXAxis.scale,
+  tick: implicitXAxis.tick,
+  tickCount: implicitXAxis.tickCount,
+  type: implicitXAxis.type,
+  niceTicks: implicitXAxis.niceTicks,
+  xAxisId: 0,
+} as const;
+
+function withDefault<T>(value: T | undefined, defaultValue: T): T {
+  return value === undefined ? defaultValue : value;
+}
+
+export function XAxis<DataPointType = unknown, DataValueType = unknown>(
+  props: XAxisProps<DataPointType, DataValueType>,
+): JSX.Element {
+  const store = useAppStore();
+  const layout = useCartesianChartLayout();
+  const xAxisId = createMemo(() => withDefault(props.xAxisId, xAxisDefaultProps.xAxisId));
+  const hide = createMemo(() => withDefault(props.hide, xAxisDefaultProps.hide));
+  const tick = createMemo(() => withDefault(props.tick, xAxisDefaultProps.tick));
+  const tickFormatter = createMemo(() => props.tickFormatter);
+  const orientation = createMemo(() =>
+    withDefault(props.orientation, xAxisDefaultProps.orientation),
+  );
+  const unit = createMemo(() => props.unit);
+  const mirror = createMemo(() => withDefault(props.mirror, xAxisDefaultProps.mirror));
+
+  let prev: XAxisSettings | null = null;
+
+  createEffect(
+    (): XAxisSettings | undefined => {
+      const evaluatedType = getAxisTypeBasedOnLayout(
+        layout(),
+        "xAxis",
+        withDefault(props.type, xAxisDefaultProps.type),
+      );
+      if (evaluatedType == null) {
+        return undefined;
+      }
+      return {
+        id: xAxisId(),
+        scale: withDefault(props.scale, xAxisDefaultProps.scale),
+        type: evaluatedType,
+        dataKey: props.dataKey,
+        unit: unit(),
+        name: props.name,
+        allowDuplicatedCategory: withDefault(
+          props.allowDuplicatedCategory,
+          xAxisDefaultProps.allowDuplicatedCategory,
+        ),
+        allowDataOverflow: withDefault(
+          props.allowDataOverflow,
+          xAxisDefaultProps.allowDataOverflow,
+        ),
+        reversed: withDefault(props.reversed, xAxisDefaultProps.reversed),
+        includeHidden: withDefault(props.includeHidden, xAxisDefaultProps.includeHidden),
+        domain: props.domain,
+        allowDecimals: withDefault(props.allowDecimals, xAxisDefaultProps.allowDecimals),
+        tickCount: withDefault(props.tickCount, xAxisDefaultProps.tickCount),
+        ticks: props.ticks,
+        tick: tick(),
+        niceTicks: withDefault(props.niceTicks, xAxisDefaultProps.niceTicks),
+        interval: withDefault(props.interval, xAxisDefaultProps.interval),
+        mirror: mirror(),
+        minTickGap: withDefault(props.minTickGap, xAxisDefaultProps.minTickGap),
+        angle: withDefault(props.angle, xAxisDefaultProps.angle),
+        hide: hide(),
+        tickFormatter: tickFormatter(),
+        padding: withDefault(props.padding, xAxisDefaultProps.padding),
+        height: withDefault(props.height, xAxisDefaultProps.height),
+        orientation: orientation(),
+      };
+    },
+    (settings) => {
+      if (settings == null || store == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.cartesianAxis.addXAxis(settings);
+      } else if (prev !== settings) {
+        store.actions.cartesianAxis.replaceXAxis({ prev, next: settings });
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.cartesianAxis.removeXAxis(prev);
+      prev = null;
+    }
+  });
+
+  // Visual: render the <CartesianAxis> (ticks + labels + axis line). Never inside
+  // a Brush panorama.
+  const isPanorama = useIsPanorama();
+  const position = useAppSelector((state) => selectXAxisPosition(state, xAxisId()));
+  const size = useAppSelector((state) => selectXAxisSize(state, xAxisId()));
+  const ticks = useAppSelector((state) => selectTicksOfAxis(state, "xAxis", xAxisId(), isPanorama));
+  const axisRender = createMemo(() => {
+    const p = position();
+    const s = size();
+    // Deviation: recharts gates the axis render only on size+position (the registered
+    // axis settings), NOT on ticks — a data-less axis still draws the Layer + axis line
+    // with an empty tick set. Mirror that: fall back to `[]` when no scale/ticks resolve.
+    if (p == null || s == null) {
+      return null;
+    }
+    return { position: p, size: s, ticks: ticks() ?? [] };
+  });
+
+  return (
+    <Show when={!isPanorama && !hide() && axisRender()}>
+      {(ar) => (
+        <>
+          <RenderedTicksReporter axisType="xAxis" axisId={xAxisId()} ticks={ar().ticks} />
+          <CartesianAxis
+            axisType="xAxis"
+            x={ar().position.x}
+            y={ar().position.y}
+            width={ar().size.width}
+            height={ar().size.height}
+            orientation={orientation()}
+            ticks={ar().ticks}
+            tick={tick()}
+            tickFormatter={tickFormatter()}
+            interval={withDefault(props.interval, xAxisDefaultProps.interval)}
+            minTickGap={withDefault(props.minTickGap, xAxisDefaultProps.minTickGap)}
+            unit={unit()}
+            mirror={mirror()}
+            class={props.class}
+            fontSize={props.fontSize}
+            letterSpacing={props.letterSpacing}
+            axisLine={props.axisLine ?? true}
+            tickLine={props.tickLine ?? true}
+            tickSize={props.tickSize ?? 6}
+            tickMargin={props.tickMargin ?? 2}
+            stroke={props.stroke}
+            strokeOpacity={props.strokeOpacity}
+            zIndex={props.zIndex}
+            onClick={props.onClick}
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            onMouseOver={props.onMouseOver}
+            onMouseOut={props.onMouseOut}
+            onMouseMove={props.onMouseMove}
+            onMouseDown={props.onMouseDown}
+            onMouseUp={props.onMouseUp}
+            onTouchStart={props.onTouchStart}
+            onTouchMove={props.onTouchMove}
+            onTouchEnd={props.onTouchEnd}
+            label={props.label}
+            name={props.name}
+            angle={props.angle}
+            padding={props.padding}
+          >
+            {props.children}
+          </CartesianAxis>
+        </>
+      )}
+    </Show>
+  );
+}

package/src/cartesian/YAxis.tsx

@@ -0,0 +1,333 @@
+// Ported from recharts 3.8.1 src/cartesian/YAxis.tsx (commit 7a23854).
+//
+// Registration + visual — see XAxis.tsx for the Solid deviations (registration
+// via createEffect + defaults resolved like recharts' resolveDefaultProps); the
+// visual `<CartesianAxis>` IS rendered at the bottom of this file.
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createEffect, createMemo, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { useAppSelector, useAppStore } from "../state/hooks";
+import {
+  NiceTicksAlgorithm,
+  YAxisOrientation,
+  YAxisPadding,
+  YAxisSettings,
+  YAxisWidth,
+} from "../state/cartesianAxisSlice";
+import {
+  implicitYAxis,
+  selectTicksOfAxis,
+  selectYAxisPosition,
+  selectYAxisSize,
+} from "../state/selectors/axisSelectors";
+import { CartesianAxis, type CartesianTickEventHandler } from "./CartesianAxis";
+import { getCalculatedYAxisWidth } from "../util/YAxisUtils";
+import { isLabelContentAFunction } from "../component/Label";
+import type { ImplicitLabelType } from "../component/Label";
+import { RenderedTicksReporter } from "./RenderedTicksReporter";
+import { useIsPanorama } from "../context/PanoramaContext";
+import { useCartesianChartLayout } from "../context/chartLayoutContext";
+import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout";
+import {
+  AxisDomain,
+  AxisDomainTypeInput,
+  AxisInterval,
+  AxisTick,
+  DataKey,
+  ScaleType,
+  type CartesianTickContentProps,
+  TickFormatter,
+  TickProp,
+} from "../util/types";
+import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition";
+import { unregisterOnCleanup } from "../state/unregisterOnCleanup";
+
+export interface YAxisProps<DataPointType = unknown, DataValueType = unknown> {
+  yAxisId?: string | number;
+  type?: AxisDomainTypeInput;
+  dataKey?: DataKey<DataPointType, DataValueType>;
+  domain?: AxisDomain;
+  scale?:
+    | ScaleType
+    | CustomScaleDefinition
+    | CustomScaleDefinition<string>
+    | CustomScaleDefinition<number>
+    | CustomScaleDefinition<Date>;
+  ticks?: ReadonlyArray<AxisTick>;
+  tick?: TickProp<CartesianTickContentProps>;
+  tickCount?: number;
+  tickFormatter?: TickFormatter;
+  padding?: YAxisPadding;
+  width?: YAxisWidth;
+  orientation?: YAxisOrientation;
+  mirror?: boolean;
+  minTickGap?: number;
+  interval?: AxisInterval;
+  angle?: number;
+  hide?: boolean;
+  includeHidden?: boolean;
+  reversed?: boolean;
+  allowDataOverflow?: boolean;
+  allowDecimals?: boolean;
+  allowDuplicatedCategory?: boolean;
+  name?: string;
+  unit?: string;
+  /** Extra CSS class(es) for the axis layer (recharts: `className`). */
+  class?: string;
+  /**
+   * Font size of the tick text; also feeds the tick-width measurement used to
+   * decide how many ticks render without overlapping (recharts `fontSize`).
+   */
+  fontSize?: number | string;
+  /** Letter spacing of the tick text; measured together with `fontSize`. */
+  letterSpacing?: number | string;
+  /** Axis line / tick color (forwarded to CartesianAxis). */
+  stroke?: string;
+  strokeOpacity?: number | string;
+  /** Toggle/style the axis line. boolean or SVG props object. @defaultValue true */
+  axisLine?: boolean | CamelSvgProps<JSX.LineSVGAttributes<SVGLineElement>>;
+  tickLine?: boolean;
+  /** Length of the tick line. @defaultValue 6 */
+  tickSize?: number;
+  /** Gap between the tick line and the tick text. @defaultValue 2 */
+  tickMargin?: number;
+  /** When set, relocates the axis into that z-index portal (unset = inline). */
+  zIndex?: number;
+  /** Per-tick pointer handlers, called props-first `(tickItem, index, event)`. */
+  onClick?: CartesianTickEventHandler<MouseEvent>;
+  onMouseEnter?: CartesianTickEventHandler<MouseEvent>;
+  onMouseLeave?: CartesianTickEventHandler<MouseEvent>;
+  onMouseOver?: CartesianTickEventHandler<MouseEvent>;
+  onMouseOut?: CartesianTickEventHandler<MouseEvent>;
+  onMouseMove?: CartesianTickEventHandler<MouseEvent>;
+  onMouseDown?: CartesianTickEventHandler<MouseEvent>;
+  onMouseUp?: CartesianTickEventHandler<MouseEvent>;
+  onTouchStart?: CartesianTickEventHandler<TouchEvent>;
+  onTouchMove?: CartesianTickEventHandler<TouchEvent>;
+  onTouchEnd?: CartesianTickEventHandler<TouchEvent>;
+  niceTicks?: NiceTicksAlgorithm;
+  /** Axis title — string/number/object/function/`true`, or a `<Label>` child. */
+  label?: ImplicitLabelType;
+  children?: JSX.Element;
+}
+
+export const yAxisDefaultProps = {
+  allowDataOverflow: implicitYAxis.allowDataOverflow,
+  allowDecimals: implicitYAxis.allowDecimals,
+  allowDuplicatedCategory: implicitYAxis.allowDuplicatedCategory,
+  angle: implicitYAxis.angle,
+  hide: false,
+  includeHidden: implicitYAxis.includeHidden,
+  interval: implicitYAxis.interval,
+  minTickGap: implicitYAxis.minTickGap,
+  mirror: implicitYAxis.mirror,
+  orientation: implicitYAxis.orientation,
+  padding: implicitYAxis.padding,
+  reversed: implicitYAxis.reversed,
+  scale: implicitYAxis.scale,
+  tick: implicitYAxis.tick,
+  tickCount: implicitYAxis.tickCount,
+  type: implicitYAxis.type,
+  niceTicks: implicitYAxis.niceTicks,
+  width: implicitYAxis.width,
+  yAxisId: 0,
+} as const;
+
+function withDefault<T>(value: T | undefined, defaultValue: T): T {
+  return value === undefined ? defaultValue : value;
+}
+
+export function YAxis<DataPointType = unknown, DataValueType = unknown>(
+  props: YAxisProps<DataPointType, DataValueType>,
+): JSX.Element {
+  const store = useAppStore();
+  const layout = useCartesianChartLayout();
+  const yAxisId = createMemo(() => withDefault(props.yAxisId, yAxisDefaultProps.yAxisId));
+  const hide = createMemo(() => withDefault(props.hide, yAxisDefaultProps.hide));
+  const tick = createMemo(() => withDefault(props.tick, yAxisDefaultProps.tick));
+  const tickFormatter = createMemo(() => props.tickFormatter);
+  const orientation = createMemo(() =>
+    withDefault(props.orientation, yAxisDefaultProps.orientation),
+  );
+  const unit = createMemo(() => props.unit);
+  const mirror = createMemo(() => withDefault(props.mirror, yAxisDefaultProps.mirror));
+
+  let prev: YAxisSettings | null = null;
+
+  createEffect(
+    (): YAxisSettings | undefined => {
+      const evaluatedType = getAxisTypeBasedOnLayout(
+        layout(),
+        "yAxis",
+        withDefault(props.type, yAxisDefaultProps.type),
+      );
+      if (evaluatedType == null) {
+        return undefined;
+      }
+      return {
+        id: yAxisId(),
+        scale: withDefault(props.scale, yAxisDefaultProps.scale),
+        type: evaluatedType,
+        dataKey: props.dataKey,
+        unit: unit(),
+        name: props.name,
+        allowDuplicatedCategory: withDefault(
+          props.allowDuplicatedCategory,
+          yAxisDefaultProps.allowDuplicatedCategory,
+        ),
+        allowDataOverflow: withDefault(
+          props.allowDataOverflow,
+          yAxisDefaultProps.allowDataOverflow,
+        ),
+        reversed: withDefault(props.reversed, yAxisDefaultProps.reversed),
+        includeHidden: withDefault(props.includeHidden, yAxisDefaultProps.includeHidden),
+        domain: props.domain,
+        allowDecimals: withDefault(props.allowDecimals, yAxisDefaultProps.allowDecimals),
+        tickCount: withDefault(props.tickCount, yAxisDefaultProps.tickCount),
+        ticks: props.ticks,
+        tick: tick(),
+        niceTicks: withDefault(props.niceTicks, yAxisDefaultProps.niceTicks),
+        interval: withDefault(props.interval, yAxisDefaultProps.interval),
+        mirror: mirror(),
+        minTickGap: withDefault(props.minTickGap, yAxisDefaultProps.minTickGap),
+        angle: withDefault(props.angle, yAxisDefaultProps.angle),
+        hide: hide(),
+        tickFormatter: tickFormatter(),
+        padding: withDefault(props.padding, yAxisDefaultProps.padding),
+        width: withDefault(props.width, yAxisDefaultProps.width),
+        orientation: orientation(),
+      };
+    },
+    (settings) => {
+      if (settings == null || store == null) {
+        return;
+      }
+      if (prev === null) {
+        store.actions.cartesianAxis.addYAxis(settings);
+      } else if (prev !== settings) {
+        store.actions.cartesianAxis.replaceYAxis({ prev, next: settings });
+      }
+      prev = settings;
+    },
+  );
+
+  unregisterOnCleanup(() => {
+    if (prev && store != null) {
+      store.actions.cartesianAxis.removeYAxis(prev);
+      prev = null;
+    }
+  });
+
+  // Visual: render the <CartesianAxis>. Never inside a Brush panorama.
+  const isPanorama = useIsPanorama();
+  const position = useAppSelector((state) => selectYAxisPosition(state, yAxisId()));
+  const size = useAppSelector((state) => selectYAxisSize(state, yAxisId()));
+  const ticks = useAppSelector((state) => selectTicksOfAxis(state, "yAxis", yAxisId(), isPanorama));
+  const axisRender = createMemo(() => {
+    const p = position();
+    const s = size();
+    // Deviation: recharts gates the axis render only on size+position (the registered
+    // axis settings), NOT on ticks — a data-less axis still draws the Layer + axis line
+    // with an empty tick set. Mirror that: fall back to `[]` when no scale/ticks resolve.
+    if (p == null || s == null) {
+      return null;
+    }
+    return { position: p, size: s, ticks: ticks() ?? [] };
+  });
+
+  // Dynamic Y-axis width: when `width="auto"` (and the label is not a function/element),
+  // recharts measures the rendered tick-value DOM via `getCalculatedYAxisWidth` and feeds
+  // the result back into the store with `updateYAxisWidth`. Mirror that with the codebase's
+  // two-arg createEffect(compute, apply): the compute tracks the reactive inputs (ticks +
+  // size), the apply does the DOM measurement and the store write (untracked — so it cannot
+  // re-trigger itself; the slice's `updateYAxisWidth` + the Math.round equality also guard
+  // oscillation).
+  let layerEl: SVGGElement | null = null;
+  createEffect(
+    () => ({
+      ticks: ticks(),
+      size: size(),
+      width: props.width,
+      label: props.label,
+      id: yAxisId(),
+    }),
+    (inputs) => {
+      if (inputs.width !== "auto" || isLabelContentAFunction(inputs.label)) {
+        return;
+      }
+      const el = layerEl;
+      if (el == null || inputs.ticks == null || inputs.size == null || store == null) {
+        return;
+      }
+      const tickNodes = el.getElementsByClassName("recharts-cartesian-axis-tick-value");
+      if (tickNodes.length === 0) {
+        return;
+      }
+      const updatedYAxisWidth = getCalculatedYAxisWidth({
+        ticks: tickNodes,
+        label: undefined,
+        labelGapWithTick: 5,
+        tickSize: 6,
+        tickMargin: 2,
+      });
+      if (Math.round(inputs.size.width) !== Math.round(updatedYAxisWidth)) {
+        store.actions.cartesianAxis.updateYAxisWidth({ id: inputs.id, width: updatedYAxisWidth });
+      }
+    },
+  );
+
+  return (
+    <Show when={!isPanorama && !hide() && axisRender()}>
+      {(ar) => (
+        <>
+          <RenderedTicksReporter axisType="yAxis" axisId={yAxisId()} ticks={ar().ticks} />
+          <CartesianAxis
+            axisType="yAxis"
+            layerRef={(el) => {
+              layerEl = el;
+            }}
+            x={ar().position.x}
+            y={ar().position.y}
+            width={ar().size.width}
+            height={ar().size.height}
+            orientation={orientation()}
+            ticks={ar().ticks}
+            tickFormatter={tickFormatter()}
+            interval={withDefault(props.interval, yAxisDefaultProps.interval)}
+            minTickGap={withDefault(props.minTickGap, yAxisDefaultProps.minTickGap)}
+            unit={unit()}
+            mirror={mirror()}
+            class={props.class}
+            fontSize={props.fontSize}
+            letterSpacing={props.letterSpacing}
+            label={props.label}
+            tick={tick()}
+            name={props.name}
+            stroke={props.stroke}
+            strokeOpacity={props.strokeOpacity}
+            axisLine={props.axisLine ?? true}
+            tickLine={props.tickLine ?? true}
+            tickSize={props.tickSize ?? 6}
+            tickMargin={props.tickMargin ?? 2}
+            zIndex={props.zIndex}
+            onClick={props.onClick}
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            onMouseOver={props.onMouseOver}
+            onMouseOut={props.onMouseOut}
+            onMouseMove={props.onMouseMove}
+            onMouseDown={props.onMouseDown}
+            onMouseUp={props.onMouseUp}
+            onTouchStart={props.onTouchStart}
+            onTouchMove={props.onTouchMove}
+            onTouchEnd={props.onTouchEnd}
+            angle={props.angle}
+            padding={props.padding}
+          >
+            {props.children}
+          </CartesianAxis>
+        </>
+      )}
+    </Show>
+  );
+}