solid-recharts 0.1.0

package/src/util/Constants.ts

@@ -0,0 +1,42 @@
+// Partial seed of recharts 3.8.1 src/util/Constants.ts (commit 7a23854).
+// Only the constants consumed so far; grows as more land.
+
+/** Default width of a Y axis, in pixels, when `width` is not specified. */
+export const DEFAULT_Y_AXIS_WIDTH = 60;
+
+/** Default categorical color palette (used by Treemap, Sankey). */
+export const COLOR_PANEL = [
+  "#1890FF",
+  "#66B5FF",
+  "#41D9C7",
+  "#2FC25B",
+  "#6EDB8F",
+  "#9AE65C",
+  "#FACC14",
+  "#E6965C",
+  "#57AD71",
+  "#223273",
+  "#738AE6",
+  "#7564CC",
+  "#8543E0",
+  "#A877ED",
+  "#5C8EE6",
+  "#13C2C2",
+  "#70E0E0",
+  "#5CA3E6",
+  "#3436C7",
+  "#8082FF",
+  "#DD81E6",
+  "#F04864",
+  "#FA7D92",
+  "#D598D9",
+] as const;
+
+/**
+ * Identifies which data item the user is touching. The index is the position in
+ * the data array (number) or a matrix path string (Treemap/Sunkey).
+ */
+export const DATA_ITEM_INDEX_ATTRIBUTE_NAME = "data-recharts-item-index";
+
+/** Identifies which graphical item owns the touched element (always unique). */
+export const DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME = "data-recharts-item-id";

package/src/util/CssPrefixUtils.ts

@@ -0,0 +1,24 @@
+// Ported from recharts 3.8.1 src/util/CssPrefixUtils.ts (commit 7a23854).
+const PREFIX_LIST = ["Webkit", "Moz", "O", "ms"];
+
+export const generatePrefixStyle = (
+  name: string,
+  value: string,
+): Record<string, string> | undefined => {
+  if (!name) {
+    return undefined;
+  }
+
+  const camelName = name.replace(/(\w)/, (v) => v.toUpperCase());
+  const result: Record<string, string> = PREFIX_LIST.reduce(
+    (res, entry) => ({
+      ...res,
+      [entry + camelName]: value,
+    }),
+    {},
+  );
+
+  result[name] = value;
+
+  return result;
+};

package/src/util/DOMUtils.ts

