@solidports/recharts 0.1.0

package/src/state/selectors/combiners/combineTooltipInteractionState.ts

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-cycle */
+import {
+	noInteraction,
+	TooltipIndex,
+	TooltipInteractionState,
+	TooltipState,
+} from "../../tooltipSlice"
+import { TooltipEventType } from "../../../util/types"
+import { TooltipTrigger } from "../../../chart/types"
+
+function chooseAppropriateMouseInteraction(
+	tooltipState: TooltipState,
+	tooltipEventType: TooltipEventType,
+	trigger: TooltipTrigger,
+): TooltipInteractionState | undefined {
+	if (tooltipEventType === "axis") {
+		if (trigger === "click") {
+			return tooltipState.axisInteraction.click
+		}
+		return tooltipState.axisInteraction.hover
+	}
+	if (trigger === "click") {
+		return tooltipState.itemInteraction.click
+	}
+	return tooltipState.itemInteraction.hover
+}
+
+function hasBeenActivePreviously(tooltipInteractionState: TooltipInteractionState): boolean {
+	return tooltipInteractionState.index != null
+}
+
+export const combineTooltipInteractionState = (
+	tooltipState: TooltipState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+): TooltipInteractionState => {
+	if (tooltipEventType == null) {
+		return noInteraction
+	}
+	const appropriateMouseInteraction = chooseAppropriateMouseInteraction(
+		tooltipState,
+		tooltipEventType,
+		trigger,
+	)
+
+	if (appropriateMouseInteraction == null) {
+		return noInteraction
+	}
+
+	if (appropriateMouseInteraction.active) {
+		return appropriateMouseInteraction
+	}
+
+	if (tooltipState.keyboardInteraction.active) {
+		return tooltipState.keyboardInteraction
+	}
+
+	if (tooltipState.syncInteraction.active && tooltipState.syncInteraction.index != null) {
+		return tooltipState.syncInteraction
+	}
+
+	const activeFromProps = tooltipState.settings.active === true
+
+	if (hasBeenActivePreviously(appropriateMouseInteraction)) {
+		if (activeFromProps) {
+			return {
+				...appropriateMouseInteraction,
+				active: true,
+			}
+		}
+	} else if (defaultIndex != null) {
+		return {
+			active: true,
+			coordinate: undefined,
+			dataKey: undefined,
+			graphicalItemId: undefined,
+			index: defaultIndex,
+		}
+	}
+
+	return {
+		...noInteraction,
+		coordinate: appropriateMouseInteraction.coordinate,
+	}
+}

package/src/state/selectors/combiners/combineTooltipPayload.ts

