solid-recharts 0.1.0

package/src/component/LabelList.tsx

@@ -0,0 +1,270 @@
+// Ported from recharts 3.8.1 src/component/LabelList.tsx (commit 7a23854).
+//
+// CARTESIAN path: renders one <Label> per data point from a context that the
+// graphical item (Bar/Line/Area/Scatter) provides — a list of
+// CartesianLabelListEntry (each carries the point's trapezoid viewBox + value).
+//
+// POLAR path: RadialBar provides a PolarLabelListContext of PolarLabelListEntry
+// (each carries a polar sector viewBox); <Label> renders the curved arc label.
+// LabelList consumes whichever context is provided (cartesian preferred).
+//
+// Solid deviations / DEFERRALS (documented):
+//  - context value carries an `Accessor<...entries>` (Solid context is fixed at
+//    provide-time; the accessor keeps the per-render entries reactive).
+//  - element `content` (React.cloneElement) DROPPED; function `content` kept.
+//  - ZIndexLayer / `fill`-passthrough deferred (Label forwards no per-label fill).
+import { type CamelSvgProps } from "../util/svgPropertiesNoEvents";
+import { createContext, createMemo, For, omit, Show, useContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  type LabelContentType,
+  type LabelFormatter,
+  type LabelPosition,
+  Label,
+  isLabelContentAFunction,
+} from "./Label";
+import { Layer } from "../container/Layer";
+import { svgPropertiesAndEvents } from "../util/svgPropertiesAndEvents";
+import { getValueByDataKey } from "../util/ChartUtils";
+import {
+  CartesianViewBoxRequired,
+  DataKey,
+  PolarViewBoxRequired,
+  TrapezoidViewBox,
+} from "../util/types";
+import { isNullish, isNumOrStr } from "../util/DataUtils";
+import { isRenderableText, type RenderableText } from "./Text";
+
+export interface LabelListEntry {
+  /** What renders as the label content; if undefined, pulled from payload via dataKey. */
+  value: unknown;
+  /** The source data object for this entry. */
+  payload: unknown;
+  fill: string | undefined;
+}
+
+/**
+ * The viewBox properties are repeated as root props of the entry, so reading
+ * `entry.x` or `entry.viewBox.x` is equivalent (kept for backward compatibility).
+ */
+export interface CartesianLabelListEntry extends LabelListEntry, TrapezoidViewBox {
+  /** The bounding box of the graphical element this label attaches to (e.g. one Bar). */
+  viewBox: TrapezoidViewBox;
+  parentViewBox?: CartesianViewBoxRequired;
+}
+
+/**
+ * Polar label-list entry (RadialBar / Pie): the viewBox is a polar sector, and
+ * <Label> renders the curved `recharts-radial-bar-label` along the arc.
+ */
+export interface PolarLabelListEntry extends LabelListEntry {
+  viewBox: PolarViewBoxRequired;
+  parentViewBox?: PolarViewBoxRequired;
+  clockWise?: boolean;
+}
+
+interface LabelListProps {
+  id?: string;
+  /** Class applied to each rendered label (recharts `className`); spread onto Label. */
+  class?: string;
+  /** Accessor to get each label's value. Ignored if `dataKey` is specified. */
+  valueAccessor?: (
+    entry: CartesianLabelListEntry | PolarLabelListEntry,
+    index: number,
+  ) => RenderableText;
+  /**
+   * The parameter to calculate the view box of label in radial charts. Accepted
+   * for recharts prop parity; like the reference, it is NOT forwarded to the
+   * per-entry Label (polar direction comes from the entry's viewBox).
+   */
+  clockWise?: boolean;
+  /** How to extract each label's value from the data (overrides valueAccessor). */
+  dataKey?: DataKey<unknown>;
+  /** A render function for custom label content (element form is N/A — no cloneElement). */
+  content?: LabelContentType;
+  textBreakAll?: boolean;
+  /** The position of label relative to the view box. */
+  position?: LabelPosition;
+  /** The offset to the specified "position". */
+  offset?: number;
+  /** Text rotation angle in degrees. @defaultValue 0 */
+  angle?: number;
+  /** Customize how content is serialized before rendering (returns renderable text). */
+  formatter?: LabelFormatter;
+}
+
+export type Props = Omit<
+  CamelSvgProps<JSX.TextSVGAttributes<SVGTextElement>>,
+  "children" | "class"
+> &
+  LabelListProps;
+
+/**
+ * The type accepted for the `label` prop on graphical items:
+ * - boolean: show/hide labels
+ * - function: used as `<Label content={fn} />` (called once per data point)
+ * - object: props passed to a LabelList
+ *
+ * @inline
+ */
+export type ImplicitLabelListType = boolean | LabelContentType | Props;
+
+/**
+ * LabelList props with the `position` key made explicit — recharts parity name.
+ * (Upstream homes this in polar/Pie; the port homes it next to the Props it derives from.)
+ */
+export type LabelListPropsWithPosition = Props & { position: Props["position"] };
+
+const defaultAccessor = (entry: LabelListEntry): RenderableText => {
+  const raw = entry.value;
+  // Range values arrive as arrays; the label shows the last element. Array.isArray
+  // widens `unknown` to `any[]`, so the indexed read is `any` — narrowed straight
+  // back by isRenderableText below.
+  // eslint-disable-next-line typescript/no-unsafe-assignment
+  const val: unknown = Array.isArray(raw) ? raw[raw.length - 1] : raw;
+  return isRenderableText(val) ? val : undefined;
+};
+
+const CartesianLabelListContext = createContext<Accessor<
+  ReadonlyArray<CartesianLabelListEntry> | undefined
+> | null>(null);
+
+export function CartesianLabelListContextProvider(props: {
+  value: Accessor<ReadonlyArray<CartesianLabelListEntry> | undefined>;
+  children: JSX.Element;
+}): JSX.Element {
+  return (
+    <CartesianLabelListContext value={props.value}>{props.children}</CartesianLabelListContext>
+  );
+}
+
+const PolarLabelListContext = createContext<Accessor<
+  ReadonlyArray<PolarLabelListEntry> | undefined
+> | null>(null);
+
+export function PolarLabelListContextProvider(props: {
+  value: Accessor<ReadonlyArray<PolarLabelListEntry> | undefined>;
+  children: JSX.Element;
+}): JSX.Element {
+  return <PolarLabelListContext value={props.value}>{props.children}</PolarLabelListContext>;
+}
+
+/**
+ * Renders a list of cartesian labels, one per entry provided by the surrounding
+ * CartesianLabelListContext (set by the graphical item).
+ *
+ * @consumes CartesianLabelListContext
+ */
+export function LabelList(props: Props): JSX.Element {
+  const cartesianData = useContext(CartesianLabelListContext);
+  const polarData = useContext(PolarLabelListContext);
+  const entries = createMemo<
+    ReadonlyArray<CartesianLabelListEntry | PolarLabelListEntry> | undefined
+  >(() => {
+    const list = cartesianData?.() ?? polarData?.();
+    return list != null && list.length > 0 ? list : undefined;
+  });
+  const others = omit(
+    props,
+    "valueAccessor",
+    "clockWise",
+    "dataKey",
+    "id",
+    "textBreakAll",
+    "content",
+    "position",
+    "offset",
+    "angle",
+    "formatter",
+  );
+
+  const valueOf = (
+    entry: CartesianLabelListEntry | PolarLabelListEntry,
+    index: number,
+  ): RenderableText => {
+    if (!isNullish(props.dataKey)) {
+      const v = getValueByDataKey(entry.payload, props.dataKey);
+      return isNumOrStr(v) ? v : undefined;
+    }
+    return (props.valueAccessor ?? defaultAccessor)(entry, index);
+  };
+
+  return (
+    <Show when={entries()}>
+      {(list) => (
+        <Layer class="recharts-label-list">
+          <For each={list()}>
+            {(entry, index) => (
+              <Label
+                {...svgPropertiesAndEvents({ ...entry })}
+                {...others}
+                id={isNullish(props.id) ? undefined : `${props.id}-${index()}`}
+                {...(props.fill != null || entry.fill != null
+                  ? { fill: props.fill ?? entry.fill }
+                  : {})}
+                parentViewBox={entry.parentViewBox}
+                value={valueOf(entry, index())}
+                {...(isNullish(props.position) ? {} : { position: props.position })}
+                {...(isNullish(props.offset) ? {} : { offset: props.offset })}
+                {...(isNullish(props.angle) ? {} : { angle: props.angle })}
+                {...(isNullish(props.formatter) ? {} : { formatter: props.formatter })}
+                {...(isNullish(props.content) ? {} : { content: props.content })}
+                {...(isNullish(props.textBreakAll) ? {} : { textBreakAll: props.textBreakAll })}
+                viewBox={entry.viewBox}
+                index={index()}
+                zIndex={0}
+              />
+            )}
+          </For>
+        </Layer>
+      )}
+    </Show>
+  );
+}
+
+LabelList.displayName = "LabelList";
+
+function isLabelPropsObject(
+  label: ImplicitLabelListType,
+): label is Props & { dataKey?: DataKey<unknown> } {
+  if (typeof label !== "object" || label === null || isLabelContentAFunction(label)) {
+    return false;
+  }
+  return (
+    "fill" in label ||
+    "position" in label ||
+    "class" in label ||
+    "formatter" in label ||
+    "offset" in label ||
+    "content" in label ||
+    "dataKey" in label
+  );
+}
+
+/**
+ * Renders a LabelList from the implicit `label` prop of a graphical item.
+ */
+export function LabelListFromLabelProp(props: { label?: ImplicitLabelListType }): JSX.Element {
+  // Resolve the implicit `label` prop to the LabelList props it implies (DATA, not
+  // JSX): `true` → no extra props; a render function → `content`; a props object →
+  // itself. Anything else → undefined (render nothing). The <Show> below renders it.
+  const labelListProps = createMemo<Props | undefined>(() => {
+    const labelValue = props.label;
+    if (!labelValue) {
+      return undefined;
+    }
+    if (labelValue === true) {
+      return {};
+    }
+    if (isLabelContentAFunction(labelValue)) {
+      return { content: labelValue };
+    }
+    if (typeof labelValue === "object" && labelValue !== null && isLabelPropsObject(labelValue)) {
+      return labelValue;
+    }
+    return undefined;
+  });
+
+  return <Show when={labelListProps()}>{(p) => <LabelList {...p()} />}</Show>;
+}

