@octanejs/recharts 0.1.0

package/src/context/ErrorBarContext.tsrx

@@ -0,0 +1,53 @@
+// Port of context/ErrorBarContext.tsx — the per-graphical-item settings an
+// <ErrorBar> child reads, plus the reporter that registers error-bar presence
+// in the store.
+import { createContext, useContext, useEffect, useRef } from 'octane';
+import { addErrorBar, removeErrorBar, replaceErrorBar } from '../state/errorBarSlice';
+import { useAppDispatch } from '../state/hooks';
+import { useGraphicalItemId } from './RegisterGraphicalItemId.tsrx';
+
+const initialContextState = {
+	data: [],
+	xAxisId: 'xAxis-0',
+	yAxisId: 'yAxis-0',
+	dataPointFormatter: () => ({ x: 0, y: 0, value: 0 }),
+	errorBarOffset: 0,
+};
+
+const ErrorBarContext = createContext(initialContextState);
+
+export function SetErrorBarContext(props) {
+	const { children, ...rest } = props;
+	return <ErrorBarContext.Provider value={rest}>{children}</ErrorBarContext.Provider>;
+}
+
+export const useErrorBarContext = () => useContext(ErrorBarContext);
+
+export function ReportErrorBarSettings(props) {
+	const dispatch = useAppDispatch();
+	const graphicalItemId = useGraphicalItemId();
+	const prevPropsRef = useRef(null);
+	useEffect(() => {
+		if (graphicalItemId == null) {
+			// ErrorBar outside a graphical item context does not do anything.
+			return;
+		}
+		if (prevPropsRef.current === null) {
+			dispatch(addErrorBar({ itemId: graphicalItemId, errorBar: props }));
+		} else if (prevPropsRef.current !== props) {
+			dispatch(
+				replaceErrorBar({ itemId: graphicalItemId, prev: prevPropsRef.current, next: props }),
+			);
+		}
+		prevPropsRef.current = props;
+	}, [dispatch, graphicalItemId, props]);
+	useEffect(() => {
+		return () => {
+			if (prevPropsRef.current != null && graphicalItemId != null) {
+				dispatch(removeErrorBar({ itemId: graphicalItemId, errorBar: prevPropsRef.current }));
+				prevPropsRef.current = null;
+			}
+		};
+	}, [dispatch, graphicalItemId]);
+	return null;
+}

package/src/context/PanoramaContext.ts

@@ -0,0 +1,10 @@
+// Port of context/PanoramaContext.ts. A "panorama" chart is the mini-chart
+// preview inside <Brush> — it renders WITHOUT its own store provider and
+// inherits the parent chart's store.
+import { createContext, useContext } from 'octane';
+
+export const PanoramaContext = createContext<boolean | null>(null);
+
+export function useIsPanorama(): boolean {
+	return useContext(PanoramaContext) != null;
+}

package/src/context/RegisterGraphicalItemId.tsrx

@@ -0,0 +1,19 @@
+// Port of context/RegisterGraphicalItemId.tsx — mints a stable per-item id
+// (user override wins) and provides it to descendants via context. `children`
+// is a RENDER PROP receiving the resolved id.
+import { createContext, useContext } from 'octane';
+import { useUniqueId } from '../util/useUniqueId';
+
+const GraphicalItemIdContext = createContext(undefined);
+
+export function RegisterGraphicalItemId(props) {
+	const { id, type, children } = props;
+	const resolvedId = useUniqueId('recharts-' + type, id);
+	return <GraphicalItemIdContext.Provider value={resolvedId}>{children(
+		resolvedId,
+	)}</GraphicalItemIdContext.Provider>;
+}
+
+export function useGraphicalItemId() {
+	return useContext(GraphicalItemIdContext);
+}

package/src/context/accessibilityContext.js

@@ -0,0 +1,10 @@
+// Vendored verbatim from recharts@3.9.2 es6/context/accessibilityContext.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { useAppSelector } from '../state/hooks';
+export var useAccessibilityLayer = () => {
+	var _useAppSelector;
+	return (_useAppSelector = useAppSelector((state) => state.rootProps.accessibilityLayer)) !==
+		null && _useAppSelector !== void 0
+		? _useAppSelector
+		: true;
+};

package/src/context/chartDataContext.ts

