@octanejs/recharts 0.1.16 → 0.1.18

package/src/polar/PolarAngleAxis.tsrx.d.ts

@@ -0,0 +1,215 @@
+import * as React from 'octane';
+import { FunctionComponent, SVGProps } from 'octane';
+import {
+	AxisDomain,
+	AxisDomainTypeInput,
+	BaseTickContentProps,
+	PresentationAttributesAdaptChildEvent,
+	RenderableAxisProps,
+	ScaleType,
+	TickItem,
+	TickProp,
+} from '../util/types';
+import { NiceTicksAlgorithm } from '../state/cartesianAxisSlice';
+import { defaultPolarAngleAxisProps } from './defaultPolarAngleAxisProps';
+import { RequiresDefaultProps } from '../util/resolveDefaultProps';
+import { ZIndexable } from '../zIndex/ZIndexLayer';
+import { CustomScaleDefinition } from '../util/scale/CustomScaleDefinition';
+export interface PolarAngleAxisProps<DataPointType = any, DataValueType = any>
+	extends
+		Omit<
+			RenderableAxisProps<DataPointType, DataValueType>,
+			'axisLine' | 'tickCount' | 'domain' | 'scale' | 'tick'
+		>,
+		ZIndexable {
+	/**
+	 * Controls axis line element. These are be passed as props to SVG `<line>` element representing the axis line.
+	 * If `true` then the axis line is drawn using props of the PolarAngleAxis component.
+	 * If `false` then the axis line is not drawn.
+	 *
+	 * Also see `axisLineType` prop to change the shape of the axis line.
+	 *
+	 * @defaultValue true
+	 *
+	 * @example <PolarAngleAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
+	 * @example <PolarAngleAxis axisLine={false} />
+	 * @example <PolarAngleAxis stroke='red' strokeWidth={2} strokeDasharray={4} />
+	 */
+	axisLine?: boolean | SVGProps<SVGLineElement>;
+	/**
+	 * @defaultValue false
+	 */
+	allowDecimals?: boolean;
+	/**
+	 * Allow the axis has duplicated categories or not when the type of axis is "category".
+	 * @defaultValue true
+	 */
+	allowDuplicatedCategory?: boolean;
+	/**
+	 * @defaultValue 0
+	 */
+	angleAxisId?: string | number;
+	/**
+	 * The type of axis line.
+	 * @defaultValue polygon
+	 */
+	axisLineType?: 'polygon' | 'circle';
+	/**
+	 * The x-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	cx?: number;
+	/**
+	 * The y-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	cy?: number;
+	/**
+	 * The orientation of axis text.
+	 * @defaultValue 'outer'
+	 */
+	orientation?: 'inner' | 'outer';
+	/**
+	 * Specify the domain of axis when the axis is a number axis.
+	 *
+	 * If undefined, then the domain is calculated based on the data and dataKeys.
+	 *
+	 * The length of domain should be 2, and we will validate the values in domain.
+	 *
+	 * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
+	 * or a function that accepts a single argument and returns a number.
+	 *
+	 * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
+	 * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
+	 *
+	 * @example <PolarAngleAxis type="number" domain={['dataMin', 'dataMax']} />
+	 * @example <PolarAngleAxis type="number" domain={[0, 'dataMax']} />
+	 * @example <PolarAngleAxis type="number" domain={['auto', 'auto']} />
+	 * @example <PolarAngleAxis type="number" domain={[0, 'dataMax + 1000']} />
+	 * @example <PolarAngleAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
+	 * @example <PolarAngleAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
+	 * @example <PolarAngleAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
+	 * @example <PolarAngleAxis type="number" domain={[0, 100]} allowDataOverflow />
+	 */
+	domain?: AxisDomain;
+	/**
+	 * Scale function determines how data values are mapped to visual values.
+	 * In other words, decided the mapping between data domain and coordinate range.
+	 *
+	 * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
+	 *
+	 * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
+	 *
+	 * @defaultValue auto
+	 * @example <PolarAngleAxis scale="log" />
+	 * @example
+	 * import { scaleLog } from 'd3-scale';
+	 * const scale = scaleLog().base(Math.E);
+	 * <PolarAngleAxis scale={scale} />
+	 */
+	scale?:
+		| ScaleType
+		| CustomScaleDefinition
+		| CustomScaleDefinition<string>
+		| CustomScaleDefinition<number>
+		| CustomScaleDefinition<Date>;
+	/**
+	 * The outer radius of circle grid.
+	 * If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
+	 */
+	radius?: number | string;
+	/**
+	 * Defines how the individual label text is rendered.
+	 * This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.
+	 *
+	 * If you want to customize the overall axis label, use the `label` prop instead.
+	 *
+	 * Options:
+	 * - `false`: Do not render any tick labels.
+	 * - `true`: Render tick labels with default settings.
+	 * - `object`: An object of props to be merged into the internally calculated tick props.
+	 * - `ReactElement`: A custom React element to be used as the tick label.
+	 * - `function`: A function that returns a React element for custom rendering of tick labels.
+	 *
+	 * @defaultValue true
+	 */
+	tick?: TickProp<BaseTickContentProps>;
+	/**
+	 * The count of axis ticks. Not used if 'type' is 'category'.
+	 */
+	tickCount?: number;
+	/**
+	 * Controls how Recharts calculates "nice" tick values for this axis.
+	 * Options: `'none'`, `'auto'`, `'adaptive'`, `'snap125'`.
+	 * See {@link NiceTicksAlgorithm} for a full description of each option.
+	 *
+	 * @defaultValue 'auto'
+	 */
+	niceTicks?: NiceTicksAlgorithm;
+	/**
+	 * The formatter function of ticks.
+	 */
+	tickFormatter?: (value: any, index: number) => string;
+	/**
+	 * The length of tick line.
+	 * @defaultValue 8
+	 */
+	tickSize?: number;
+	/**
+	 * The array of every tick's value and angle.
+	 */
+	ticks?: ReadonlyArray<TickItem>;
+	/**
+	 * The type of axis.
+	 *
+	 * `category`: Treats data as distinct values.
+	 * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
+	 *
+	 * `number`: Treats data as continuous range.
+	 * Values that are numerically closer are placed closer together on the axis.
+	 *
+	 * `auto`: the type is inferred based on the chart layout.
+	 *
+	 * @defaultValue auto
+	 */
+	type?: AxisDomainTypeInput;
+	/**
+	 * Z-Index of this component and its children. The higher the value,
+	 * the more on top it will be rendered.
+	 * Components with higher zIndex will appear in front of components with lower zIndex.
+	 * If undefined or 0, the content is rendered in the default layer without portals.
+	 *
+	 * @since 3.4
+	 * @defaultValue 500
+	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+	 */
+	zIndex?: number;
+}
+type AxisSvgProps = Omit<
+	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
+	'scale' | 'type' | 'dangerouslySetInnerHTML'
+>;
+export type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
+	PolarAngleAxisProps<DataPointType, DataValueType>;
+type PropsWithDefaults<DataPointType = any, DataValueType = any> = RequiresDefaultProps<
+	Props<DataPointType, DataValueType>,
+	typeof defaultPolarAngleAxisProps
+>;
+export declare const PolarAngleAxisWrapper: FunctionComponent<PropsWithDefaults>;
+/**
+ * @provides PolarLabelContext
+ * @consumes PolarViewBoxContext
+ */
+export declare function PolarAngleAxis<DataPointType = any, DataValueType = any>(
+	outsideProps: Props<DataPointType, DataValueType>,
+): React.ReactNode;
+export declare namespace PolarAngleAxis {
+	var displayName: string;
+}
+export {};

