@octanejs/recharts 0.1.16 → 0.1.18

package/src/component/Cursor.tsrx

@@ -0,0 +1,157 @@
+import * as React from 'octane';
+import { cloneElement, createElement, isValidElement, ReactElement, SVGProps } from 'octane';
+import { clsx } from 'clsx';
+import {
+	ChartOffsetInternal,
+	Coordinate,
+	isPolarCoordinate,
+	LayoutType,
+	PolarCoordinate,
+	TooltipEventType,
+} from '../util/types';
+import { Curve } from '../shape/Curve';
+import { Cross } from '../shape/Cross';
+import { getCursorRectangle } from '../util/cursor/getCursorRectangle';
+import { Rectangle } from '../shape/Rectangle';
+import { getRadialCursorPoints } from '../util/cursor/getRadialCursorPoints';
+import { Sector } from '../shape/Sector';
+import { getCursorPoints } from '../util/cursor/getCursorPoints';
+import { useChartLayout, useOffsetInternal } from '../context/chartLayoutContext';
+import { useTooltipAxisBandSize } from '../context/useTooltipAxis';
+import { useChartName } from '../state/selectors/selectors';
+import { TooltipIndex, TooltipPayload } from '../state/tooltipSlice';
+import { svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
+
+/**
+ * If set false, no cursor will be drawn when tooltip is active.
+ * If set an object, the option is the configuration of cursor.
+ * If set a React element, the option is the custom react element of drawing cursor
+ */
+export type CursorDefinition = boolean | ReactElement | SVGProps<SVGElement>;
+
+export interface CursorProps extends ZIndexable {
+	cursor: CursorDefinition;
+	tooltipEventType: TooltipEventType;
+	coordinate: Coordinate | PolarCoordinate | undefined;
+	payload: TooltipPayload;
+	index: TooltipIndex | undefined;
+}
+
+export type CursorConnectedProps =
+	CursorProps & {
+		tooltipAxisBandSize: number;
+		layout: LayoutType;
+		offset: ChartOffsetInternal;
+		chartName: string;
+	};
+
+function RenderCursor({
+	cursor,
+	cursorComp,
+	cursorProps,
+}: {
+	cursor: CursorDefinition;
+	cursorComp: React.ComponentType<any>;
+	cursorProps: any;
+}) {
+	if (isValidElement(cursor)) {
+		return cloneElement(cursor, cursorProps);
+	}
+	return createElement(cursorComp, cursorProps);
+}
+
+export function CursorInternal(props: CursorConnectedProps) {
+	const {
+		coordinate,
+		payload,
+		index,
+		offset,
+		tooltipAxisBandSize,
+		layout,
+		cursor,
+		tooltipEventType,
+		chartName,
+	} = props;
+
+	// The cursor is a part of the Tooltip, and it should be shown (by default) when the Tooltip is active.
+	const activeCoordinate = coordinate;
+	const activePayload = payload;
+	const activeTooltipIndex = index;
+	if (!cursor || !activeCoordinate || chartName !== 'ScatterChart' && tooltipEventType !== 'axis') {
+		return null;
+	}
+	let restProps, cursorComp: React.ComponentType<any>, preferredZIndex: number;
+
+	if (chartName === 'ScatterChart') {
+		restProps = activeCoordinate;
+		cursorComp = Cross;
+		preferredZIndex = DefaultZIndexes.cursorLine;
+	} else if (chartName === 'BarChart') {
+		restProps = getCursorRectangle(layout, activeCoordinate, offset, tooltipAxisBandSize);
+		cursorComp = Rectangle;
+		preferredZIndex = DefaultZIndexes.cursorRectangle;
+	} else if (layout === 'radial' && isPolarCoordinate(activeCoordinate)) {
+		const { cx, cy, radius, startAngle, endAngle } = getRadialCursorPoints(activeCoordinate);
+		restProps = {
+			cx,
+			cy,
+			startAngle,
+			endAngle,
+			innerRadius: radius,
+			outerRadius: radius,
+		};
+		cursorComp = Sector;
+		preferredZIndex = DefaultZIndexes.cursorLine;
+	} else {
+		restProps = { points: getCursorPoints(layout, activeCoordinate, offset) };
+		cursorComp = Curve;
+		preferredZIndex = DefaultZIndexes.cursorLine;
+	}
+
+	const extraClassName: string | undefined =
+		typeof cursor === 'object' && 'className' in cursor ? cursor.className : undefined;
+
+	const cursorProps = {
+		stroke: '#ccc',
+		pointerEvents: 'none',
+		...offset,
+		...restProps,
+		...svgPropertiesNoEventsFromUnknown(cursor),
+		payload: activePayload,
+		payloadIndex: activeTooltipIndex,
+		className: clsx('recharts-tooltip-cursor', extraClassName),
+	};
+
+	return <ZIndexLayer zIndex={props.zIndex ?? preferredZIndex}>
+		<RenderCursor cursor={cursor} cursorComp={cursorComp} cursorProps={cursorProps} />
+	</ZIndexLayer>;
+}
+
+/*
+ * Cursor is the background, or a highlight,
+ * that shows when user mouses over or activates
+ * an area.
+ *
+ * It usually shows together with a tooltip
+ * to emphasise which part of the chart does the tooltip refer to.
+ */
+export function Cursor(props: CursorProps) {
+	const tooltipAxisBandSize = useTooltipAxisBandSize();
+	const offset = useOffsetInternal();
+	const layout = useChartLayout();
+	const chartName = useChartName();
+
+	if (tooltipAxisBandSize == null || offset == null || layout == null || chartName == null) {
+		return null;
+	}
+
+	return <CursorInternal
+		{...props}
+		offset={offset}
+		layout={layout}
+		tooltipAxisBandSize={tooltipAxisBandSize}
+		chartName={chartName}
+	/>;
+}

package/src/component/DefaultLegendContent.tsrx

@@ -0,0 +1,288 @@
+import * as React from 'octane';
+import { ReactNode, MouseEvent, ReactElement, CSSProperties } from 'octane';
+
+import { clsx } from 'clsx';
+import { Surface } from '../container/Surface';
+import { Symbols } from '../shape/Symbols';
+import {
+	DataKey,
+	LegendType,
+	adaptEventsOfChild,
+	PresentationAttributesAdaptChildEvent,
+	CartesianLayout,
+} from '../util/types';
+import { RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
+
+const SIZE = 32;
+export type ContentType = ReactElement | ((props: Props) => ReactNode);
+
+export type HorizontalAlignmentType = 'center' | 'left' | 'right';
+export type VerticalAlignmentType = 'top' | 'bottom' | 'middle';
+export type Formatter = (value: any, entry: LegendPayload, index: number) => ReactNode;
+
+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.
+ */
+	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.
+ */
+	payload?: object;
+	formatter?: Formatter;
+	inactive?: boolean;
+	legendIcon?: ReactElement<SVGElement>;
+	dataKey?: DataKey<any>;
+}
+
+interface DefaultLegendContentProps {
+	/**
+ * The size of icon in each legend item.
+ * @defaultValue 14
+ */
+	iconSize?: number;
+	/**
+ * The type of icon in each legend item.
+ */
+	iconType?: LegendType;
+	/**
+ * 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
+ */
+	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
+ */
+	verticalAlign?: VerticalAlignmentType;
+	/**
+ * 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
+ */
+	formatter?: Formatter;
+	/**
+ * 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: MouseEvent<HTMLElement>) => void;
+	/**
+ * 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: MouseEvent<HTMLElement>) => void;
+	/**
+ * The customized event handler of click on the items in this group
+ */
+	onClick?: (data: LegendPayload, index: number, event: MouseEvent<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.
+ */
+	payload?: ReadonlyArray<LegendPayload>;
+	/**
+ * The style of each text label which is a span element.
+ * @defaultValue {}
+ */
+	labelStyle?: CSSProperties;
+}
+
+export type Props =
+	DefaultLegendContentProps & Omit<
+		PresentationAttributesAdaptChildEvent<any, ReactElement>,
+		keyof DefaultLegendContentProps
+	>;
+
+export const defaultLegendContentDefaultProps = {
+	align: 'center',
+	iconSize: 14,
+	inactiveColor: '#ccc',
+	layout: 'horizontal',
+	verticalAlign: 'middle',
+	labelStyle: {},
+} as const satisfies Partial<Props>;
+
+type InternalProps =
+	RequiresDefaultProps<Props, typeof defaultLegendContentDefaultProps> & {
+		payload: ReadonlyArray<LegendPayload>;
+	};
+
+function getStrokeDasharray(input: unknown): string | undefined {
+	if (typeof input === 'object' && input !== null && 'strokeDasharray' in input) {
+		return String(input.strokeDasharray);
+	}
+	return undefined;
+}
+
+function Icon({
+	data,
+	iconType,
+	inactiveColor,
+}: {
+	data: LegendPayload;
+	iconType: LegendType | undefined;
+	inactiveColor: string;
+}) {
+	const halfSize = SIZE / 2;
+	const sixthSize = SIZE / 6;
+	const thirdSize = SIZE / 3;
+	const color = data.inactive ? inactiveColor : data.color;
+	const preferredIcon = iconType ?? data.type;
+
+	if (preferredIcon === 'none') {
+		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"
+		/>;
+	}
+	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}
+            A${sixthSize},${sixthSize},0,1,1,${thirdSize},${halfSize}`}
+			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"
+		/>;
+	}
+	if (React.isValidElement(data.legendIcon)) {
+		const iconProps: any = { ...data };
+		delete iconProps.legendIcon;
+		return React.cloneElement(data.legendIcon, iconProps);
+	}
+
+	return <Symbols
+		fill={color}
+		cx={halfSize}
+		cy={halfSize}
+		size={SIZE}
+		sizeType="diameter"
+		type={preferredIcon}
+	/>;
+}
+
+function Items(props: InternalProps) {
+	const { payload, iconSize, layout, formatter, inactiveColor, iconType, labelStyle } = props;
+	const viewBox = { x: 0, y: 0, width: SIZE, height: SIZE };
+	const itemStyle = {
+		display: layout === 'horizontal' ? 'inline-block' : 'block',
+		marginRight: 10,
+	};
+	const svgStyle = { display: 'inline-block', verticalAlign: 'middle', marginRight: 4 };
+	return payload.map((entry: LegendPayload, i: number) => {
+		const finalFormatter = entry.formatter || formatter;
+		const className = clsx({
+			'recharts-legend-item': true,
+			[`legend-item-${i}`]: true,
+			inactive: entry.inactive,
+		});
+
+		if (entry.type === 'none') {
+			return null;
+		}
+
+		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;
+
+		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`}
+			>
+				<Icon data={entry} iconType={iconType} inactiveColor={inactiveColor} />
+			</Surface>
+			<span className="recharts-legend-item-text" style={finalLabelStyle}>{finalValue}</span>
+		</li>;
+	});
+}
+
+/**
+ * This component is by default rendered inside the {@link Legend} component. You would not use it directly.
+ *
+ * You can use this component to customize the content of the legend,
+ * or you can provide your own completely independent content.
+ */
+export const DefaultLegendContent = (outsideProps: Props) => {
+	const props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
+	const { payload, layout, align } = props;
+
+	if (!payload || !payload.length) {
+		return null;
+	}
+
+	const finalStyle = {
+		padding: 0,
+		margin: 0,
+		textAlign: layout === 'horizontal' ? align : 'left',
+	};
+
+	return <ul className="recharts-default-legend" style={finalStyle}>
+		<Items {...props} payload={payload} />
+	</ul>;
+};

