@solidports/recharts 0.1.0

package/src/state/externalEventsMiddleware.ts

@@ -0,0 +1,255 @@
+/* eslint-disable import/no-cycle */
+import { flush } from "solid-js"
+import type { ChartState } from "./chartState"
+import type { CategoricalChartFunc } from "../chart/types"
+import type { MouseHandlerDataParam } from "../synchronisation/types"
+import {
+	selectActiveLabel,
+	selectActiveTooltipCoordinate,
+	selectActiveTooltipDataKey,
+	selectActiveTooltipIndex,
+	selectIsTooltipActive,
+} from "./selectors/tooltipSelectors"
+import { createEventProxy } from "../util/createEventProxy"
+
+import { type SetStoreFunction } from '../util/solid-1-compat';
+type ExternalEventActionPayload<E = Event> = {
+	event: E
+	handler: CategoricalChartFunc<E> | undefined
+}
+
+export type ExternalEventHandlers = {
+	handleExternalEvent: <E extends Event>(
+		event: E,
+		handler: CategoricalChartFunc<E> | undefined,
+	) => void
+}
+
+/**
+ * Creates external event handler functions that read from the Solid store and call user-provided callbacks.
+ * Replaces the Redux createListenerMiddleware pattern for external events.
+ *
+ * Unlike mouse/touch middleware which handle one event type, this handles MULTIPLE different event types
+ * (click, mouseenter, mouseleave, mousedown, mouseup, contextmenu, dblclick, touchstart, touchmove, touchend)
+ * from the same DOM element. Different event types should NOT cancel each other's animation frames.
+ */
+export function createExternalEventHandlers(
+	store: ChartState,
+	_setStore: SetStoreFunction<ChartState>,
+): ExternalEventHandlers {
+	/*
+	 * We need a Map keyed by event type because this handler handles MULTIPLE different event types
+	 * from the same DOM element. Different event types should NOT cancel each other's animation frames.
+	 * For example, a click event and a mousemove event can happen in quick succession and both should be processed.
+	 * This is different from mouseEventsMiddleware which only handles one event type and uses a single rafId.
+	 */
+	const rafIdMap = new Map<string, number>()
+	const timeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>()
+	const latestEventMap = new Map<string, ExternalEventActionPayload>()
+
+	function handleExternalEvent<E extends Event>(
+		event: E,
+		handler: CategoricalChartFunc<E> | undefined,
+	): void {
+		if (handler == null) {
+			return
+		}
+
+		const eventType = event.type
+		const eventProxy = createEventProxy(event)
+
+		latestEventMap.set(eventType, {
+			event: eventProxy,
+			handler: handler as CategoricalChartFunc<Event>,
+		})
+
+		/* Cancel any pending execution for this event type */
+		const existingRafId = rafIdMap.get(eventType)
+		if (existingRafId !== undefined) {
+			cancelAnimationFrame(existingRafId)
+			rafIdMap.delete(eventType)
+		}
+
+		const { throttleDelay, throttledEvents } = store.eventSettings
+
+		/*
+		 * event.type gives us the event type as a string, e.g., "click", "mousemove", etc.
+		 * which is the same as the names used in throttledEvents array
+		 * but that array is strictly typed as ReadonlyArray<keyof GlobalEventHandlersEventMap> | "all" | undefined
+		 * so that we can have relevant autocomplete and type checking elsewhere.
+		 * To satisfy TypeScript, we widen throttledEvents here.
+		 */
+		const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents
+
+		/* Check if this event type should be throttled */
+		const isThrottled = eventListAsString === "all" || eventListAsString?.includes(eventType)
+
+		const existingTimeoutId = timeoutIdMap.get(eventType)
+		if (existingTimeoutId !== undefined && (typeof throttleDelay !== "number" || !isThrottled)) {
+			clearTimeout(existingTimeoutId)
+			timeoutIdMap.delete(eventType)
+		}
+
+		const callback = () => {
+			const latestAction = latestEventMap.get(eventType)
+
+			try {
+				if (latestAction == null) {
+					/* This happens if the event was consumed by the leading edge and no new event came in */
+					return
+				}
+
+				const { handler: latestHandler, event: latestEvent } = latestAction
+				/* Commit the triggering event's state writes before reading them (Solid 2 batches writes). */
+				flush()
+				const nextState: MouseHandlerDataParam = {
+					activeCoordinate: selectActiveTooltipCoordinate(store),
+					activeDataKey: selectActiveTooltipDataKey(store),
+					activeIndex: selectActiveTooltipIndex(store),
+					activeLabel: selectActiveLabel(store),
+					activeTooltipIndex: selectActiveTooltipIndex(store),
+					isTooltipActive: selectIsTooltipActive(store),
+				}
+
+				if (latestHandler) {
+					latestHandler(nextState, latestEvent)
+				}
+			} finally {
+				rafIdMap.delete(eventType)
+				timeoutIdMap.delete(eventType)
+				latestEventMap.delete(eventType)
+			}
+		}
+
+		if (!isThrottled) {
+			/* Execute immediately */
+			callback()
+			return
+		}
+
+		if (throttleDelay === "raf") {
+			const newRafId = requestAnimationFrame(callback)
+			rafIdMap.set(eventType, newRafId)
+		} else if (typeof throttleDelay === "number") {
+			if (!timeoutIdMap.has(eventType)) {
+				/*
+				 * Leading edge execution - execute immediately on the first event
+				 * and then start the cooldown period to throttle subsequent events.
+				 */
+				callback()
+
+				/* Start cooldown */
+				const newTimeoutId = setTimeout(callback, throttleDelay)
+				timeoutIdMap.set(eventType, newTimeoutId)
+			}
+		} else {
+			/* Should not happen based on type, but fallback to immediate */
+			callback()
+		}
+	}
+
+	return { handleExternalEvent }
+}
+
+/* Module-level maps mirror upstream Redux middleware behavior — single shared
+   set of pending rAF/timeout handles per event type across all stores. Different
+   event types must NOT cancel each other's frames. */
+const actionRafIdMap = new Map<string, number>()
+const actionTimeoutIdMap = new Map<string, ReturnType<typeof setTimeout>>()
+const actionLatestEventMap = new Map<
+	string,
+	{ handler: CategoricalChartFunc<Event>; reactEvent: Event }
+>()
+
+type ExternalEventActionInput<E extends Event> = {
+	handler: CategoricalChartFunc<E> | undefined
+	reactEvent: E
+}
+
+/**
+ * Action thunk wrapper for external events, used with the dispatch pattern.
+ * 1:1 port of upstream `externalEventsMiddleware` raf-throttled scheduler —
+ * pending callbacks per event type, latest payload wins on cancel.
+ */
+export const externalEventAction =
+	<E extends Event>(payload: ExternalEventActionInput<E>) =>
+	(_setStore: SetStoreFunction<ChartState>, store: ChartState) => {
+		const { handler, reactEvent } = payload
+		if (handler == null) {
+			return
+		}
+
+		/* React 16 compatibility — pooled SyntheticEvent stays alive for async use. */
+		;(reactEvent as Event & { persist?: () => void }).persist?.()
+
+		const eventType = reactEvent.type
+		const eventProxy = createEventProxy(reactEvent)
+
+		actionLatestEventMap.set(eventType, {
+			handler: handler as CategoricalChartFunc<Event>,
+			reactEvent: eventProxy,
+		})
+
+		const existingRafId = actionRafIdMap.get(eventType)
+		if (existingRafId !== undefined) {
+			cancelAnimationFrame(existingRafId)
+			actionRafIdMap.delete(eventType)
+		}
+
+		const { throttleDelay, throttledEvents } = store.eventSettings
+		const eventListAsString: "all" | ReadonlyArray<string> | undefined = throttledEvents
+		const isThrottled =
+			eventListAsString === "all" || eventListAsString?.includes(eventType)
+
+		const existingTimeoutId = actionTimeoutIdMap.get(eventType)
+		if (
+			existingTimeoutId !== undefined &&
+			(typeof throttleDelay !== "number" || !isThrottled)
+		) {
+			clearTimeout(existingTimeoutId)
+			actionTimeoutIdMap.delete(eventType)
+		}
+
+		const callback = () => {
+			const latestAction = actionLatestEventMap.get(eventType)
+			try {
+				if (latestAction == null) {
+					return
+				}
+				const { handler: latestHandler, reactEvent: latestEvent } = latestAction
+				/* Commit the triggering event's state writes before reading them (Solid 2 batches writes). */
+				flush()
+				const nextState: MouseHandlerDataParam = {
+					activeCoordinate: selectActiveTooltipCoordinate(store),
+					activeDataKey: selectActiveTooltipDataKey(store),
+					activeIndex: selectActiveTooltipIndex(store),
+					activeLabel: selectActiveLabel(store),
+					activeTooltipIndex: selectActiveTooltipIndex(store),
+					isTooltipActive: selectIsTooltipActive(store),
+				}
+				latestHandler(nextState, latestEvent)
+			} finally {
+				actionRafIdMap.delete(eventType)
+				actionTimeoutIdMap.delete(eventType)
+				actionLatestEventMap.delete(eventType)
+			}
+		}
+
+		if (!isThrottled) {
+			callback()
+			return
+		}
+
+		if (throttleDelay === "raf") {
+			const rafId = requestAnimationFrame(callback)
+			actionRafIdMap.set(eventType, rafId)
+		} else if (typeof throttleDelay === "number") {
+			if (!actionTimeoutIdMap.has(eventType)) {
+				callback()
+				const timeoutId = setTimeout(callback, throttleDelay)
+				actionTimeoutIdMap.set(eventType, timeoutId)
+			}
+		} else {
+			callback()
+		}
+	}

