@solidports/recharts 0.1.0

package/src/context/chartDataContext.tsx

@@ -0,0 +1,97 @@
+import { createEffect } from 'solid-js';
+import type { ChartData } from "../state/chartDataSlice"
+import { useChartStore } from "../state/RechartsStoreContext"
+import type { ChartState } from "../state/store"
+import type { BrushStartEndIndex } from "./brushUpdateContext"
+import { useIsPanorama } from "./PanoramaContext"
+import { teardownWrite } from "../state/teardownWrite"
+import { markRawData } from "../state/rawData"
+
+export const ChartDataContextProvider = (props: { chartData: ChartData | undefined }): null => {
+	const ctx = useChartStore()
+	const isPanorama = useIsPanorama()
+	createEffect(
+		() => props.chartData,
+		(data) => {
+			if (isPanorama || ctx == null) {
+				/* Panorama mode reuses data from the main chart, so we must not overwrite it here. */
+				return undefined
+			}
+			ctx.setStore((draft: ChartState) => {
+				draft.chartData.chartData = markRawData(data)
+				if (data == null) {
+					draft.chartData.dataStartIndex = 0
+					draft.chartData.dataEndIndex = 0
+				} else if (data.length > 0) {
+					draft.chartData.dataEndIndex = data.length - 1
+				}
+			})
+			return () => {
+				teardownWrite(() => {
+					ctx.setStore("chartData", "chartData", undefined)
+					ctx.setStore("chartData", "dataStartIndex", 0)
+					ctx.setStore("chartData", "dataEndIndex", 0)
+				})
+			}
+		},
+	)
+	return null
+}
+
+export const SetComputedData = (props: { computedData: unknown }): null => {
+	const ctx = useChartStore()
+	createEffect(
+		() => props.computedData,
+		(computedData) => {
+			ctx?.setStore("chartData", "computedData", markRawData(computedData))
+			return () => {
+				teardownWrite(() => {
+					ctx?.setStore("chartData", "chartData", undefined)
+					ctx?.setStore("chartData", "dataStartIndex", 0)
+					ctx?.setStore("chartData", "dataEndIndex", 0)
+				})
+			}
+		},
+	)
+	return null
+}
+
+const selectChartData = (state: ChartState): ChartData | undefined =>
+	state.chartData.chartData
+
+/**
+ * "data" is the data of the chart - it has no type because this part of recharts is very flexible.
+ * Basically it's an array of "something" and then there's the dataKey property in various places
+ * that's meant to pull other things away from the data.
+ *
+ * Some charts have `data` defined on the chart root, and they will return the array through this hook.
+ * For example: <ComposedChart data={data} />.
+ *
+ * Other charts, such as Pie, have data defined on individual graphical elements.
+ * These charts will return `undefined` through this hook, and you need to read the data from children.
+ * For example: <PieChart><Pie data={data} />
+ *
+ * Some charts also allow setting both - data on the parent, and data on the children at the same time!
+ * However, this particular selector will only return the ones defined on the parent.
+ *
+ * @deprecated use one of the other selectors instead - which one, depends on how do you identify the applicable graphical items.
+ *
+ * @return data array for some charts and undefined for other
+ */
+export const useChartData = (): ChartData | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartData(ctx.store) : undefined
+}
+
+const selectDataIndex = (state: ChartState): BrushStartEndIndex => {
+	const { dataStartIndex, dataEndIndex } = state.chartData
+	return { endIndex: dataEndIndex, startIndex: dataStartIndex }
+}
+
+/**
+ * Returns data boundaries set through Brush. Reactive when called inside a tracked scope.
+ */
+export const useDataIndex = (): BrushStartEndIndex | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectDataIndex(ctx.store) : undefined
+}

package/src/context/chartLayoutContext.tsx

