@octanejs/recharts 0.1.62 → 0.1.64

package/src/cartesian/ErrorBar.tsrx

@@ -37,69 +37,69 @@ export type ErrorBarDirection = 'x' | 'y';
 
 export type ErrorBarDataPointFormatter<
 	T extends BarRectangleItem | LinePointItem | ScatterPointItem,
-> =
-	(entry: T, dataKey: DataKey<
-		T,
-		number[] | number
-	>, direction: ErrorBarDirection) => ErrorBarDataItem;
+> = (
+	entry: T,
+	dataKey: DataKey<T, number[] | number>,
+	direction: ErrorBarDirection,
+) => ErrorBarDataItem;
 
 /**
  * External ErrorBar props, visible for users of the library
  */
 interface ErrorBarProps<DataPointType = any, DataValueType = any> extends ZIndexable {
 	/**
- * Decides how to extract the value of this ErrorBar from the data:
- * - `string`: the name of the field in the data object;
- * - `number`: the index of the field in the data;
- * - `function`: a function that receives the data object and returns the value of this ErrorBar.
- *
- * The error values can be a single value for symmetric error bars;
- * or an array of a lower and upper error value for asymmetric error bars.
- */
+	 * Decides how to extract the value of this ErrorBar from the data:
+	 * - `string`: the name of the field in the data object;
+	 * - `number`: the index of the field in the data;
+	 * - `function`: a function that receives the data object and returns the value of this ErrorBar.
+	 *
+	 * The error values can be a single value for symmetric error bars;
+	 * or an array of a lower and upper error value for asymmetric error bars.
+	 */
 	dataKey: DataKey<DataPointType, DataValueType>;
 	/**
- * Width of the error bar ends (the serifs) in pixels.
- * This is not the total width of the error bar, but just the width of the little lines at the ends.
- *
- * The total width of the error bar is determined by the data value plus/minus the error value.
- *
- * @defaultValue 5
- */
+	 * Width of the error bar ends (the serifs) in pixels.
+	 * This is not the total width of the error bar, but just the width of the little lines at the ends.
+	 *
+	 * The total width of the error bar is determined by the data value plus/minus the error value.
+	 *
+	 * @defaultValue 5
+	 */
 	width?: number;
 	/**
- * Direction of the error bar. Usually determined by chart layout, except in Scatter chart.
- * In Scatter chart, "x" means horizontal error bars, "y" means vertical error bars.
- */
+	 * Direction of the error bar. Usually determined by chart layout, except in Scatter chart.
+	 * In Scatter chart, "x" means horizontal error bars, "y" means vertical error bars.
+	 */
 	direction?: ErrorBarDirection;
 	/**
- * @defaultValue true
- */
+	 * @defaultValue true
+	 */
 	isAnimationActive?: boolean;
 	/**
- * @defaultValue 0
- */
+	 * @defaultValue 0
+	 */
 	animationBegin?: number;
 	/**
- * @defaultValue 400
- */
+	 * @defaultValue 400
+	 */
 	animationDuration?: number;
 	/**
- * @defaultValue ease-in-out
- */
+	 * @defaultValue ease-in-out
+	 */
 	animationEasing?: EasingInput;
 	/**
- * The width of the stroke
- */
+	 * The width of the stroke
+	 */
 	strokeWidth?: number | string;
 	/**
- * The stroke color. If "none", no line will be drawn.
- *
- * @defaultValue black
- */
+	 * The stroke color. If "none", no line will be drawn.
+	 *
+	 * @defaultValue black
+	 */
 	stroke?: string;
 	/**
- * @defaultValue 400
- */
+	 * @defaultValue 400
+	 */
 	zIndex?: number;
 }
 
@@ -108,21 +108,20 @@ export type Props = SVGProps<SVGLineElement> & ErrorBarProps;
 /**
  * Props after defaults, and required props have been applied.
  */