@@ -0,0 +1,141 @@
+// Ported from recharts 3.8.1 src/util/DOMUtils.ts (commit 7a23854).
+//
+// Deviation: React's `CSSProperties` (camelCase, e.g. `fontSize`) → csstype's
+// `Properties` (the same camelCase type React's CSSProperties is built on).
+// We deliberately do NOT use Solid's `JSX.CSSProperties`, which is kebab-case
+// (`csstype.PropertiesHyphen`); the measurement API and its callers use
+// camelCase keys, matching recharts. Everything else (DOM measurement span,
+// LRUCache, Global SSR guard) is framework-agnostic.
+import type { Properties as CSSProperties } from "csstype";
+import { Global } from "./Global";
+import { Size } from "./types";
+import { LRUCache } from "./LRUCache";
+
+export interface TextMeasurementConfig {
+  /** Maximum number of items to cache */
+  cacheSize: number;
+  /** Whether to enable caching */
+  enableCache: boolean;
+}
+
+const defaultConfig: TextMeasurementConfig = {
+  cacheSize: 2000,
+  enableCache: true,
+};
+
+let currentConfig = { ...defaultConfig };
+
+let stringCache = new LRUCache<string, Size>(currentConfig.cacheSize);
+const SPAN_STYLE = {
+  position: "absolute",
+  top: "-20000px",
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: "none",
+  whiteSpace: "pre",
+};
+const MEASUREMENT_SPAN_ID = "recharts_measurement_span";
+
+function createCacheKey(text: string | number, style: CSSProperties): string {
+  // Simple string concatenation for better performance than JSON.stringify
+  const fontSize = style.fontSize || "";
+  const fontFamily = style.fontFamily || "";
+  const fontWeight = style.fontWeight || "";
+  const fontStyle = style.fontStyle || "";
+  const letterSpacing = style.letterSpacing || "";
+  const textTransform = style.textTransform || "";
+
+  return `${text}|${fontSize}|${fontFamily}|${fontWeight}|${fontStyle}|${letterSpacing}|${textTransform}`;
+}
+
+/**
+ * Measure text using DOM (accurate but slower)
+ * @param text - The text to measure
+ * @param style - CSS style properties to apply
+ * @returns The size of the text
+ */
+const measureTextWithDOM = (text: string | number, style: CSSProperties): Size => {
+  try {
+    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (!measurementSpan) {
+      measurementSpan = document.createElement("span");
+      measurementSpan.setAttribute("id", MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute("aria-hidden", "true");
+      document.body.appendChild(measurementSpan);
+    }
+
+    // Apply styles directly without unnecessary object creation
+    Object.assign(measurementSpan.style, SPAN_STYLE, style);
+    measurementSpan.textContent = `${text}`;
+
+    const rect = measurementSpan.getBoundingClientRect();
+    return { width: rect.width, height: rect.height };
+  } catch {
+    return { width: 0, height: 0 };
+  }
+};
+
+export const getStringSize = (text: string | number, style: CSSProperties = {}): Size => {
+  if (text === undefined || text === null || Global.isSsr) {
+    return { width: 0, height: 0 };
+  }
+
+  // If caching is disabled, measure directly
+  if (!currentConfig.enableCache) {
+    return measureTextWithDOM(text, style);
+  }
+
+  const cacheKey = createCacheKey(text, style);
+  const cachedResult = stringCache.get(cacheKey);
+
+  if (cachedResult) {
+    return cachedResult;
+  }
+
+  // Measure using DOM
+  const result = measureTextWithDOM(text, style);
+
+  // Store in LRU cache
+  stringCache.set(cacheKey, result);
+
+  return result;
+};
+
+/**
+ * Configure text measurement behavior
+ * @param config - Partial configuration to apply
+ * @returns void
+ */
+export const configureTextMeasurement = (config: Partial<TextMeasurementConfig>): void => {
+  const newConfig = { ...currentConfig, ...config };
+
+  if (newConfig.cacheSize !== currentConfig.cacheSize) {
+    stringCache = new LRUCache<string, Size>(newConfig.cacheSize);
+  }
+
+  currentConfig = newConfig;
+};
+
+/**
+ * Get current text measurement configuration
+ * @returns Current configuration
+ */
+export const getTextMeasurementConfig = (): TextMeasurementConfig => ({ ...currentConfig });
+
+/**
+ * Clear the string size cache. Useful for testing or memory management.
+ * @returns void
+ */
+export const clearStringCache = (): void => {
+  stringCache.clear();
+};
+
+/**
+ * Get cache statistics for debugging purposes.
+ * @returns Cache statistics including size and max size
+ */
+export const getStringCacheStats = () => ({
+  size: stringCache.size(),
+  maxSize: currentConfig.cacheSize,
+});

package/src/util/DataUtils.ts

@@ -0,0 +1,205 @@
+// Ported from recharts 3.8.1 src/util/DataUtils.ts (grown incrementally as
+// consumers need more; the full 53-case spec ports when this is completed).
+import { get } from "./objectPath";
+import { NonEmptyArray, Percent } from "./types";
+import { round } from "./round";
+
+let idCounter = 0;
+
+export const uniqueId = (prefix?: string): string => {
+  const id = ++idCounter;
+
+  return `${prefix || ""}${id}`;
+};
+
+export const mathSign = (value: number): number => {
+  if (value === 0) {
+    return 0;
+  }
+  if (value > 0) {
+    return 1;
+  }
+
+  return -1;
+};
+
+export const isNan = (value: unknown): boolean => typeof value === "number" && Number.isNaN(value);
+
+export const isNumber = (value: unknown): value is number =>
+  (typeof value === "number" || value instanceof Number) && !isNan(Number(value));
+
+export const isNumOrStr = (value: unknown): value is number | string =>
+  isNumber(value) || typeof value === "string";
+
+export const isNullish = (value: unknown): value is null | undefined =>
+  value === null || typeof value === "undefined";
+
+export function noop(): undefined {}
+
+export function interpolate(start: number | null | undefined, end: number, t: number): number;
+export function interpolate(start: number | null | undefined, end: null, t: number): null;
+export function interpolate(start: number | null | undefined, end: undefined, t: number): undefined;
+export function interpolate(
+  start: number | null | undefined,
+  end: number | null,
+  t: number,
+): number | null;
+export function interpolate(
+  start: number | null | undefined,
+  end: number | undefined,
+  t: number,
+): number | undefined;
+export function interpolate(
+  start: number | null | undefined,
+  end: number | null | undefined,
+  t: number,
+): number | null | undefined;
+export function interpolate(
+  start: number | null | undefined,
+  end: number | null | undefined,
+  t: number,
+): number | null | undefined {
+  if (isNumber(start) && isNumber(end)) {
+    return round(start + t * (end - start));
+  }
+  return end;
+}
+
+export const upperFirst = (value: string): string => {
+  if (isNullish(value)) {
+    return value;
+  }
+
+  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+};
+
+export const isPercent = (value: string | number | undefined): value is Percent =>
+  typeof value === "string" && value.length > 1 && value.indexOf("%") === value.length - 1;
+
+export const hasDuplicate = (ary: ReadonlyArray<unknown>): boolean => {
+  if (!Array.isArray(ary)) {
+    return false;
+  }
+
+  const len = ary.length;
+  const cache: Record<string, boolean> = {};
+
+  for (let i = 0; i < len; i++) {
+    if (!cache[String(ary[i])]) {
+      cache[String(ary[i])] = true;
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export function findEntryInArray<T>(
+  ary: ReadonlyArray<T>,
+  specifiedKey: number | string | ((entry: T) => unknown),
+  specifiedValue: unknown,
+): T | undefined {
+  if (!ary || !ary.length) {
+    return undefined;
+  }
+
+  return ary.find(
+    (entry) =>
+      entry &&
+      (typeof specifiedKey === "function" ? specifiedKey(entry) : get(entry, specifiedKey)) ===
+        specifiedValue,
+  );
+}
+
+type LinearRegressionResult = {
+  xmin: number;
+  xmax: number;
+  a: number;
+  b: number;
+};
+
+/**
+ * The least square linear regression
+ * @param {Array} data The array of points
+ * @returns {Object} The domain of x, and the parameter of linear function
+ */
+export const getLinearRegression = (
+  data: NonEmptyArray<{ cx?: number; cy?: number }>,
+): LinearRegressionResult => {
+  const len = data.length;
+  let xsum = 0;
+  let ysum = 0;
+  let xysum = 0;
+  let xxsum = 0;
+  let xmin = Infinity;
+  let xmax = -Infinity;
+  let xcurrent = 0;
+  let ycurrent = 0;
+
+  for (let i = 0; i < len; i++) {
+    xcurrent = data[i]?.cx || 0;
+    ycurrent = data[i]?.cy || 0;
+
+    xsum += xcurrent;
+    ysum += ycurrent;
+    xysum += xcurrent * ycurrent;
+    xxsum += xcurrent * xcurrent;
+    xmin = Math.min(xmin, xcurrent);
+    xmax = Math.max(xmax, xcurrent);
+  }
+
+  const a =
+    len * xxsum !== xsum * xsum ? (len * xysum - xsum * ysum) / (len * xxsum - xsum * xsum) : 0;
+
+  return {
+    xmin,
+    xmax,
+    a,
+    b: (ysum - a * xsum) / len,
+  };
+};
+
+/**
+ * Checks if the value is not null nor undefined.
+ * @param value The value to check
+ * @returns true if the value is not null nor undefined
+ */
+export function isNotNil<T>(value: T): value is NonNullable<T> {
+  return value != null;
+}
+
+export const getPercentValue = (
+  percent: number | string | undefined,
+  totalValue: number | undefined,
+  defaultValue = 0,
+  validate = false,
+): number => {
+  if (!isNumber(percent) && typeof percent !== "string") {
+    return defaultValue;
+  }
+
+  let value: number;
+
+  if (isPercent(percent)) {
+    if (totalValue == null) {
+      return defaultValue;
+    }
+    const index = percent.indexOf("%");
+    // `isPercent` narrows `percent` to the `${number}%` template type (a string),
+    // so `.slice` works without recharts' `as string` assertion.
+    value = (totalValue * parseFloat(percent.slice(0, index))) / 100;
+  } else {
+    value = +percent;
+  }
+
+  if (isNan(value)) {
+    value = defaultValue;
+  }
+
+  if (validate && totalValue != null && value > totalValue) {
+    value = totalValue;
+  }
+
+  return value;
+};

package/src/util/FunnelUtils.tsx

@@ -0,0 +1,37 @@
+// Ported from recharts 3.8.1 src/util/FunnelUtils.tsx (commit 7a23854).
+//
+// `<FunnelTrapezoid>` renders a funnel trapezoid through the shared `<Shape>`
+// helper: it draws the `option` (function/object/default) and wraps it in a
+// `<Layer>` g whose class is `recharts-active-shape` when `isActive` is true.
+// Deviations: `Props as FunnelProps` → the local `FunnelTrapezoidItem` import; the
+// React element-form `option` constituent is dropped (Solid has no cloneElement —
+// function + object + boolean forms are supported, matching ActiveShapeUtils). The
+// `option` is typed as the wider `ActiveShape` the `<Shape>` helper accepts (the
+// `<Funnel>` `shape`/`activeShape` function-form props are assignable to it).
+import type { JSX } from "@solidjs/web";
+import { Trapezoid } from "../shape/Trapezoid";
+import { Shape } from "./ActiveShapeUtils";
+import type { ActiveShape, ShapeAnimationProps } from "./types";
+import type { FunnelTrapezoidItem } from "../cartesian/Funnel";
+
+export const defaultFunnelShape = Trapezoid;
+
+type FunnelTrapezoidShapeProps = FunnelTrapezoidItem & ShapeAnimationProps & { isActive: boolean };
+
+export type FunnelTrapezoidProps = {
+  option: ActiveShape<FunnelTrapezoidShapeProps, SVGPathElement> | undefined;
+} & FunnelTrapezoidShapeProps;
+
+export function FunnelTrapezoid(props: FunnelTrapezoidProps): JSX.Element {
+  const shapeProps = (): FunnelTrapezoidShapeProps => {
+    const { option: _option, ...rest } = props;
+    return rest;
+  };
+  return (
+    <Shape<FunnelTrapezoidShapeProps, SVGPathElement>
+      option={props.option}
+      DefaultShape={defaultFunnelShape}
+      shapeProps={shapeProps()}
+    />
+  );
+}

package/src/util/Global.ts

@@ -0,0 +1,15 @@
+// Ported from recharts 3.8.1 src/util/Global.ts (commit 7a23854).
+// Pure constant object — no framework surface — so behavior is byte-identical to recharts.
+
+const parseIsSsrByDefault = (): boolean =>
+  !(
+    typeof window !== "undefined" &&
+    window.document &&
+    typeof window.document.createElement === "function" &&
+    window.setTimeout
+  );
+
+export const Global = {
+  devToolsEnabled: process.env.NODE_ENV !== "production",
+  isSsr: parseIsSsrByDefault(),
+};

package/src/util/IfOverflow.ts

@@ -0,0 +1,17 @@
+// Ported from recharts 3.8.1 src/util/IfOverflow.ts (commit 7a23854).
+export type IfOverflow = "hidden" | "visible" | "discard" | "extendDomain";
+
+export interface Overflowable {
+  /**
+   * Defines how to draw this component if it falls partly outside the canvas:
+   *
+   * - `discard`: the whole component will not be drawn at all
+   * - `hidden`: the component will be clipped to the chart plot area
+   * - `visible`: the component will be drawn completely
+   * - `extendDomain`: the domain of the overflown axis will be extended such
+   *   that the whole component fits into the plot area
+   *
+   * @defaultValue discard
+   */
+  ifOverflow?: IfOverflow;
+}

package/src/util/LRUCache.ts

@@ -0,0 +1,46 @@
+// Ported from recharts 3.8.1 src/util/LRUCache.ts (commit 7a23854).
+// Pure data structure — no framework surface — so behavior is byte-identical to recharts.
+// Deviations from the reference are limited to satisfying this repo's type
+// discipline (no `as` / no non-null `!`); `as const` is retained where applicable.
+
+/**
+ * Simple LRU (Least Recently Used) cache implementation
+ */
+export class LRUCache<K, V> {
+  private cache = new Map<K, V>();
+
+  private maxSize: number;
+
+  constructor(maxSize: number) {
+    this.maxSize = maxSize;
+  }
+
+  get(key: K): V | undefined {
+    const value = this.cache.get(key);
+    if (value !== undefined) {
+      this.cache.delete(key);
+      this.cache.set(key, value);
+    }
+    return value;
+  }
+
+  set(key: K, value: V): void {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey != null) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+
+  size(): number {
+    return this.cache.size;
+  }
+}

package/src/util/LogUtils.ts

@@ -0,0 +1,26 @@
+// Ported from recharts 3.8.1 src/util/LogUtils.ts (commit 7a23854).
+// Pure util — no framework surface — behavior is byte-identical to recharts.
+
+/* eslint no-console: 0 */
+const isDev = process.env.NODE_ENV !== "production";
+
+export const warn = (condition: boolean, format: string, ...args: unknown[]): void => {
+  if (isDev && typeof console !== "undefined" && console.warn) {
+    if (format === undefined) {
+      console.warn("LogUtils requires an error message argument");
+    }
+
+    if (!condition) {
+      if (format === undefined) {
+        console.warn(
+          "Minified exception occurred; use the non-minified dev environment " +
+            "for the full error message and additional helpful warnings.",
+        );
+      } else {
+        let argIndex = 0;
+
+        console.warn(format.replace(/%s/g, () => String(args[argIndex++])));
+      }
+    }
+  }
+};

package/src/util/PolarUtils.ts

@@ -0,0 +1,134 @@
+// Ported from recharts 3.8.1 src/util/PolarUtils.ts (commit 7a23854).
+// Pure math — no framework surface — so behavior is byte-identical to recharts.
+
+import {
+  ChartOffsetInternal,
+  RelativePointer,
+  Coordinate,
+  PolarViewBoxRequired,
+  RangeObj,
+} from "./types";
+
+export const RADIAN = Math.PI / 180;
+
+export const degreeToRadian = (angle: number) => (angle * Math.PI) / 180;
+
+export const radianToDegree = (angleInRadian: number) => (angleInRadian * 180) / Math.PI;
+
+export const polarToCartesian = (
+  cx: number,
+  cy: number,
+  radius: number,
+  angle: number,
+): Coordinate => ({
+  x: cx + Math.cos(-RADIAN * angle) * radius,
+  y: cy + Math.sin(-RADIAN * angle) * radius,
+});
+
+export const getMaxRadius = (
+  width: number,
+  height: number,
+  offset: ChartOffsetInternal = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+    brushBottom: 0,
+  },
+) =>
+  Math.min(
+    Math.abs(width - (offset.left || 0) - (offset.right || 0)),
+    Math.abs(height - (offset.top || 0) - (offset.bottom || 0)),
+  ) / 2;
+
+const distanceBetweenPoints = (point: Coordinate, anotherPoint: Coordinate) => {
+  const { x: x1, y: y1 } = point;
+  const { x: x2, y: y2 } = anotherPoint;
+
+  return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
+};
+
+const getAngleOfPoint = ({ x, y }: Coordinate, { cx, cy }: PolarViewBoxRequired) => {
+  const radius = distanceBetweenPoints({ x, y }, { x: cx, y: cy });
+
+  if (radius <= 0) {
+    return { radius, angle: 0 };
+  }
+
+  const cos = (x - cx) / radius;
+  let angleInRadian = Math.acos(cos);
+
+  if (y > cy) {
+    angleInRadian = 2 * Math.PI - angleInRadian;
+  }
+
+  return { radius, angle: radianToDegree(angleInRadian), angleInRadian };
+};
+
+const formatAngleOfSector = ({ startAngle, endAngle }: PolarViewBoxRequired) => {
+  const startCnt = Math.floor(startAngle / 360);
+  const endCnt = Math.floor(endAngle / 360);
+  const min = Math.min(startCnt, endCnt);
+
+  return {
+    startAngle: startAngle - min * 360,
+    endAngle: endAngle - min * 360,
+  };
+};
+
+const reverseFormatAngleOfSector = (
+  angle: number,
+  { startAngle, endAngle }: PolarViewBoxRequired,
+): number => {
+  const startCnt = Math.floor(startAngle / 360);
+  const endCnt = Math.floor(endAngle / 360);
+  const min = Math.min(startCnt, endCnt);
+
+  return angle + min * 360;
+};
+
+export const inRangeOfSector = (
+  { relativeX: x, relativeY: y }: RelativePointer,
+  viewBox: PolarViewBoxRequired,
+): RangeObj | null => {
+  const { radius, angle } = getAngleOfPoint({ x, y }, viewBox);
+  const { innerRadius, outerRadius } = viewBox;
+
+  if (radius < innerRadius || radius > outerRadius) {
+    return null;
+  }
+
+  if (radius === 0) {
+    return null;
+  }
+
+  const { startAngle, endAngle } = formatAngleOfSector(viewBox);
+  let formatAngle = angle;
+  let inRange;
+
+  if (startAngle <= endAngle) {
+    while (formatAngle > endAngle) {
+      formatAngle -= 360;
+    }
+    while (formatAngle < startAngle) {
+      formatAngle += 360;
+    }
+    inRange = formatAngle >= startAngle && formatAngle <= endAngle;
+  } else {
+    while (formatAngle > startAngle) {
+      formatAngle -= 360;
+    }
+    while (formatAngle < endAngle) {
+      formatAngle += 360;
+    }
+    inRange = formatAngle >= endAngle && formatAngle <= startAngle;
+  }
+
+  if (inRange) {
+    return { ...viewBox, radius, angle: reverseFormatAngleOfSector(formatAngle, viewBox) };
+  }
+
+  return null;
+};