@@ -0,0 +1,201 @@
+/* eslint-disable import/no-cycle */
+import { createEffect } from 'solid-js';
+import type {
+	CartesianLayout,
+	CartesianViewBoxRequired,
+	ChartOffsetInternal,
+	LayoutType,
+	Margin,
+	Percent,
+	PolarLayout,
+} from "../util/types"
+import { useChartStore } from "../state/RechartsStoreContext"
+import type { ChartState } from "../state/store"
+import { selectChartViewBox } from "../state/selectors/selectChartOffsetInternal"
+import { selectChartHeight, selectChartWidth } from "../state/selectors/containerSelectors"
+import { useIsPanorama } from "./PanoramaContext"
+import { selectBrushDimensions, selectBrushSettings } from "../state/selectors/brushSelectors"
+import { useResponsiveContainerContext } from "../component/ResponsiveContainer"
+import { isPositiveNumber } from "../util/isWellBehavedNumber"
+import { useChartOffsetInternal as useChartOffsetInternalShared } from "../state/hooks/useChartSelectors"
+
+export { cartesianViewBoxToTrapezoid } from "../cartesian/cartesianViewBoxToTrapezoid"
+
+/**
+ * Returns the chart viewBox. Reactive when called inside a tracked scope
+ * (JSX, `createMemo`, `createEffect`). See GOTCHA-011.
+ */
+export const useViewBox = (): CartesianViewBoxRequired | undefined => {
+	const panorama = useIsPanorama()
+	const ctx = useChartStore()
+	if (!ctx) {
+		return undefined
+	}
+	const rootViewBox = selectChartViewBox(ctx.store)
+	const brushDimensions = selectBrushDimensions(ctx.store)
+	const brushPadding = selectBrushSettings(ctx.store)?.padding
+	if (panorama === false || brushDimensions == null || brushPadding == null) {
+		return rootViewBox
+	}
+	return {
+		height: brushDimensions.height - brushPadding.top - brushPadding.bottom,
+		width: brushDimensions.width - brushPadding.left - brushPadding.right,
+		x: brushPadding.left,
+		y: brushPadding.top,
+	}
+}
+
+const manyComponentsThrowErrorsIfOffsetIsUndefined: ChartOffsetInternal = {
+	bottom: 0,
+	brushBottom: 0,
+	height: 0,
+	left: 0,
+	right: 0,
+	top: 0,
+	width: 0,
+}
+/**
+ * For internal use only. If you want this information, `import { useOffset } from 'recharts'` instead.
+ *
+ * Returns the chart offset in pixels — bare value matching upstream React API.
+ * Reactivity comes from the store proxy property reads inside selector — when
+ * called inside a reactive scope (createMemo/createEffect/JSX), the call
+ * tracks store changes. Call this hook eagerly inside such scopes; calling it
+ * once at component setup snapshots the value at that moment.
+ */
+export const useOffsetInternal = (): ChartOffsetInternal =>
+	useChartOffsetInternalShared() ?? manyComponentsThrowErrorsIfOffsetIsUndefined
+
+/**
+ * Returns the chart width in pixels. Reactive when called inside a tracked scope
+ * (JSX, `createMemo`, `createEffect`). See GOTCHA-011.
+ */
+export const useChartWidth = (): number | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartWidth(ctx.store) : undefined
+}
+
+/**
+ * Returns the chart height in pixels. Reactive when called inside a tracked scope
+ * (JSX, `createMemo`, `createEffect`). See GOTCHA-011.
+ */
+export const useChartHeight = (): number | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartHeight(ctx.store) : undefined
+}
+
+/**
+ * Returns the user-declared chart margin. Reactive when called inside a tracked scope.
+ */
+export const useMargin = (): Margin | undefined => {
+	const ctx = useChartStore()
+	return ctx?.store.layout.margin
+}
+
+export const selectChartLayout = (state: ChartState): LayoutType => state.layout.layoutType
+
+export const useChartLayout = (): LayoutType | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartLayout(ctx.store) : undefined
+}
+
+export const useCartesianChartLayout = (): CartesianLayout | undefined => {
+	const l = useChartLayout()
+	if (l === "horizontal" || l === "vertical") {
+		return l
+	}
+	return undefined
+}
+
+export const selectPolarChartLayout = (state: ChartState): PolarLayout | undefined => {
+	const layout = state.layout.layoutType
+	if (layout === "centric" || layout === "radial") {
+		return layout
+	}
+	return undefined
+}
+
+export const usePolarChartLayout = (): PolarLayout | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectPolarChartLayout(ctx.store) : undefined
+}
+
+/**
+ * Returns true if the component is rendered inside a chart context. Reactive when
+ * called inside a tracked scope.
+ */
+export const useIsInChartContext = (): boolean => {
+	return useChartLayout() !== undefined
+}
+
+export const ReportChartSize = (props: {
+	height: number | Percent | undefined
+	width: number | Percent | undefined
+}): null => {
+	const ctx = useChartStore()
+
+	/*
+	 * Skip dispatching properties in panorama chart for two reasons:
+	 * 1. The root chart should be deciding on these properties, and
+	 * 2. Brush reads these properties from redux store, and so they must remain stable
+	 *      to avoid circular dependency and infinite re-rendering.
+	 */
+	const isPanorama = useIsPanorama()
+
+	const responsiveContainerCalculations = useResponsiveContainerContext()
+
+	/* The chart root seeds size at store creation; this keeps it in sync after mount. */
+	createEffect(
+		() => {
+			let width = props.width
+			let height = props.height
+
+			if (responsiveContainerCalculations) {
+				/*
+				 * In case we receive width and height from ResponsiveContainer,
+				 * we will always prefer those.
+				 * Only in case ResponsiveContainer does not provide width or height,
+				 * we will fall back to the explicitly provided width and height.
+				 *
+				 * This to me feels backwards - we should allow override by the more specific props on individual charts, right?
+				 * But this is 3.x behaviour, so let's keep it for backwards compatibility.
+				 *
+				 * We can change this in 4.x if we want to.
+				 */
+				width =
+					responsiveContainerCalculations.width > 0
+						? responsiveContainerCalculations.width
+						: props.width
+				height =
+					responsiveContainerCalculations.height > 0
+						? responsiveContainerCalculations.height
+						: props.height
+			}
+			return { height, width }
+		},
+		({ height, width }) => {
+			if (isPanorama === false && isPositiveNumber(width) && isPositiveNumber(height)) {
+				ctx?.setStore("layout", "width", width)
+				ctx?.setStore("layout", "height", height)
+			}
+		},
+	)
+
+	return null
+}
+
+export const ReportChartMargin = (props: { margin: Partial<Margin> }): null => {
+	const ctx = useChartStore()
+	createEffect(
+		() => ({
+			bottom: props.margin.bottom ?? 0,
+			left: props.margin.left ?? 0,
+			right: props.margin.right ?? 0,
+			top: props.margin.top ?? 0,
+		}),
+		(margin) => {
+			ctx?.setStore("layout", "margin", margin)
+		},
+	)
+	return null
+}

