@solidports/recharts 0.1.0 → 0.1.1

package/src/chart/AreaChart.tsx

@@ -1,29 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-/* 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

@@ -1,131 +0,0 @@
-/* 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

@@ -1,94 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-/* 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

@@ -1,164 +0,0 @@
-/* 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

@@ -1,70 +0,0 @@
-/* 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}
-		/>
-	)
-}