@@ -0,0 +1,205 @@
+/* eslint-disable import/no-cycle */
+import {
+	TooltipEntrySettings,
+	TooltipIndex,
+	TooltipPayload,
+	TooltipPayloadConfiguration,
+	TooltipPayloadEntry,
+	TooltipPayloadSearcher,
+} from "../../tooltipSlice"
+import { ChartData, ChartDataState } from "../../chartDataSlice"
+import { DataKey, TooltipEventType } from "../../../util/types"
+import { findEntryInArray } from "../../../util/DataUtils"
+import { getTooltipEntry, getValueByDataKey } from "../../../util/ChartUtils"
+import { getSliced } from "../../../util/getSliced"
+import { ActiveLabel } from "../../../synchronisation/types"
+
+type TooltipPayloadItemLike = {
+	name: TooltipEntrySettings["name"]
+	unit: TooltipEntrySettings["unit"]
+	dataKey: DataKey<unknown> | undefined
+	payload: unknown
+	color: string | undefined
+	fill: string | undefined
+}
+
+function parseName(value: unknown): TooltipEntrySettings["name"] {
+	if (typeof value === "string" || typeof value === "number") {
+		return value
+	}
+	return undefined
+}
+
+function parseUnit(value: unknown): TooltipEntrySettings["unit"] {
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+		return value
+	}
+	return undefined
+}
+
+function parseDataKey(value: unknown): DataKey<unknown> | undefined {
+	if (typeof value === "string" || typeof value === "number") {
+		return value
+	}
+	if (typeof value === "function") {
+		return (obj: unknown) => value(obj)
+	}
+	return undefined
+}
+
+function parseColor(value: unknown): string | undefined {
+	if (typeof value === "string") {
+		return value
+	}
+	return undefined
+}
+
+function parseTooltipPayloadItem(item: unknown): TooltipPayloadItemLike | undefined {
+	if (item == null || typeof item !== "object") {
+		return undefined
+	}
+
+	const name = "name" in item ? parseName(item.name) : undefined
+	const unit = "unit" in item ? parseUnit(item.unit) : undefined
+	const dataKey = "dataKey" in item ? parseDataKey(item.dataKey) : undefined
+	const payload = "payload" in item ? item.payload : undefined
+	const color = "color" in item ? parseColor(item.color) : undefined
+	const fill = "fill" in item ? parseColor(item.fill) : undefined
+
+	return {
+		color,
+		dataKey,
+		fill,
+		name,
+		payload,
+		unit,
+	}
+}
+
+function selectFinalData(
+	dataDefinedOnItem: unknown,
+	dataDefinedOnChart: ChartData | undefined,
+): unknown {
+	/*
+	 * If a payload has data specified directly from the graphical item, prefer that.
+	 * Otherwise, fill in data from the chart level, using the same index.
+	 */
+	if (dataDefinedOnItem != null) {
+		return dataDefinedOnItem
+	}
+	return dataDefinedOnChart
+}
+
+export const combineTooltipPayload = (
+	tooltipPayloadConfigurations: ReadonlyArray<TooltipPayloadConfiguration>,
+	activeIndex: TooltipIndex,
+	chartDataState: ChartDataState,
+	tooltipAxisDataKey: DataKey<unknown> | undefined,
+	activeLabel: ActiveLabel,
+	tooltipPayloadSearcher: TooltipPayloadSearcher | undefined,
+	tooltipEventType: TooltipEventType | undefined,
+): TooltipPayload | undefined => {
+	if (activeIndex == null || tooltipPayloadSearcher == null) {
+		return undefined
+	}
+	const { chartData, computedData, dataStartIndex, dataEndIndex } = chartDataState
+
+	const init: Array<TooltipPayloadEntry> = []
+
+	return tooltipPayloadConfigurations.reduce(
+		(agg, { dataDefinedOnItem, settings }): Array<TooltipPayloadEntry> => {
+			const finalData = selectFinalData(dataDefinedOnItem, chartData)
+
+			const sliced = Array.isArray(finalData)
+				? getSliced(finalData, dataStartIndex, dataEndIndex)
+				: finalData
+
+			const finalDataKey: DataKey<unknown> | undefined = settings?.dataKey ?? tooltipAxisDataKey
+			const finalNameKey: DataKey<unknown> | undefined = settings?.nameKey
+			let tooltipPayload: unknown
+			if (
+				tooltipAxisDataKey &&
+				Array.isArray(sliced) &&
+				/*
+				 * findEntryInArray won't work for Scatter because Scatter provides an array of arrays
+				 * as tooltip payloads and findEntryInArray is not prepared to handle that.
+				 * Sad but also ScatterChart only allows 'item' tooltipEventType
+				 * and also this is only a problem if there are multiple Scatters and each has its own data array
+				 * so let's fix that some other time.
+				 */
+				!Array.isArray(sliced[0]) &&
+				/*
+				 * If the tooltipEventType is 'axis', we should search for the dataKey in the sliced data
+				 * because thanks to allowDuplicatedCategory=false, the order of elements in the array
+				 * no longer matches the order of elements in the original data
+				 * and so we need to search by the active dataKey + label rather than by index.
+				 *
+				 * The same happens if multiple graphical items are present in the chart
+				 * and each of them has its own data array. Those arrays get concatenated
+				 * and again the tooltip index no longer matches the original data.
+				 *
+				 * On the other hand the tooltipEventType 'item' should always search by index
+				 * because we get the index from interacting over the individual elements
+				 * which is always accurate, irrespective of the allowDuplicatedCategory setting.
+				 */
+				tooltipEventType === "axis"
+			) {
+				tooltipPayload = findEntryInArray(sliced, tooltipAxisDataKey, activeLabel)
+				if (tooltipPayload == null) {
+					tooltipPayload = tooltipPayloadSearcher(
+						sliced,
+						activeIndex,
+						computedData,
+						finalNameKey,
+					)
+				}
+			} else {
+				/*
+				 * This is a problem because it assumes that the index is pointing to the displayed data
+				 * which it isn't because the index is pointing to the tooltip ticks array.
+				 * The above approach (with findEntryInArray) is the correct one, but it only works
+				 * if the axis dataKey is defined explicitly, and if the data is an array of objects.
+				 */
+				tooltipPayload = tooltipPayloadSearcher(sliced, activeIndex, computedData, finalNameKey)
+			}
+
+			if (Array.isArray(tooltipPayload)) {
+				tooltipPayload.forEach((item) => {
+					const parsedItem = parseTooltipPayloadItem(item)
+					const itemName = parsedItem?.name
+					const itemDataKey = parsedItem?.dataKey
+					const itemPayload = parsedItem?.payload
+					const newSettings: TooltipEntrySettings = {
+						...settings,
+						/* Preserve item-level color/fill from graphical items. */
+						color: parsedItem?.color ?? settings?.color,
+						fill: parsedItem?.fill ?? settings?.fill,
+						name: itemName,
+						unit: parsedItem?.unit,
+					}
+					agg.push(
+						getTooltipEntry({
+							dataKey: itemDataKey,
+							name: itemName == null ? undefined : String(itemName),
+							payload: itemPayload,
+							tooltipEntrySettings: newSettings,
+							value: getValueByDataKey(itemPayload, itemDataKey),
+						}),
+					)
+				})
+			} else {
+				agg.push(
+					getTooltipEntry({
+						dataKey: finalDataKey,
+						name: getValueByDataKey(tooltipPayload, finalNameKey) ?? settings?.name,
+						payload: tooltipPayload,
+						tooltipEntrySettings: settings,
+						value: getValueByDataKey(tooltipPayload, finalDataKey),
+					}),
+				)
+			}
+			return agg
+		},
+		init,
+	)
+}

