@solidports/recharts 0.1.0 → 0.1.1

package/src/state/cartesianAxisSlice.ts

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

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

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

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

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

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