package/src/polar/PolarGrid.tsrx

@@ -0,0 +1,317 @@
+import { clsx } from 'clsx';
+import * as React from 'octane';
+import { SVGProps } from 'octane';
+import { polarToCartesian } from '../util/PolarUtils';
+import { AxisId } from '../state/cartesianAxisSlice';
+import { useAppSelector } from '../state/hooks';
+import { selectPolarGridAngles, selectPolarGridRadii } from '../state/selectors/polarGridSelectors';
+import { selectPolarViewBox } from '../state/selectors/polarAxisSelectors';
+import { PolarViewBoxRequired } from '../util/types';
+import { svgPropertiesNoEvents } from '../util/svgPropertiesNoEvents';
+import { ZIndexable, ZIndexLayer } from '../zIndex/ZIndexLayer';
+import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+
+interface PolarGridProps extends ZIndexable {
+	/**
+ * The x-coordinate of center.
+ * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+ * and this prop is ignored.
+ *
+ * This is only used when rendered outside a chart context.
+ */
+	cx?: number;
+	/**
+ * The y-coordinate of center.
+ * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+ * and this prop is ignored.
+ *
+ * This is only used when rendered outside a chart context.
+ */
+	cy?: number;
+	/**
+ * The radius of the inner polar grid.
+ * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+ * and this prop is ignored.
+ *
+ * This is only used when rendered outside a chart context.
+ */
+	innerRadius?: number;
+	/**
+ * The radius of the outer polar grid.
+ * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+ * and this prop is ignored.
+ *
+ * This is only used when rendered outside a chart context.
+ */
+	outerRadius?: number;
+	/**
+ * The array of every line grid's angle.
+ */
+	polarAngles?: ReadonlyArray<number>;
+	/**
+ * The array of every circle grid's radius.
+ */
+	polarRadius?: ReadonlyArray<number>;
+	/**
+ * The type of polar grids.
+ * @defaultValue polygon
+ */
+	gridType?: 'polygon' | 'circle';
+	/**
+ * @defaultValue true
+ */
+	radialLines?: boolean;
+	/**
+ * @defaultValue 0
+ */
+	angleAxisId?: AxisId;
+	/**
+ * @defaultValue 0
+ */
+	radiusAxisId?: AxisId;
+	/**
+ * Z-Index of this component and its children. The higher the value,
+ * the more on top it will be rendered.
+ * Components with higher zIndex will appear in front of components with lower zIndex.
+ * If undefined or 0, the content is rendered in the default layer without portals.
+ *
+ * @since 3.4
+ * @defaultValue -100
+ * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+ */
+	zIndex?: number;
+	/**
+ * The stroke color. If "none", no line will be drawn.
+ * @defaultValue #ccc
+ */
+	stroke?: string;
+	/**
+ * The width of the stroke.
+ * @defaultValue 1
+ */
+	strokeWidth?: number | string;
+	/**
+ * The pattern of dashes and gaps used to paint the lines of the grid.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray on MDN}
+ */
+	strokeDasharray?: string | number;
+	/**
+ * The background color used to fill the space between grid lines.
+ * @defaultValue none
+ */
+	fill?: string;
+	/**
+ * The opacity of the background used to fill the space between grid lines.
+ */
+	fillOpacity?: number | string;
+}
+
+export type Props = SVGProps<SVGLineElement> & PolarGridProps;
+
+type PropsWithDefaults =
+	Props & {
+		cx: number;
+		cy: number;
+		innerRadius: number;
+		outerRadius: number;
+		polarAngles: ReadonlyArray<number>;
+		polarRadius: ReadonlyArray<number>;
+	};
+
+type ConcentricProps =
+	PropsWithDefaults & {
+		// The radius of circle
+		radius: number;
+	};
+
+const getPolygonPath = (
+	radius: number,
+	cx: number,
+	cy: number,
+	polarAngles: ReadonlyArray<number>,
+) => {
+	let path = '';
+
+	polarAngles.forEach((angle: number, i: number) => {
+		const point = polarToCartesian(cx, cy, radius, angle);
+
+		if (i) {
+			path += `L ${point.x},${point.y}`;
+		} else {
+			path += `M ${point.x},${point.y}`;
+		}
+	});
+	path += 'Z';
+
+	return path;
+};
+
+// Draw axis of radial line
+const PolarAngles: React.FC<PropsWithDefaults> = (props: PropsWithDefaults) => {
+	const { cx, cy, innerRadius, outerRadius, polarAngles, radialLines } = props;
+
+	if (!polarAngles || !polarAngles.length || !radialLines) {
+		return null;
+	}
+	const polarAnglesProps = {
+		...svgPropertiesNoEvents(props),
+	};
+
+	return <g className="recharts-polar-grid-angle">{polarAngles.map((entry) => {
+		const start = polarToCartesian(cx, cy, innerRadius, entry);
+		const end = polarToCartesian(cx, cy, outerRadius, entry);
+
+		return <line
+			key={`line-${entry}`}
+			{...polarAnglesProps}
+			x1={start.x}
+			y1={start.y}
+			x2={end.x}
+			y2={end.y}
+		/>;
+	})}</g>;
+};
+
+// Draw concentric circles
+const ConcentricCircle: React.FC<ConcentricProps> = (props) => {
+	const { cx, cy, radius } = props;
+	const concentricCircleProps = {
+		...svgPropertiesNoEvents(props),
+	};
+
+	return (
+		// @ts-expect-error wrong SVG element type
+		<circle
+			{...concentricCircleProps}
+			className={clsx('recharts-polar-grid-concentric-circle', props.className)}
+			cx={cx}
+			cy={cy}
+			r={radius}
+		/>
+	);
+};
+
+// Draw concentric polygons
+const ConcentricPolygon: React.FC<ConcentricProps> = (props: ConcentricProps) => {
+	const { radius } = props;
+	const concentricPolygonProps = {
+		...svgPropertiesNoEvents(props),
+	};
+
+	return <path
+		{...concentricPolygonProps}
+		className={clsx('recharts-polar-grid-concentric-polygon', props.className)}
+		d={getPolygonPath(radius, props.cx, props.cy, props.polarAngles)}
+	/>;
+};
+
+// Draw concentric axis
+const ConcentricGridPath = (props: PropsWithDefaults) => {
+	const { polarRadius, gridType } = props;
+
+	if (!polarRadius || !polarRadius.length) {
+		return null;
+	}
+
+	const maxPolarRadius: number = Math.max(...polarRadius);
+	const renderBackground = props.fill && props.fill !== 'none';
+
+	return <g className="recharts-polar-grid-concentric">
+		{/* Render background as separate first child to do not cover strokes of smaller figures */}
+		{renderBackground && gridType === 'circle' &&
+			<ConcentricCircle {...props} radius={maxPolarRadius} />}
+		{renderBackground && gridType !== 'circle' &&
+			<ConcentricPolygon {...props} radius={maxPolarRadius} />}
+
+		{polarRadius.map((entry: number, i: number) => {
+			const key = i;
+
+			if (gridType === 'circle') {
+				return <ConcentricCircle key={key} {...props} fill="none" radius={entry} />;
+			}
+
+			return <ConcentricPolygon key={key} {...props} fill="none" radius={entry} />;
+		})}
+	</g>;
+};
+
+export const defaultPolarGridProps = {
+	angleAxisId: 0,
+	radiusAxisId: 0,
+	gridType: 'polygon',
+	radialLines: true,
+	zIndex: DefaultZIndexes.grid,
+	stroke: '#ccc',
+	strokeWidth: 1,
+	fill: 'none',
+} as const satisfies Partial<Props>;
+
+/**
+ * @consumes PolarViewBoxContext
+ */
+export const PolarGrid = (outsideProps: Props) => {
+	const {
+		gridType,
+		radialLines,
+		angleAxisId,
+		radiusAxisId,
+		cx: cxFromOutside,
+		cy: cyFromOutside,
+		innerRadius: innerRadiusFromOutside,
+		outerRadius: outerRadiusFromOutside,
+		polarAngles: polarAnglesInput,
+		polarRadius: polarRadiusInput,
+		zIndex,
+		...inputs
+	} = resolveDefaultProps(outsideProps, defaultPolarGridProps);
+	const polarViewBox: PolarViewBoxRequired | undefined = useAppSelector(selectPolarViewBox);
+
+	const polarAnglesFromRedux = useAppSelector((state) => selectPolarGridAngles(state, angleAxisId));
+	const polarRadiiFromRedux = useAppSelector((state) => selectPolarGridRadii(state, radiusAxisId));
+
+	const polarAngles = Array.isArray(polarAnglesInput) ? polarAnglesInput : polarAnglesFromRedux;
+	const polarRadius = Array.isArray(polarRadiusInput) ? polarRadiusInput : polarRadiiFromRedux;
+
+	if (polarAngles == null || polarRadius == null) {
+		return null;
+	}
+
+	const props: PropsWithDefaults = {
+		cx: polarViewBox?.cx ?? cxFromOutside ?? 0,
+		cy: polarViewBox?.cy ?? cyFromOutside ?? 0,
+		innerRadius: polarViewBox?.innerRadius ?? innerRadiusFromOutside ?? 0,
+		outerRadius: polarViewBox?.outerRadius ?? outerRadiusFromOutside ?? 0,
+		polarAngles,
+		polarRadius,
+		zIndex,
+		...inputs,
+	};
+
+	const { outerRadius } = props;
+
+	if (outerRadius <= 0) {
+		return null;
+	}
+
+	return <ZIndexLayer zIndex={props.zIndex}>
+		<g className="recharts-polar-grid">
+			<ConcentricGridPath
+				gridType={gridType}
+				radialLines={radialLines}
+				{...props}
+				polarAngles={polarAngles}
+				polarRadius={polarRadius}
+			/>
+			<PolarAngles
+				gridType={gridType}
+				radialLines={radialLines}
+				{...props}
+				polarAngles={polarAngles}
+				polarRadius={polarRadius}
+			/>
+		</g>
+	</ZIndexLayer>;
+};
+
+PolarGrid.displayName = 'PolarGrid';

