@solidports/recharts 0.1.0 → 0.1.1

package/src/state/externalEventsMiddleware.ts

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

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

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

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

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

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