struxadotcloud/struxa

public

feat: global unslop6531421a month ago173 lines · 5.0 KB

1	"use client"
2
3	import {
4	Children,
5	type ComponentType,
6	isValidElement,
7	type ReactNode,
8	} from "react"
9	import type { ChartConfig,
10	import { CommonChartContext }
11	import type { BloomInput
12	import { cn }
13	import { axisAtAngle, sliceAtAngle
14	import { PolarChartContext, usePolarController
15	import { useChartDimensions }
16
17	// `object` rather than `Record<string, unknown>`: interfaces don't get an
18	// implicit index signature, so interface-typed rows failed to satisfy the
19	// generic. Internal layers still index rows through their own Row type.
20	type Row
21
22	const DEFAULT_POLAR_MARGINS: Margins
23	top: 22,
24	right: 14,
25	bottom: 14,
26	left: 14,
27	}
28
29	function layerOf(node:
30	if (!isValidElement(node
31	return (node.type
32	}
33
34	export type PolarRootProps
35	chartType: "pie
36	/** Family painter - `PieCanvas` or `RadarCanvas`; ships with each chart. */
37	Canvas: ComponentType
38	/** Extra back-layer SVG content (e.g. the radar frame). */
39	backDecoration?: ReactNode
40	data: TData
41	config: ChartConfig
42	children: ReactNode
43	dataKey: string
44	nameKey: string
45	innerRadius?: number
46	margins?: Partial
47	className?: string
48	animate?: boolean
49	animationDuration?: number
50	replayToken?: number
51	bloom?: BloomInput
52	bloomOnHover?: boolean
53	defaultSelectedDataKey?: string
54	onSelectionChange?: (
55	}
56
57	export function PolarRoot<TData
58	chartType,
59	Canvas,
60	backDecoration,
61	data,
62	config,
63	children,
64	dataKey,
65	nameKey,
66	innerRadius = 0,
67	margins: marginsProp,
68	className,
69	animate = true,
70	animationDuration = 900,
71	replayToken = 0,
72	bloom = "off"
73	bloomOnHover = false,
74	defaultSelectedDataKey = null,
75	onSelectionChange,
76	}: PolarRootProps<
77	const { ref,
78	const margins =
79
80	const ctx =
81	chartType,
82	// Safe: the controller only reads row[key] for the configured keys.
83	data: data as
84	config,
85	dataKey,
86	nameKey,
87	innerRadiusRatio: innerRadius,
88	dimensions: size,
89	margins,
90	animate,
91	animationDuration,
92	replayToken,
93	bloom,
94	bloomOnHover,
95	defaultSelectedDataKey,
96	onSelectionChange,
97	})
98
99	const backChildren:
100	const svgChildren:
101	const domChildren:
102	Children.forEach(children
103	const layer =
104	if (layer ===
105	else if (layer
106	else svgChildren.push(
107	})
108
109	const onMove =
110	const el =
111	if (!el)
112	const rect =
113	const dx =
114	const dy =
115	const angle =
116	const r =
117	if (chartType ===
118	const inside =
119	const i =
120	ctx.setHoverIndex(i
121	} else if (ctx
122	ctx.setHoverIndex(axisAtAngle
123	}
124	ctx.setCursor(clientX
125	}
126
127	return (
128	<PolarChartContext value={
129	<CommonChartContext value={
130	<div
131	ref={ref}
132	className={cn("
133	onPointerEnter={() =>
134	onPointerMove={(e)
135	onPointerLeave={() =>
136	ctx.setMouseInChart(false)
137	ctx.setHoverIndex(null)
138	}}
139	>
140	{ctx.ready &&
141	<svg
142	width={size.width
143	height={size.height
144	className="absolute inset-0 overflow-visible"
145	aria-hidden
146	role="presentation"
147	>
148	<g transform={`
149	{backDecoration}
150	{backChildren}
151	</g>
152	</svg>
153	)}
154	<Canvas />
155	{ctx.ready &&
156	<svg
157	width={size.width
158	height={size.height
159	className="absolute inset-0 overflow-visible"
160	role="img"
161	aria-label="Chart"
162	>
163	<g transform={`
164	{svgChildren}
165	</g>
166	</svg>
167	)}
168	{domChildren}
169	</div>
170	</CommonChartContext>
171	</PolarChartContext>
172	)
173	}