@@ -0,0 +1,57 @@
+// Port of context/chartDataContext.tsx — reporter components that publish the
+// chart's `data` prop into the store, plus the read hooks.
+import { useEffect } from 'octane';
+import { setChartData, setComputedData } from '../state/chartDataSlice';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { useIsPanorama } from './PanoramaContext';
+import { splitSlot, subSlot } from '../internal';
+
+export const ChartDataContextProvider = (props: { chartData: unknown }): null => {
+	const { chartData } = props;
+	const dispatch = useAppDispatch();
+	const isPanorama = useIsPanorama();
+	useEffect(() => {
+		if (isPanorama) {
+			// Panorama mode reuses data from the main chart, so we must not overwrite it here.
+			return () => {
+				// there is nothing to clean up
+			};
+		}
+		dispatch(setChartData(chartData));
+		return () => {
+			dispatch(setChartData(undefined));
+		};
+	}, [chartData, dispatch, isPanorama]);
+	return null;
+};
+
+export const SetComputedData = (props: { computedData: unknown }): null => {
+	const { computedData } = props;
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(setComputedData(computedData));
+		return () => {
+			dispatch(setChartData(undefined));
+		};
+	}, [computedData, dispatch]);
+	return null;
+};
+
+const selectChartData = (state: any) => state.chartData.chartData;
+
+/** @deprecated use one of the other selectors instead. */
+export const useChartData = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectChartData, subSlot(slot, 'cdc:data'));
+};
+
+const selectDataIndex = (state: any) => {
+	const { dataStartIndex, dataEndIndex } = state.chartData;
+	return { startIndex: dataStartIndex, endIndex: dataEndIndex };
+};
+
+/** startIndex and endIndex are data boundaries, set through Brush. */
+export const useDataIndex = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectDataIndex, subSlot(slot, 'cdc:index'));
+};

package/src/context/chartLayoutContext.ts

@@ -0,0 +1,171 @@
+// Port of context/chartLayoutContext.ts — layout/size/margin/viewBox selector
+// hooks plus the reporter components that publish chart dimensions into the
+// layout slice. Hooks that read the store MULTIPLE times thread explicit
+// sub-slots (binding convention — see ../internal).
+import { useEffect } from 'octane';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import { setChartSize, setMargin } from '../state/layoutSlice';
+import {
+	selectChartOffsetInternal,
+	selectChartViewBox,
+} from '../state/selectors/selectChartOffsetInternal';
+import { selectChartHeight, selectChartWidth } from '../state/selectors/containerSelectors';
+import { useIsPanorama } from './PanoramaContext';
+import { selectBrushDimensions, selectBrushSettings } from '../state/selectors/brushSelectors';
+import { useResponsiveContainerContext } from '../component/ResponsiveContainer';
+import { isPositiveNumber } from '../util/isWellBehavedNumber';
+import { splitSlot, subSlot } from '../internal';
+
+export function cartesianViewBoxToTrapezoid(box: any) {
+	if (!box) {
+		return undefined;
+	}
+	return {
+		x: box.x,
+		y: box.y,
+		upperWidth: 'upperWidth' in box ? box.upperWidth : box.width,
+		lowerWidth: 'lowerWidth' in box ? box.lowerWidth : box.width,
+		width: box.width,
+		height: box.height,
+	};
+}
+
+export const useViewBox = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	const panorama = useIsPanorama();
+	const rootViewBox = useAppSelector(selectChartViewBox, subSlot(slot, 'clc:viewBox'));
+	const brushDimensions = useAppSelector(selectBrushDimensions, subSlot(slot, 'clc:brushDim'));
+	const brushPadding = useAppSelector(selectBrushSettings, subSlot(slot, 'clc:brushSet'))?.padding;
+	if (!panorama || !brushDimensions || !brushPadding) {
+		return rootViewBox;
+	}
+	return {
+		width: brushDimensions.width - brushPadding.left - brushPadding.right,
+		height: brushDimensions.height - brushPadding.top - brushPadding.bottom,
+		x: brushPadding.left,
+		y: brushPadding.top,
+	};
+};
+
+const manyComponentsThrowErrorsIfOffsetIsUndefined = {
+	top: 0,
+	bottom: 0,
+	left: 0,
+	right: 0,
+	width: 0,
+	height: 0,
+	brushBottom: 0,
+};
+
+/**
+ * For internal use only. If you want this information, `import { useOffset }
+ * from 'recharts'` instead. Returns the offset of the chart in pixels.
+ */
+export const useOffsetInternal = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return (
+		useAppSelector(selectChartOffsetInternal, subSlot(slot, 'clc:offset')) ??
+		manyComponentsThrowErrorsIfOffsetIsUndefined
+	);
+};
+
+/** The width of the chart in pixels, or `undefined` outside a chart context. */
+export const useChartWidth = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectChartWidth, subSlot(slot, 'clc:width'));
+};
+
+/** The height of the chart in pixels, or `undefined` outside a chart context. */
+export const useChartHeight = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectChartHeight, subSlot(slot, 'clc:height'));
+};
+
+const selectMargin = (state: any) => state.layout.margin;
+
+/** The chart's margin (empty space around the plot), or `undefined` outside a chart. */
+export const useMargin = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectMargin, subSlot(slot, 'clc:margin'));
+};
+
+export const selectChartLayout = (state: any) => state.layout.layoutType;
+
+/**
+ * The chart layout as configured by the chart (`horizontal`/`vertical` for
+ * cartesian, `centric`/`radial` for polar), or `undefined` outside a chart.
+ * @deprecated prefer useCartesianChartLayout / usePolarChartLayout.
+ */
+export const useChartLayout = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectChartLayout, subSlot(slot, 'clc:layout'));
+};
+
+/** The layout only when cartesian (`horizontal` / `vertical`), else undefined. */
+export const useCartesianChartLayout = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	const layout = useAppSelector(selectChartLayout, subSlot(slot, 'clc:layout'));
+	if (layout === 'horizontal' || layout === 'vertical') {
+		return layout;
+	}
+	return undefined;
+};
+
+export const selectPolarChartLayout = (state: any) => {
+	const layout = state.layout.layoutType;
+	if (layout === 'centric' || layout === 'radial') {
+		return layout;
+	}
+	return undefined;
+};
+
+/** The layout only when polar (`centric` / `radial`), else undefined. */
+export const usePolarChartLayout = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	return useAppSelector(selectPolarChartLayout, subSlot(slot, 'clc:polarLayout'));
+};
+
+/** True when rendered inside a chart context (all charts provide a layout). */
+export const useIsInChartContext = (...rest: any[]) => {
+	const [, slot] = splitSlot(rest);
+	const layout = useAppSelector(selectChartLayout, subSlot(slot, 'clc:layout'));
+	return layout !== undefined;
+};
+
+export const ReportChartSize = (props: { width: number; height: number }): null => {
+	const dispatch = useAppDispatch();
+	// Skip dispatching in a panorama chart: the ROOT chart decides these, and
+	// Brush reads them from the store (stability avoids a re-render cycle).
+	const isPanorama = useIsPanorama();
+	const { width: widthFromProps, height: heightFromProps } = props;
+	const responsiveContainerCalculations = useResponsiveContainerContext();
+	let width = widthFromProps;
+	let height = heightFromProps;
+	if (responsiveContainerCalculations) {
+		// ResponsiveContainer-provided dimensions win over explicit props (3.x
+		// behavior, kept for backwards compatibility).
+		width =
+			responsiveContainerCalculations.width > 0
+				? responsiveContainerCalculations.width
+				: widthFromProps;
+		height =
+			responsiveContainerCalculations.height > 0
+				? responsiveContainerCalculations.height
+				: heightFromProps;
+	}
+	useEffect(() => {
+		if (!isPanorama && isPositiveNumber(width) && isPositiveNumber(height)) {
+			dispatch(setChartSize({ width, height }));
+		}
+	}, [dispatch, isPanorama, width, height]);
+	return null;
+};
+
+export const ReportChartMargin = (props: { margin: unknown }): null => {
+	const { margin } = props;
+	const dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(setMargin(margin));
+	}, [dispatch, margin]);
+	return null;
+};

