@octanejs/recharts 0.1.16 → 0.1.18

package/src/chart/FunnelChart.tsrx

@@ -0,0 +1,22 @@
+import { arrayTooltipSearcher } from '../state/optionsSlice';
+import { CartesianChart } from './CartesianChart.tsrx';
+import { CartesianChartProps, TooltipEventType } from '../util/types';
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['item'];
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function FunnelChart(props: CartesianChartProps<unknown>) {
+	const { ref, ...rest } = props;
+	return <CartesianChart
+		chartName="FunnelChart"
+		defaultTooltipEventType="item"
+		validateTooltipEventTypes={allowedTooltipTypes}
+		tooltipPayloadSearcher={arrayTooltipSearcher}
+		categoricalChartProps={rest}
+		ref={ref}
+	/>;
+}

package/src/chart/FunnelChart.tsrx.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'octane';
+import { CartesianChartProps } from '../util/types';
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export declare const FunnelChart: <DataPointType = any>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: React.Ref<SVGSVGElement>;
+	},
+) => React.ReactElement;

package/src/chart/PieChart.tsrx

@@ -0,0 +1,31 @@
+import { arrayTooltipSearcher } from '../state/optionsSlice';
+import { defaultPolarChartProps, PolarChart } from './PolarChart';
+import { PolarChartProps, TooltipEventType } from '../util/types';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['item'];
+
+export const defaultPieChartProps = {
+	...defaultPolarChartProps,
+	layout: 'centric',
+	startAngle: 0,
+	endAngle: 360,
+} as const satisfies Partial<PolarChartProps<never>>;
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export function PieChart(props: PolarChartProps<unknown>) {
+	const { ref, ...rest } = props;
+	const propsWithDefaults = resolveDefaultProps(rest, defaultPieChartProps);
+	return <PolarChart
+		chartName="PieChart"
+		defaultTooltipEventType="item"
+		validateTooltipEventTypes={allowedTooltipTypes}
+		tooltipPayloadSearcher={arrayTooltipSearcher}
+		categoricalChartProps={propsWithDefaults}
+		ref={ref}
+	/>;
+}

package/src/chart/PieChart.tsrx.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'octane';
+import { PolarChartProps } from '../util/types';
+export declare const defaultPieChartProps: {
+	readonly layout: 'centric';
+	readonly startAngle: 0;
+	readonly endAngle: 360;
+	readonly throttleDelay: number | 'raf';
+	readonly throttledEvents: ReadonlyArray<keyof GlobalEventHandlersEventMap> | 'all';
+	readonly accessibilityLayer: true;
+	readonly stackOffset: 'none';
+	readonly barCategoryGap: '10%';
+	readonly barGap: 4;
+	readonly margin: import('..').Margin;
+	readonly reverseStackOrder: false;
+	readonly syncMethod: 'index';
+	readonly responsive: false;
+	readonly cx: '50%';
+	readonly cy: '50%';
+	readonly innerRadius: 0;
+	readonly outerRadius: '80%';
+};
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export declare const PieChart: <DataPointType = any>(
+	props: PolarChartProps<DataPointType> & {
+		ref?: React.Ref<SVGSVGElement>;
+	},
+) => React.ReactElement;

package/src/chart/PolarChart.tsrx