package/src/state/graphicalItemsSlice.ts

@@ -0,0 +1,74 @@
+/* eslint-disable import/no-cycle */
+import type { ChartData } from "./chartDataSlice"
+import type { AxisId } from "./cartesianAxisSlice"
+import type { DataKey } from "../util/types"
+import type { LineSettings } from "./types/LineSettings"
+import type { ScatterSettings } from "./types/ScatterSettings"
+import type { AreaSettings } from "./types/AreaSettings"
+import type { BarSettings } from "./types/BarSettings"
+import type { RadialBarSettings } from "./types/RadialBarSettings"
+import type { PieSettings } from "./types/PieSettings"
+import type { RadarSettings } from "./types/RadarSettings"
+
+/**
+ * Unique ID of the graphical item.
+ * This is used to identify the graphical item in the state and in the React tree.
+ * This is required for every graphical item - it's either provided by the user or generated automatically.
+ */
+export type GraphicalItemId = string
+
+export interface GraphicalItemSettings {
+	/**
+	 * Unique ID of the graphical item.
+	 * This is used to identify the graphical item in the state and in the React tree.
+	 * This is required for every graphical item - it's either provided by the user or generated automatically.
+	 */
+	id: GraphicalItemId
+	/**
+	 * If the given graphical item has its own data array, it will appear here.
+	 * If this is undefined, the data will be taken from the chart root prop.
+	 */
+	data: ChartData | undefined
+	dataKey: DataKey<unknown> | undefined
+	/**
+	 * Why not just stop pushing the graphical items to state when they are hidden?
+	 * Well some components decide to continue showing them anyway.
+	 * Legend for example will keep showing a record for hidden graphical items.
+	 * Stacks for example will ignore them.
+	 */
+	hide: boolean
+}
+
+export interface BaseCartesianGraphicalItemSettings extends GraphicalItemSettings {
+	/**
+	 * Each of the graphical items explicitly says which axis it uses;
+	 * this property is optional for users but every graphical item must have a default,
+	 * and it is required here.
+	 */
+	xAxisId: AxisId
+	yAxisId: AxisId
+	zAxisId: AxisId
+	/**
+	 * Graphical items that are inside Brush panorama should not interact with the main area graphical items
+	 * and vice versa.
+	 */
+	isPanorama: boolean
+}
+
+export type CartesianGraphicalItemSettings =
+	| AreaSettings
+	| BarSettings
+	| LineSettings
+	| ScatterSettings
+
+export interface BasePolarGraphicalItemSettings extends GraphicalItemSettings {
+	angleAxisId: AxisId
+	radiusAxisId: AxisId
+}
+
+export type PolarGraphicalItemSettings = PieSettings | RadarSettings | RadialBarSettings
+
+export type ReplacePayload<T> = {
+	prev: T
+	next: T
+}

