@solidports/recharts 0.1.0 → 0.1.1

package/src/polar/PolarGrid.tsx

@@ -1,312 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { JSX } from '@solidjs/web';
-import type { WithoutRemoveFalse } from "../util/types"
-import { createMemo, Show, For } from 'solid-js';
-import { clsx } from "clsx"
-import { polarToCartesian } from "../util/PolarUtils"
-import { AxisId } from "../state/cartesianAxisSlice"
-import { useChartStore } from "../state/RechartsStoreContext"
-import { selectPolarGridAngles, selectPolarGridRadii } from "../state/selectors/polarGridSelectors"
-import { selectPolarViewBox } from "../state/selectors/polarAxisSelectors"
-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
-}
-
-export type Props = WithoutRemoveFalse<JSX.LineSVGAttributes<SVGLineElement>> & PolarGridProps
-
-type PropsWithDefaults = Props & {
-	cx: number
-	cy: number
-	innerRadius: number
-	outerRadius: number
-	polarAngles: ReadonlyArray<number>
-	polarRadius: ReadonlyArray<number>
-}
-
-type ConcentricProps = PropsWithDefaults & {
-	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 */
-function PolarAngles(props: PropsWithDefaults): JSX.Element {
-	const polarAnglesProps = createMemo(() => ({
-		stroke: "#ccc",
-		...svgPropertiesNoEvents(props),
-	}))
-
-	return (
-		<Show when={props.polarAngles != null && props.polarAngles.length > 0 && props.radialLines}>
-			<g class="recharts-polar-grid-angle">
-				<For each={props.polarAngles}>
-					{(entry) => {
-						const start = createMemo(() => polarToCartesian(props.cx, props.cy, props.innerRadius, entry))
-						const end = createMemo(() => polarToCartesian(props.cx, props.cy, props.outerRadius, entry))
-
-						return <line {...polarAnglesProps()} x1={start().x} y1={start().y} x2={end().x} y2={end().y} />
-					}}
-				</For>
-			</g>
-		</Show>
-	)
-}
-
-function useConcentricSvgProps(props: ConcentricProps) {
-	return createMemo(() => {
-		const { ref: _ref, ...svgProps } = svgPropertiesNoEvents(props) ?? {}
-		return svgProps
-	})
-}
-
-/* Draw concentric circles */
-function ConcentricCircle(props: ConcentricProps): JSX.Element {
-	const svgProps = useConcentricSvgProps(props)
-
-	return (
-		<circle
-			stroke="#ccc"
-			fill="none"
-			{...svgProps()}
-			class={clsx(
-				"recharts-polar-grid-concentric-circle",
-				String((props as unknown as Record<string, unknown>).className ?? ""),
-			)}
-			cx={props.cx}
-			cy={props.cy}
-			r={props.radius}
-		/>
-	)
-}
-
-/* Draw concentric polygons */
-function ConcentricPolygon(props: ConcentricProps): JSX.Element {
-	const svgProps = useConcentricSvgProps(props)
-
-	return (
-		<path
-			stroke="#ccc"
-			fill="none"
-			{...svgProps()}
-			class={clsx(
-				"recharts-polar-grid-concentric-polygon",
-				String((props as unknown as Record<string, unknown>).className ?? ""),
-			)}
-			d={getPolygonPath(props.radius, props.cx, props.cy, props.polarAngles)}
-		/>
-	)
-}
-
-/* Draw concentric axis */
-function ConcentricGridPath(props: PropsWithDefaults): JSX.Element {
-	const maxPolarRadius = createMemo(() => Math.max(...(props.polarRadius ?? [])))
-	const renderBackground = createMemo(() => props.fill != null && props.fill !== "none")
-
-	return (
-		<Show when={props.polarRadius != null && props.polarRadius.length > 0}>
-			<g class="recharts-polar-grid-concentric">
-				{/* Render background as separate first child to do not cover strokes of smaller figures */}
-				<Show when={renderBackground() && props.gridType === "circle"}>
-					<ConcentricCircle {...props} radius={maxPolarRadius()} />
-				</Show>
-				<Show when={renderBackground() && props.gridType !== "circle"}>
-					<ConcentricPolygon {...props} radius={maxPolarRadius()} />
-				</Show>
-
-				<For each={props.polarRadius}>
-					{(entry: number) => (
-						<Show
-							when={props.gridType === "circle"}
-							fallback={<ConcentricPolygon {...props} fill="none" radius={entry} />}
-						>
-							<ConcentricCircle {...props} fill="none" radius={entry} />
-						</Show>
-					)}
-				</For>
-			</g>
-		</Show>
-	)
-}
-
-export const defaultPolarGridProps = {
-	angleAxisId: 0,
-	gridType: "polygon",
-	radialLines: true,
-	radiusAxisId: 0,
-	zIndex: DefaultZIndexes.grid,
-} as const satisfies Partial<Props>
-
-/**
- * @consumes PolarViewBoxContext
- */
-export function PolarGrid(outsideProps: Props): JSX.Element {
-	const resolved = resolveDefaultProps(outsideProps, defaultPolarGridProps)
-	const {
-		gridType,
-		radialLines,
-		angleAxisId,
-		radiusAxisId,
-		cx: cxFromOutside,
-		cy: cyFromOutside,
-		innerRadius: innerRadiusFromOutside,
-		outerRadius: outerRadiusFromOutside,
-		polarAngles: polarAnglesInput,
-		polarRadius: polarRadiusInput,
-		zIndex,
-		...inputs
-	} = resolved
-	const ctx = useChartStore()
-	const polarViewBox = createMemo(() => (ctx ? selectPolarViewBox(ctx.store) : undefined))
-
-	const polarAnglesFromRedux = createMemo(() =>
-		ctx ? selectPolarGridAngles(ctx.store, angleAxisId) : undefined,
-	)
-	const polarRadiiFromRedux = createMemo(() =>
-		ctx ? selectPolarGridRadii(ctx.store, radiusAxisId) : undefined,
-	)
-
-	const polarAngles = () =>
-		Array.isArray(polarAnglesInput) ? polarAnglesInput : polarAnglesFromRedux()
-	const polarRadius = () =>
-		Array.isArray(polarRadiusInput) ? polarRadiusInput : polarRadiiFromRedux()
-
-	const props = createMemo((): PropsWithDefaults | null => {
-		const angles = polarAngles()
-		const radius = polarRadius()
-		if (angles == null || radius == null) {
-			return null
-		}
-		const vb = polarViewBox()
-		const p: PropsWithDefaults = {
-			cx: vb?.cx ?? cxFromOutside ?? 0,
-			cy: vb?.cy ?? cyFromOutside ?? 0,
-			innerRadius: vb?.innerRadius ?? innerRadiusFromOutside ?? 0,
-			outerRadius: vb?.outerRadius ?? outerRadiusFromOutside ?? 0,
-			polarAngles: angles,
-			polarRadius: radius,
-			zIndex,
-			...inputs,
-		}
-		if (p.outerRadius <= 0) {
-			return null
-		}
-		return p
-	})
-
-	return (
-		<Show when={props()}>
-			{(p) => (
-				<ZIndexLayer zIndex={p().zIndex}>
-					<g class="recharts-polar-grid">
-						<ConcentricGridPath
-							gridType={gridType}
-							radialLines={radialLines}
-							{...p()}
-							polarAngles={p().polarAngles}
-							polarRadius={p().polarRadius}
-						/>
-						<PolarAngles
-							gridType={gridType}
-							radialLines={radialLines}
-							{...p()}
-							polarAngles={p().polarAngles}
-							polarRadius={p().polarRadius}
-						/>
-					</g>
-				</ZIndexLayer>
-			)}
-		</Show>
-	)
-}