@@ -0,0 +1,121 @@
+import { ChartOptions } from '../state/optionsSlice';
+import { RechartsStoreProvider } from '../state/RechartsStoreProvider';
+import { ChartDataContextProvider } from '../context/chartDataContext';
+import { ReportMainChartProps } from '../state/ReportMainChartProps';
+import { ReportChartProps } from '../state/ReportChartProps';
+import { ReportEventSettings } from '../state/ReportEventSettings';
+import { ReportPolarOptions } from '../state/ReportPolarOptions';
+import { Margin, PolarChartProps, TooltipEventType } from '../util/types';
+import { TooltipPayloadSearcher } from '../state/tooltipSlice';
+import { CategoricalChart } from './CategoricalChart';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { initialEventSettingsState } from '../state/eventSettingsSlice';
+
+const defaultMargin: Margin = { top: 5, right: 5, bottom: 5, left: 5 };
+
+/**
+ * These default props are the same for all PolarChart components.
+ */
+export const defaultPolarChartProps = {
+	accessibilityLayer: true,
+	stackOffset: 'none',
+	barCategoryGap: '10%',
+	barGap: 4,
+	margin: defaultMargin,
+	reverseStackOrder: false,
+	syncMethod: 'index',
+	layout: 'radial',
+	responsive: false,
+	cx: '50%',
+	cy: '50%',
+	innerRadius: 0,
+	outerRadius: '80%',
+	...initialEventSettingsState,
+} as const satisfies Partial<PolarChartProps<never>>;
+
+/**
+ * These props are required for the PolarChart to function correctly.
+ * Users usually would not need to specify these explicitly,
+ * because the convenience components like PieChart, RadarChart, etc.
+ * will provide these defaults.
+ * We can't have the defaults in this file because each of those convenience components
+ * have their own opinions about what they should be.
+ */
+type PolarChartPropsWithDefaults =
+	PolarChartProps & {
+		cx: NonNullable<PolarChartProps['cx']>;
+		cy: NonNullable<PolarChartProps['cy']>;
+		startAngle: NonNullable<PolarChartProps['startAngle']>;
+		endAngle: NonNullable<PolarChartProps['endAngle']>;
+		innerRadius: NonNullable<PolarChartProps['innerRadius']>;
+		outerRadius: NonNullable<PolarChartProps['outerRadius']>;
+	};
+
+/**
+ * These are one-time, immutable options that decide the chart's behavior.
+ * Users who wish to call CartesianChart may decide to pass these options explicitly,
+ * but usually we would expect that they use one of the convenience components like PieChart, RadarChart, etc.
+ */
+export type PolarChartOptions = {
+	chartName: string;
+	defaultTooltipEventType: TooltipEventType;
+	validateTooltipEventTypes: ReadonlyArray<TooltipEventType>;
+	tooltipPayloadSearcher: TooltipPayloadSearcher;
+	categoricalChartProps: PolarChartPropsWithDefaults;
+};
+
+export function PolarChart(props: PolarChartOptions & { ref?: unknown }) {
+	const { ref } = props;
+	const polarChartProps = resolveDefaultProps(props.categoricalChartProps, defaultPolarChartProps);
+
+	const { layout, ...otherCategoricalProps } = polarChartProps;
+
+	const {
+		chartName,
+		defaultTooltipEventType,
+		validateTooltipEventTypes,
+		tooltipPayloadSearcher,
+	} = props;
+
+	const options: ChartOptions = {
+		chartName,
+		defaultTooltipEventType,
+		validateTooltipEventTypes,
+		tooltipPayloadSearcher,
+		eventEmitter: undefined,
+	};
+
+	return <RechartsStoreProvider
+		preloadedState={{ options }}
+		reduxStoreName={polarChartProps.id ?? chartName}
+	>
+		<ChartDataContextProvider chartData={polarChartProps.data} />
+		<ReportMainChartProps layout={layout} margin={polarChartProps.margin} />
+		<ReportEventSettings
+			throttleDelay={polarChartProps.throttleDelay}
+			throttledEvents={polarChartProps.throttledEvents}
+		/>
+		<ReportChartProps
+			baseValue={undefined}
+			accessibilityLayer={polarChartProps.accessibilityLayer}
+			barCategoryGap={polarChartProps.barCategoryGap}
+			maxBarSize={polarChartProps.maxBarSize}
+			stackOffset={polarChartProps.stackOffset}
+			barGap={polarChartProps.barGap}
+			barSize={polarChartProps.barSize}
+			syncId={polarChartProps.syncId}
+			syncMethod={polarChartProps.syncMethod}
+			className={polarChartProps.className}
+			reverseStackOrder={polarChartProps.reverseStackOrder}
+		/>
+		<ReportPolarOptions
+			cx={polarChartProps.cx}
+			cy={polarChartProps.cy}
+			startAngle={polarChartProps.startAngle}
+			endAngle={polarChartProps.endAngle}
+			innerRadius={polarChartProps.innerRadius}
+			outerRadius={polarChartProps.outerRadius}
+		/>
+		<CategoricalChart {...otherCategoricalProps} ref={ref} />
+	</RechartsStoreProvider>;
+}

package/src/chart/RadarChart.tsrx

