solid-recharts 0.1.0

package/src/polar/defaultPolarAngleAxisProps.tsx

@@ -0,0 +1,33 @@
+// Ported from recharts 3.8.1 src/polar/defaultPolarAngleAxisProps.tsx (commit 7a23854).
+//
+// DEVIATION: recharts types this `as const satisfies Props` (Props from
+// PolarAngleAxis). The PolarAngleAxis component is deferred to a follow-up, so
+// for now the object is typed only `as const`; when the component lands its
+// `Props` will pin these via `satisfies`. The values are byte-identical to
+// recharts. Consumed by polarAxisSelectors' implicitAngleAxis (and, later, the
+// component's default-props merge).
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+
+export const defaultPolarAngleAxisProps = {
+  allowDecimals: false,
+  allowDuplicatedCategory: true, // see recharts note: false breaks Radar tooltip sync
+  allowDataOverflow: false,
+  angle: 0,
+  angleAxisId: 0,
+  axisLine: true,
+  axisLineType: "polygon",
+  cx: 0,
+  cy: 0,
+  hide: false,
+  includeHidden: false,
+  label: false,
+  niceTicks: "auto",
+  orientation: "outer",
+  reversed: false,
+  scale: "auto",
+  tick: true,
+  tickLine: true,
+  tickSize: 8,
+  type: "auto",
+  zIndex: DefaultZIndexes.axis,
+} as const;

package/src/polar/defaultPolarRadiusAxisProps.tsx

@@ -0,0 +1,28 @@
+// Ported from recharts 3.8.1 src/polar/defaultPolarRadiusAxisProps.tsx (commit 7a23854).
+//
+// DEVIATION: typed only `as const` for now (PolarRadiusAxis component deferred);
+// when it lands its `Props` pins these via `satisfies`. Values byte-identical to
+// recharts. Consumed by polarAxisSelectors' implicitRadiusAxis.
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes";
+
+export const defaultPolarRadiusAxisProps = {
+  allowDataOverflow: false,
+  allowDecimals: false,
+  allowDuplicatedCategory: true,
+  angle: 0,
+  axisLine: true,
+  includeHidden: false,
+  hide: false,
+  niceTicks: "auto",
+  label: false,
+  orientation: "right",
+  radiusAxisId: 0,
+  reversed: false,
+  scale: "auto",
+  stroke: "#ccc",
+  tick: true,
+  tickCount: 5,
+  tickLine: true,
+  type: "auto",
+  zIndex: DefaultZIndexes.axis,
+} as const;

package/src/shape/Cross.tsx

@@ -0,0 +1,83 @@
+/**
+ * @fileOverview Cross
+ *
+ * Ported from recharts 3.8.1 src/shape/Cross.tsx (commit 7a23854).
+ * Solid deviations: `className` (recharts) → `class: string` (and Omit the wide
+ * SVG `class` so the array form typechecks); destructuring defaults → `?? 0`
+ * accessors; `clsx` → `class={[...]}`; `return null` → `<Show>`.
+ */
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { Show, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { isNumber } from "../util/DataUtils";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+
+interface CrossOwnProps {
+  /** The x-coordinate of the vertical line of the cross in pixels. */
+  x?: number;
+  /** The y-coordinate of the horizontal line of the cross in pixels. */
+  y?: number;
+  /** Width of the cross in pixels. */
+  width?: number;
+  /** Height of the cross in pixels. */
+  height?: number;
+  /** The y-coordinate of the top left point in the boundary box of the cross. */
+  top?: number;
+  /** The x-coordinate of the top left point in the boundary box of the cross. */
+  left?: number;
+  class?: string;
+}
+
+export type CrossProps = Omit<CamelSvgProps<JSX.PathSVGAttributes<SVGPathElement>>, "class"> &
+  CrossOwnProps;
+
+const getPath = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  top: number,
+  left: number,
+): string => {
+  return `M${x},${top}v${height}M${left},${y}h${width}`;
+};
+
+export const Cross = (props: CrossProps): JSX.Element => {
+  const x = (): number => props.x ?? 0;
+  const y = (): number => props.y ?? 0;
+  const top = (): number => props.top ?? 0;
+  const left = (): number => props.left ?? 0;
+  const width = (): number => props.width ?? 0;
+  const height = (): number => props.height ?? 0;
+
+  const valid = (): boolean =>
+    isNumber(x()) &&
+    isNumber(y()) &&
+    isNumber(width()) &&
+    isNumber(height()) &&
+    isNumber(top()) &&
+    isNumber(left());
+
+  // recharts spreads `{ x, y, top, left, width, height, ...rest }` through the
+  // SVG-prop filter; only allowlisted keys (x, y, width, height, …) survive onto
+  // the <path>. `top`/`left`/`class` are filtered/handled separately.
+  const passthrough = (): Record<string, unknown> => ({
+    ...omit(props, "class"),
+    x: x(),
+    y: y(),
+    top: top(),
+    left: left(),
+    width: width(),
+    height: height(),
+  });
+
+  return (
+    <Show when={valid()}>
+      <path
+        {...svgPropertiesAndEvents(passthrough())}
+        class={["recharts-cross", props.class]}
+        d={getPath(x(), y(), width(), height(), top(), left())}
+      />
+    </Show>
+  );
+};

