solid-recharts 0.1.0

package/src/types.ts

@@ -0,0 +1,39 @@
+// Ported from recharts 3.8.1 src/types.ts (commit 7a23854).
+// Public chart-geometry types (distinct from the internal `util/types`).
+
+/**
+ * Defines the blank space between the chart and the plot area. This blank space
+ * is occupied by supporting elements like axes, legends, and brushes, plus any
+ * margins applied to the chart.
+ */
+export type ChartOffset = {
+  /** Distance from the top edge of the chart to the top edge of the plot area. */
+  readonly top: number;
+  /**
+   * Distance from the bottom edge of the chart to the bottom edge of the plot
+   * area. This is a distance, not a coordinate — it can be 0 in a fine big chart.
+   */
+  readonly bottom: number;
+  /** Distance from the left edge of the chart to the left edge of the plot area. */
+  readonly left: number;
+  /**
+   * Distance from the right edge of the chart to the right edge of the plot area.
+   * This is a distance, not a coordinate — it can be 0 in a fine big chart.
+   */
+  readonly right: number;
+};
+
+/**
+ * Plot area is the area where the actual chart data is rendered (bars, lines,
+ * scatter points, etc.).
+ */
+export type PlotArea = {
+  /** The width of the plot area (`chartWidth - offset.left - offset.right`). */
+  readonly width: number;
+  /** The height of the plot area (`chartHeight - offset.top - offset.bottom`). */
+  readonly height: number;
+  /** The x coordinate of the top-left corner of the plot area (`offset.left`). */
+  readonly x: number;
+  /** The y coordinate of the top-left corner of the plot area (`offset.top`). */
+  readonly y: number;
+};

package/src/util/ActiveShapeUtils.tsx

@@ -0,0 +1,80 @@
+// Ported from recharts 3.8.1 src/util/ActiveShapeUtils.tsx (commit 7a23854).
+//
+// `<Shape>` renders a user-defined shape option in several forms: a function
+// (render prop), a partial-props object (merged into the default shape), or a
+// boolean/undefined (default shape). Deviations: the React-element option
+// (cloneElement) is dropped — Solid has no cloneElement, and ActiveShape no longer
+// includes the element constituent; the default shape is rendered via `<Dynamic>`.
+// `className`→`class`.
+import { Layer } from "../container/Layer";
+import type { JSX } from "@solidjs/web";
+import { Dynamic } from "@solidjs/web";
+import { ActiveShape } from "./types";
+
+type ShapeRenderer<PropsType> = (props: PropsType) => JSX.Element;
+
+export type ShapeProps<PropsType extends object, ElementType extends SVGElement = SVGElement> = {
+  option: ActiveShape<PropsType, ElementType> | undefined;
+  DefaultShape: ShapeRenderer<PropsType>;
+  shapeProps: PropsType;
+  activeClass?: string;
+  inactiveClass?: string;
+};
+
+function mergeShapeProps<PropsType extends object>(
+  option: Partial<PropsType>,
+  props: PropsType,
+): PropsType {
+  return { ...props, ...option };
+}
+
+/** Extracts a shape option's props (object form); element form is N/A (no cloneElement). */
+export function getPropsFromShapeOption<PropsType extends object>(
+  option: Partial<PropsType>,
+): Partial<PropsType> {
+  return option;
+}
+
+function getShapeIndex(shapeProps: object): string | number | undefined {
+  if (!("index" in shapeProps)) {
+    return undefined;
+  }
+  const { index } = shapeProps;
+  return typeof index === "number" || typeof index === "string" ? index : undefined;
+}
+
+function isActiveShape(shapeProps: object): boolean {
+  return "isActive" in shapeProps && shapeProps.isActive === true;
+}
+
+export function Shape<PropsType extends object, ElementType extends SVGElement = SVGElement>(
+  props: ShapeProps<PropsType, ElementType>,
+): JSX.Element {
+  const renderShape = (): JSX.Element => {
+    const option = props.option;
+    if (option === props.DefaultShape) {
+      return <Dynamic component={props.DefaultShape} {...props.shapeProps} />;
+    }
+    if (typeof option === "function") {
+      return option(props.shapeProps, getShapeIndex(props.shapeProps));
+    }
+    if (option != null && typeof option === "object") {
+      return (
+        <Dynamic component={props.DefaultShape} {...mergeShapeProps(option, props.shapeProps)} />
+      );
+    }
+    return <Dynamic component={props.DefaultShape} {...props.shapeProps} />;
+  };
+
+  return (
+    <Layer
+      class={
+        isActiveShape(props.shapeProps)
+          ? (props.activeClass ?? "recharts-active-shape")
+          : (props.inactiveClass ?? "recharts-shape")
+      }
+    >
+      {renderShape()}
+    </Layer>
+  );
+}

package/src/util/BarUtils.tsx

