@octanejs/visx 0.1.0

package/src/shape/util/D3ShapeFactories.ts

@@ -0,0 +1,125 @@
+import {
+	arc as d3Arc,
+	area as d3Area,
+	line as d3Line,
+	pie as d3Pie,
+	radialLine as d3RadialLine,
+	stack as d3Stack,
+} from 'd3-shape';
+import setNumberOrNumberAccessor from './setNumberOrNumberAccessor';
+import type {
+	ArcPathConfig,
+	AreaPathConfig,
+	LinePathConfig,
+	PiePathConfig,
+	RadialLinePathConfig,
+	StackPathConfig,
+} from '../types';
+import stackOrder from './stackOrder';
+import stackOffset from './stackOffset';
+
+export function arc<Datum>({
+	innerRadius,
+	outerRadius,
+	cornerRadius,
+	startAngle,
+	endAngle,
+	padAngle,
+	padRadius,
+}: ArcPathConfig<Datum> = {}) {
+	const path = d3Arc<Datum>();
+	if (innerRadius != null) setNumberOrNumberAccessor(path.innerRadius, innerRadius);
+	if (outerRadius != null) setNumberOrNumberAccessor(path.outerRadius, outerRadius);
+	if (cornerRadius != null) setNumberOrNumberAccessor(path.cornerRadius, cornerRadius);
+	if (startAngle != null) setNumberOrNumberAccessor(path.startAngle, startAngle);
+	if (endAngle != null) setNumberOrNumberAccessor(path.endAngle, endAngle);
+	if (padAngle != null) setNumberOrNumberAccessor(path.padAngle, padAngle);
+	if (padRadius != null) setNumberOrNumberAccessor(path.padRadius, padRadius);
+
+	return path;
+}
+
+export function area<Datum>({ x, x0, x1, y, y0, y1, defined, curve }: AreaPathConfig<Datum> = {}) {
+	const path = d3Area<Datum>();
+	if (x) setNumberOrNumberAccessor(path.x, x);
+	if (x0) setNumberOrNumberAccessor(path.x0, x0);
+	if (x1) setNumberOrNumberAccessor(path.x1, x1);
+	if (y) setNumberOrNumberAccessor(path.y, y);
+	if (y0) setNumberOrNumberAccessor(path.y0, y0);
+	if (y1) setNumberOrNumberAccessor(path.y1, y1);
+	if (defined) path.defined(defined);
+	if (curve) path.curve(curve);
+
+	return path;
+}
+
+export function line<Datum>({ x, y, defined, curve }: LinePathConfig<Datum> = {}) {
+	const path = d3Line<Datum>();
+	if (x) setNumberOrNumberAccessor(path.x, x);
+	if (y) setNumberOrNumberAccessor(path.y, y);
+	if (defined) path.defined(defined);
+	if (curve) path.curve(curve);
+
+	return path;
+}
+
+export function pie<Datum>({
+	startAngle,
+	endAngle,
+	padAngle,
+	value,
+	sort,
+	sortValues,
+}: PiePathConfig<Datum> = {}) {
+	const path = d3Pie<Datum>();
+
+	// In d3-shape v3+, sortValues defaults to descending sort.
+	// To maintain visx's behavior of preserving input order by default,
+	// we explicitly set sortValues to null when neither sort nor sortValues is provided.
+	// Note: d3's pie generator clears sortValues when sort is set, and vice versa.
+	if (sortValues !== undefined) {
+		path.sortValues(sortValues);
+	} else if (sort === undefined) {
+		// Neither provided - disable sorting to preserve input order
+		path.sortValues(null);
+	} else if (sort === null) {
+		// explicit null: clear comparator
+		path.sort(null);
+	} else {
+		// here sort is narrowed to a comparator function
+		path.sort(sort);
+	}
+
+	if (value != null) path.value(value);
+
+	if (padAngle != null) setNumberOrNumberAccessor(path.padAngle, padAngle);
+	if (startAngle != null) setNumberOrNumberAccessor(path.startAngle, startAngle);
+	if (endAngle != null) setNumberOrNumberAccessor(path.endAngle, endAngle);
+
+	return path;
+}
+
+export function radialLine<Datum>({
+	angle,
+	radius,
+	defined,
+	curve,
+}: RadialLinePathConfig<Datum> = {}) {
+	const path = d3RadialLine<Datum>();
+	if (angle) setNumberOrNumberAccessor(path.angle, angle);
+	if (radius) setNumberOrNumberAccessor(path.radius, radius);
+	if (defined) path.defined(defined);
+	if (curve) path.curve(curve);
+
+	return path;
+}
+
+export function stack<Datum, Key>({ keys, value, order, offset }: StackPathConfig<Datum, Key>) {
+	const path = d3Stack<Datum, Key>();
+	if (keys) path.keys(keys);
+	if (value) setNumberOrNumberAccessor(path.value, value);
+	if (order) path.order(stackOrder(order));
+	if (offset) path.offset(stackOffset(offset));
+
+	return path;
+}