package/src/shape/Curve.tsx

@@ -0,0 +1,335 @@
+/**
+ * @fileOverview Curve
+ *
+ * Ported from recharts 3.8.1 src/shape/Curve.tsx (commit 7a23854).
+ * Pure `getPath`/`getCurveFactory` helpers copied verbatim (modulo type
+ * adjustments). Solid deviations:
+ *   - `className` → `class` (Omit the wide SVG `class`); `clsx` → `class={[...]}`.
+ *   - `resolveDefaultProps` → `merge()` defaults via per-prop `?? default`.
+ *   - `React.forwardRef` → `ref?: SVGPathElement | ((el: SVGPathElement) => void)`.
+ *   - `return null` → `<Show>`.
+ *   - `useChartLayout()` returns `Accessor<LayoutType | undefined>` in Solid.
+ *   - `svgPropertiesNoEvents(props)` (attributes) + `adaptEventHandlers(props)`
+ *     (events, rewrapped props-first) — same split as recharts Curve.
+ *   - `noUncheckedIndexedAccess`: `baseLine[index]` is `NullableCoordinate | undefined`
+ *     but the `base?:` field in `NullableAreaPoint` already accepts `undefined`.
+ *   - Two `@ts-expect-error` from recharts kept: d3's `defined()` changes the
+ *     generic type internally but its typings don't reflect that.
+ */
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { Show, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  area as shapeArea,
+  type Area as D3AreaCurve,
+  curveBasis,
+  curveBasisClosed,
+  curveBasisOpen,
+  curveBumpX,
+  curveBumpY,
+  type CurveFactory,
+  curveLinear,
+  curveLinearClosed,
+  curveMonotoneX,
+  curveMonotoneY,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+  line as shapeLine,
+  type Line as D3LineCurve,
+} from "victory-vendor/d3-shape";
+import { isNumber, upperFirst } from "../util/DataUtils";
+import { isWellBehavedNumber } from "../util/isWellBehavedNumber";
+import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents";
+import { adaptEventHandlers } from "../util/adaptEventHandlers";
+import { useChartLayout } from "../context/chartLayoutContext";
+import type { Coordinate, LayoutType, NullableCoordinate } from "../util/types";
+
+// ---------------------------------------------------------------------------
+// Curve factory lookup
+// ---------------------------------------------------------------------------
+
+interface CurveFactories {
+  [index: string]: CurveFactory;
+}
+
+const CURVE_FACTORIES: CurveFactories = {
+  curveBasisClosed,
+  curveBasisOpen,
+  curveBasis,
+  curveBumpX,
+  curveBumpY,
+  curveLinearClosed,
+  curveLinear,
+  curveMonotoneX,
+  curveMonotoneY,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+};
+
+/**
+ * @inline
+ */
+export type CurveType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "bumpX"
+  | "bumpY"
+  | "bump"
+  | "linear"
+  | "linearClosed"
+  | "natural"
+  | "monotoneX"
+  | "monotoneY"
+  | "monotone"
+  | "step"
+  | "stepBefore"
+  | "stepAfter"
+  | CurveFactory;
+
+/**
+ * @inline
+ */
+export type BaseLineType = number | ReadonlyArray<NullableCoordinate>;
+
+type AreaPoint = Coordinate & { base: Coordinate };
+type NullableAreaPoint = NullableCoordinate & { base?: NullableCoordinate };
+
+const defined = (p: NullableCoordinate): p is Coordinate =>
+  isWellBehavedNumber(p.x) && isWellBehavedNumber(p.y);
+
+const areaDefined = (d: NullableAreaPoint): d is AreaPoint =>
+  d.base != null && defined(d.base) && defined(d);
+
+const getX = (p: Coordinate): number => p.x;
+const getY = (p: Coordinate): number => p.y;
+
+const getCurveFactory = (type: CurveType, layout: LayoutType | undefined): CurveFactory => {
+  if (typeof type === "function") {
+    return type;
+  }
+
+  const name = `curve${upperFirst(type)}`;
+
+  if ((name === "curveMonotone" || name === "curveBump") && layout) {
+    const factory = CURVE_FACTORIES[`${name}${layout === "vertical" ? "Y" : "X"}`];
+    if (factory) {
+      return factory;
+    }
+  }
+  return CURVE_FACTORIES[name] ?? curveLinear;
+};
+
+// ---------------------------------------------------------------------------
+// getPath — exported pure helper
+// ---------------------------------------------------------------------------
+
+type GetPathProps = Pick<CurveOwnProps, "type" | "points" | "baseLine" | "layout" | "connectNulls">;
+
+export const defaultCurveProps = {
+  connectNulls: false,
+  type: "linear",
+} as const satisfies Partial<CurveOwnProps>;
+
+/**
+ * Calculate the path of curve. Returns null if points is an empty array.
+ * @return path or null
+ */
+export const getPath = ({
+  type = defaultCurveProps.type,
+  points = [],
+  baseLine,
+  layout,
+  connectNulls = defaultCurveProps.connectNulls,
+}: GetPathProps): string | null => {
+  const curveFactory = getCurveFactory(type, layout);
+  const formatPoints: ReadonlyArray<NullableCoordinate> = connectNulls
+    ? points.filter(defined)
+    : points;
+
+  // When dealing with an area chart (where `baseLine` is an array),
+  // we need to pair points with their corresponding `baseLine` points first.
+  // This is to ensure that we filter points and their baseline counterparts together,
+  // preventing errors from mismatched array lengths and ensuring `defined` checks both.
+  // Narrow to the array form by EXCLUDING number/nullish rather than
+  // `Array.isArray` — the latter widens a ReadonlyArray to `any[]` (a TS
+  // limitation), which would make `baseLine[index]` an unsafe `any`. After this
+  // guard, baseLine is `ReadonlyArray<NullableCoordinate>`.
+  if (typeof baseLine !== "number" && baseLine != null) {
+    let lineFunction: D3AreaCurve<AreaPoint>;
+
+    // noUncheckedIndexedAccess: baseLine[index] is NullableCoordinate | undefined,
+    // which is compatible with `base?: NullableCoordinate` in NullableAreaPoint.
+    const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map((entry, index) => ({
+      ...entry,
+      base: baseLine[index],
+    }));
+
+    if (layout === "vertical") {
+      lineFunction = shapeArea<AreaPoint>()
+        .y(getY)
+        .x1(getX)
+        .x0((d) => d.base.x);
+    } else {
+      lineFunction = shapeArea<AreaPoint>()
+        .x(getX)
+        .y1(getY)
+        .y0((d) => d.base.y);
+    }
+    /*
+     * What happens here is that the `.defined()` call will make it so that this function can accept
+     * nullable points, and internally it will filter them out and skip when generating the path.
+     * So on the input it accepts NullableCoordinate, but it never calls getX/getY on null points because of the defined() filter.
+     *
+     * The d3 type definition has only one generic so it doesn't allow to describe this properly.
+     * However. d3 types are mutable, but we can pretend that they are not, and we can pretend
+     * that calling defined() returns a new function with a different generic type.
+     */
+    // @ts-expect-error the defined call changes the generic type internally but d3 types don't reflect that
+    const nullableLineFunction: D3AreaCurve<NullableAreaPoint> = lineFunction
+      .defined(areaDefined)
+      .curve(curveFactory);
+
+    const finalPoints: ReadonlyArray<NullableAreaPoint> = connectNulls
+      ? areaPoints.filter(areaDefined)
+      : areaPoints;
+
+    return nullableLineFunction(finalPoints);
+  }
+
+  let lineFunction: D3LineCurve<Coordinate> | D3AreaCurve<Coordinate>;
+  if (layout === "vertical" && isNumber(baseLine)) {
+    lineFunction = shapeArea<Coordinate>().y(getY).x1(getX).x0(baseLine);
+  } else if (isNumber(baseLine)) {
+    lineFunction = shapeArea<Coordinate>().x(getX).y1(getY).y0(baseLine);
+  } else {
+    lineFunction = shapeLine<Coordinate>().x(getX).y(getY);
+  }
+
+  // @ts-expect-error the defined call changes the generic type internally but d3 types don't reflect that
+  const nullableLineFunction: D3LineCurve<NullableCoordinate> = lineFunction
+    .defined(defined)
+    .curve(curveFactory);
+
+  return nullableLineFunction(formatPoints);
+};
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface CurveOwnProps {
+  class?: string;
+  /**
+   * The interpolation type of curve. Allows custom interpolation function.
+   *
+   * @defaultValue linear
+   * @link https://d3js.org/d3-shape/curve
+   */
+  type?: CurveType;
+  /**
+   * This option affects the interpolation algorithm when the `type` prop is set to 'monotone'.
+   * It also specifies the type of baseline when the curve is closed.
+   */
+  layout?: LayoutType;
+  /**
+   * Baseline of the area:
+   * - number: uses the corresponding axis value as a flat baseline;
+   * - an array of coordinates: describes a custom baseline path.
+   */
+  baseLine?: BaseLineType;
+  /**
+   * The coordinates of all the points in the curve, like an array of objects with x and y coordinates.
+   */
+  points?: ReadonlyArray<NullableCoordinate>;
+  /**
+   * Whether to connect the curve across null points.
+   *
+   * @defaultValue false
+   */
+  connectNulls?: boolean;
+  path?: string;
+  /**
+   * Ref callback or element ref for the underlying <path> element.
+   * (Replaces React's `pathRef: Ref<SVGPathElement>`.)
+   */
+  pathRef?: SVGPathElement | ((el: SVGPathElement) => void);
+  /**
+   * The pattern of dashes and gaps used to paint the line.
+   *
+   * @example strokeDasharray="5 5"
+   * @example strokeDasharray={10}
+   */
+  strokeDasharray?: string | number;
+}
+
+export type CurveProps = Omit<CamelSvgProps<JSX.PathSVGAttributes<SVGPathElement>>, "class"> &
+  CurveOwnProps;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const Curve = (props: CurveProps): JSX.Element => {
+  const layoutFromContext = useChartLayout();
+
+  const hasPoints = (): boolean => props.points != null && props.points.length > 0;
+  const hasPath = (): boolean => props.path != null && props.path.length > 0;
+
+  const realPath = (): string | null | undefined => {
+    if (hasPoints()) {
+      return getPath({
+        type: props.type,
+        points: props.points,
+        baseLine: props.baseLine,
+        layout: props.layout ?? layoutFromContext(),
+        connectNulls: props.connectNulls,
+      });
+    }
+    return props.path;
+  };
+
+  // Convert null → undefined so the `d` attr is simply omitted (null is not a
+  // valid SVG attribute value here, but d3 can return null for empty point sets).
+  const dAttr = (): string | undefined => {
+    const p = realPath();
+    return p === null ? undefined : p;
+  };
+
+  // `strokeDasharray` (camelCase) is forwarded by the spread — svgPropertiesNoEvents
+  // renames it to the kebab `stroke-dasharray` DOM attribute (see svg-attribute-rename).
+  const others = (): Record<string, unknown> => ({
+    ...omit(
+      props,
+      "class",
+      "type",
+      "layout",
+      "baseLine",
+      "points",
+      "connectNulls",
+      "path",
+      "pathRef",
+    ),
+  });
+
+  // recharts Curve spreads `svgPropertiesNoEvents(props)` for attributes and
+  // `adaptEventHandlers(props)` for events — the latter rewraps each handler to be
+  // called with `(props, event)` (props-first). We mirror that split: attributes
+  // from `others()` (the manual omit), events from the FULL props so handlers
+  // receive the complete curve props as recharts does (Line.spec relies on this).
+  return (
+    <Show when={hasPoints() || hasPath()}>
+      <path
+        {...svgPropertiesNoEvents(others())}
+        {...(adaptEventHandlers(props) ?? {})}
+        class={["recharts-curve", props.class]}
+        d={dAttr()}
+        ref={props.pathRef}
+      />
+    </Show>
+  );
+};