@@ -0,0 +1,74 @@
+// Partial port of recharts 3.8.1 src/util/BarUtils.tsx (commit 7a23854).
+//
+// Exports `BarRectangle`/`defaultBarShape` for background bars and custom shapes;
+// `MinPointSize` + `minPointSizeCallback` for computeBarRectangles.
+import invariant from "tiny-invariant";
+import { createMemo } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Rectangle, type RectangleProps } from "../shape/Rectangle";
+import type { BarShapeProps } from "../cartesian/Bar";
+import { Shape } from "./ActiveShapeUtils";
+import { ActiveShape, DataKey } from "./types";
+import { isNullish, isNumber } from "./DataUtils";
+
+export const defaultBarShape = Rectangle;
+
+/** Background shape props omit `value`/`tooltipPosition` (recharts BarBackground L499). */
+export type BarRectangleProps = Omit<BarShapeProps, "value" | "tooltipPosition" | "background"> & {
+  option: ActiveShape<BarShapeProps, SVGPathElement> | undefined;
+  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseLeave?: (e: MouseEvent) => void;
+  onClick?: (e: MouseEvent) => void;
+  onTransitionEnd?: (e: TransitionEvent) => void;
+  dataKey: DataKey<unknown> | undefined;
+  class?: string;
+} & Omit<RectangleProps, "onAnimationStart" | "onAnimationEnd">;
+
+type BarRectangleShapeProps = Omit<BarRectangleProps, "option">;
+
+export function BarRectangle(props: BarRectangleProps): JSX.Element {
+  const shapeProps = createMemo((): BarRectangleShapeProps => {
+    const { option: _option, ...rest } = props;
+    void _option;
+    return rest;
+  });
+  return (
+    <Shape<BarRectangleShapeProps, SVGPathElement>
+      option={props.option}
+      DefaultShape={defaultBarShape}
+      shapeProps={shapeProps()}
+      activeClass="recharts-active-bar"
+      inactiveClass="recharts-inactive-bar"
+    />
+  );
+}
+
+/**
+ * A bar's minimum rendered size in pixels, so very small values stay visible.
+ * Either a fixed number or a function of the value and its index.
+ */
+export type MinPointSize = number | ((value: number | undefined | null, index: number) => number);
+
+/**
+ * Safely gets minPointSize from the minPointSize prop if it is a function
+ * @param minPointSize minPointSize as passed to the Bar component
+ * @param defaultValue default minPointSize
+ * @returns minPointSize
+ */
+export const minPointSizeCallback =
+  (minPointSize: MinPointSize, defaultValue = 0) =>
+  (value: unknown, index: number): number => {
+    if (isNumber(minPointSize)) {
+      return minPointSize;
+    }
+    const isValueNumberOrNil = isNumber(value) || isNullish(value);
+    if (isValueNumberOrNil) {
+      return minPointSize(value, index);
+    }
+
+    invariant(
+      isValueNumberOrNil,
+      `minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
+    );
+    return defaultValue;
+  };

package/src/util/CartesianUtils.ts

@@ -0,0 +1,53 @@
+// Ported from recharts 3.8.1 src/util/CartesianUtils.ts (commit 7a23854).
+// Pure math — no framework surface — so behavior is byte-identical to recharts.
+import { Coordinate, RectangleCoordinate, RectanglePosition, Size } from "./types";
+
+export const rectWithPoints = (
+  { x: x1, y: y1 }: Coordinate,
+  { x: x2, y: y2 }: Coordinate,
+): RectanglePosition => ({
+  x: Math.min(x1, x2),
+  y: Math.min(y1, y2),
+  width: Math.abs(x2 - x1),
+  height: Math.abs(y2 - y1),
+});
+
+/**
+ * Compute the x, y, width, and height of a box from two reference points.
+ * @param  {Object} coords     x1, x2, y1, and y2
+ * @return {Object} object
+ */
+export const rectWithCoords = ({ x1, y1, x2, y2 }: RectangleCoordinate): RectanglePosition =>
+  rectWithPoints({ x: x1, y: y1 }, { x: x2, y: y2 });
+
+/** Normalizes the angle so that 0 <= angle < 180.
+ * @param {number} angle Angle in degrees.
+ * @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180. */
+export function normalizeAngle(angle: number): number {
+  return ((angle % 180) + 180) % 180;
+}
+
+/** Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ * @param {Object} size Width and height of the text in a horizontal position.
+ * @param {number} angle Angle in degrees in which the text is displayed.
+ * @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+ */
+export const getAngledRectangleWidth = (
+  { width, height }: Size,
+  angle: number | undefined = 0,
+): number => {
+  // Ensure angle is >= 0 && < 180
+  const normalizedAngle = normalizeAngle(angle);
+  const angleRadians = (normalizedAngle * Math.PI) / 180;
+
+  /* Depending on the height and width of the rectangle, we may need to use different formulas to calculate the angled
+   * width. This threshold defines when each formula should kick in. */
+  const angleThreshold = Math.atan(height / width);
+
+  const angledWidth =
+    angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold
+      ? height / Math.sin(angleRadians)
+      : width / Math.cos(angleRadians);
+
+  return Math.abs(angledWidth);
+};