package/src/state/selectors/combiners/combineTooltipPayloadConfigurations.ts

@@ -0,0 +1,58 @@
+/* eslint-disable import/no-cycle */
+import { TooltipIndex, TooltipPayloadConfiguration, TooltipState } from "../../tooltipSlice"
+import { TooltipEventType } from "../../../util/types"
+import { TooltipTrigger } from "../../../chart/types"
+import { GraphicalItemId } from "../../graphicalItemsSlice"
+
+export const combineTooltipPayloadConfigurations = (
+	tooltipState: TooltipState,
+	tooltipEventType: TooltipEventType | undefined,
+	trigger: TooltipTrigger,
+	defaultIndex: TooltipIndex | undefined,
+): ReadonlyArray<TooltipPayloadConfiguration> => {
+	/* if tooltip reacts to axis interaction, then we display all items at the same time. */
+	if (tooltipEventType === "axis") {
+		return tooltipState.tooltipItemPayloads
+	}
+	/*
+	 * By now we already know that tooltipEventType is 'item', so we can only search in itemInteractions.
+	 * item means that only the hovered or clicked item will be present in the tooltip.
+	 */
+	if (tooltipState.tooltipItemPayloads.length === 0) {
+		/* No point filtering if the payload is empty */
+		return []
+	}
+	let filterByGraphicalItemId: GraphicalItemId | undefined
+	if (trigger === "hover") {
+		filterByGraphicalItemId = tooltipState.itemInteraction.hover.graphicalItemId
+	} else {
+		filterByGraphicalItemId = tooltipState.itemInteraction.click.graphicalItemId
+	}
+	if (tooltipState.syncInteraction.active && filterByGraphicalItemId == null) {
+		/*
+		 * When a tooltip is synchronised from another chart, the local itemInteraction
+		 * has no graphicalItemId because the user hasn't hovered over this chart.
+		 * In that case we show all tooltip items so the receiving chart can display
+		 * its own data at the synced index — matching the behaviour of axis-type tooltips.
+		 */
+		return tooltipState.tooltipItemPayloads
+	}
+	if (
+		filterByGraphicalItemId == null &&
+		(defaultIndex != null || tooltipState.keyboardInteraction.active)
+	) {
+		/*
+		 * So when we use `defaultIndex` - we don't have a dataKey to filter by because user did not hover over anything yet.
+		 * In that case let's display the first item in the tooltip; after all, this is `item` interaction case,
+		 * so we should display only one item at a time instead of all.
+		 */
+		const firstItemPayload = tooltipState.tooltipItemPayloads[0]
+		if (firstItemPayload != null) {
+			return [firstItemPayload]
+		}
+		return []
+	}
+	return tooltipState.tooltipItemPayloads.filter(
+		(tpc) => tpc.settings?.graphicalItemId === filterByGraphicalItemId,
+	)
+}

package/src/state/selectors/containerSelectors.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { Margin } from "../../util/types"
+
+export const selectChartWidth = (state: ChartState): number => state.layout.width
+
+export const selectChartHeight = (state: ChartState): number => state.layout.height
+
+export const selectContainerScale: (state: ChartState) => number = (state) =>
+	state.layout.scale
+
+export const selectMargin = (state: ChartState): Margin => state.layout.margin

