@solidports/recharts 0.1.0 → 0.1.1

package/src/context/chartDataContext.tsx

@@ -1,97 +0,0 @@
-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

@@ -1,201 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-/* 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

@@ -1,12 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,22 +0,0 @@
-/* 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)
-}