package/src/context/legendPayloadContext.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-cycle */
+import type { LegendPayload } from "../component/DefaultLegendContent"
+import { useChartStore } from "../state/RechartsStoreContext"
+import { useOptionalChartState } from "../state/useChartState"
+import { selectLegendPayload } from "../state/selectors/legendSelectors"
+
+/**
+ * Use this hook in Legend, or anywhere else where you want to read the current Legend items.
+ * Reactive when called inside a tracked scope. See GOTCHA-011.
+ */
+export function useLegendPayload(): ReadonlyArray<LegendPayload> | undefined {
+	const newCtx = useOptionalChartState()
+	/* subscribe to ChartState legend payload so mutations re-render Legend */
+	void newCtx?.state.legend.payload
+	const ctx = useChartStore()
+	if (!ctx) {
+		return undefined
+	}
+	return selectLegendPayload(ctx.store)
+}

package/src/context/legendPortalContext.tsx

@@ -0,0 +1,12 @@
+import type { Accessor } from 'solid-js';
+import { createContext, useContext } from 'solid-js';
+/* Solid context Provider stores `props.value` once at mount and never propagates
+   later signal updates to descendants. Provider value must be an Accessor so
+   consumers can read the current value reactively each call. */
+export type LegendPortalAccessor = Accessor<HTMLElement | null>
+
+const defaultLegendPortal: LegendPortalAccessor = () => null
+
+export const LegendPortalContext = createContext<LegendPortalAccessor>(defaultLegendPortal)
+
+export const useLegendPortal = (): LegendPortalAccessor => useContext(LegendPortalContext)

package/src/context/tooltipContext.tsx