package/src/shape/Dot.tsx

@@ -0,0 +1,49 @@
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { Show, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { isNumber } from "../util/DataUtils";
+
+interface DotOwnProps {
+  /** The x-coordinate of center, in pixels. */
+  cx?: number;
+  /** The y-coordinate of center, in pixels. */
+  cy?: number;
+  /** The radius of the dot. */
+  r?: number | string;
+  clipDot?: boolean;
+  /** Maps to recharts' `className` (a plain string); the array `class` form below merges it. */
+  class?: string;
+}
+
+// Props parity with recharts DotProps; `class` is the only framework-idiomatic deviation
+// (recharts' public prop is `className: string`). We Omit the wide SVG `class` so our
+// `class` stays `string`, matching recharts and keeping the native array `class` form typed.
+export type DotProps = Omit<
+  CamelSvgProps<JSX.CircleSVGAttributes<SVGCircleElement>>,
+  "cx" | "cy" | "r" | "class"
+> &
+  DotOwnProps;
+
+/**
+ * Renders a dot. Accepts X/Y coordinates in pixels; for data-positioned dots use ReferenceDot.
+ *
+ * Solid handles event props (onClick, ...) via delegation, so they never render as attributes —
+ * recharts achieves the same via svgPropertiesNoEvents + adaptEventHandlers. clipDot is omitted
+ * because it is not a valid SVG attribute.
+ */
+export const Dot = (props: DotProps) => {
+  const rest = omit(props, "class", "cx", "cy", "r", "clipDot");
+
+  return (
+    <Show when={isNumber(props.cx) && isNumber(props.cy) && isNumber(props.r)}>
+      <circle
+        {...svgPropertiesAndEvents({ ...rest })}
+        class={["recharts-dot", props.class]}
+        cx={props.cx}
+        cy={props.cy}
+        r={props.r}
+      />
+    </Show>
+  );
+};

package/src/shape/Polygon.tsx

@@ -0,0 +1,168 @@
+/**
+ * @fileOverview Polygon
+ *
+ * Ported from recharts 3.8.1 src/shape/Polygon.tsx (commit 7a23854).
+ * Pure path helpers are copied verbatim. Solid deviations: `className` → `class`
+ * (Omit the wide SVG `class`); no destructuring (use `omit` + a keyed `<Show>`
+ * to narrow `points` without a non-null `!`); `clsx` → `class={[...]}`;
+ * `return null` → `<Show>`.
+ */
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { Show, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Coordinate } from "../util/types";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { roundTemplateLiteral } from "../util/round";
+
+const isValidatePoint = (point: Coordinate | undefined): point is Coordinate => {
+  return point != null && point.x === +point.x && point.y === +point.y;
+};
+
+const getParsedPoints = (points: ReadonlyArray<Coordinate> = []): Coordinate[][] => {
+  let segmentPoints: Coordinate[][] = [[]];
+
+  points.forEach((entry) => {
+    const lastLink = segmentPoints[segmentPoints.length - 1];
+    if (isValidatePoint(entry)) {
+      if (lastLink) {
+        lastLink.push(entry);
+      }
+    } else if (lastLink && lastLink.length > 0) {
+      // add another path
+      segmentPoints.push([]);
+    }
+  });
+
+  const firstPoint = points[0];
+  const lastLink = segmentPoints[segmentPoints.length - 1];
+  if (isValidatePoint(firstPoint) && lastLink) {
+    lastLink.push(firstPoint);
+  }
+
+  const finalLink = segmentPoints[segmentPoints.length - 1];
+  if (finalLink && finalLink.length <= 0) {
+    segmentPoints = segmentPoints.slice(0, -1);
+  }
+
+  return segmentPoints;
+};
+
+const getSinglePolygonPath = (
+  points: ReadonlyArray<Coordinate>,
+  connectNulls?: boolean,
+): string => {
+  let segmentPoints = getParsedPoints(points);
+
+  if (connectNulls) {
+    segmentPoints = [
+      segmentPoints.reduce((res: Coordinate[], segPoints: Coordinate[]) => {
+        return [...res, ...segPoints];
+      }, []),
+    ];
+  }
+
+  const polygonPath = segmentPoints
+    .map((segPoints) => {
+      return segPoints.reduce((path: string, point: Coordinate, index: number) => {
+        return roundTemplateLiteral`${path}${index === 0 ? "M" : "L"}${point.x},${point.y}`;
+      }, "");
+    })
+    .join("");
+
+  return segmentPoints.length === 1 ? `${polygonPath}Z` : polygonPath;
+};
+
+const getRanglePath = (
+  points: ReadonlyArray<Coordinate>,
+  baseLinePoints: ReadonlyArray<Coordinate>,
+  connectNulls?: boolean,
+): string => {
+  const outerPath = getSinglePolygonPath(points, connectNulls);
+
+  return `${outerPath.slice(-1) === "Z" ? outerPath.slice(0, -1) : outerPath}L${getSinglePolygonPath(
+    Array.from(baseLinePoints).reverse(),
+    connectNulls,
+  ).slice(1)}`;
+};
+
+interface PolygonOwnProps {
+  class?: string;
+  /**
+   * The coordinates of all the vertexes of the polygon, like an array of objects with x and y coordinates.
+   */
+  points?: ReadonlyArray<Coordinate>;
+  baseLinePoints?: ReadonlyArray<Coordinate>;
+  connectNulls?: boolean;
+}
+
+export type PolygonProps = Omit<
+  CamelSvgProps<JSX.PolygonSVGAttributes<SVGPolygonElement>>,
+  "points" | "class"
+> &
+  PolygonOwnProps;
+
+export const Polygon = (props: PolygonProps): JSX.Element => {
+  const others = (): Record<string, unknown> => ({
+    ...omit(props, "class", "points", "baseLinePoints", "connectNulls"),
+  });
+  const layerClass = (): Array<string | undefined> => ["recharts-polygon", props.class];
+
+  // Narrow `points` to a non-empty array via keyed Show (no non-null assertion).
+  const validPoints = (): ReadonlyArray<Coordinate> | undefined =>
+    props.points != null && props.points.length > 0 ? props.points : undefined;
+  const validBase = (): ReadonlyArray<Coordinate> | undefined =>
+    props.baseLinePoints != null && props.baseLinePoints.length > 0
+      ? props.baseLinePoints
+      : undefined;
+
+  return (
+    <Show when={validPoints()} keyed>
+      {(points) => (
+        <Show
+          when={validBase()}
+          keyed
+          fallback={(() => {
+            const singlePath = getSinglePolygonPath(points, props.connectNulls);
+            return (
+              <path
+                {...svgPropertiesAndEvents(others())}
+                fill={singlePath.slice(-1) === "Z" ? props.fill : "none"}
+                class={layerClass()}
+                d={singlePath}
+              />
+            );
+          })()}
+        >
+          {(baseLinePoints) => {
+            const hasStroke = props.stroke && props.stroke !== "none";
+            const rangePath = getRanglePath(points, baseLinePoints, props.connectNulls);
+            return (
+              <g class={layerClass()}>
+                <path
+                  {...svgPropertiesAndEvents(others())}
+                  fill={rangePath.slice(-1) === "Z" ? props.fill : "none"}
+                  stroke="none"
+                  d={rangePath}
+                />
+                <Show when={hasStroke}>
+                  <path
+                    {...svgPropertiesAndEvents(others())}
+                    fill="none"
+                    d={getSinglePolygonPath(points, props.connectNulls)}
+                  />
+                </Show>
+                <Show when={hasStroke}>
+                  <path
+                    {...svgPropertiesAndEvents(others())}
+                    fill="none"
+                    d={getSinglePolygonPath(baseLinePoints, props.connectNulls)}
+                  />
+                </Show>
+              </g>
+            );
+          }}
+        </Show>
+      )}
+    </Show>
+  );
+};