package/src/shape/util/accessors.ts

@@ -0,0 +1,25 @@
+import type { $TSFIXME } from '../types';
+
+export function getX(l: any) {
+	return typeof l?.x === 'number' ? l?.x : 0;
+}
+
+export function getY(l: any) {
+	return typeof l?.y === 'number' ? l?.y : 0;
+}
+
+export function getSource(l: $TSFIXME) {
+	return l?.source;
+}
+
+export function getTarget(l: $TSFIXME) {
+	return l?.target;
+}
+
+export function getFirstItem(d: $TSFIXME[]) {
+	return d?.[0];
+}
+
+export function getSecondItem(d: $TSFIXME[]) {
+	return d?.[1];
+}

package/src/shape/util/getBandwidth.ts

@@ -0,0 +1,11 @@
+import type { AnyD3Scale } from '@octanejs/visx/scale';
+
+export default function getBandwidth(scale: AnyD3Scale) {
+	if ('bandwidth' in scale) {
+		return scale.bandwidth();
+	}
+
+	const range = scale.range();
+	const domain = scale.domain();
+	return Math.abs(range[range.length - 1] - range[0]) / domain.length;
+}

package/src/shape/util/getOrCreateMeasurementElement.ts

@@ -0,0 +1,28 @@
+const SVG_NAMESPACE_URL = 'http://www.w3.org/2000/svg';
+
+export default function getOrCreateMeasurementElement(elementId: string) {
+	let pathElement = document.getElementById(elementId) as SVGPathElement | null;
+
+	// create a single path element if not done already
+	if (!pathElement) {
+		const svg = document.createElementNS(SVG_NAMESPACE_URL, 'svg');
+
+		// not visible
+		svg.setAttribute('aria-hidden', 'true');
+		svg.style.opacity = '0';
+		svg.style.width = '0';
+		svg.style.height = '0';
+		// off screen
+		svg.style.position = 'absolute';
+		svg.style.top = '-100%';
+		svg.style.left = '-100%';
+		// no mouse events
+		svg.style.pointerEvents = 'none';
+		pathElement = document.createElementNS(SVG_NAMESPACE_URL, 'path');
+		pathElement.setAttribute('id', elementId);
+		svg.appendChild(pathElement);
+		document.body.appendChild(svg);
+	}
+
+	return pathElement;
+}

package/src/shape/util/getSplitLineSegments.ts

