@solidports/recharts 0.1.0

package/src/chart/AreaChart.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import { CartesianChart } from "./CartesianChart"
+import type { CartesianChartProps, TooltipEventType } from "../util/types"
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"]
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function AreaChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+): JSX.Element {
+	return (
+		<CartesianChart
+			chartName="AreaChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={props}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/BarChart.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import type { CartesianChartProps, TooltipEventType } from "../util/types"
+import { CartesianChart } from "./CartesianChart"
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis", "item"]
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function BarChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+): JSX.Element {
+	return (
+		<CartesianChart
+			chartName="BarChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={props}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/CartesianChart.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable import/no-cycle */
+import { createMemo, untrack } from 'solid-js';
+import type { ChartOptions } from "../state/optionsSlice"
+import { RechartsStateProvider } from "../state/RechartsStateProvider"
+import { createInitialChartDataState, createInitialLayoutState } from "../state/chartState"
+import { ChartDataContextProvider } from "../context/chartDataContext"
+import { ReportMainChartProps } from "../state/ReportMainChartProps"
+import { ReportChartProps } from "../state/ReportChartProps"
+import { createInitialRootProps } from "./createInitialRootProps"
+import { ReportEventSettings } from "../state/ReportEventSettings"
+import type { CartesianChartProps, Margin, TooltipEventType } from "../util/types"
+import type { TooltipPayloadSearcher } from "../state/tooltipSlice"
+import { CategoricalChart } from "./CategoricalChart"
+import { resolveDefaultProps } from "../util/resolveDefaultProps"
+import { initialEventSettingsState } from "../state/eventSettingsSlice"
+
+import { splitProps } from '../util/solid-1-compat';
+const defaultMargin: Margin = { bottom: 5, left: 5, right: 5, top: 5 }
+
+export const defaultCartesianChartProps = {
+	accessibilityLayer: true,
+	barCategoryGap: "10%",
+	barGap: 4,
+	layout: "horizontal",
+	margin: defaultMargin,
+	responsive: false,
+	reverseStackOrder: false,
+	stackOffset: "none",
+	syncMethod: "index",
+	...initialEventSettingsState,
+} as const satisfies Partial<CartesianChartProps>
+
+/**
+ * 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 BarChart, LineChart, etc.
+ */
+export type CartesianChartOptions = {
+	chartName: string
+	defaultTooltipEventType: TooltipEventType
+	validateTooltipEventTypes: ReadonlyArray<TooltipEventType>
+	tooltipPayloadSearcher: TooltipPayloadSearcher
+	categoricalChartProps: CartesianChartProps
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}
+
+function CartesianChartInner(props: {
+	categoricalChartProps: CartesianChartProps
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}) {
+	/*
+	 * Owner MUST be inside RechartsStoreProvider — the memo captures its creation-site owner,
+	 * and any createComponent triggered during memo evaluation (via the `children` getter on
+	 * the Solid props proxy) inherits that owner. If this memo lived in the outer CartesianChart
+	 * component, children instantiated through the spread would be OUTSIDE the store Provider.
+	 *
+	 * Children must NOT flow through the resolveDefaultProps spread. resolveDefaultProps does
+	 * `{...realProps}` which enumerates own keys of the Solid props proxy — reading the
+	 * `children` getter eagerly calls createComponent(...) on user JSX (Legend, Tooltip, etc.)
+	 * under the CURRENT owner. That owner is inside RechartsStoreProvider but OUTSIDE
+	 * RechartsWrapper, so user components miss the LegendPortalContext / TooltipPortalContext
+	 * Providers that RechartsWrapper installs. Strip children with splitProps and pass them
+	 * as JSX children so the read happens deep inside RechartsWrapper, where all Providers
+	 * are visible.
+	 */
+	/* eslint-disable-next-line solid/reactivity -- splitProps receives the nested prop accessor once; restProps is a reactive proxy, reactivity flows through it */
+	const [childrenProps, restProps] = splitProps(props.categoricalChartProps, ["children"])
+	const rootChartProps = createMemo(() =>
+		resolveDefaultProps(restProps, defaultCartesianChartProps),
+	)
+
+	return (
+		<>
+			<ChartDataContextProvider chartData={rootChartProps().data} />
+			<ReportMainChartProps layout={rootChartProps().layout} margin={rootChartProps().margin} />
+			<ReportEventSettings
+				throttleDelay={rootChartProps().throttleDelay}
+				throttledEvents={rootChartProps().throttledEvents}
+			/>
+			<ReportChartProps
+				baseValue={rootChartProps().baseValue}
+				accessibilityLayer={rootChartProps().accessibilityLayer}
+				barCategoryGap={rootChartProps().barCategoryGap}
+				maxBarSize={rootChartProps().maxBarSize}
+				stackOffset={rootChartProps().stackOffset}
+				barGap={rootChartProps().barGap}
+				barSize={rootChartProps().barSize}
+				syncId={rootChartProps().syncId}
+				syncMethod={rootChartProps().syncMethod}
+				className={rootChartProps().className}
+				reverseStackOrder={rootChartProps().reverseStackOrder}
+			/>
+			<CategoricalChart {...rootChartProps()} ref={props.ref}>
+				{childrenProps.children}
+			</CategoricalChart>
+		</>
+	)
+}
+
+export function CartesianChart(props: CartesianChartOptions) {
+	const options = (): ChartOptions => ({
+		chartName: props.chartName,
+		defaultTooltipEventType: props.defaultTooltipEventType,
+		eventEmitter: undefined,
+		tooltipPayloadSearcher: props.tooltipPayloadSearcher,
+		validateTooltipEventTypes: props.validateTooltipEventTypes,
+	})
+
+	const initialChartData = () =>
+		untrack(() => createInitialChartDataState(props.categoricalChartProps.data))
+	const initialLayout = () =>
+		untrack(() =>
+			createInitialLayoutState({
+				height: props.categoricalChartProps.height,
+				layoutType: props.categoricalChartProps.layout ?? defaultCartesianChartProps.layout,
+				margin: props.categoricalChartProps.margin ?? defaultCartesianChartProps.margin,
+				width: props.categoricalChartProps.width,
+			}),
+		)
+
+	return (
+		<RechartsStateProvider preloadedState={{
+				chartData: initialChartData(),
+				layout: initialLayout(),
+				options: options(),
+				rootProps: untrack(() => createInitialRootProps(props.categoricalChartProps)),
+			}}>
+			<CartesianChartInner categoricalChartProps={props.categoricalChartProps} ref={props.ref} />
+		</RechartsStateProvider>
+	)
+}

package/src/chart/CategoricalChart.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-cycle */
+import { RootSurface } from "../container/RootSurface"
+import { RechartsWrapper } from "./RechartsWrapper"
+import { ClipPathProvider } from "../container/ClipPathProvider"
+import { useIsPanorama } from "../context/PanoramaContext"
+import type { CartesianChartProps } from "../util/types"
+import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
+import { ReportChartSize } from "../context/chartLayoutContext"
+
+import { untrack } from "solid-js"
+import { bindRef, splitProps } from '../util/solid-1-compat';
+export function CategoricalChart(
+	props: CartesianChartProps & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+) {
+	const [local, others] = splitProps(props, [
+		"width",
+		"height",
+		"responsive",
+		"children",
+		"className",
+		"style",
+		"compact",
+		"title",
+		"desc",
+		"ref",
+		"onClick",
+		"onMouseLeave",
+		"onMouseEnter",
+		"onMouseMove",
+		"onMouseDown",
+		"onMouseUp",
+		"onContextMenu",
+		"onDoubleClick",
+		"onTouchStart",
+		"onTouchMove",
+		"onTouchEnd",
+	])
+	const attrs = () => svgPropertiesNoEvents(others)
+
+	/*
+	 * The "compact" mode is used as the panorama within Brush.
+	 * However because `compact` is a public prop, let's assume that it can render outside of Brush too.
+	 */
+	/* Upstream Brush clones its child chart with `compact: true`; Solid cannot clone
+	   JSX, so a chart rendered inside the Brush panorama is compact by context.
+	   `compact` is set once at creation and never changes at runtime. */
+	const isPanorama = useIsPanorama()
+	if (isPanorama || untrack(() => local.compact)) {
+		return (
+			<>
+				<ReportChartSize width={local.width} height={local.height} />
+				<RootSurface
+					otherAttributes={attrs()}
+					title={local.title}
+					desc={local.desc}
+				>
+					{local.children}
+				</RootSurface>
+			</>
+		)
+	}
+
+	return (
+		<RechartsWrapper
+			class={local.className}
+			style={local.style}
+			width={local.width}
+			height={local.height}
+			responsive={local.responsive ?? false}
+			onClick={local.onClick}
+			onMouseLeave={local.onMouseLeave}
+			onMouseEnter={local.onMouseEnter}
+			onMouseMove={local.onMouseMove}
+			onMouseDown={local.onMouseDown}
+			onMouseUp={local.onMouseUp}
+			onContextMenu={local.onContextMenu}
+			onDoubleClick={local.onDoubleClick}
+			onTouchStart={local.onTouchStart}
+			onTouchMove={local.onTouchMove}
+			onTouchEnd={local.onTouchEnd}
+		>
+			<RootSurface
+				otherAttributes={attrs()}
+				title={local.title}
+				desc={local.desc}
+				ref={(el) => bindRef(local.ref, el)}
+			>
+				<ClipPathProvider>{local.children}</ClipPathProvider>
+			</RootSurface>
+		</RechartsWrapper>
+	)
+}

package/src/chart/ComposedChart.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import { CartesianChart } from "./CartesianChart"
+import type { CartesianChartProps, TooltipEventType } from "../util/types"
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"]
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function ComposedChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+): JSX.Element {
+	return (
+		<CartesianChart
+			chartName="ComposedChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={props}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/FunnelChart.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import { CartesianChart } from "./CartesianChart"
+import type { CartesianChartProps, TooltipEventType } from "../util/types"
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["item"]
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function FunnelChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+): JSX.Element {
+	return (
+		<CartesianChart
+			chartName="FunnelChart"
+			defaultTooltipEventType="item"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={props}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/LineChart.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import { CartesianChart } from "./CartesianChart"
+import type { CartesianChartProps, TooltipEventType } from "../util/types"
+
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"]
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides CartesianViewBoxContext
+ * @provides CartesianChartContext
+ */
+export function LineChart<DataPointType = unknown>(
+	props: CartesianChartProps<DataPointType> & {
+		ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+	},
+): JSX.Element {
+	return (
+		<CartesianChart
+			chartName="LineChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={props}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/PieChart.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import { defaultPolarChartProps, PolarChart } from "./PolarChart"
+import type { PolarChartProps, TooltipEventType } from "../util/types"
+
+import { mergeProps } from '../util/solid-1-compat';
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["item"]
+
+export const defaultPieChartProps = {
+	...defaultPolarChartProps,
+	endAngle: 360,
+	layout: "centric",
+	startAngle: 0,
+} as const satisfies Partial<PolarChartProps<never>>
+
+/**
+ * @consumes ResponsiveContainerContext
+ * @provides PolarViewBoxContext
+ * @provides PolarChartContext
+ */
+export function PieChart<DataPointType = unknown>(
+	props: PolarChartProps<DataPointType> & { ref?: SVGSVGElement | ((el: SVGSVGElement) => void) },
+): JSX.Element {
+	/* mergeProps preserves the props proxy — do NOT resolveDefaultProps here.
+	   resolveDefaultProps spreads `{...realProps}` which enumerates own keys including
+	   `children`; reading the children getter eagerly instantiates user JSX (Legend,
+	   Tooltip, etc.) under PieChart's owner — which sits ABOVE RechartsStoreProvider
+	   and the portal Providers, breaking every downstream context lookup. */
+	const propsWithDefaults = mergeProps(defaultPieChartProps, props) as PolarChartProps<
+		DataPointType
+	> & {
+		cx: NonNullable<PolarChartProps["cx"]>
+		cy: NonNullable<PolarChartProps["cy"]>
+		startAngle: NonNullable<PolarChartProps["startAngle"]>
+		endAngle: NonNullable<PolarChartProps["endAngle"]>
+		innerRadius: NonNullable<PolarChartProps["innerRadius"]>
+		outerRadius: NonNullable<PolarChartProps["outerRadius"]>
+	}
+	return (
+		<PolarChart
+			chartName="PieChart"
+			defaultTooltipEventType="item"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={propsWithDefaults}
+			ref={props.ref}
+		/>
+	)
+}

package/src/chart/PolarChart.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable import/no-cycle */
+import { createMemo, untrack } from 'solid-js';
+import type { ChartOptions } from "../state/optionsSlice"
+import { RechartsStateProvider } from "../state/RechartsStateProvider"
+import { createInitialChartDataState, createInitialLayoutState } from "../state/chartState"
+import { ChartDataContextProvider } from "../context/chartDataContext"
+import { ReportMainChartProps } from "../state/ReportMainChartProps"
+import { ReportChartProps } from "../state/ReportChartProps"
+import { createInitialRootProps } from "./createInitialRootProps"
+import { ReportEventSettings } from "../state/ReportEventSettings"
+import { ReportPolarOptions } from "../state/ReportPolarOptions"
+import type { Margin, PolarChartProps, TooltipEventType } from "../util/types"
+import type { TooltipPayloadSearcher } from "../state/tooltipSlice"
+import { CategoricalChart } from "./CategoricalChart"
+import { resolveDefaultProps } from "../util/resolveDefaultProps"
+import { initialEventSettingsState } from "../state/eventSettingsSlice"
+
+import { splitProps } from '../util/solid-1-compat';
+const defaultMargin: Margin = { bottom: 5, left: 5, right: 5, top: 5 }
+
+/**
+ * These default props are the same for all PolarChart components.
+ */
+export const defaultPolarChartProps = {
+	accessibilityLayer: true,
+	barCategoryGap: "10%",
+	barGap: 4,
+	cx: "50%",
+	cy: "50%",
+	innerRadius: 0,
+	layout: "radial",
+	margin: defaultMargin,
+	outerRadius: "80%",
+	responsive: false,
+	reverseStackOrder: false,
+	stackOffset: "none",
+	syncMethod: "index",
+	...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
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}
+
+function PolarChartInner(props: {
+	categoricalChartProps: PolarChartPropsWithDefaults
+	ref?: SVGSVGElement | ((el: SVGSVGElement) => void)
+}) {
+	/*
+	 * See GOTCHA-004 and GOTCHA-005: memo must be created inside RechartsStoreProvider.
+	 * resolveDefaultProps spreads the props proxy, which enumerates own keys including
+	 * `children`; reading the children getter eagerly instantiates user JSX (Legend,
+	 * Tooltip, etc.) under the CURRENT owner. That owner sits above RechartsWrapper, so
+	 * those user components miss the LegendPortalContext / TooltipPortalContext Providers.
+	 * Strip children with splitProps and pass them as JSX children so the read happens
+	 * deep inside RechartsWrapper, where every Provider is visible.
+	 */
+	/* eslint-disable-next-line solid/reactivity -- splitProps receives the nested prop accessor once; restProps is a reactive proxy, reactivity flows through it */
+	const [childrenProps, restProps] = splitProps(props.categoricalChartProps, ["children"])
+	const polarChartProps = createMemo(() =>
+		resolveDefaultProps(restProps, defaultPolarChartProps),
+	)
+
+	return (
+		<>
+			<ChartDataContextProvider chartData={polarChartProps().data} />
+			<ReportMainChartProps layout={polarChartProps().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
+				{...(() => {
+					const { layout: _layout, ...rest } = polarChartProps()
+					return rest
+				})()}
+				ref={props.ref}
+			>
+				{childrenProps.children}
+			</CategoricalChart>
+		</>
+	)
+}
+
+export function PolarChart(props: PolarChartOptions) {
+	const options = (): ChartOptions => ({
+		chartName: props.chartName,
+		defaultTooltipEventType: props.defaultTooltipEventType,
+		eventEmitter: undefined,
+		tooltipPayloadSearcher: props.tooltipPayloadSearcher,
+		validateTooltipEventTypes: props.validateTooltipEventTypes,
+	})
+
+	const initialChartData = () =>
+		untrack(() => createInitialChartDataState(props.categoricalChartProps.data))
+	const initialLayout = () =>
+		untrack(() =>
+			createInitialLayoutState({
+				height: props.categoricalChartProps.height,
+				layoutType: props.categoricalChartProps.layout ?? defaultPolarChartProps.layout,
+				margin: props.categoricalChartProps.margin ?? defaultPolarChartProps.margin,
+				width: props.categoricalChartProps.width,
+			}),
+		)
+
+	return (
+		<RechartsStateProvider preloadedState={{
+				chartData: initialChartData(),
+				layout: initialLayout(),
+				options: options(),
+				rootProps: untrack(() => createInitialRootProps(props.categoricalChartProps)),
+			}}>
+			<PolarChartInner categoricalChartProps={props.categoricalChartProps} ref={props.ref} />
+		</RechartsStateProvider>
+	)
+}

package/src/chart/RadarChart.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import { arrayTooltipSearcher } from "../state/optionsSlice"
+import type { PolarChartProps, PolarLayout, TooltipEventType } from "../util/types"
+import { defaultPolarChartProps, PolarChart } from "./PolarChart"
+
+import { mergeProps } from '../util/solid-1-compat';
+const allowedTooltipTypes: ReadonlyArray<TooltipEventType> = ["axis"]
+
+export const defaultRadarChartProps = {
+	...defaultPolarChartProps,
+	endAngle: -270,
+	layout: "centric",
+	startAngle: 90,
+} 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<DataPointType = unknown>(
+	props: RadarChartProps<DataPointType> & { ref?: SVGSVGElement | ((el: SVGSVGElement) => void) },
+): JSX.Element {
+	/* mergeProps preserves the props proxy — see PieChart for the rationale. */
+	const propsWithDefaults = mergeProps(defaultRadarChartProps, props) as PolarChartProps<
+		DataPointType
+	> & {
+		cx: NonNullable<PolarChartProps["cx"]>
+		cy: NonNullable<PolarChartProps["cy"]>
+		startAngle: NonNullable<PolarChartProps["startAngle"]>
+		endAngle: NonNullable<PolarChartProps["endAngle"]>
+		innerRadius: NonNullable<PolarChartProps["innerRadius"]>
+		outerRadius: NonNullable<PolarChartProps["outerRadius"]>
+	}
+	return (
+		<PolarChart
+			chartName="RadarChart"
+			defaultTooltipEventType="axis"
+			validateTooltipEventTypes={allowedTooltipTypes}
+			tooltipPayloadSearcher={arrayTooltipSearcher}
+			categoricalChartProps={propsWithDefaults}
+			ref={props.ref}
+		/>
+	)
+}