package/src/state/hooks/useChartSelectors.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-cycle */
+import type { CartesianViewBoxRequired, ChartOffsetInternal } from "../../util/types"
+import type { XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
+import {
+	selectChartOffsetInternal,
+	selectChartViewBox,
+	selectAxisViewBox,
+} from "../selectors/selectChartOffsetInternal"
+import { selectAllXAxes, selectAllYAxes } from "../selectors/selectAllAxes"
+import { useChartStore } from "../RechartsStoreContext"
+
+/*
+ * Chart-level selector hooks. The selectors are chartSelector memos, so every consumer of a chart
+ * shares one computation per selector; outside a chart the hooks return undefined.
+ */
+
+/** Returns the current chart offset. */
+export const useChartOffsetInternal = (): ChartOffsetInternal | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartOffsetInternal(ctx.store) : undefined
+}
+
+/** Returns all registered X axes. */
+export const useAllXAxes = (): ReadonlyArray<XAxisSettings> | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectAllXAxes(ctx.store) : undefined
+}
+
+/** Returns all registered Y axes. */
+export const useAllYAxes = (): ReadonlyArray<YAxisSettings> | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectAllYAxes(ctx.store) : undefined
+}
+
+/** Returns the axis viewBox. */
+export const useAxisViewBox = (): CartesianViewBoxRequired | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectAxisViewBox(ctx.store) : undefined
+}
+
+/** Returns the chart viewBox. */
+export const useChartViewBox = (): CartesianViewBoxRequired | undefined => {
+	const ctx = useChartStore()
+	return ctx ? selectChartViewBox(ctx.store) : undefined
+}