@@ -0,0 +1,100 @@
+interface PointInSegment {
+	x: number | undefined;
+	y: number | undefined;
+}
+
+/** Different algorithms to segment the line */
+export type LineSegmentation = 'x' | 'y' | 'length';
+
+type LineSegments = { x: number; y: number }[][];
+
+export interface GetLineSegmentsConfig {
+	/** Full path `d` attribute to be broken up into `n` segments. */
+	path: string;
+	/** Array of length `n`, where `n` is the number of segments. */
+	pointsInSegments: PointInSegment[][];
+	/**
+	 * How to segment the line
+	 * - `x`: Split based on x-position,
+	 *  assuming x values increase only (`segment[i].x > segment[i-1].x`)
+	 *  or decrease only (`segment[i].x < segment[i-1].x`).
+	 * - `y`: Split based on y-position,
+	 *  assuming y values increase only (`segment[i].y > segment[i-1].y`)
+	 *  or decrease only (`segment[i].y < segment[i-1].y`).
+	 * - `length`: Assuming the path length between consecutive points are equal.
+	 *
+	 * Default is `x`.
+	 */
+	segmentation: LineSegmentation;
+	/**
+	 * The `path` will be sampled every `sampleRate` pixel to generate the returned points.
+	 * Default is `1` pixel.
+	 */
+	sampleRate?: number;
+}
+
+export default function getSplitLineSegments({
+	path,
+	pointsInSegments,
+	segmentation = 'x',
+	sampleRate = 1,
+}: GetLineSegmentsConfig): LineSegments {
+	if (pointsInSegments.length === 0 || path.length === 0) return [];
+
+	const properties = new svgPathProperties(path);
+	const totalLength = properties.getTotalLength();
+	const interval = Number.isFinite(sampleRate) && sampleRate > 0 ? sampleRate : 1;
+	const lineSegments: LineSegments = pointsInSegments.map(() => []);
+	const numSegments = pointsInSegments.length;
+
+	if (segmentation === 'x' || segmentation === 'y') {
+		const segmentStarts = pointsInSegments.map(
+			(points) => points.find((point) => typeof point[segmentation] === 'number')?.[segmentation],
+		);
+		const first = properties.getPointAtLength(0);
+		const last = properties.getPointAtLength(totalLength);
+		const isIncreasing = last[segmentation] > first[segmentation];
+		let currentSegment = 0;
+
+		for (let distance = 0; distance <= totalLength; distance += interval) {
+			const sample = properties.getPointAtLength(distance);
+			while (currentSegment < numSegments - 1) {
+				const nextStart = segmentStarts[currentSegment + 1];
+				if (nextStart == null) {
+					currentSegment += 1;
+					continue;
+				}
+				const beyond = isIncreasing
+					? sample[segmentation] >= nextStart
+					: sample[segmentation] <= nextStart;
+				if (!beyond) break;
+				currentSegment += 1;
+			}
+			lineSegments[currentSegment].push({ x: sample.x, y: sample.y });
+		}
+	} else {
+		const pointCounts = pointsInSegments.map((points) => points.length);
+		const pointCount = pointCounts.reduce((sum, count) => sum + count, 0);
+		const lengthBetweenPoints = totalLength / Math.max(1, pointCount - 1);
+		const segmentStarts = pointCounts.slice(0, numSegments - 1);
+		segmentStarts.unshift(0);
+		for (let index = 2; index < numSegments; index += 1) {
+			segmentStarts[index] += segmentStarts[index - 1];
+		}
+		for (let index = 0; index < numSegments; index += 1) {
+			segmentStarts[index] *= lengthBetweenPoints;
+		}
+
+		let currentSegment = 0;
+		for (let distance = 0; distance <= totalLength; distance += interval) {
+			const sample = properties.getPointAtLength(distance);
+			while (currentSegment < numSegments - 1 && distance >= segmentStarts[currentSegment + 1]) {
+				currentSegment += 1;
+			}
+			lineSegments[currentSegment].push({ x: sample.x, y: sample.y });
+		}
+	}
+
+	return lineSegments;
+}
+import { svgPathProperties } from 'svg-path-properties';

package/src/shape/util/setNumberOrNumberAccessor.ts

@@ -0,0 +1,11 @@
+/**
+ * This is a workaround for TypeScript not inferring the correct
+ * method overload/signature for some d3 shape methods.
+ */
+export default function setNumberOrNumberAccessor<NumAccessor>(
+	func: (d: number | NumAccessor) => void,
+	value: number | NumAccessor,
+) {
+	if (typeof value === 'number') func(value);
+	else func(value);
+}

package/src/shape/util/stackOffset.ts

@@ -0,0 +1,23 @@
+import {
+	stackOffsetExpand,
+	stackOffsetDiverging,
+	stackOffsetNone,
+	stackOffsetSilhouette,
+	stackOffsetWiggle,
+} from 'd3-shape';
+
+export const STACK_OFFSETS = {
+	expand: stackOffsetExpand,
+	diverging: stackOffsetDiverging,
+	none: stackOffsetNone,
+	silhouette: stackOffsetSilhouette,
+	wiggle: stackOffsetWiggle,
+} as const;
+
+export type StackOffset = keyof typeof STACK_OFFSETS;
+
+export const STACK_OFFSET_NAMES = Object.keys(STACK_OFFSETS) as StackOffset[];
+
+export default function stackOffset(offset?: keyof typeof STACK_OFFSETS) {
+	return (offset && STACK_OFFSETS[offset]) || STACK_OFFSETS.none;
+}

