solid-recharts 0.1.0

package/src/component/DefaultLegendContent.tsx

@@ -0,0 +1,205 @@
+// Partial port of recharts 3.8.1 src/component/DefaultLegendContent.tsx (commit 7a23854).
+//
+// TYPES + component. The legend slice/selectors need these types; the component
+// renders the legend item list. Deviations: `ReactElement`→`Element`/dropped,
+// `DataKey<any>`→`DataKey<unknown>`, `ReactNode`→`Element`, `CSSProperties`→
+// `JSX.CSSProperties`, `className`→`class`, clsx→`class={[...]}`; `LegendItemSorter`
+// is co-located here (reference keeps it in Legend.tsx) so the slice can import it
+// without depending on the Legend component. `adaptEventsOfChild` events deferred.
+import { For, Show, merge } from "solid-js";
+import type { Element } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { DataKey, LegendType, MousePointer } from "../util/types";
+import { Surface } from "../container/Surface";
+import { Symbols } from "../shape/Symbols";
+
+const SIZE = 32;
+
+export type HorizontalAlignmentType = "center" | "left" | "right";
+export type VerticalAlignmentType = "top" | "bottom" | "middle";
+
+export type Formatter = (value: string | undefined, entry: LegendPayload, index: number) => Element;
+
+export interface LegendPayload {
+  value: string | undefined;
+  type?: LegendType;
+  color?: string;
+  payload?: object;
+  formatter?: Formatter;
+  inactive?: boolean;
+  dataKey?: DataKey<unknown>;
+}
+
+export type LegendItemSorter = "value" | "dataKey" | ((item: LegendPayload) => number | string);
+
+export type ContentType = JSX.Element | ((props: Props) => JSX.Element);
+
+export type LegendItemEventHandler = (
+  data: LegendPayload,
+  index: number,
+  event: MousePointer,
+) => void;
+
+export interface Props {
+  iconSize?: number;
+  iconType?: LegendType;
+  layout?: "horizontal" | "vertical";
+  align?: HorizontalAlignmentType;
+  verticalAlign?: VerticalAlignmentType;
+  inactiveColor?: string;
+  formatter?: Formatter;
+  payload?: ReadonlyArray<LegendPayload>;
+  labelStyle?: JSX.CSSProperties;
+  onClick?: LegendItemEventHandler;
+  onMouseEnter?: LegendItemEventHandler;
+  onMouseLeave?: LegendItemEventHandler;
+}
+
+export const defaultLegendContentDefaultProps = {
+  align: "center",
+  iconSize: 14,
+  inactiveColor: "#ccc",
+  layout: "horizontal",
+  verticalAlign: "middle",
+} as const satisfies Partial<Props>;
+
+const LegendIcon = (props: {
+  data: LegendPayload;
+  iconType: LegendType | undefined;
+  inactiveColor: string;
+}): JSX.Element => {
+  const color = (): string | undefined =>
+    props.data.inactive ? props.inactiveColor : props.data.color;
+  const preferredIcon = (): LegendType | undefined => props.iconType ?? props.data.type;
+  const halfSize = SIZE / 2;
+  const thirdSize = SIZE / 3;
+  const sixthSize = SIZE / 6;
+
+  return (
+    <Show when={preferredIcon() !== "none"}>
+      {(() => {
+        const icon = preferredIcon();
+        if (icon === "plainline") {
+          return (
+            <line
+              stroke-width={4}
+              fill="none"
+              stroke={color()}
+              x1={0}
+              y1={halfSize}
+              x2={SIZE}
+              y2={halfSize}
+              class="recharts-legend-icon"
+            />
+          );
+        }
+        if (icon === "line") {
+          return (
+            <path
+              stroke-width={4}
+              fill="none"
+              stroke={color()}
+              d={`M0,${halfSize}h${thirdSize}A${sixthSize},${sixthSize},0,1,1,${2 * thirdSize},${halfSize}H${SIZE}M${2 * thirdSize},${halfSize}A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`}
+              class="recharts-legend-icon"
+            />
+          );
+        }
+        if (icon === "rect") {
+          return (
+            <path
+              stroke="none"
+              fill={color()}
+              d={`M0,${SIZE / 8}h${SIZE}v${(SIZE * 3) / 4}h${-SIZE}z`}
+              class="recharts-legend-icon"
+            />
+          );
+        }
+        return (
+          <Symbols
+            fill={color()}
+            cx={halfSize}
+            cy={halfSize}
+            size={SIZE}
+            sizeType="diameter"
+            type={icon == null || icon === "none" ? "square" : icon}
+          />
+        );
+      })()}
+    </Show>
+  );
+};
+
+/**
+ * Rendered by default inside {@link Legend}; provide your own via the Legend
+ * `content` prop to customize.
+ */
+export const DefaultLegendContent = (props: Props): JSX.Element => {
+  const merged = merge(defaultLegendContentDefaultProps, props);
+
+  const itemStyle = (): JSX.CSSProperties => ({
+    display: merged.layout === "horizontal" ? "inline-block" : "block",
+    "margin-right": "10px",
+  });
+  const svgStyle: JSX.CSSProperties = {
+    display: "inline-block",
+    "vertical-align": "middle",
+    "margin-right": "4px",
+  };
+  const listStyle = (): JSX.CSSProperties => ({
+    padding: 0,
+    margin: 0,
+    "text-align": merged.layout === "horizontal" ? merged.align : "left",
+  });
+
+  const valueOf = (entry: LegendPayload, index: number): Element => {
+    const finalFormatter = entry.formatter ?? merged.formatter;
+    return finalFormatter ? finalFormatter(entry.value, entry, index) : entry.value;
+  };
+
+  const labelStyleOf = (entry: LegendPayload): JSX.CSSProperties => ({
+    ...merged.labelStyle,
+    // recharts parity: an explicit labelStyle.color wins over the entry color.
+    color: entry.inactive ? merged.inactiveColor : (merged.labelStyle?.color ?? entry.color),
+  });
+
+  return (
+    <Show when={merged.payload && merged.payload.length}>
+      <ul class="recharts-default-legend" style={listStyle()}>
+        <For each={merged.payload}>
+          {(entry, i) => (
+            <Show when={entry.type !== "none"}>
+              <li
+                class={[
+                  "recharts-legend-item",
+                  `legend-item-${i()}`,
+                  entry.inactive ? "inactive" : undefined,
+                ]}
+                style={itemStyle()}
+                onClick={(event) => merged.onClick?.(entry, i(), event)}
+                onMouseEnter={(event) => merged.onMouseEnter?.(entry, i(), event)}
+                onMouseLeave={(event) => merged.onMouseLeave?.(entry, i(), event)}
+              >
+                <Surface
+                  width={merged.iconSize}
+                  height={merged.iconSize}
+                  viewBox={{ x: 0, y: 0, width: SIZE, height: SIZE }}
+                  style={svgStyle}
+                  aria-label={entry.value == null ? "legend icon" : `${entry.value} legend icon`}
+                >
+                  <LegendIcon
+                    data={entry}
+                    iconType={merged.iconType}
+                    inactiveColor={merged.inactiveColor}
+                  />
+                </Surface>
+                <span class="recharts-legend-item-text" style={labelStyleOf(entry)}>
+                  {valueOf(entry, i())}
+                </span>
+              </li>
+            </Show>
+          )}
+        </For>
+      </ul>
+    </Show>
+  );
+};

