@solidports/recharts 0.1.0

package/src/state/cartesianAxisSlice.ts

@@ -0,0 +1,141 @@
+import type {
+	AxisDomain,
+	AxisInterval,
+	AxisTick,
+	DataKey,
+	EvaluatedAxisDomainType,
+	ScaleType,
+	TickProp,
+} from "../util/types"
+import type { TickFormatter } from "../cartesian/CartesianAxis"
+import type { AxisRange } from "./selectors/axisSelectors"
+import type { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition"
+
+/**
+ * @inline
+ */
+export type AxisId = string | number
+export const defaultAxisId: AxisId = 0
+export type XAxisPadding = { left?: number; right?: number } | "gap" | "no-gap"
+export type YAxisPadding = { top?: number; bottom?: number } | "gap" | "no-gap"
+
+export type XAxisOrientation = "top" | "bottom"
+export type YAxisOrientation = "left" | "right"
+
+/**
+ * Controls how Recharts calculates "nice" tick values for an axis.
+ * - `'auto'` (default): nice ticks for linear numeric axes, extending an `'auto'` domain.
+ * - `'adaptive'`: always use the space-efficient algorithm.
+ * - `'snap125'`: snap steps to 1, 2, 2.5, 5 at each order of magnitude.
+ * - `'none'`: no nice ticks.
+ *
+ * @inline
+ */
+export type NiceTicksAlgorithm = "none" | "auto" | "adaptive" | "snap125"
+
+/**
+ * Properties shared in X, Y, and Z axes.
+ * User defined axis settings, coming from props.
+ */
+export type BaseCartesianAxis = {
+	id: AxisId
+	scale:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>
+	/**
+	 * Before creating this object, evaluate the domain type based on the chart layout so that we have the 'auto' resolved.
+	 */
+	type: EvaluatedAxisDomainType
+	/**
+	 * The axis functionality is severely restricted without a dataKey
+	 * - but there is still something left, and the prop is optional
+	 * so this can also be undefined even in real charts.
+	 * There are no defaults.
+	 */
+	dataKey: DataKey<unknown> | undefined
+	unit: string | undefined
+	name: string | undefined
+	allowDuplicatedCategory: boolean
+	allowDataOverflow: boolean
+	reversed: boolean
+	includeHidden: boolean
+	domain: AxisDomain | undefined
+}
+
+export type TicksSettings = {
+	allowDecimals: boolean
+	/**
+	 * We pass the suggested number of ticks to d3 https://d3js.org/d3-scale/linear#linear_ticks
+	 * This number is a suggestion. d3 tries to accommodate it, but it might return more or less ticks than requested:
+	 * > The specified count is only a hint; the scale may return more or fewer values depending on the domain.
+	 *
+	 * If undefined, then d3 decides the number of ticks on its own. The default in d3 is 10,
+	 * but it can vary based on the domain size and other factors.
+	 */
+	tickCount: number | undefined
+	/**
+	 * Ticks can be any type when the axis is the type of category
+	 * Ticks must be numbers when the axis is the type of number
+	 */
+	ticks: ReadonlyArray<AxisTick> | undefined
+	tick: TickProp<unknown>
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks: NiceTicksAlgorithm
+}
+
+/**
+ * These are the external props, visible for users as they set them using our public API.
+ * There is all sorts of internal computed things based on these, but they will come through selectors.
+ *
+ * Properties shared between X and Y axes
+ */
+export type CartesianAxisSettings = BaseCartesianAxis &
+	TicksSettings & {
+		interval: AxisInterval
+		mirror: boolean
+		minTickGap: number
+		angle: number
+		hide: boolean
+		tickFormatter: TickFormatter | undefined
+	}
+
+export type XAxisHeight = number | "auto"
+
+export type XAxisSettings = CartesianAxisSettings & {
+	padding: XAxisPadding
+	height: XAxisHeight
+	orientation: XAxisOrientation
+	heightHistory?: number[]
+}
+
+export type YAxisWidth = number | "auto"
+
+export type YAxisSettings = CartesianAxisSettings & {
+	padding: YAxisPadding
+	width: YAxisWidth
+	orientation: YAxisOrientation
+	widthHistory?: number[]
+}
+
+/**
+ * Z axis is special because it's never displayed. It controls the size of Scatter dots,
+ * but it never displays ticks anywhere.
+ */
+export type ZAxisSettings = BaseCartesianAxis & {
+	range: AxisRange
+}
+
+export type AxisMapState = {
+	xAxis: Record<AxisId, XAxisSettings>
+	yAxis: Record<AxisId, YAxisSettings>
+	zAxis: Record<AxisId, ZAxisSettings>
+}
+

package/src/state/chartDataSlice.ts

@@ -0,0 +1,50 @@
+import type { BrushStartEndIndex } from "../context/brushUpdateContext"
+
+/**
+ * This is the data that's coming through main chart `data` prop
+ * Recharts is very flexible in what it accepts so the type is very flexible too.
+ * This will typically be an object, and various components will provide various `dataKey`
+ * that dictates how to pull data from that object.
+ *
+ * TL;DR: before dataKey
+ *
+ * @inline
+ */
+export type ChartData<DataPointType = unknown> = ReadonlyArray<DataPointType>
+
+/**
+ * So this is the same unknown type as ChartData but this is after the dataKey has been applied.
+ * We still don't know what the type is - that depends on what exactly it was before the dataKey application,
+ * and the dataKey can return whatever anyway - but let's keep it separate as a form of documentation.
+ *
+ * TL;DR: ChartData after dataKey.
+ */
+export type AppliedChartData = ReadonlyArray<{ value: unknown }>
+
+export type ChartDataState = {
+	chartData: ChartData | undefined
+	/**
+	 * store a copy of chart data after it has been processed by each chart's specific
+	 * compute functions. TODO: add other charts besides Sankey
+	 */
+	computedData: unknown | undefined
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the starting data point.
+	 */
+	dataStartIndex: number
+	/**
+	 * Using Brush, users can choose where they want to zoom in.
+	 * This is zero-based index of the last data point.
+	 */
+	dataEndIndex: number
+}
+
+export const initialChartDataState: ChartDataState = {
+	chartData: undefined,
+	computedData: undefined,
+	dataEndIndex: 0,
+	dataStartIndex: 0,
+}
+
+export type BrushStartEndIndexActionPayload = Partial<BrushStartEndIndex>

package/src/state/chartState.ts

@@ -0,0 +1,297 @@
+import type { AxisId, XAxisSettings, YAxisSettings, ZAxisSettings } from "./cartesianAxisSlice"
+import type { AngleAxisSettings, RadiusAxisSettings } from "./polarAxisSlice"
+import type { TooltipState, TooltipInteractionState } from "./tooltipSlice"
+import type { LegendState } from "./legendSlice"
+import type { BrushSettings } from "./brushSlice"
+import type { GraphicalItemId } from "./graphicalItemsSlice"
+import type { ChartDataState } from "./chartDataSlice"
+import { markRawData } from "./rawData"
+import type { ErrorBarsState } from "./errorBarSlice"
+import type { EventSettingsState } from "./eventSettingsSlice"
+import type { ChartLayoutState } from "./layoutSlice"
+import type { ChartOptions } from "./optionsSlice"
+import type { PolarChartState } from "./polarOptionsSlice"
+import type { ReferenceElementState } from "./referenceElementsSlice"
+import type { UpdatableChartOptions } from "./rootPropsSlice"
+import type { ZIndexState } from "./zIndexSlice"
+import { DefaultZIndexes } from "../zIndex/DefaultZIndexes"
+import type { RenderedTicksState } from "./renderedTicksSlice"
+import { createInitialRenderedTicksState } from "./renderedTicksSlice"
+import type { LineSettings } from "./types/LineSettings"
+import type { AreaSettings } from "./types/AreaSettings"
+import type { BarSettings } from "./types/BarSettings"
+import type { ScatterSettings } from "./types/ScatterSettings"
+import type { PieSettings } from "./types/PieSettings"
+import type { RadarSettings } from "./types/RadarSettings"
+import type { RadialBarSettings } from "./types/RadialBarSettings"
+
+/** Phase 2+: axis entry wraps settings; leaves room for computed fields (domain, scale) in Phase 3+. */
+export type XAxisState = { settings: XAxisSettings }
+
+/** Phase 2+: axis entry wraps settings; leaves room for computed fields (domain, scale) in Phase 3+. */
+export type YAxisState = { settings: YAxisSettings }
+
+/** Phase 2+: axis entry wraps settings; leaves room for computed fields (domain, scale) in Phase 3+. */
+export type ZAxisState = { settings: ZAxisSettings }
+
+/** Phase 4: wraps settings for fine-grained Solid store reactivity. */
+export type AngleAxisState = { settings: AngleAxisSettings }
+
+/** Phase 4: wraps settings for fine-grained Solid store reactivity. */
+export type RadiusAxisState = { settings: RadiusAxisSettings }
+
+/** Discriminated union for cartesian graphical item state entries. */
+export type LineState = { type: "line"; settings: LineSettings }
+/** Discriminated union for cartesian graphical item state entries. */
+export type AreaState = { type: "area"; settings: AreaSettings }
+/** Discriminated union for cartesian graphical item state entries. */
+export type BarState = { type: "bar"; settings: BarSettings }
+/** Discriminated union for cartesian graphical item state entries. */
+export type ScatterState = { type: "scatter"; settings: ScatterSettings }
+/** Union of all cartesian item state shapes. */
+export type CartesianItemState = LineState | AreaState | BarState | ScatterState
+
+/** Discriminated union for polar graphical item state entries. */
+export type PieState = { type: "pie"; settings: PieSettings }
+/** Discriminated union for polar graphical item state entries. */
+export type RadarState = { type: "radar"; settings: RadarSettings }
+/** Discriminated union for polar graphical item state entries. */
+export type RadialBarState = { type: "radialBar"; settings: RadialBarSettings }
+/** Union of all polar item state shapes. */
+export type PolarItemState = PieState | RadarState | RadialBarState
+
+/** Union of all graphical item state shapes. */
+export type ItemState = CartesianItemState | PolarItemState
+
+/** Chart-level animation defaults. Per-item match/interpolate live on item props. */
+export type AnimationState = {
+	isAnimationActive: boolean | "auto"
+	animationDuration: number
+	animationEasing: string
+}
+
+/** BrushState is BrushSettings for Phase 1; alias for clarity in ChartState. */
+export type BrushState = BrushSettings
+
+/** Full chart state held in a Solid createStore. */
+export type ChartState = {
+	animation: AnimationState
+	brush: BrushState
+	cartesianAxes: {
+		xAxis: Record<AxisId, XAxisState>
+		yAxis: Record<AxisId, YAxisState>
+		zAxis: Record<AxisId, ZAxisState>
+	}
+	chartData: ChartDataState
+	chartSize: { width: number; height: number }
+	errorBars: ErrorBarsState
+	eventSettings: EventSettingsState
+	graphicalItems: Record<GraphicalItemId, ItemState>
+	layout: ChartLayoutState
+	legend: LegendState
+	margin: ChartLayoutState["margin"]
+	options: ChartOptions
+	polarAxes: {
+		angleAxis: Record<AxisId, AngleAxisState>
+		radiusAxis: Record<AxisId, RadiusAxisState>
+	}
+	polarOptions: PolarChartState
+	referenceElements: ReferenceElementState
+	renderedTicks: RenderedTicksState
+	rootProps: UpdatableChartOptions
+	tooltip: TooltipState
+	zIndex: ZIndexState
+}
+
+/* Factories mirror each slice's initial state. Literal construction (not JSON roundtrip) so function
+   fields (e.g. LegendItemSorter) survive. Keep in sync with the slice files. Never export a singleton. */
+
+function makeBrushState(): BrushState {
+	return { height: 0, padding: { bottom: 0, left: 0, right: 0, top: 0 }, width: 0, x: 0, y: 0 }
+}
+
+function makeLegendState(): LegendState {
+	return {
+		payload: [],
+		settings: {
+			align: "center",
+			itemSorter: "value",
+			layout: "horizontal",
+			offset: 0,
+			position: undefined,
+			verticalAlign: "middle",
+		},
+		size: { height: 0, width: 0 },
+	}
+}
+
+function makeTooltipState(): TooltipState {
+	const noInteraction: TooltipInteractionState = {
+		active: false,
+		coordinate: undefined,
+		dataKey: undefined,
+		graphicalItemId: undefined,
+		index: null,
+	}
+	return {
+		axisInteraction: { click: { ...noInteraction }, hover: { ...noInteraction } },
+		itemInteraction: { click: { ...noInteraction }, hover: { ...noInteraction } },
+		keyboardInteraction: { ...noInteraction },
+		settings: { active: false, axisId: 0, defaultIndex: undefined, shared: undefined, trigger: "hover" },
+		syncInteraction: {
+			active: false,
+			coordinate: undefined,
+			dataKey: undefined,
+			graphicalItemId: undefined,
+			index: null,
+			label: undefined,
+			sourceViewBox: undefined,
+		},
+		tooltipItemPayloads: [],
+	}
+}
+
+function makeChartDataState(): ChartDataState {
+	return {
+		chartData: undefined,
+		computedData: undefined,
+		dataEndIndex: 0,
+		dataStartIndex: 0,
+	}
+}
+
+/** Chart data seed for a chart root; ChartDataContextProvider keeps it in sync after mount. */
+export function createInitialChartDataState(data: ChartDataState["chartData"]): ChartDataState {
+	return {
+		...makeChartDataState(),
+		chartData: markRawData(data),
+		dataEndIndex: data != null && data.length > 0 ? data.length - 1 : 0,
+	}
+}
+
+function makeEventSettingsState(): EventSettingsState {
+	return {
+		throttleDelay: "raf",
+		throttledEvents: ["mousemove", "touchmove", "pointermove", "scroll", "wheel"],
+	}
+}
+
+function makeLayoutState(): ChartLayoutState {
+	return {
+		height: 0,
+		layoutType: "horizontal",
+		margin: { bottom: 5, left: 5, right: 5, top: 5 },
+		scale: 1,
+		width: 0,
+	}
+}
+
+/**
+ * Layout seed for a chart root. Report components keep the store in sync after
+ * mount; seeding lets the first render use the declared size, margin, and layout.
+ */
+export function createInitialLayoutState(seed: {
+	width?: unknown
+	height?: unknown
+	margin?: Partial<ChartLayoutState["margin"]>
+	layoutType?: ChartLayoutState["layoutType"]
+}): ChartLayoutState {
+	const layout = makeLayoutState()
+	const isPositive = (n: unknown): n is number => typeof n === "number" && Number.isFinite(n) && n > 0
+	return {
+		...layout,
+		height: isPositive(seed.height) ? seed.height : layout.height,
+		layoutType: seed.layoutType ?? layout.layoutType,
+		/* Same resolution as ReportChartMargin (upstream setMargin): a provided margin
+		   fills missing sides with 0, not with the default margin. */
+		margin:
+			seed.margin == null
+				? layout.margin
+				: {
+						bottom: seed.margin.bottom ?? 0,
+						left: seed.margin.left ?? 0,
+						right: seed.margin.right ?? 0,
+						top: seed.margin.top ?? 0,
+					},
+		width: isPositive(seed.width) ? seed.width : layout.width,
+	}
+}
+
+function makeOptionsState(): ChartOptions {
+	return {
+		chartName: "",
+		defaultTooltipEventType: "axis",
+		eventEmitter: undefined,
+		tooltipPayloadSearcher: () => undefined,
+	}
+}
+
+function makeReferenceElementsState(): ReferenceElementState {
+	return { areas: [], dots: [], lines: [] }
+}
+
+function makeRootPropsState(): UpdatableChartOptions {
+	return {
+		accessibilityLayer: true,
+		barCategoryGap: "10%",
+		barGap: 4,
+		barSize: undefined,
+		baseValue: undefined,
+		className: undefined,
+		maxBarSize: undefined,
+		reverseStackOrder: false,
+		stackOffset: "none",
+		syncId: undefined,
+		syncMethod: "index",
+	}
+}
+
+function makeZIndexState(): ZIndexState {
+	const zIndexMap: ZIndexState["zIndexMap"] = {}
+	for (const current of Object.values(DefaultZIndexes)) {
+		zIndexMap[current] = { consumers: 0, element: undefined, panoramaElement: undefined }
+	}
+	return { zIndexMap }
+}
+
+/** Identity helper: selectors still call this while ChartState is being deleted. */
+export function readChartState(store: ChartState): ChartState {
+	return store
+}
+
+/** Returns a fresh ChartState per call. Always use this to seed createStore — never share an instance. */
+export function createInitialChartState(overrides?: Partial<ChartState>): ChartState {
+	const layout = overrides?.layout ?? makeLayoutState()
+	return {
+		animation: { animationDuration: 1500, animationEasing: "ease", isAnimationActive: "auto" },
+		brush: makeBrushState(),
+		cartesianAxes: { xAxis: {}, yAxis: {}, zAxis: {} },
+		chartData: makeChartDataState(),
+		chartSize: { height: layout.height, width: layout.width },
+		errorBars: {},
+		eventSettings: makeEventSettingsState(),
+		graphicalItems: {},
+		layout,
+		legend: makeLegendState(),
+		margin: { bottom: 5, left: 5, right: 5, top: 5 },
+		polarAxes: { angleAxis: {}, radiusAxis: {} },
+		polarOptions: null,
+		referenceElements: makeReferenceElementsState(),
+		renderedTicks: createInitialRenderedTicksState(),
+		rootProps: makeRootPropsState(),
+		tooltip: makeTooltipState(),
+		zIndex: makeZIndexState(),
+		...overrides,
+		options: ownChartOptions(overrides?.options ?? makeOptionsState()),
+	}
+}
+
+/*
+ * Chart modules pass module-level options (and tooltip event type lists). Solid's store maps
+ * every raw object it wraps to its target in one global WeakMap, so a shared constant would
+ * keep the last store that wrapped it alive and hand the next chart that store's proxy.
+ */
+function ownChartOptions(options: ChartOptions): ChartOptions {
+	const types = options.validateTooltipEventTypes
+	return types == null ? { ...options } : { ...options, validateTooltipEventTypes: [...types] }
+}

package/src/state/errorBarSlice.ts

@@ -0,0 +1,29 @@
+import type { ErrorBarDirection } from "../cartesian/ErrorBar"
+import type { DataKey } from "../util/types"
+import type { GraphicalItemId } from "./graphicalItemsSlice"
+
+/**
+ * ErrorBars have lot more settings but all the others are scoped to the component itself.
+ * Only some of them required to be reported to the global store because XAxis and YAxis need to know
+ * if the error bar is contributing to extending the axis domain.
+ */
+export type ErrorBarsSettings = {
+	/**
+	 * The direction is only used in Scatter chart, and decided based on ChartLayout in other charts.
+	 */
+	direction: ErrorBarDirection
+	/**
+	 * The dataKey decides which property from the data will each individual ErrorBar use.
+	 * If it so happens that the ErrorBar data are bigger than the axis domain,
+	 * the error bar data will stretch the axis domain.
+	 */
+	dataKey: DataKey<unknown>
+	/*
+	 * ErrorBar props say that it has explicit xAxis and yAxis props,
+	 * but actually it always inherits the xAxis and yAxis defined on the parent graphical item.
+	 */
+}
+
+export type ErrorBarsState = Record<GraphicalItemId, ReadonlyArray<ErrorBarsSettings>>
+
+export const initialErrorBarState: ErrorBarsState = {}

package/src/state/eventSettingsSlice.ts

@@ -0,0 +1,8 @@
+import type { EventThrottlingProps } from "../util/types"
+
+export type EventSettingsState = Required<EventThrottlingProps>
+
+export const initialEventSettingsState: EventSettingsState = {
+	throttleDelay: "raf",
+	throttledEvents: ["mousemove", "touchmove", "pointermove", "scroll", "wheel"],
+}

package/src/state/events.ts

@@ -0,0 +1,76 @@
+/* eslint-disable import/no-cycle */
+import type { CategoricalChartFunc } from "../chart/types"
+import type { HTMLMousePointer } from "../util/types"
+import type { ChartState } from "./chartState"
+import {
+	mouseClickAction,
+	mouseMoveAction,
+} from "./mouseEventsMiddleware"
+import {
+	blurAction,
+	focusAction,
+	keyDownAction,
+} from "./keyboardEventsMiddleware"
+import { touchEventAction } from "./touchEventsMiddleware"
+import { externalEventAction } from "./externalEventsMiddleware"
+
+import { type SetStoreFunction } from '../util/solid-1-compat';
+export type ChartEventHandlers = {
+	handleMouseClick: (mousePointer: HTMLMousePointer) => void
+	handleMouseMove: (mousePointer: HTMLMousePointer) => void
+	handleFocus: () => void
+	handleBlur: () => void
+	handleKeyDown: (key: KeyboardEvent["key"]) => void
+	handleTouchMove: (touchEvent: TouchEvent) => void
+	handleExternalEvent: <E extends Event>(
+		event: E,
+		handler: CategoricalChartFunc<E> | undefined,
+	) => void
+}
+
+/**
+ * Native Solid event-handler factory. Wraps the per-middleware action thunks
+ * (`mouseClickAction`/`mouseMoveAction`/`focusAction`/`blurAction`/
+ * `keyDownAction`/`touchEventAction`/`externalEventAction`) into a single
+ * composed object exposed on the store context.
+ *
+ * Behavior matches the underlying action wrappers: synchronous state mutation
+ * so that subsequent `handleExternalEvent` reads observe the freshly-updated
+ * tooltip state in the same tick (chartEvents contract). The throttled
+ * `createMouseEventHandlers` etc. factories remain on their middleware
+ * modules for direct consumers but are not used here.
+ *
+ * `actions` is reserved for a later migration that replaces the direct
+ * `setStore` calls inside each thunk with `actions.<method>()`.
+ */
+export function createEventHandlers(
+	store: ChartState,
+	setStore: SetStoreFunction<ChartState>,
+): ChartEventHandlers {
+	return {
+		handleBlur(): void {
+			blurAction()(setStore, store)
+		},
+		handleExternalEvent<E extends Event>(
+			event: E,
+			handler: CategoricalChartFunc<E> | undefined,
+		): void {
+			externalEventAction({ handler, reactEvent: event })(setStore, store)
+		},
+		handleFocus(): void {
+			focusAction()(setStore, store)
+		},
+		handleKeyDown(key: KeyboardEvent["key"]): void {
+			keyDownAction(key)(setStore, store)
+		},
+		handleMouseClick(mousePointer: HTMLMousePointer): void {
+			mouseClickAction(mousePointer)(setStore, store)
+		},
+		handleMouseMove(mousePointer: HTMLMousePointer): void {
+			mouseMoveAction(mousePointer)(setStore, store)
+		},
+		handleTouchMove(touchEvent: TouchEvent): void {
+			touchEventAction(touchEvent)(setStore, store)
+		},
+	}
+}