@@ -0,0 +1,89 @@
+import type { Coordinate, DataKey } from "../util/types"
+import { useOptionalChartState } from "../state/useChartState"
+import type { TooltipPayload } from "../state/tooltipSlice"
+import { setTooltipInteraction } from "../state/tooltipInteraction"
+
+/**
+ * Some graphical items choose to provide more information to the tooltip
+ * and some do not.
+ */
+export type TooltipTriggerInfo = {
+	tooltipPayload?: TooltipPayload
+	tooltipPosition?: Coordinate
+}
+
+export type MouseEnterLeaveEvent<T, E extends SVGElement = SVGElement> = (
+	data: T,
+	index: number,
+	event: MouseEvent & { currentTarget: E },
+) => void
+
+/* GOTCHA-005-D: callers MUST pass a Solid accessor `() => props.foo.onClick` so
+   live prop changes flow through to the dispatch on every event. Eager values
+   (`props.foo.onClick`) can no longer be supported because the prior `.length === 0`
+   detection misclassified user-supplied `vi.fn()` (also arity 0) as accessors,
+   invoking them with no args at click time and breaking onClick payload. */
+type EventHandlerSource<T, E extends SVGElement> = () => MouseEnterLeaveEvent<T, E> | undefined
+
+function readHandler<T, E extends SVGElement>(
+	source: EventHandlerSource<T, E>,
+): MouseEnterLeaveEvent<T, E> | undefined {
+	return source()
+}
+
+export const useMouseEnterItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseEnterFromProps: EventHandlerSource<T, E>,
+	dataKey: () => DataKey<unknown> | undefined,
+	graphicalItemId: string,
+) => {
+	const newCtx = useOptionalChartState()
+	return (data: T, index: number) => (event: MouseEvent & { currentTarget: E }) => {
+		readHandler(onMouseEnterFromProps)?.(data, index, event)
+		const hoverPayload = {
+			active: true,
+			coordinate: data.tooltipPosition,
+			dataKey: dataKey(),
+			graphicalItemId,
+			index: String(index),
+		}
+		if (newCtx != null) setTooltipInteraction(newCtx.setState, "itemInteraction", "hover", hoverPayload)
+	}
+}
+
+export const useMouseLeaveItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseLeaveFromProps: EventHandlerSource<T, E>,
+) => {
+	const newCtx = useOptionalChartState()
+	return (data: T, index: number) => (event: MouseEvent & { currentTarget: E }) => {
+		readHandler(onMouseLeaveFromProps)?.(data, index, event)
+		newCtx?.setState("tooltip", "itemInteraction", "hover", "active", false)
+	}
+}
+
+export const useMouseClickItemDispatch = <
+	T extends TooltipTriggerInfo,
+	E extends SVGElement = SVGElement,
+>(
+	onMouseClickFromProps: EventHandlerSource<T, E>,
+	dataKey: () => DataKey<unknown> | undefined,
+	graphicalItemId: string,
+) => {
+	const newCtx = useOptionalChartState()
+	return (data: T, index: number) => (event: MouseEvent & { currentTarget: E }) => {
+		readHandler(onMouseClickFromProps)?.(data, index, event)
+		const clickPayload = {
+			active: true,
+			coordinate: data.tooltipPosition,
+			dataKey: dataKey(),
+			graphicalItemId,
+			index: String(index),
+		}
+		if (newCtx != null) setTooltipInteraction(newCtx.setState, "itemInteraction", "click", clickPayload)
+	}
+}

package/src/context/tooltipPortalContext.tsx

@@ -0,0 +1,12 @@
+import type { Accessor } from 'solid-js';
+import { createContext, useContext } from 'solid-js';
+/* Solid context Provider stores `props.value` once at mount and never propagates
+   later signal updates to descendants. Provider value must be an Accessor so
+   consumers can read the current value reactively each call. */
+export type TooltipPortalAccessor = Accessor<HTMLElement | null>
+
+const defaultTooltipPortal: TooltipPortalAccessor = () => null
+
+export const TooltipPortalContext = createContext<TooltipPortalAccessor>(defaultTooltipPortal)
+
+export const useTooltipPortal = (): TooltipPortalAccessor => useContext(TooltipPortalContext)

package/src/context/useTooltipAxis.ts

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-cycle */
+import { useChartStore } from "../state/RechartsStoreContext"
+import { getBandSizeOfAxis } from "../util/ChartUtils"
+import type { RenderableAxisSettings } from "../state/selectors/axisSelectors"
+import { selectTooltipAxis } from "../state/selectors/axisSelectors"
+import { selectTooltipAxisScale, selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors"
+
+export const useTooltipAxis = (): RenderableAxisSettings | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectTooltipAxis(ctx.store) : undefined
+}
+
+export const useTooltipAxisBandSize = (): number | undefined => {
+	const ctx = useChartStore()
+	const axis = useTooltipAxis()
+	const tooltipTicks = ctx ? selectTooltipAxisTicks(ctx.store) : undefined
+	const tooltipAxisScale = ctx ? selectTooltipAxisScale(ctx.store) : undefined
+	if (axis == null || tooltipAxisScale == null) {
+		return getBandSizeOfAxis(undefined, tooltipTicks)
+	}
+	return getBandSizeOfAxis({ ...axis, scale: tooltipAxisScale }, tooltipTicks)
+}