package/src/component/Legend.tsx

@@ -0,0 +1,273 @@
+// Ported from recharts 3.8.1 src/component/Legend.tsx (commit 7a23854).
+//
+// MINIMAL PORT — renders the legend into the wrapper via a Portal, dispatches the
+// legend settings + measured size into the store, and positions the wrapper div.
+// Deferred (documented): custom `content` element cloning (a function content is
+// supported), onBBoxUpdate, React.memo. Solid deviations: createPortal →
+// `<Portal mount>`; useLayoutEffect dispatches → createEffect; hooks return
+// accessors; `className`→`class`, React CSSProperties → JSX.CSSProperties.
+import { createEffect, createMemo, merge, Show } from "solid-js";
+import { JSX, Portal } from "@solidjs/web";
+import {
+  ContentType,
+  DefaultLegendContent,
+  HorizontalAlignmentType,
+  LegendItemSorter,
+  LegendPayload,
+  Props as DefaultLegendContentProps,
+  VerticalAlignmentType,
+} from "./DefaultLegendContent";
+import { LayoutType, Margin } from "../util/types";
+import { getUniqPayload, UniqueOption } from "../util/payload/getUniqPayload";
+import { useLegendPayload } from "../context/legendPayloadContext";
+import { useLegendPortal } from "../context/legendPortalContext";
+import { ElementOffset, useElementOffset } from "../util/useElementOffset";
+import { useChartHeight, useChartWidth, useMargin } from "../context/chartLayoutContext";
+import { useAppStore } from "../state/hooks";
+
+function defaultUniqBy(entry: LegendPayload): string | undefined {
+  return entry.value;
+}
+
+/** number → "<n>px", string → as-is, undefined → "auto". */
+function toCssLength(value: number | string | undefined): string {
+  if (value == null) {
+    return "auto";
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+export type LegendProps = Omit<DefaultLegendContentProps, "payload"> & {
+  content?: ContentType;
+  wrapperStyle?: JSX.CSSProperties;
+  width?: number | string;
+  height?: number | string;
+  payloadUniqBy?: UniqueOption<LegendPayload>;
+  portal?: HTMLElement | null;
+  itemSorter?: LegendItemSorter | null;
+};
+
+export const legendDefaultProps = {
+  align: "center",
+  iconSize: 14,
+  inactiveColor: "#ccc",
+  itemSorter: "value",
+  labelStyle: {},
+  layout: "horizontal",
+  verticalAlign: "bottom",
+} as const satisfies Partial<LegendProps>;
+
+// Props passed to a function-form `content`. Mirrors recharts' ContentProps: the
+// legend props plus chart-derived margin/dimensions and the final (sorted) payload.
+type LegendContentProps = LegendProps & {
+  margin?: Margin;
+  chartWidth?: number;
+  chartHeight?: number;
+  payload?: ReadonlyArray<LegendPayload>;
+};
+
+// Port of recharts' getWidthOrHeight: a horizontal legend takes an explicit width
+// or falls back to the available chart width; a vertical legend takes an explicit height.
+function getWidthOrHeight(
+  layout: LayoutType | undefined,
+  height: number | string | undefined,
+  width: number | string | undefined,
+  maxWidth: number,
+): { height?: number | string; width?: number | string } | null {
+  if (layout === "vertical" && height != null) {
+    return { height };
+  }
+  if (layout === "horizontal") {
+    return { width: width || maxWidth };
+  }
+  return null;
+}
+
+function getDefaultPosition(
+  style: JSX.CSSProperties | undefined,
+  props: {
+    layout: LayoutType;
+    align: HorizontalAlignmentType;
+    verticalAlign: VerticalAlignmentType;
+  },
+  margin: Margin | undefined,
+  chartWidth: number,
+  chartHeight: number,
+  box: ElementOffset,
+): JSX.CSSProperties {
+  const { layout, align, verticalAlign } = props;
+  let hPos: JSX.CSSProperties = {};
+  let vPos: JSX.CSSProperties = {};
+
+  // When the user's wrapperStyle already pins a horizontal/vertical edge, the
+  // computed position for that axis is skipped (recharts parity).
+  if (style == null || (style.left == null && style.right == null)) {
+    if (align === "center" && layout === "vertical") {
+      hPos = { left: `${((chartWidth || 0) - box.width) / 2}px` };
+    } else {
+      hPos =
+        align === "right"
+          ? { right: `${margin?.right || 0}px` }
+          : { left: `${margin?.left || 0}px` };
+    }
+  }
+
+  if (style == null || (style.top == null && style.bottom == null)) {
+    if (verticalAlign === "middle") {
+      vPos = { top: `${((chartHeight || 0) - box.height) / 2}px` };
+    } else {
+      vPos =
+        verticalAlign === "bottom"
+          ? { bottom: `${margin?.bottom || 0}px` }
+          : { top: `${margin?.top || 0}px` };
+    }
+  }
+
+  return { ...hPos, ...vPos };
+}
+
+export const Legend = (props: LegendProps): JSX.Element => {
+  const merged = merge(legendDefaultProps, props);
+  const store = useAppStore();
+  const contextPayload = useLegendPayload();
+  const legendPortalFromContext = useLegendPortal();
+  const margin = useMargin();
+  const chartWidth = useChartWidth();
+  const chartHeight = useChartHeight();
+  const [lastBoundingBox, updateBoundingBox] = useElementOffset();
+
+  // Push the legend settings into the store (drives the offset's legend space).
+  createEffect(
+    () => ({
+      align: merged.align,
+      layout: merged.layout,
+      verticalAlign: merged.verticalAlign,
+      itemSorter: merged.itemSorter,
+    }),
+    (settings) => {
+      store?.actions.legend.setLegendSettings(settings);
+    },
+  );
+
+  // Report the measured size; reset to 0 on cleanup. (When a portal is supplied
+  // from props, nothing needs the size, matching recharts.)
+  createEffect(
+    () => ({ width: lastBoundingBox().width, height: lastBoundingBox().height }),
+    (size) => {
+      if (props.portal == null) {
+        store?.actions.legend.setLegendSize(size);
+      }
+    },
+  );
+
+  const portal = (): HTMLElement | null => props.portal ?? legendPortalFromContext();
+
+  const finalPayload = createMemo<ReadonlyArray<LegendPayload>>(() =>
+    getUniqPayload(contextPayload() ?? [], merged.payloadUniqBy, defaultUniqBy),
+  );
+
+  // Props handed to a function-form `content`. Built as a plain object (spreading
+  // the Solid `merge()` proxy leaks a MERGE_SOURCE symbol and doesn't materialize
+  // keys); reads finalPayload()/chart dims so the enclosing reactive insert re-runs
+  // when the payload populates.
+  const buildContentProps = (): LegendContentProps => {
+    const w = chartWidth() ?? 0;
+    const h = chartHeight() ?? 0;
+    const m = margin();
+    const maxWidth = w - (m?.left ?? 0) - (m?.right ?? 0);
+    const widthOrHeight = getWidthOrHeight(merged.layout, merged.height, merged.width, maxWidth);
+    return {
+      align: merged.align,
+      iconSize: merged.iconSize,
+      iconType: merged.iconType,
+      inactiveColor: merged.inactiveColor,
+      itemSorter: merged.itemSorter,
+      labelStyle: merged.labelStyle,
+      layout: merged.layout,
+      verticalAlign: merged.verticalAlign,
+      formatter: merged.formatter,
+      content: merged.content,
+      onClick: merged.onClick,
+      onMouseEnter: merged.onMouseEnter,
+      onMouseLeave: merged.onMouseLeave,
+      wrapperStyle: merged.wrapperStyle,
+      width: merged.width,
+      height: merged.height,
+      payloadUniqBy: merged.payloadUniqBy,
+      portal: merged.portal,
+      ...widthOrHeight,
+      margin: m,
+      chartWidth: w,
+      chartHeight: h,
+      payload: finalPayload(),
+    };
+  };
+
+  const outerStyle = (): JSX.CSSProperties => {
+    if (props.portal != null) {
+      return merged.wrapperStyle ?? {};
+    }
+    const w = chartWidth();
+    const h = chartHeight();
+    const m = margin();
+    const maxWidth = (w ?? 0) - (m?.left ?? 0) - (m?.right ?? 0);
+    const widthOrHeight = getWidthOrHeight(merged.layout, merged.height, merged.width, maxWidth);
+    return {
+      position: "absolute",
+      // Matches recharts: a horizontal legend without an explicit width fills the
+      // available chart width (maxWidth) via getWidthOrHeight; otherwise "auto".
+      width: toCssLength(widthOrHeight?.width ?? merged.width),
+      height: toCssLength(widthOrHeight?.height ?? merged.height),
+      ...getDefaultPosition(
+        merged.wrapperStyle,
+        { layout: merged.layout, align: merged.align, verticalAlign: merged.verticalAlign },
+        m,
+        w ?? 0,
+        h ?? 0,
+        lastBoundingBox(),
+      ),
+      ...merged.wrapperStyle,
+    };
+  };
+
+  return (
+    <Show
+      when={
+        portal() != null &&
+        contextPayload() != null &&
+        chartWidth() != null &&
+        chartHeight() != null
+          ? portal()
+          : null
+      }
+    >
+      {(mount) => (
+        <Portal mount={mount()}>
+          <div class="recharts-legend-wrapper" style={outerStyle()} ref={updateBoundingBox}>
+            <Show
+              when={typeof merged.content === "function" ? merged.content : null}
+              fallback={
+                <DefaultLegendContent
+                  payload={finalPayload()}
+                  iconSize={merged.iconSize}
+                  iconType={merged.iconType}
+                  layout={merged.layout}
+                  align={merged.align}
+                  verticalAlign={merged.verticalAlign}
+                  inactiveColor={merged.inactiveColor}
+                  formatter={merged.formatter}
+                  labelStyle={merged.labelStyle}
+                  onClick={merged.onClick}
+                  onMouseEnter={merged.onMouseEnter}
+                  onMouseLeave={merged.onMouseLeave}
+                />
+              }
+            >
+              {(contentFn) => <>{contentFn()(buildContentProps())}</>}
+            </Show>
+          </div>
+        </Portal>
+      )}
+    </Show>
+  );
+};