package/src/component/DefaultTooltipContent.tsx

@@ -0,0 +1,247 @@
+// Ported from recharts 3.8.1 src/component/DefaultTooltipContent.tsx (commit 7a23854).
+//
+// The type half seeded the tooltip slice/selectors early; the component lands now.
+// Deviations: `Payload` does NOT extend `Omit<SVGProps<SVGElement>, 'name'>`
+// (the per-entry `formatter` is populated from the graphical items' `formatter`
+// prop and wins over the prop-level one, per v3.9.1); `any` → `unknown`,
+// `ReactNode` → `Element`, `CSSProperties` → `JSX.CSSProperties`; `className` →
+// `class`, `clsx(...)` → `class={[...]}` array form (no clsx dep); `React.isValid-
+// Element` check dropped (Solid renders an Element or a string uniformly).
+import { For, Show, createMemo, merge } from "solid-js";
+import type { Element } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { isNullish, isNumOrStr } from "../util/DataUtils";
+import { DataKey, TooltipType } from "../util/types";
+import type { TooltipPayload, TooltipPayloadEntry } from "../state/tooltipSlice";
+
+export type ValueType = number | string | ReadonlyArray<number | string>;
+export type NameType = number | string;
+
+function defaultFormatter(value: ValueType | undefined): Element {
+  return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1])
+    ? value.join(" ~ ")
+    : value;
+}
+
+export type Formatter<TValue extends ValueType = ValueType, TName extends NameType = NameType> = (
+  value: TValue | undefined,
+  name: TName | undefined,
+  item: Payload<TValue, TName>,
+  index: number,
+  payload: ReadonlyArray<Payload<TValue, TName>>,
+) => [Element, TName] | Element;
+
+export interface Payload<TValue extends ValueType = ValueType, TName extends NameType = NameType> {
+  type?: TooltipType;
+  color?: string;
+  formatter?: Formatter<TValue, TName>;
+  name?: TName;
+  value?: TValue;
+  unit?: Element;
+  fill?: string;
+  dataKey?: DataKey<unknown>;
+  nameKey?: DataKey<unknown>;
+  payload?: unknown;
+  chartType?: string;
+  stroke?: string;
+  strokeDasharray?: string | number;
+  strokeWidth?: number | string;
+  class?: string;
+  hide?: boolean;
+  /** The id of the graphical item the data point belongs to. */
+  graphicalItemId: string;
+}
+
+export type TooltipItemSorter<
+  TValue extends ValueType = ValueType,
+  TName extends NameType = NameType,
+> = "dataKey" | "value" | "name" | ((item: Payload<TValue, TName>) => number | string | undefined);
+
+export interface Props<TValue extends ValueType = ValueType, TName extends NameType = NameType> {
+  separator?: string;
+  wrapperClass?: string;
+  labelClass?: string;
+  formatter?: Formatter<TValue, TName>;
+  contentStyle?: JSX.CSSProperties;
+  itemStyle?: JSX.CSSProperties;
+  labelStyle?: JSX.CSSProperties;
+  labelFormatter?: (label: Element, payload: ReadonlyArray<Payload<TValue, TName>>) => Element;
+  label?: Element;
+  payload?: ReadonlyArray<Payload<TValue, TName>>;
+  itemSorter?: TooltipItemSorter<TValue, TName>;
+  accessibilityLayer?: boolean;
+}
+
+export const defaultDefaultTooltipContentProps = {
+  separator: " : ",
+  // Deviation: recharts uses React CSSProperties (numbers auto-px); csstype (Solid
+  // JSX.CSSProperties) requires explicit string lengths, so px values are spelled out.
+  contentStyle: {
+    margin: 0,
+    padding: "10px",
+    "background-color": "#fff",
+    border: "1px solid #ccc",
+    "white-space": "nowrap",
+  },
+  itemStyle: {
+    display: "block",
+    "padding-top": "4px",
+    "padding-bottom": "4px",
+    color: "#000",
+  },
+  labelStyle: {},
+  accessibilityLayer: false,
+} as const satisfies Partial<Props>;
+
+// Deviation: recharts calls es-toolkit `sortBy(array, itemSorter)` with a
+// `@ts-expect-error` (the string/function iteratee union doesn't type-check). The
+// port inlines an equivalent stable ascending sort (undefined keys sort last, as
+// lodash/es-toolkit do) with a typed key extractor — no cast, no suppressed error.
+function sortKeyOf(
+  item: TooltipPayloadEntry,
+  itemSorter: TooltipItemSorter,
+): number | string | undefined {
+  // Deviation: the payload can contain null/undefined entries (recharts'
+  // es-toolkit `sortBy` tolerates them; the render map guards `!entry`). Mirror
+  // that here so the key extractor doesn't dereference a nullish entry.
+  if (item == null) {
+    return undefined;
+  }
+  if (typeof itemSorter === "function") {
+    return itemSorter(item);
+  }
+  if (itemSorter === "value") {
+    return isNumOrStr(item.value) ? item.value : undefined;
+  }
+  if (itemSorter === "name") {
+    return item.name;
+  }
+  const dataKey = item.dataKey;
+  return typeof dataKey === "function" ? undefined : dataKey;
+}
+
+function compareSortKeys(a: number | string | undefined, b: number | string | undefined): number {
+  if (a === b) {
+    return 0;
+  }
+  if (a === undefined) {
+    return 1;
+  }
+  if (b === undefined) {
+    return -1;
+  }
+  return a < b ? -1 : 1;
+}
+
+function lodashLikeSortBy(
+  array: TooltipPayload,
+  itemSorter: TooltipItemSorter | undefined,
+): TooltipPayload {
+  if (itemSorter == null) {
+    return array;
+  }
+  return array
+    .map((item, index) => ({ item, index, key: sortKeyOf(item, itemSorter) }))
+    .sort((a, b) => compareSortKeys(a.key, b.key) || a.index - b.index)
+    .map((entry) => entry.item);
+}
+
+/**
+ * Rendered by default inside {@link Tooltip}. Provide your own via the Tooltip
+ * `content` prop to customize.
+ */
+export const DefaultTooltipContent = (props: Props): JSX.Element => {
+  const merged = merge(defaultDefaultTooltipContentProps, props);
+
+  const sortedPayload = createMemo<TooltipPayload>(() => {
+    const payload = props.payload;
+    if (payload && payload.length) {
+      return lodashLikeSortBy(payload, props.itemSorter);
+    }
+    return [];
+  });
+
+  const finalLabel = createMemo<Element>(() => {
+    const label = props.label;
+    const hasLabel = !isNullish(label);
+    const payload = props.payload;
+    if (hasLabel && props.labelFormatter && payload != null) {
+      return props.labelFormatter(label, payload);
+    }
+    return hasLabel ? label : "";
+  });
+
+  // A child component (not an inline render fn) so the reactive prop reads happen
+  // during its own render rather than in the <For> callback body — avoids
+  // STRICT_READ_UNTRACKED (same pattern as Dots' DotRenderer).
+  const TooltipItem = (itemProps: { entry: TooltipPayloadEntry; index: number }): JSX.Element => {
+    const formattedEntry = createMemo<{ value: Element; name: Element } | null>(() => {
+      const entry = itemProps.entry;
+      if (!entry || entry.type === "none") {
+        return null;
+      }
+      const finalFormatter: Formatter = entry.formatter ?? props.formatter ?? defaultFormatter;
+      const formatted = finalFormatter(
+        entry.value,
+        entry.name,
+        entry,
+        itemProps.index,
+        props.payload ?? [],
+      );
+      if (Array.isArray(formatted)) {
+        return { value: formatted[0], name: formatted[1] };
+      }
+      if (formatted != null) {
+        return { value: formatted, name: entry.name };
+      }
+      return null;
+    });
+
+    const itemStyle = (): JSX.CSSProperties => ({
+      ...defaultDefaultTooltipContentProps.itemStyle,
+      color: itemProps.entry.color ?? defaultDefaultTooltipContentProps.itemStyle.color,
+      ...props.itemStyle,
+    });
+
+    return (
+      <Show when={formattedEntry()}>
+        {(fe) => (
+          <li class="recharts-tooltip-item" style={itemStyle()}>
+            <Show when={isNumOrStr(fe().name)}>
+              <span class="recharts-tooltip-item-name">{fe().name}</span>
+              <span class="recharts-tooltip-item-separator">{merged.separator}</span>
+            </Show>
+            <span class="recharts-tooltip-item-value">{fe().value}</span>
+            <span class="recharts-tooltip-item-unit">{itemProps.entry.unit ?? ""}</span>
+          </li>
+        )}
+      </Show>
+    );
+  };
+
+  const finalStyle = (): JSX.CSSProperties => ({
+    ...defaultDefaultTooltipContentProps.contentStyle,
+    ...props.contentStyle,
+  });
+  const finalLabelStyle = (): JSX.CSSProperties => ({ margin: 0, ...props.labelStyle });
+
+  return (
+    <div
+      class={["recharts-default-tooltip", props.wrapperClass]}
+      style={finalStyle()}
+      role={merged.accessibilityLayer ? "status" : undefined}
+      aria-live={merged.accessibilityLayer ? "assertive" : undefined}
+    >
+      <p class={["recharts-tooltip-label", props.labelClass]} style={finalLabelStyle()}>
+        {finalLabel()}
+      </p>
+      <Show when={sortedPayload().length > 0}>
+        <ul class="recharts-tooltip-item-list" style={{ padding: 0, margin: 0 }}>
+          <For each={sortedPayload()}>
+            {(entry, i) => <TooltipItem entry={entry} index={i()} />}
+          </For>
+        </ul>
+      </Show>
+    </div>
+  );
+};