package/src/component/DefaultLegendContent.tsrx.d.ts

@@ -0,0 +1,125 @@
+import * as React from 'octane';
+import { ReactNode, MouseEvent, ReactElement, CSSProperties } from 'octane';
+import {
+	DataKey,
+	LegendType,
+	PresentationAttributesAdaptChildEvent,
+	CartesianLayout,
+} from '../util/types';
+export type ContentType = ReactElement | ((props: Props) => ReactNode);
+export type HorizontalAlignmentType = 'center' | 'left' | 'right';
+export type VerticalAlignmentType = 'top' | 'bottom' | 'middle';
+export type Formatter = (value: any, entry: LegendPayload, index: number) => ReactNode;
+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.
+	 */
+	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.
+	 */
+	payload?: object;
+	formatter?: Formatter;
+	inactive?: boolean;
+	legendIcon?: ReactElement<SVGElement>;
+	dataKey?: DataKey<any>;
+}
+interface DefaultLegendContentProps {
+	/**
+	 * The size of icon in each legend item.
+	 * @defaultValue 14
+	 */
+	iconSize?: number;
+	/**
+	 * The type of icon in each legend item.
+	 */
+	iconType?: LegendType;
+	/**
+	 * 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
+	 */
+	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
+	 */
+	verticalAlign?: VerticalAlignmentType;
+	/**
+	 * 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
+	 */
+	formatter?: Formatter;
+	/**
+	 * 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: MouseEvent<HTMLElement>) => void;
+	/**
+	 * 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: MouseEvent<HTMLElement>) => void;
+	/**
+	 * The customized event handler of click on the items in this group
+	 */
+	onClick?: (data: LegendPayload, index: number, event: MouseEvent<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.
+	 */
+	payload?: ReadonlyArray<LegendPayload>;
+	/**
+	 * The style of each text label which is a span element.
+	 * @defaultValue {}
+	 */
+	labelStyle?: CSSProperties;
+}
+export type Props = DefaultLegendContentProps &
+	Omit<PresentationAttributesAdaptChildEvent<any, ReactElement>, keyof DefaultLegendContentProps>;
+export declare const defaultLegendContentDefaultProps: {
+	readonly align: 'center';
+	readonly iconSize: 14;
+	readonly inactiveColor: '#ccc';
+	readonly layout: 'horizontal';
+	readonly verticalAlign: 'middle';
+	readonly labelStyle: {};
+};
+/**
+ * This component is by default rendered inside the {@link Legend} component. You would not use it directly.
+ *
+ * You can use this component to customize the content of the legend,
+ * or you can provide your own completely independent content.
+ */
+export declare const DefaultLegendContent: (outsideProps: Props) => React.JSX.Element | null;
+export {};