package/src/state/keyboardEventsMiddleware.ts

@@ -0,0 +1,228 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "./chartState"
+import { readChartState } from "./chartState"
+import type { TooltipIndex, TooltipInteractionState } from "./tooltipSlice"
+import type { Coordinate } from "../util/types"
+import {
+	selectTooltipAxisDomain,
+	selectTooltipAxisTicks,
+	selectTooltipDisplayedData,
+} from "./selectors/tooltipSelectors"
+import { selectCoordinateForDefaultIndex } from "./selectors/selectors"
+import { selectChartDirection, selectTooltipAxisDataKey } from "./selectors/axisSelectors"
+import { combineActiveTooltipIndex } from "./selectors/combiners/combineActiveTooltipIndex"
+import { selectTooltipEventType } from "./selectors/selectTooltipEventType"
+
+import { type SetStoreFunction } from '../util/solid-1-compat';
+export type KeyboardEventHandlers = {
+	handleKeyDown: (key: KeyboardEvent["key"]) => void
+	handleFocus: () => void
+	handleBlur: () => void
+}
+
+/* Mirrors upstream's setKeyboardInteraction reducer: only active/index/coordinate change. */
+function setKeyboardInteraction(
+	setStore: SetStoreFunction<ChartState>,
+	active: boolean,
+	index: TooltipIndex | undefined,
+	coordinate: Coordinate | undefined,
+): void {
+	setStore("tooltip", "keyboardInteraction", "active", active)
+	setStore("tooltip", "keyboardInteraction", "index", index)
+	setStore("tooltip", "keyboardInteraction", "coordinate", coordinate)
+}
+
+function coordinateForIndex(store: ChartState, index: TooltipIndex | undefined): Coordinate | undefined {
+	const tooltipEventType = selectTooltipEventType(store, store.tooltip.settings.shared)
+	return selectCoordinateForDefaultIndex(store, tooltipEventType, "hover", String(index))
+}
+
+/* Builds a minimal TooltipInteractionState for the candidate-index check. */
+function candidateInteraction(i: number): TooltipInteractionState {
+	return {
+		active: false,
+		coordinate: undefined,
+		dataKey: undefined,
+		graphicalItemId: undefined,
+		index: String(i),
+	}
+}
+
+function applyKeyDown(
+	store: ChartState,
+	setStore: SetStoreFunction<ChartState>,
+	key: KeyboardEvent["key"] | null,
+): void {
+	const accessibilityLayerIsActive = store.rootProps.accessibilityLayer !== false
+	if (!accessibilityLayerIsActive) {
+		return
+	}
+	const keyboardInteraction = readChartState(store).tooltip.keyboardInteraction
+	if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "Enter") {
+		return
+	}
+
+	/* TODO this is lacking index for charts that do not support numeric indexes */
+	const displayedData = selectTooltipDisplayedData(store)
+	const axisDataKey = selectTooltipAxisDataKey(store)
+	const domain = selectTooltipAxisDomain(store)
+	const resolvedIndex = combineActiveTooltipIndex(keyboardInteraction, displayedData, axisDataKey, domain)
+	const currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex)
+	const isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0
+	if (key === "Enter") {
+		if (isOutsideDomain) {
+			return
+		}
+		setKeyboardInteraction(
+			setStore,
+			!keyboardInteraction.active,
+			keyboardInteraction.index,
+			coordinateForIndex(store, keyboardInteraction.index),
+		)
+		return
+	}
+
+	const directionMultiplier = selectChartDirection(store) === "left-to-right" ? 1 : -1
+	const movement = key === "ArrowRight" ? 1 : -1
+	let nextIndex: number
+	if (isOutsideDomain) {
+		/* Snap back to the first/last index that is visible in the current domain. */
+		const isVisible = (i: number) =>
+			combineActiveTooltipIndex(candidateInteraction(i), displayedData, axisDataKey, domain) != null
+		nextIndex = -1
+		if (movement * directionMultiplier > 0) {
+			for (let i = 0; i < displayedData.length; i++) {
+				if (isVisible(i)) {
+					nextIndex = i
+					break
+				}
+			}
+		} else {
+			for (let i = displayedData.length - 1; i >= 0; i--) {
+				if (isVisible(i)) {
+					nextIndex = i
+					break
+				}
+			}
+		}
+		if (nextIndex < 0) {
+			return
+		}
+	} else {
+		nextIndex = currentIndex + movement * directionMultiplier
+		const dataLength = selectTooltipAxisTicks(store)?.length || displayedData.length
+		if (dataLength === 0 || nextIndex >= dataLength || nextIndex < 0) {
+			return
+		}
+	}
+	const index = nextIndex.toString()
+	setKeyboardInteraction(setStore, true, index, coordinateForIndex(store, index))
+}
+
+function applyFocus(store: ChartState, setStore: SetStoreFunction<ChartState>): void {
+	const accessibilityLayerIsActive = store.rootProps.accessibilityLayer !== false
+	if (!accessibilityLayerIsActive) {
+		return
+	}
+	const keyboardInteraction = readChartState(store).tooltip.keyboardInteraction
+	if (keyboardInteraction.active) {
+		return
+	}
+	if (keyboardInteraction.index == null) {
+		const nextIndex = "0"
+		setKeyboardInteraction(setStore, true, nextIndex, coordinateForIndex(store, nextIndex))
+	}
+}
+
+function applyBlur(store: ChartState, setStore: SetStoreFunction<ChartState>): void {
+	const accessibilityLayerIsActive = store.rootProps.accessibilityLayer !== false
+	if (!accessibilityLayerIsActive) {
+		return
+	}
+	const keyboardInteraction = readChartState(store).tooltip.keyboardInteraction
+	if (keyboardInteraction.active) {
+		setKeyboardInteraction(setStore, false, keyboardInteraction.index, keyboardInteraction.coordinate)
+	}
+}
+
+/**
+ * Creates keyboard event handler functions that read from the Solid store and update it directly.
+ * Replaces the Redux createListenerMiddleware pattern for keyboard navigation.
+ */
+export function createKeyboardEventHandlers(
+	store: ChartState,
+	setStore: SetStoreFunction<ChartState>,
+): KeyboardEventHandlers {
+	let rafId: number | null = null
+	let timeoutId: ReturnType<typeof setTimeout> | null = null
+	let latestKeyboardActionPayload: KeyboardEvent["key"] | null = null
+
+	function handleKeyDown(key: KeyboardEvent["key"]): void {
+		latestKeyboardActionPayload = key
+
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId)
+			rafId = null
+		}
+
+		const { throttleDelay, throttledEvents } = store.eventSettings
+		const isThrottled = throttledEvents === "all" || throttledEvents.includes("keydown")
+
+		if (timeoutId !== null && (typeof throttleDelay !== "number" || !isThrottled)) {
+			clearTimeout(timeoutId)
+			timeoutId = null
+		}
+
+		const callback = () => {
+			try {
+				applyKeyDown(store, setStore, latestKeyboardActionPayload)
+			} finally {
+				rafId = null
+				timeoutId = null
+			}
+		}
+
+		if (!isThrottled) {
+			callback()
+			return
+		}
+
+		if (throttleDelay === "raf") {
+			rafId = requestAnimationFrame(callback)
+		} else if (typeof throttleDelay === "number") {
+			if (timeoutId === null) {
+				callback()
+				latestKeyboardActionPayload = null
+
+				timeoutId = setTimeout(() => {
+					if (latestKeyboardActionPayload) {
+						callback()
+					} else {
+						timeoutId = null
+						rafId = null
+					}
+				}, throttleDelay)
+			}
+		}
+	}
+
+	return {
+		handleBlur: () => applyBlur(store, setStore),
+		handleFocus: () => applyFocus(store, setStore),
+		handleKeyDown,
+	}
+}
+
+/**
+ * Action thunk wrappers for keyboard events, used with the dispatch pattern.
+ * Note: these are simplified versions without throttling. For full throttling, use createKeyboardEventHandlers.
+ */
+export const focusAction = () => (setStore: SetStoreFunction<ChartState>, store: ChartState) =>
+	applyFocus(store, setStore)
+
+export const blurAction = () => (setStore: SetStoreFunction<ChartState>, store: ChartState) =>
+	applyBlur(store, setStore)
+
+export const keyDownAction =
+	(key: string) => (setStore: SetStoreFunction<ChartState>, store: ChartState) =>
+		applyKeyDown(store, setStore, key)