package/src/state/selectors/dataSelectors.ts

@@ -0,0 +1,88 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { chartSelector } from "./chartSelector"
+import { ChartData, ChartDataState } from "../chartDataSlice"
+
+/**
+ * This selector always returns the data with the indexes set by a Brush.
+ * Trouble is, that might or might not be what you want.
+ *
+ * In charts with Brush, you will sometimes want to select the full range of data, and sometimes the one decided by the Brush
+ * - even if the Brush is active, the panorama inside the Brush should show the full range of data.
+ *
+ * So instead of this selector, consider using either selectChartDataAndAlwaysIgnoreIndexes or selectChartDataWithIndexesIfNotInPanorama
+ *
+ * @param state ChartState
+ * @returns data defined on the chart root element, such as BarChart or ScatterChart
+ */
+export const selectChartDataWithIndexes = (state: ChartState): ChartDataState =>
+	state.chartData
+
+/**
+ * This selector will always return the full range of data, ignoring the indexes set by a Brush.
+ * Useful for when you want to render the full range of data, even if a Brush is active.
+ * For example: in the Brush panorama, in Legend, in Tooltip.
+ */
+export const selectChartDataAndAlwaysIgnoreIndexes = chartSelector(function selectChartDataAndAlwaysIgnoreIndexes(state: ChartState): ChartDataState {
+	const dataState = selectChartDataWithIndexes(state)
+	const dataEndIndex = dataState.chartData != null ? dataState.chartData.length - 1 : 0
+	return {
+		chartData: dataState.chartData,
+		computedData: dataState.computedData,
+		dataEndIndex,
+		dataStartIndex: 0,
+	}
+})
+
+export const selectChartDataWithIndexesIfNotInPanoramaPosition4 = chartSelector((
+	state: ChartState,
+	_unused1: unknown,
+	_unused2: unknown,
+	isPanorama: boolean,
+): ChartDataState => {
+	if (isPanorama) {
+		return selectChartDataAndAlwaysIgnoreIndexes(state)
+	}
+	return selectChartDataWithIndexes(state)
+})
+
+/**
+ * Returns the chart-level data sliced by the Brush indexes (full range in the panorama).
+ */
+export const selectChartDataSliceIfNotInPanorama = chartSelector((
+	state: ChartState,
+	_unused1: unknown,
+	_unused2: unknown,
+	isPanorama: boolean,
+): ChartData => {
+	const { chartData, dataStartIndex, dataEndIndex } = selectChartDataWithIndexesIfNotInPanoramaPosition4(
+		state,
+		_unused1,
+		_unused2,
+		isPanorama,
+	)
+	return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : []
+})
+
+export const selectChartDataWithIndexesIfNotInPanoramaPosition3 = chartSelector((
+	state: ChartState,
+	_unused1: unknown,
+	isPanorama: boolean,
+): ChartDataState => {
+	if (isPanorama) {
+		return selectChartDataAndAlwaysIgnoreIndexes(state)
+	}
+	return selectChartDataWithIndexes(state)
+})
+
+/** Chart-level data slice ignoring Brush indexes (polar charts always use the full range). */
+export const selectChartDataSliceIgnoringIndexes = chartSelector(function selectChartDataSliceIgnoringIndexes(state: ChartState): ChartData {
+	const { chartData, dataStartIndex, dataEndIndex } = selectChartDataAndAlwaysIgnoreIndexes(state)
+	return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : []
+})
+
+/** Chart-level data slice honoring Brush indexes (tooltip never renders in the panorama). */
+export const selectChartDataSliceWithIndexes = chartSelector(function selectChartDataSliceWithIndexes(state: ChartState): ChartData {
+	const { chartData, dataStartIndex, dataEndIndex } = selectChartDataWithIndexes(state)
+	return chartData != null ? chartData.slice(dataStartIndex, dataEndIndex + 1) : []
+})