package/src/polar/PolarGrid.tsrx.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'octane';
+import { SVGProps } from 'octane';
+import { AxisId } from '../state/cartesianAxisSlice';
+import { ZIndexable } from '../zIndex/ZIndexLayer';
+interface PolarGridProps extends ZIndexable {
+	/**
+	 * The x-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	cx?: number;
+	/**
+	 * The y-coordinate of center.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	cy?: number;
+	/**
+	 * The radius of the inner polar grid.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	innerRadius?: number;
+	/**
+	 * The radius of the outer polar grid.
+	 * When used inside a chart context, this prop is calculated based on the chart's dimensions,
+	 * and this prop is ignored.
+	 *
+	 * This is only used when rendered outside a chart context.
+	 */
+	outerRadius?: number;
+	/**
+	 * The array of every line grid's angle.
+	 */
+	polarAngles?: ReadonlyArray<number>;
+	/**
+	 * The array of every circle grid's radius.
+	 */
+	polarRadius?: ReadonlyArray<number>;
+	/**
+	 * The type of polar grids.
+	 * @defaultValue polygon
+	 */
+	gridType?: 'polygon' | 'circle';
+	/**
+	 * @defaultValue true
+	 */
+	radialLines?: boolean;
+	/**
+	 * @defaultValue 0
+	 */
+	angleAxisId?: AxisId;
+	/**
+	 * @defaultValue 0
+	 */
+	radiusAxisId?: AxisId;
+	/**
+	 * Z-Index of this component and its children. The higher the value,
+	 * the more on top it will be rendered.
+	 * Components with higher zIndex will appear in front of components with lower zIndex.
+	 * If undefined or 0, the content is rendered in the default layer without portals.
+	 *
+	 * @since 3.4
+	 * @defaultValue -100
+	 * @see {@link https://recharts.github.io/en-US/guide/zIndex/ Z-Index and layers guide}
+	 */
+	zIndex?: number;
+	/**
+	 * The stroke color. If "none", no line will be drawn.
+	 * @defaultValue #ccc
+	 */
+	stroke?: string;
+	/**
+	 * The width of the stroke.
+	 * @defaultValue 1
+	 */
+	strokeWidth?: number | string;
+	/**
+	 * The pattern of dashes and gaps used to paint the lines of the grid.
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray on MDN}
+	 */
+	strokeDasharray?: string | number;
+	/**
+	 * The background color used to fill the space between grid lines.
+	 * @defaultValue none
+	 */
+	fill?: string;
+	/**
+	 * The opacity of the background used to fill the space between grid lines.
+	 */
+	fillOpacity?: number | string;
+}
+export type Props = SVGProps<SVGLineElement> & PolarGridProps;
+export declare const defaultPolarGridProps: {
+	readonly angleAxisId: 0;
+	readonly radiusAxisId: 0;
+	readonly gridType: 'polygon';
+	readonly radialLines: true;
+	readonly zIndex: -100;
+	readonly stroke: '#ccc';
+	readonly strokeWidth: 1;
+	readonly fill: 'none';
+};
+/**
+ * @consumes PolarViewBoxContext
+ */
+export declare const PolarGrid: {
+	(outsideProps: Props): React.JSX.Element | null;
+	displayName: string;
+};
+export {};