-type ErrorBarInternalProps =
-	SVGProps<SVGLineElement> & {
-		dataKey: DataKey<any>;
-		/** the width of the error bar ends */
-		width: number;
-		/**
- * Only used for ScatterChart with error bars in two directions.
- * Only accepts a value of "x" or "y" and makes the error bars lie in that direction.
- */
-		direction: ErrorBarDirection;
-		isAnimationActive: boolean;
-		animationBegin: number;
-		animationDuration: number;
-		animationEasing: EasingInput;
-	};
+type ErrorBarInternalProps = SVGProps<SVGLineElement> & {
+	dataKey: DataKey<any>;
+	/** the width of the error bar ends */
+	width: number;
+	/**
+	 * Only used for ScatterChart with error bars in two directions.
+	 * Only accepts a value of "x" or "y" and makes the error bars lie in that direction.
+	 */
+	direction: ErrorBarDirection;
+	isAnimationActive: boolean;
+	animationBegin: number;
+	animationDuration: number;
+	animationEasing: EasingInput;
+};
 
 function ErrorBarImpl(props: ErrorBarInternalProps) {
 	const {
@@ -137,8 +136,13 @@ function ErrorBarImpl(props: ErrorBarInternalProps) {
 	} = props;
 	const svgProps = svgPropertiesNoEvents(others);
 
-	const { data, dataPointFormatter, xAxisId, yAxisId, errorBarOffset: offset } =
-		useErrorBarContext();
+	const {
+		data,
+		dataPointFormatter,
+		xAxisId,
+		yAxisId,
+		errorBarOffset: offset,
+	} = useErrorBarContext();
 
 	const xAxis = useXAxis(xAxisId);
 	const yAxis = useYAxis(yAxisId);
@@ -213,32 +217,36 @@ function ErrorBarImpl(props: ErrorBarInternalProps) {
 			}
 		}
 
-		const scaleDirection: string =
-			direction === 'x' ? 'scaleX' : 'scaleY';
-
-		const transformOrigin =
-			direction === 'x' ? `${x}px ${y + offset}px` : `${x + offset}px ${y}px`;
-
-		return <Layer
-			className="recharts-errorBar"
-			key={`bar-${x}-${y}-${value}-${dataIndex}`}
-			{...svgProps}
-		>{lineCoordinates.map((c, lineIndex) => {
-			const lineStyle = isAnimationActive ? { transformOrigin } : undefined;
-			return <CSSTransitionAnimate
-				animationId={`error-bar-${direction}_${c.x1}-${c.x2}-${c.y1}-${c.y2}`}
-				from={`${scaleDirection}(0)`}
-				to={`${scaleDirection}(1)`}
-				attributeName="transform"
-				begin={animationBegin}
-				easing={extractCssEasing(animationEasing)}
-				isActive={isAnimationActive}
-				duration={animationDuration}
-				key={`errorbar-${dataIndex}-${c.x1}-${c.y1}-${c.x2}-${c.y2}-${lineIndex}`}
+		const scaleDirection: string = direction === 'x' ? 'scaleX' : 'scaleY';
+
+		const transformOrigin = direction === 'x' ? `${x}px ${y + offset}px` : `${x + offset}px ${y}px`;
+
+		return (
+			<Layer
+				className="recharts-errorBar"
+				key={`bar-${x}-${y}-${value}-${dataIndex}`}
+				{...svgProps}
 			>
-				{(style) => <line {...c} style={{ ...lineStyle, ...style }} />}
-			</CSSTransitionAnimate>;
-		})}</Layer>;
+				{lineCoordinates.map((c, lineIndex) => {
+					const lineStyle = isAnimationActive ? { transformOrigin } : undefined;
+					return (
+						<CSSTransitionAnimate
+							animationId={`error-bar-${direction}_${c.x1}-${c.x2}-${c.y1}-${c.y2}`}
+							from={`${scaleDirection}(0)`}
+							to={`${scaleDirection}(1)`}
+							attributeName="transform"
+							begin={animationBegin}
+							easing={extractCssEasing(animationEasing)}
+							isActive={isAnimationActive}
+							duration={animationDuration}
+							key={`errorbar-${dataIndex}-${c.x1}-${c.y1}-${c.x2}-${c.y2}-${lineIndex}`}
+						>
+							{(style) => <line {...c} style={{ ...lineStyle, ...style }} />}
+						</CSSTransitionAnimate>
+					);
+				})}
+			</Layer>
+		);
 	});
 
 	return <Layer className="recharts-errorBars">{errorBars}</Layer>;
@@ -294,29 +302,25 @@ export const errorBarDefaultProps = {
 export function ErrorBar(outsideProps: Props) {
 	const realDirection: ErrorBarDirection = useErrorBarDirection(outsideProps.direction);
 	const props = resolveDefaultProps(outsideProps, errorBarDefaultProps);
-	const {
-		width,
-		isAnimationActive,
-		animationBegin,
-		animationDuration,
-		animationEasing,
-		zIndex,
-	} = props;
-
-	return <>
-		<ReportErrorBarSettings dataKey={props.dataKey} direction={realDirection} />
-		<ZIndexLayer zIndex={zIndex}>
-			<ErrorBarImpl
-				{...props}
-				direction={realDirection}
-				width={width}
-				isAnimationActive={isAnimationActive}
-				animationBegin={animationBegin}
-				animationDuration={animationDuration}
-				animationEasing={animationEasing}
-			/>
-		</ZIndexLayer>
-	</>;
+	const { width, isAnimationActive, animationBegin, animationDuration, animationEasing, zIndex } =
+		props;
+
+	return (
+		<>
+			<ReportErrorBarSettings dataKey={props.dataKey} direction={realDirection} />
+			<ZIndexLayer zIndex={zIndex}>
+				<ErrorBarImpl
+					{...props}
+					direction={realDirection}
+					width={width}
+					isAnimationActive={isAnimationActive}
+					animationBegin={animationBegin}
+					animationDuration={animationDuration}
+					animationEasing={animationEasing}
+				/>
+			</ZIndexLayer>
+		</>
+	);
 }
 
 ErrorBar.displayName = 'ErrorBar';