package/src/state/layoutSlice.ts

@@ -0,0 +1,21 @@
+import type { LayoutType, Margin } from "../util/types"
+
+export type ChartLayoutState = {
+	layoutType: LayoutType
+	width: number
+	height: number
+	margin: Margin
+	/**
+	 * How much is the chart zoomed in.
+	 * Used for scaling the mouse coordinates to the chart coordinates.
+	 */
+	scale: number
+}
+
+export const initialLayoutState: ChartLayoutState = {
+	height: 0,
+	layoutType: "horizontal",
+	margin: { bottom: 5, left: 5, right: 5, top: 5 },
+	scale: 1,
+	width: 0,
+}

package/src/state/legendSlice.ts

@@ -0,0 +1,57 @@
+import type { LayoutType, Size } from "../util/types"
+import type {
+	HorizontalAlignmentType,
+	LegendPayload,
+	VerticalAlignmentType,
+} from "../component/DefaultLegendContent"
+import type { LegendItemSorter } from "../component/Legend"
+
+/** Keyword or coordinate position; same vocabulary as Label. Avoids importing CartesianLabelPosition (cycle). */
+export type LegendPosition =
+	| "top"
+	| "left"
+	| "right"
+	| "bottom"
+	| "inside"
+	| "outside"
+	| "insideLeft"
+	| "insideRight"
+	| "insideTop"
+	| "insideBottom"
+	| "insideTopLeft"
+	| "insideBottomLeft"
+	| "insideTopRight"
+	| "insideBottomRight"
+	| "insideStart"
+	| "insideEnd"
+	| "end"
+	| "center"
+	| "centerTop"
+	| "centerBottom"
+	| "middle"
+	| {
+			x?: number | string
+			y?: number | string
+	  }
+
+export type LegendSettings = {
+	align: HorizontalAlignmentType
+	itemSorter: LegendItemSorter | null
+	layout: LayoutType
+	verticalAlign: VerticalAlignmentType
+	position?: LegendPosition
+	offset?: number
+}
+
+/**
+ * The properties inside this state update independently of each other and quite often.
+ * When selecting, never select the whole state because you are going to get
+ * unnecessary re-renders. Select only the properties you need.
+ *
+ * This is why this state type is not exported - don't use it directly.
+ */
+export type LegendState = {
+	payload: ReadonlyArray<ReadonlyArray<LegendPayload>>
+	settings: LegendSettings
+	size: Size
+}