@octanejs/recharts 0.1.61 → 0.1.63

package/src/component/DefaultLegendContent.tsrx

@@ -27,16 +27,16 @@ export type Formatter = (value: any, entry: LegendPayload, index: number) => Oct
 
 export interface LegendPayload {
 	/**
- * This is the text that will be displayed in the legend in the DOM.
- * If undefined, the text will not be displayed, so the icon will be rendered without text.
- */
+	 * This is the text that will be displayed in the legend in the DOM.
+	 * If undefined, the text will not be displayed, so the icon will be rendered without text.
+	 */
 	value: string | undefined;
 	type?: LegendType;
 	color?: string;
 	/**
- * Different graphical items put different information in the payload object
- * so double check in runtime what are you getting here.
- */
+	 * Different graphical items put different information in the payload object
+	 * so double check in runtime what are you getting here.
+	 */
 	payload?: object;
 	formatter?: Formatter;
 	inactive?: boolean;
@@ -46,87 +46,84 @@ export interface LegendPayload {
 
 interface DefaultLegendContentProps {
 	/**
- * The size of icon in each legend item.
- * @defaultValue 14
- */
+	 * The size of icon in each legend item.
+	 * @defaultValue 14
+	 */
 	iconSize?: number;
 	/**
- * The type of icon in each legend item.
- */
+	 * The type of icon in each legend item.
+	 */
 	iconType?: LegendType;
 	/**
- * The layout of legend items inside the legend container.
- * @defaultValue horizontal
- */
+	 * The layout of legend items inside the legend container.
+	 * @defaultValue horizontal
+	 */
 	layout?: CartesianLayout;
 	/**
- * Horizontal alignment of the whole Legend container:
- *
- * - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
- * - `right` shows the Legend to the right of the chart, and chart width reduces automatically.
- * - `center` shows the Legend in the middle of chart, and chart width remains unchanged.
- *
- * The exact behavior changes depending on 'verticalAlign' prop.
- *
- * @defaultValue center
- */
+	 * Horizontal alignment of the whole Legend container:
+	 *
+	 * - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
+	 * - `right` shows the Legend to the right of the chart, and chart width reduces automatically.
+	 * - `center` shows the Legend in the middle of chart, and chart width remains unchanged.
+	 *
+	 * The exact behavior changes depending on 'verticalAlign' prop.
+	 *
+	 * @defaultValue center
+	 */
 	align?: HorizontalAlignmentType;
 	/**
- * Vertical alignment of the whole Legend container:
- *
- * - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it.
- * - `top`: shows the Legend above chart, and chart height reduces automatically.
- * - `middle`:  shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
- * The exact behavior changes depending on `align` prop.
- *
- * @defaultValue middle
- */
+	 * Vertical alignment of the whole Legend container:
+	 *
+	 * - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it.
+	 * - `top`: shows the Legend above chart, and chart height reduces automatically.
+	 * - `middle`:  shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
+	 * The exact behavior changes depending on `align` prop.
+	 *
+	 * @defaultValue middle
+	 */
 	verticalAlign?: VerticalAlignmentType;
 	/**
- * The color of the icon when the item is inactive.
- * @defaultValue #ccc
- */
+	 * The color of the icon when the item is inactive.
+	 * @defaultValue #ccc
+	 */
 	inactiveColor?: string;
 	/**
- * Function to customize how content is serialized before rendering.
- *
- * This should return HTML elements, or strings.
- *
- * @example (value, entry, index) => <span style={{ color: 'red' }}>{value}</span>
- * @example https://codesandbox.io/s/legend-formatter-rmzp9
- */
+	 * Function to customize how content is serialized before rendering.
+	 *
+	 * This should return HTML elements, or strings.
+	 *
+	 * @example (value, entry, index) => <span style={{ color: 'red' }}>{value}</span>
+	 * @example https://codesandbox.io/s/legend-formatter-rmzp9
+	 */
 	formatter?: Formatter;
 	/**
- * The customized event handler of mouseenter on the items in this group
- * @example https://recharts.github.io/examples/LegendEffectOpacity
- */
+	 * The customized event handler of mouseenter on the items in this group
+	 * @example https://recharts.github.io/examples/LegendEffectOpacity
+	 */
 	onMouseEnter?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
- * The customized event handler of mouseleave on the items in this group
- * @example https://recharts.github.io/examples/LegendEffectOpacity
- */
+	 * The customized event handler of mouseleave on the items in this group
+	 * @example https://recharts.github.io/examples/LegendEffectOpacity
+	 */
 	onMouseLeave?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
- * The customized event handler of click on the items in this group
- */
+	 * The customized event handler of click on the items in this group
+	 */
 	onClick?: (data: LegendPayload, index: number, event: NativeMouseEvent<HTMLElement>) => void;
 	/**
- * DefaultLegendContent.payload is omitted from Legend props.
- * A custom payload can be passed here if desired, or it can be passed from the Legend "content" callback.
- */
+	 * DefaultLegendContent.payload is omitted from Legend props.
+	 * A custom payload can be passed here if desired, or it can be passed from the Legend "content" callback.
+	 */
 	payload?: ReadonlyArray<LegendPayload>;
 	/**
- * The style of each text label which is a span element.
- * @defaultValue {}
- */
+	 * The style of each text label which is a span element.
+	 * @defaultValue {}
+	 */
 	labelStyle?: CSSProperties;
 }
 
-export type Props =
-	DefaultLegendContentProps & Omit<
-		PresentationAttributesAdaptChildEvent<any, OctaneElement>,
-		keyof DefaultLegendContentProps
-	>;
+export type Props = DefaultLegendContentProps &
+	Omit<PresentationAttributesAdaptChildEvent<any, OctaneElement>, keyof DefaultLegendContentProps>;
 
 export const defaultLegendContentDefaultProps = {
 	align: 'center',
@@ -137,10 +134,9 @@ export const defaultLegendContentDefaultProps = {
 	labelStyle: {},
 } as const satisfies Partial<Props>;
 
-type InternalProps =
-	RequiresDefaultProps<Props, typeof defaultLegendContentDefaultProps> & {
-		payload: ReadonlyArray<LegendPayload>;
-	};
+type InternalProps = RequiresDefaultProps<Props, typeof defaultLegendContentDefaultProps> & {
+	payload: ReadonlyArray<LegendPayload>;
+};
 
 function getStrokeDasharray(input: unknown): string | undefined {
 	if (typeof input === 'object' && input !== null && 'strokeDasharray' in input) {
@@ -168,41 +164,43 @@ function Icon({
 		return null;
 	}
 	if (preferredIcon === 'plainline') {
-		return <line
-			strokeWidth={4}
-			fill="none"
-			stroke={color}
-			strokeDasharray={getStrokeDasharray(data.payload)}
-			x1={0}
-			y1={halfSize}
-			x2={SIZE}
-			y2={halfSize}
-			className="recharts-legend-icon"
-		/>;
+		return (
+			<line
+				strokeWidth={4}
+				fill="none"
+				stroke={color}
+				strokeDasharray={getStrokeDasharray(data.payload)}
+				x1={0}
+				y1={halfSize}
+				x2={SIZE}
+				y2={halfSize}
+				className="recharts-legend-icon"
+			/>
+		);
 	}
 	if (preferredIcon === 'line') {
-		return <path
-			strokeWidth={4}
-			fill="none"
-			stroke={color}
-			d={`M0,${halfSize}h${thirdSize}
-            A${sixthSize},${sixthSize},0,1,1,${
-				2 * thirdSize
-			},${halfSize}
-            H${SIZE}M${
-				2 * thirdSize
-			},${halfSize}
+		return (
+			<path
+				strokeWidth={4}
+				fill="none"
+				stroke={color}
+				d={`M0,${halfSize}h${thirdSize}
+            A${sixthSize},${sixthSize},0,1,1,${2 * thirdSize},${halfSize}
+            H${SIZE}M${2 * thirdSize},${halfSize}
             A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`}
-			className="recharts-legend-icon"
-		/>;
+				className="recharts-legend-icon"
+			/>
+		);
 	}
 	if (preferredIcon === 'rect') {
-		return <path
-			stroke="none"
-			fill={color}
-			d={`M0,${SIZE / 8}h${SIZE}v${(SIZE * 3) / 4}h${-SIZE}z`}
-			className="recharts-legend-icon"
-		/>;
+		return (
+			<path
+				stroke="none"
+				fill={color}
+				d={`M0,${SIZE / 8}h${SIZE}v${(SIZE * 3) / 4}h${-SIZE}z`}
+				className="recharts-legend-icon"
+			/>
+		);
 	}
 	if (React.isValidElement(data.legendIcon)) {
 		const iconProps: any = { ...data };
@@ -210,14 +208,16 @@ function Icon({
 		return React.cloneElement(data.legendIcon, iconProps);
 	}
 
-	return <Symbols
-		fill={color}
-		cx={halfSize}
-		cy={halfSize}
-		size={SIZE}
-		sizeType="diameter"
-		type={preferredIcon}
-	/>;
+	return (
+		<Symbols
+			fill={color}
+			cx={halfSize}
+			cy={halfSize}
+			size={SIZE}
+			sizeType="diameter"
+			type={preferredIcon}
+		/>
+	);
 }
 
 function Items(props: InternalProps) {
@@ -240,30 +240,32 @@ function Items(props: InternalProps) {
 			return null;
 		}
 
-		const finalLabelStyle =
-			typeof labelStyle === 'object' ? { ...labelStyle } : {};
+		const finalLabelStyle = typeof labelStyle === 'object' ? { ...labelStyle } : {};
 		finalLabelStyle.color = entry.inactive ? inactiveColor : finalLabelStyle.color || entry.color;
 
-		const finalValue =
-			finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
+		const finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
 
-		return <li
-			className={className}
-			style={itemStyle}
-			key={`legend-item-${i}`}
-			{...adaptEventsOfChild(props, entry, i)}
-		>
-			<Surface
-				width={iconSize}
-				height={iconSize}
-				viewBox={viewBox}
-				style={svgStyle}
-				aria-label={entry.value == null ? 'legend icon' : `${entry.value} legend icon`}
+		return (
+			<li
+				className={className}
+				style={itemStyle}
+				key={`legend-item-${i}`}
+				{...adaptEventsOfChild(props, entry, i)}
 			>
-				<Icon data={entry} iconType={iconType} inactiveColor={inactiveColor} />
-			</Surface>
-			<span className="recharts-legend-item-text" style={finalLabelStyle}>{finalValue}</span>
-		</li>;
+				<Surface
+					width={iconSize}
+					height={iconSize}
+					viewBox={viewBox}
+					style={svgStyle}
+					aria-label={entry.value == null ? 'legend icon' : `${entry.value} legend icon`}
+				>
+					<Icon data={entry} iconType={iconType} inactiveColor={inactiveColor} />
+				</Surface>
+				<span className="recharts-legend-item-text" style={finalLabelStyle}>
+					{finalValue}
+				</span>
+			</li>
+		);
 	});
 }
 
@@ -287,7 +289,9 @@ export const DefaultLegendContent = (outsideProps: Props) => {
 		textAlign: layout === 'horizontal' ? align : 'left',
 	};
 
-	return <ul className="recharts-default-legend" style={finalStyle}>
-		<Items {...props} payload={payload} />
-	</ul>;
+	return (
+		<ul className="recharts-default-legend" style={finalStyle}>
+			<Items {...props} payload={payload} />
+		</ul>
+	);
 };

package/src/component/DefaultTooltipContent.tsrx

@@ -20,12 +20,13 @@ function defaultFormatter(value: ValueType | undefined): OctaneNode {
 export type TooltipType = 'none';
 export type ValueType = number | string | ReadonlyArray<number | string>;
 export type NameType = number | string;
-export type Formatter<TValue extends ValueType = ValueType, TName extends NameType = NameType> =
-	(value: TValue | undefined, name: TName | undefined, item: Payload<
-		TValue,
-		TName
-	>, index: number, payload: ReadonlyArray<Payload<TValue, TName>>) => | [OctaneNode, TName]
-	| OctaneNode;
+export type Formatter<TValue extends ValueType = ValueType, TName extends NameType = NameType> = (
+	value: TValue | undefined,
+	name: TName | undefined,
+	item: Payload<TValue, TName>,
+	index: number,
+	payload: ReadonlyArray<Payload<TValue, TName>>,
+) => [OctaneNode, TName] | OctaneNode;
 
 export interface Payload<
 	TValue extends ValueType = ValueType,
@@ -48,8 +49,8 @@ export interface Payload<
 	className?: string;
 	hide?: boolean;
 	/**
- * The id of the graphical item that the data point belongs to
- */
+	 * The id of the graphical item that the data point belongs to
+	 */
 	graphicalItemId: string;
 }
 
@@ -59,8 +60,7 @@ export interface Payload<
 export type TooltipItemSorter<
 	TValue extends ValueType = ValueType,
 	TName extends NameType = NameType,
-> =
-	'dataKey' | 'value' | 'name' | ((item: Payload<TValue, TName>) => number | string | undefined);
+> = 'dataKey' | 'value' | 'name' | ((item: Payload<TValue, TName>) => number | string | undefined);
 
 export interface Props<TValue extends ValueType = ValueType, TName extends NameType = NameType> {
 	separator?: string;
@@ -70,9 +70,10 @@ export interface Props<TValue extends ValueType = ValueType, TName extends NameT
 	contentStyle?: CSSProperties;
 	itemStyle?: CSSProperties;
 	labelStyle?: CSSProperties;
-	labelFormatter?: (label: OctaneNode, payload: ReadonlyArray<
-		Payload<TValue, TName>
-	>) => OctaneNode;
+	labelFormatter?: (
+		label: OctaneNode,
+		payload: ReadonlyArray<Payload<TValue, TName>>,
+	) => OctaneNode;
 	label?: OctaneNode;
 	payload?: ReadonlyArray<Payload<TValue, TName>>;
 	itemSorter?: TooltipItemSorter<TValue, TName>;
@@ -161,23 +162,25 @@ export const DefaultTooltipContent = (props: Props) => {
 					...itemStyle,
 				};
 
-				return <li
-					className="recharts-tooltip-item"
-					key={`tooltip-item-${i}`}
-					style={finalItemStyle}
-				>
-					{isNumOrStr(finalName)
-						? <span className="recharts-tooltip-item-name">{finalName}</span>
-						: null}
-					{isNumOrStr(finalName)
-						? <span className="recharts-tooltip-item-separator">{separator}</span>
-						: null}
-					<span className="recharts-tooltip-item-value">{finalValue}</span>
-					<span className="recharts-tooltip-item-unit">{entry.unit || ''}</span>
-				</li>;
+				return (
+					<li className="recharts-tooltip-item" key={`tooltip-item-${i}`} style={finalItemStyle}>
+						{isNumOrStr(finalName) ? (
+							<span className="recharts-tooltip-item-name">{finalName}</span>
+						) : null}
+						{isNumOrStr(finalName) ? (
+							<span className="recharts-tooltip-item-separator">{separator}</span>
+						) : null}
+						<span className="recharts-tooltip-item-value">{finalValue}</span>
+						<span className="recharts-tooltip-item-unit">{entry.unit || ''}</span>
+					</li>
+				);
 			});
 
-			return <ul className="recharts-tooltip-item-list" style={listStyle}>{items}</ul>;
+			return (
+				<ul className="recharts-tooltip-item-list" style={listStyle}>
+					{items}
+				</ul>
+			);
 		}
 
 		return null;
@@ -200,18 +203,19 @@ export const DefaultTooltipContent = (props: Props) => {
 		finalLabel = labelFormatter(label, payload);
 	}
 
-	const accessibilityAttributes =
-		accessibilityLayer
-			? {
-					role: 'status',
-					'aria-live': 'assertive',
-				} as HTMLAttributes<HTMLDivElement>
-			: {};
-
-	return <div className={wrapperCN} style={finalStyle} {...accessibilityAttributes}>
-		<p className={labelCN} style={finalLabelStyle}>
-			{React.isValidElement(finalLabel) ? finalLabel : `${finalLabel}`}
-		</p>
-		{renderContent()}
-	</div>;
+	const accessibilityAttributes = accessibilityLayer
+		? ({
+				role: 'status',
+				'aria-live': 'assertive',
+			} as HTMLAttributes<HTMLDivElement>)
+		: {};
+
+	return (
+		<div className={wrapperCN} style={finalStyle} {...accessibilityAttributes}>
+			<p className={labelCN} style={finalLabelStyle}>
+				{React.isValidElement(finalLabel) ? finalLabel : `${finalLabel}`}
+			</p>
+			{renderContent()}
+		</div>
+	);
 };

package/src/component/Dots.tsrx

@@ -15,8 +15,10 @@ type DotItemProps = {
 	className: string;
 };
 type DotElementProps = Extract<DotType, OctaneElement>['props'];
-export type DotsDotProps =
-	Omit<DotProps, 'cx' | 'cy' | 'key' | 'index' | 'dataKey' | 'value' | 'payload'>;
+export type DotsDotProps = Omit<
+	DotProps,
+	'cx' | 'cy' | 'key' | 'index' | 'dataKey' | 'value' | 'payload'
+>;
 interface DotsProps extends ZIndexable {
 	points: ReadonlyArray<DotPoint>;
 	dot: DotType;
@@ -99,7 +101,11 @@ export function Dots(dotsProps: DotsProps) {
 	if (needClip && clipPathId != null) {
 		layerProps.clipPath = 'url(#clipPath-' + (clipDot ? '' : 'dots-') + clipPathId + ')';
 	}
-	return <ZIndexLayer zIndex={zIndex}>
-		<Layer className={className} {...layerProps}>{dots}</Layer>
-	</ZIndexLayer>;
+	return (
+		<ZIndexLayer zIndex={zIndex}>
+			<Layer className={className} {...layerProps}>
+				{dots}
+			</Layer>
+		</ZIndexLayer>
+	);
 }