package/src/shape/util/stackOrder.ts

@@ -0,0 +1,23 @@
+import {
+	stackOrderAscending,
+	stackOrderDescending,
+	stackOrderInsideOut,
+	stackOrderNone,
+	stackOrderReverse,
+} from 'd3-shape';
+
+export const STACK_ORDERS = {
+	ascending: stackOrderAscending,
+	descending: stackOrderDescending,
+	insideout: stackOrderInsideOut,
+	none: stackOrderNone,
+	reverse: stackOrderReverse,
+} as const;
+
+export type StackOrder = keyof typeof STACK_ORDERS;
+
+export const STACK_ORDER_NAMES = Object.keys(STACK_ORDERS) as StackOrder[];
+
+export default function stackOrder(order?: keyof typeof STACK_ORDERS) {
+	return (order && STACK_ORDERS[order]) || STACK_ORDERS.none;
+}

package/src/shape/util/trigonometry.ts

@@ -0,0 +1 @@
+export const degreesToRadians = (degrees: number) => (Math.PI / 180) * degrees;

package/src/stats/BoxPlot.tsrx

@@ -0,0 +1,257 @@
+import type { ReactNode, SVGProps } from 'react';
+import classnames from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { PickD3Scale, ContinuousDomainScaleType } from '@octanejs/visx/scale';
+import type { SharedProps, ChildRenderProps, LineCoords } from './types';
+
+function verticalToHorizontal({ x1, x2, y1, y2 }: LineCoords) {
+	return {
+		x1: y1,
+		x2: y2,
+		y1: x1,
+		y2: x2,
+	};
+}
+
+export type BoxPlotProps = SharedProps & {
+		/** Scale for converting input values to pixel offsets. */
+		valueScale: PickD3Scale<ContinuousDomainScaleType, number>;
+		/** Maximum BoxPlot value. */
+		max?: number;
+		/** Minimum BoxPlot value. */
+		min?: number;
+		/** First quartile BoxPlot value. */
+		firstQuartile?: number;
+		/** Third quartile BoxPlot value. */
+		thirdQuartile?: number;
+		/** Median BoxPlot value. */
+		median?: number;
+		/** Width of the BoxPlot. */
+		boxWidth?: number;
+		/** Fill color to apply to outlier circles and BoxPlot rect. */
+		fill?: string;
+		/** Fill color opacity to apply to outlier circles and BoxPlot rect. */
+		fillOpacity?: number | string;
+		/** Stroke color to apply to outlier circles, BoxPlot rect, and min/median/max lines. */
+		stroke?: string;
+		/** Stroke width to apply to outlier circles, BoxPlot rect, and min/median/max lines. */
+		strokeWidth?: number | string;
+		/** Rx to apply to BoxPlot rect. */
+		rx?: number;
+		/** Ry to apply to BoxPlot rect. */
+		ry?: number;
+		/** Array of outlier values to be rendered. */
+		outliers?: number[];
+		/** Props to pass to the median glyph line. */
+		medianProps?: SVGProps<SVGLineElement>;
+		/** Props to pass to the maximum glyph line. */
+		maxProps?: SVGProps<SVGLineElement>;
+		/** Props to pass to the minimum glyph line. */
+		minProps?: SVGProps<SVGLineElement>;
+		/** Props to pass to the box glyph rect. */
+		boxProps?: SVGProps<SVGRectElement>;
+		/** Props to pass to the outlier glyph circles. */
+		outlierProps?: SVGProps<SVGCircleElement>;
+		/** Whether to render a container rect element (e.g., to capture mouse events). */
+		container?: boolean;
+		/** Props to pass to the container glyph rect if rendered. */
+		containerProps?: SVGProps<SVGRectElement>;
+		/** Override render function to fully control the rendering of the BoxPlot glyph. */
+		children?: (childRenderProps: ChildRenderProps) => ReactNode;
+	};
+
+export default function BoxPlot({
+	left = 0,
+	top = 0,
+	className,
+	max,
+	min,
+	firstQuartile,
+	thirdQuartile,
+	median,
+	boxWidth = 10,
+	fill,
+	fillOpacity,
+	stroke,
+	strokeWidth,
+	rx = 2,
+	ry = 2,
+	valueScale,
+	outliers = [],
+	horizontal,
+	medianProps = {},
+	maxProps = {},
+	minProps = {},
+	boxProps = {},
+	outlierProps = {},
+	container = false,
+	containerProps = {},
+	children,
+}: BoxPlotProps) {
+	const offset = horizontal ? top : left;
+	const center = offset + (boxWidth || 0) / 2;
+	const valueRange = valueScale.range();
+
+	const minValue = valueScale(min ?? 0);
+	const firstQuartileValue = valueScale(firstQuartile ?? 0);
+	const medianValue = valueScale(median ?? 0);
+	const thirdQuartileValue = valueScale(thirdQuartile ?? 0);
+	const maxValue = valueScale(max ?? 0);
+
+	const boxplot: ChildRenderProps = {
+		valueRange,
+		center,
+		offset,
+		boxWidth,
+		max: {
+			x1: center - (boxWidth || 0) / 4,
+			x2: center + (boxWidth || 0) / 4,
+			y1: maxValue,
+			y2: maxValue,
+		},
+		maxToThird: {
+			x1: center,
+			x2: center,
+			y1: maxValue,
+			y2: thirdQuartileValue,
+		},
+		median: {
+			x1: offset,
+			x2: offset + (boxWidth || 0),
+			y1: medianValue,
+			y2: medianValue,
+		},
+		minToFirst: {
+			x1: center,
+			x2: center,
+			y1: firstQuartileValue,
+			y2: minValue,
+		},
+		min: {
+			x1: center - (boxWidth || 0) / 4,
+			x2: center + (boxWidth || 0) / 4,
+			y1: minValue,
+			y2: minValue,
+		},
+		box: {
+			x1: offset,
+			x2: boxWidth || 0,
+			y1: thirdQuartileValue,
+			y2: Math.abs(thirdQuartileValue - firstQuartileValue),
+		},
+		container: {
+			x1: offset,
+			x2: boxWidth || 0,
+			y1: Math.min(...valueRange),
+			y2: Math.abs(valueRange[0] - valueRange[1]),
+		},
+	};
+
+	if (horizontal) {
+		boxplot.max = verticalToHorizontal(boxplot.max);
+		boxplot.maxToThird = verticalToHorizontal(boxplot.maxToThird);
+		boxplot.box.y1 = firstQuartileValue;
+		boxplot.box = verticalToHorizontal(boxplot.box);
+		boxplot.median = verticalToHorizontal(boxplot.median);
+		boxplot.minToFirst = verticalToHorizontal(boxplot.minToFirst);
+		boxplot.min = verticalToHorizontal(boxplot.min);
+		boxplot.container = verticalToHorizontal(boxplot.container);
+		boxplot.container.y1 = Math.min(...valueRange);
+	}
+
+	if (children) return <>
+		{children(boxplot)}
+	</>;
+
+	return <Group className={classnames('visx-boxplot', className)}>
+		{outliers.map((d, i) => {
+			const cx =
+				horizontal ? valueScale(d) : center;
+			const cy =
+				horizontal ? center : valueScale(d);
+			return <circle
+				key={`visx-boxplot-outlier-${i}`}
+				className="visx-boxplot-outlier"
+				cx={cx}
+				cy={cy}
+				r={4}
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				fill={fill}
+				fillOpacity={fillOpacity}
+				{...outlierProps}
+			/>;
+		})}
+		<line
+			className="visx-boxplot-max"
+			x1={boxplot.max.x1}
+			y1={boxplot.max.y1}
+			x2={boxplot.max.x2}
+			y2={boxplot.max.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			{...maxProps}
+		/>
+		<line
+			className="visx-boxplot-max-to-third"
+			x1={boxplot.maxToThird.x1}
+			y1={boxplot.maxToThird.y1}
+			x2={boxplot.maxToThird.x2}
+			y2={boxplot.maxToThird.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+		/>
+		<rect
+			className="visx-boxplot-box"
+			x={boxplot.box.x1}
+			y={boxplot.box.y1}
+			width={boxplot.box.x2}
+			height={boxplot.box.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			fill={fill}
+			fillOpacity={fillOpacity}
+			rx={rx}
+			ry={ry}
+			{...boxProps}
+		/>
+		<line
+			className="visx-boxplot-median"
+			x1={boxplot.median.x1}
+			y1={boxplot.median.y1}
+			x2={boxplot.median.x2}
+			y2={boxplot.median.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			{...medianProps}
+		/>
+		<line
+			className="visx-boxplot-min-to-first"
+			x1={boxplot.minToFirst.x1}
+			y1={boxplot.minToFirst.y1}
+			x2={boxplot.minToFirst.x2}
+			y2={boxplot.minToFirst.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+		/>
+		<line
+			className="visx-boxplot-min"
+			x1={boxplot.min.x1}
+			y1={boxplot.min.y1}
+			x2={boxplot.min.x2}
+			y2={boxplot.min.y2}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			{...minProps}
+		/>
+		{container &&
+			<rect
+				x={boxplot.container.x1}
+				y={boxplot.container.y1}
+				width={boxplot.container.x2}
+				height={boxplot.container.y2}
+				fillOpacity="0"
+				{...containerProps}
+			/>}
+	</Group>;
+}

package/src/stats/BoxPlot.tsrx.d.ts

@@ -0,0 +1,51 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { PickD3Scale, ContinuousDomainScaleType } from '@octanejs/visx/scale';
+import type { SharedProps, ChildRenderProps } from './types';
+export type BoxPlotProps = SharedProps & {
+    /** Scale for converting input values to pixel offsets. */
+    valueScale: PickD3Scale<ContinuousDomainScaleType, number>;
+    /** Maximum BoxPlot value. */
+    max?: number;
+    /** Minimum BoxPlot value. */
+    min?: number;
+    /** First quartile BoxPlot value. */
+    firstQuartile?: number;
+    /** Third quartile BoxPlot value. */
+    thirdQuartile?: number;
+    /** Median BoxPlot value. */
+    median?: number;
+    /** Width of the BoxPlot. */
+    boxWidth?: number;
+    /** Fill color to apply to outlier circles and BoxPlot rect. */
+    fill?: string;
+    /** Fill color opacity to apply to outlier circles and BoxPlot rect. */
+    fillOpacity?: number | string;
+    /** Stroke color to apply to outlier circles, BoxPlot rect, and min/median/max lines. */
+    stroke?: string;
+    /** Stroke width to apply to outlier circles, BoxPlot rect, and min/median/max lines. */
+    strokeWidth?: number | string;
+    /** Rx to apply to BoxPlot rect. */
+    rx?: number;
+    /** Ry to apply to BoxPlot rect. */
+    ry?: number;
+    /** Array of outlier values to be rendered. */
+    outliers?: number[];
+    /** Props to pass to the median glyph line. */
+    medianProps?: SVGProps<SVGLineElement>;
+    /** Props to pass to the maximum glyph line. */
+    maxProps?: SVGProps<SVGLineElement>;
+    /** Props to pass to the minimum glyph line. */
+    minProps?: SVGProps<SVGLineElement>;
+    /** Props to pass to the box glyph rect. */
+    boxProps?: SVGProps<SVGRectElement>;
+    /** Props to pass to the outlier glyph circles. */
+    outlierProps?: SVGProps<SVGCircleElement>;
+    /** Whether to render a container rect element (e.g., to capture mouse events). */
+    container?: boolean;
+    /** Props to pass to the container glyph rect if rendered. */
+    containerProps?: SVGProps<SVGRectElement>;
+    /** Override render function to fully control the rendering of the BoxPlot glyph. */
+    children?: (childRenderProps: ChildRenderProps) => ReactNode;
+};
+export default function BoxPlot({ left, top, className, max, min, firstQuartile, thirdQuartile, median, boxWidth, fill, fillOpacity, stroke, strokeWidth, rx, ry, valueScale, outliers, horizontal, medianProps, maxProps, minProps, boxProps, outlierProps, container, containerProps, children, }: BoxPlotProps): import("react").JSX.Element;