@solidports/recharts 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

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