package/src/component/Dots.tsx

@@ -0,0 +1,128 @@
+// Ported from recharts 3.8.1 src/component/Dots.tsx (commit 7a23854).
+//
+// Solid deviations:
+//   - `ReactUtils.isClipDot` (React-divergent) → an inline Solid prop check.
+//   - `cloneElement`/`isValidElement` element path is dropped — custom dots are
+//     render functions in Solid; a props-object dot has its SVG attrs merged into
+//     the default <Dot> (recharts does this via svgPropertiesAndEventsFromUnknown).
+//   - `ZIndexLayer` wrapper deferred (zIndex layering not ported) → plain <Layer>.
+//   - `clsx` → class string composed inline; `className` → `class`.
+import { createMemo, For, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Dot, type DotProps } from "../shape/Dot";
+import { Layer } from "../container/Layer";
+import { DataKey, DotItemDotProps, DotPoint, DotType } from "../util/types";
+
+/** Solid-idiomatic replacement for ReactUtils.isClipDot. */
+export function isClipDot(dot: DotType): boolean {
+  if (dot && typeof dot === "object" && "clipDot" in dot) {
+    return Boolean(dot.clipDot);
+  }
+  return true;
+}
+
+function shouldRenderDots(points: ReadonlyArray<DotPoint> | undefined, dot: DotType): boolean {
+  if (points == null) {
+    return false;
+  }
+  if (dot) {
+    return true;
+  }
+  return points.length === 1;
+}
+
+export type DotsDotProps = Omit<DotProps, "cx" | "cy" | "index" | "dataKey" | "value" | "payload">;
+
+export interface DotsProps {
+  /** Points to render dots for. */
+  points: ReadonlyArray<DotPoint>;
+  /** Dot configuration — boolean, render function, or props object. */
+  dot: DotType;
+  /** Class for the dots layer (e.g. 'recharts-line-dots'). */
+  class: string;
+  /** Class for each individual dot (e.g. 'recharts-line-dot'). */
+  dotClass: string;
+  dataKey: DataKey<unknown> | undefined;
+  /** Base props spread onto each dot (from the parent line/area). */
+  baseProps: DotsDotProps;
+  needClip?: boolean;
+  clipPathId?: string;
+}
+
+interface DotRendererProps {
+  entry: DotPoint;
+  index: number;
+  dot: DotType;
+  baseProps: DotsDotProps;
+  dataKey: DataKey<unknown> | undefined;
+  dotClass: string;
+  points: ReadonlyArray<DotPoint>;
+}
+
+// Renders one dot. Built as a component (invoked from the <For> JSX) so every
+// `props.*` read happens in a tracking scope — building the props in the <For>
+// callback body would fire STRICT_READ_UNTRACKED.
+//
+// Deferred: merging a props-object dot's own SVG attrs (recharts'
+// svgPropertiesAndEventsFromUnknown(dot) is `unknown`-valued, can't spread onto
+// the typed <Dot>). Custom dots in Solid are render functions (they receive the
+// full dotProps); a boolean/props-object dot renders the default <Dot> styled
+// from the line's `baseProps`.
+function DotRenderer(props: DotRendererProps): JSX.Element {
+  const dotProps = createMemo<DotItemDotProps>(() => ({
+    r: 3,
+    ...props.baseProps,
+    index: props.index,
+    cx: props.entry.x ?? undefined,
+    cy: props.entry.y ?? undefined,
+    dataKey: props.dataKey,
+    value: props.entry.value,
+    payload: props.entry.payload,
+    points: props.points,
+  }));
+
+  // A function dot is a render prop; boolean/props-object dots fall back to the
+  // default <Dot>. A plain ternary (not <Show when={fn}>) keeps the read tracked
+  // without tripping STRICT_READ on the function-valued condition.
+  const renderFn = createMemo(() => (typeof props.dot === "function" ? props.dot : undefined));
+
+  return (
+    <>
+      {renderFn() ? (
+        renderFn()?.(dotProps())
+      ) : (
+        <Dot
+          {...omit(dotProps(), "index", "dataKey", "value", "payload", "points")}
+          class={props.dotClass}
+        />
+      )}
+    </>
+  );
+}
+
+export function Dots(props: DotsProps): JSX.Element {
+  const layerClip = (): string | undefined =>
+    props.needClip && props.clipPathId != null
+      ? `url(#clipPath-${isClipDot(props.dot) ? "" : "dots-"}${props.clipPathId})`
+      : undefined;
+
+  return (
+    <Show when={shouldRenderDots(props.points, props.dot)}>
+      <Layer class={props.class} clipPath={layerClip()}>
+        <For each={props.points}>
+          {(entry, i) => (
+            <DotRenderer
+              entry={entry}
+              index={i()}
+              dot={props.dot}
+              baseProps={props.baseProps}
+              dataKey={props.dataKey}
+              dotClass={props.dotClass}
+              points={props.points}
+            />
+          )}
+        </For>
+      </Layer>
+    </Show>
+  );
+}