package/src/state/selectors/funnelSelectors.ts

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-cycle */
+import { computeFunnelTrapezoids, type FunnelTrapezoidItem } from "../../cartesian/Funnel"
+import type { ChartData } from "../chartDataSlice"
+import type { ChartState } from "../store"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors"
+import type { ChartOffsetInternal, DataKey, TooltipType } from "../../util/types"
+import { chartSelector } from "./chartSelector"
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+
+export type ResolvedFunnelSettings = {
+	dataKey: DataKey<unknown>
+	data: ChartData | undefined
+	nameKey: DataKey<unknown>
+	tooltipType?: TooltipType
+	lastShapeType?: "triangle" | "rectangle"
+	reversed?: boolean
+	customWidth?: string | number
+	cells: ReadonlyArray<Record<string, unknown>>
+	presentationProps: Record<string, unknown> | null
+	id: GraphicalItemId
+}
+
+export const selectFunnelTrapezoids = chartSelector(function selectFunnelTrapezoids(state: ChartState, funnelSettings: ResolvedFunnelSettings): ReadonlyArray<FunnelTrapezoidItem> {
+	const offset: ChartOffsetInternal = selectChartOffsetInternal(state)
+	const { chartData } = selectChartDataAndAlwaysIgnoreIndexes(state)
+	const {
+		data,
+		dataKey,
+		nameKey,
+		tooltipType,
+		lastShapeType,
+		reversed,
+		customWidth,
+		cells,
+		presentationProps,
+		id: graphicalItemId,
+	} = funnelSettings
+
+	let displayedData: ChartData | undefined
+	if (data != null && data.length > 0) {
+		displayedData = data
+	} else if (chartData != null && chartData.length > 0) {
+		displayedData = chartData
+	}
+
+	if (displayedData && displayedData.length) {
+		displayedData = displayedData.map((entry: unknown, index: number) =>
+			Object.assign(
+				{ payload: entry },
+				presentationProps,
+				entry as Record<string, unknown>,
+				cells && cells[index] ? cells[index] : undefined,
+			),
+		)
+	} else if (cells && cells.length) {
+		displayedData = cells.map((cell: Record<string, unknown>) =>
+			Object.assign({}, presentationProps, cell),
+		)
+	} else {
+		return []
+	}
+
+	return computeFunnelTrapezoids({
+		customWidth,
+		dataKey,
+		displayedData,
+		graphicalItemId,
+		lastShapeType,
+		nameKey,
+		offset,
+		reversed,
+		tooltipType,
+	})
+})

package/src/state/selectors/graphicalItemSelectors.ts

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+import { AxisId, defaultAxisId } from "../cartesianAxisSlice"
+import type { CartesianItemState } from "../chartState"
+import { chartSelector } from "./chartSelector"
+import { readChartState } from "../chartState"
+
+function isCartesianItem(item: { type: string }): item is CartesianItemState {
+	return (
+		item.type === "line" ||
+		item.type === "area" ||
+		item.type === "bar" ||
+		item.type === "scatter"
+	)
+}
+
+export const selectXAxisIdFromGraphicalItemId = chartSelector(function selectXAxisIdFromGraphicalItemId(state: ChartState, id: GraphicalItemId): AxisId {
+	const graphicalItems = readChartState(state).graphicalItems
+	const entry = graphicalItems?.[id]
+	if (entry == null || !isCartesianItem(entry)) return defaultAxisId
+	return entry.settings.xAxisId ?? defaultAxisId
+})
+
+export const selectYAxisIdFromGraphicalItemId = chartSelector(function selectYAxisIdFromGraphicalItemId(state: ChartState, id: GraphicalItemId): AxisId {
+	const graphicalItems = readChartState(state).graphicalItems
+	const entry = graphicalItems?.[id]
+	if (entry == null || !isCartesianItem(entry)) return defaultAxisId
+	return entry.settings.yAxisId ?? defaultAxisId
+})

package/src/state/selectors/legendSelectors.ts

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import sortBy from "es-toolkit/compat/sortBy"
+import type { ChartState } from "../store"
+import type { LegendSettings } from "../legendSlice"
+import type { LegendPayload } from "../../component/DefaultLegendContent"
+import type { Size } from "../../util/types"
+import { chartSelector } from "./chartSelector"
+import { readChartState } from "../chartState"
+
+export const selectLegendSettings = (state: ChartState): LegendSettings => {
+	return readChartState(state).legend.settings
+}
+
+export const selectLegendSize = (state: ChartState): Size => {
+	return readChartState(state).legend.size
+}
+
+const selectAllLegendPayload2DArray = (
+	state: ChartState,
+): ReadonlyArray<ReadonlyArray<LegendPayload>> => {
+	return readChartState(state).legend.payload
+}
+
+export const selectLegendPayload = chartSelector(function selectLegendPayload(state: ChartState): ReadonlyArray<LegendPayload> {
+	const payloads = selectAllLegendPayload2DArray(state)
+	const { itemSorter } = selectLegendSettings(state)
+	const flat = payloads.flat(1)
+	return itemSorter ? sortBy(flat, itemSorter) : flat
+})