@@ -0,0 +1,53 @@
+import { arrayTooltipSearcher } from '../state/optionsSlice';
+import { PolarChartProps, PolarLayout, TooltipEventType } from '../util/types';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { defaultPolarChartProps, PolarChart } from './PolarChart';
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis'];
+
+export const defaultRadarChartProps = {
+	...defaultPolarChartProps,
+	layout: 'centric',
+	startAngle: 90,
+	endAngle: -270,
+} as const satisfies Partial<PolarChartProps<never>>;
+
+type RadarChartProps<DataPointType> =
+	Omit<PolarChartProps<DataPointType>, 'layout' | 'startAngle' | 'endAngle'> & {
+		/**
+ * The layout of chart defines the orientation of axes, graphical items, and tooltip.
+ *
+ * @defaultValue centric
+ */
+		layout?: PolarLayout;
+		/**
+ * Angle in degrees from which the chart should start.
+ * @defaultValue 90
+ *
+ */
+		startAngle?: number;
+		/**
+ * Angle, in degrees, at which the chart should end.
+ *
+ * @defaultValue -270
+ */
+		endAngle?: number;
+	};
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export function RadarChart(props: RadarChartProps<unknown>) {
+	const { ref, ...rest } = props;
+	const propsWithDefaults = resolveDefaultProps(rest, defaultRadarChartProps);
+	return <PolarChart
+		chartName="RadarChart"
+		defaultTooltipEventType="axis"
+		validateTooltipEventTypes={allowedTooltipTypes}
+		tooltipPayloadSearcher={arrayTooltipSearcher}
+		categoricalChartProps={propsWithDefaults}
+		ref={ref}
+	/>;
+}

package/src/chart/RadarChart.tsrx.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'octane';
+import { PolarChartProps } from '../util/types';
+export declare const defaultRadarChartProps: {
+	readonly layout: 'centric';
+	readonly startAngle: 90;
+	readonly endAngle: -270;
+	readonly throttleDelay: number | 'raf';
+	readonly throttledEvents: ReadonlyArray<keyof GlobalEventHandlersEventMap> | 'all';
+	readonly accessibilityLayer: true;
+	readonly stackOffset: 'none';
+	readonly barCategoryGap: '10%';
+	readonly barGap: 4;
+	readonly margin: import('..').Margin;
+	readonly reverseStackOrder: false;
+	readonly syncMethod: 'index';
+	readonly responsive: false;
+	readonly cx: '50%';
+	readonly cy: '50%';
+	readonly innerRadius: 0;
+	readonly outerRadius: '80%';
+};
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export declare const RadarChart: <DataPointType = any>(
+	props: PolarChartProps<DataPointType> & {
+		ref?: React.Ref<SVGSVGElement>;
+	},
+) => React.ReactElement;

package/src/chart/RadialBarChart.tsrx

@@ -0,0 +1,31 @@
+import { arrayTooltipSearcher } from '../state/optionsSlice';
+import { PolarChartProps, TooltipEventType } from '../util/types';
+import { resolveDefaultProps } from '../util/resolveDefaultProps';
+import { defaultPolarChartProps, PolarChart } from './PolarChart';
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ['axis', 'item'];
+
+export const defaultRadialBarChartProps = {
+	...defaultPolarChartProps,
+	layout: 'radial',
+	startAngle: 0,
+	endAngle: 360,
+} as const satisfies Partial<PolarChartProps<never>>;
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export function RadialBarChart(props: PolarChartProps<unknown>) {
+	const { ref, ...rest } = props;
+	const propsWithDefaults = resolveDefaultProps(rest, defaultRadialBarChartProps);
+	return <PolarChart
+		chartName="RadialBarChart"
+		defaultTooltipEventType="axis"
+		validateTooltipEventTypes={allowedTooltipTypes}
+		tooltipPayloadSearcher={arrayTooltipSearcher}
+		categoricalChartProps={propsWithDefaults}
+		ref={ref}
+	/>;
+}

package/src/chart/RadialBarChart.tsrx.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'octane';
+import { PolarChartProps } from '../util/types';
+export declare const defaultRadialBarChartProps: {
+	readonly layout: 'radial';
+	readonly startAngle: 0;
+	readonly endAngle: 360;
+	readonly throttleDelay: number | 'raf';
+	readonly throttledEvents: ReadonlyArray<keyof GlobalEventHandlersEventMap> | 'all';
+	readonly accessibilityLayer: true;
+	readonly stackOffset: 'none';
+	readonly barCategoryGap: '10%';
+	readonly barGap: 4;
+	readonly margin: import('..').Margin;
+	readonly reverseStackOrder: false;
+	readonly syncMethod: 'index';
+	readonly responsive: false;
+	readonly cx: '50%';
+	readonly cy: '50%';
+	readonly innerRadius: 0;
+	readonly outerRadius: '80%';
+};
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export declare const RadialBarChart: <DataPointType = any>(
+	props: PolarChartProps<DataPointType> & {
+		ref?: React.Ref<SVGSVGElement>;
+	},
+) => React.ReactElement;