package/src/context/legendPortalContext.ts

@@ -0,0 +1,5 @@
+// Port of context/legendPortalContext.ts.
+import { createContext, useContext } from 'octane';
+
+export const LegendPortalContext = createContext<HTMLElement | null>(null);
+export const useLegendPortal = () => useContext(LegendPortalContext);

package/src/context/tooltipContext.js

@@ -0,0 +1,55 @@
+// Vendored verbatim from recharts@3.9.2 es6/context/tooltipContext.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { useAppDispatch } from '../state/hooks';
+import {
+	mouseLeaveItem,
+	setActiveClickItemIndex,
+	setActiveMouseOverItemIndex,
+} from '../state/tooltipSlice';
+
+/**
+ * Some graphical items choose to provide more information to the tooltip
+ * and some do not.
+ */
+
+export var useMouseEnterItemDispatch = (onMouseEnterFromProps, dataKey, graphicalItemId) => {
+	var dispatch = useAppDispatch();
+	return (data, index) => (event) => {
+		onMouseEnterFromProps === null ||
+			onMouseEnterFromProps === void 0 ||
+			onMouseEnterFromProps(data, index, event);
+		dispatch(
+			setActiveMouseOverItemIndex({
+				activeIndex: String(index),
+				activeDataKey: dataKey,
+				activeCoordinate: data.tooltipPosition,
+				activeGraphicalItemId: graphicalItemId,
+			}),
+		);
+	};
+};
+export var useMouseLeaveItemDispatch = (onMouseLeaveFromProps) => {
+	var dispatch = useAppDispatch();
+	return (data, index) => (event) => {
+		onMouseLeaveFromProps === null ||
+			onMouseLeaveFromProps === void 0 ||
+			onMouseLeaveFromProps(data, index, event);
+		dispatch(mouseLeaveItem());
+	};
+};
+export var useMouseClickItemDispatch = (onMouseClickFromProps, dataKey, graphicalItemId) => {
+	var dispatch = useAppDispatch();
+	return (data, index) => (event) => {
+		onMouseClickFromProps === null ||
+			onMouseClickFromProps === void 0 ||
+			onMouseClickFromProps(data, index, event);
+		dispatch(
+			setActiveClickItemIndex({
+				activeIndex: String(index),
+				activeDataKey: dataKey,
+				activeCoordinate: data.tooltipPosition,
+				activeGraphicalItemId: graphicalItemId,
+			}),
+		);
+	};
+};

package/src/context/tooltipPortalContext.ts

@@ -0,0 +1,5 @@
+// Port of context/tooltipPortalContext.ts.
+import { createContext, useContext } from 'octane';
+
+export const TooltipPortalContext = createContext<HTMLElement | null>(null);
+export const useTooltipPortal = () => useContext(TooltipPortalContext);