[charts] expose usePolarGeometry hook with polar geometry helpers

Author: mustafajw07

docs/data/charts/radial-bars/trustRadialBarChartComponents.js

@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipContainer, useAxesTooltip } from '@mui/x-charts/ChartsTooltip';
 import { usePolarGeometry } from '@mui/x-charts/hooks';
+
 import {
   euAverageTrust2025,
   europeanYouthTrust,
@@ -84,7 +85,9 @@ export function PreviousTrustData({ currentColor, previousColor }) {
     return null;
   }
 
-  const { cx, cy, angleScale, bandwidth, radiusScale, point } = geometry;
+  const { cx, cy, bandwidth, point } = geometry;
+  const angleScale = geometry.angleScale;
+  const radiusScale = geometry.radiusScale;
 
   return (
     <g transform={`translate(${cx} ${cy})`}>
@@ -233,7 +236,8 @@ export function EuAverageRing() {
     return null;
   }
 
-  const { cx, cy, radiusScale } = geometry;
+  const { cx, cy } = geometry;
+  const radiusScale = geometry.radiusScale;
   const radius = radiusScale(euAverageTrust2025);
 
   return (

docs/data/charts/radial-bars/trustRadialBarChartComponents.tsx

@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipContainer, useAxesTooltip } from '@mui/x-charts/ChartsTooltip';
 import { usePolarGeometry } from '@mui/x-charts/hooks';
+import type { D3OrdinalScale, D3ContinuousScale } from '@mui/x-charts/models';
 import {
   euAverageTrust2025,
   europeanYouthTrust,
@@ -92,7 +93,9 @@ export function PreviousTrustData({
     return null;
   }
 
-  const { cx, cy, angleScale, bandwidth, radiusScale, point } = geometry;
+  const { cx, cy, bandwidth, point } = geometry;
+  const angleScale = geometry.angleScale as D3OrdinalScale;
+  const radiusScale = geometry.radiusScale as D3ContinuousScale;
 
   return (
     <g transform={`translate(${cx} ${cy})`}>
@@ -243,7 +246,8 @@ export function EuAverageRing() {
     return null;
   }
 
-  const { cx, cy, radiusScale } = geometry;
+  const { cx, cy } = geometry;
+  const radiusScale = geometry.radiusScale as D3ContinuousScale;
   const radius = radiusScale(euAverageTrust2025);
 
   return (
@@ -269,13 +273,3 @@ export function EuAverageRing() {
     </g>
   );
 }
-
-export interface PolarGeometry {
-  cx: number;
-  cy: number;
-  angleScale: (value: string) => number | undefined;
-  bandwidth: number;
-  radiusScale: (value: number) => number;
-  // Polar (0 = up, clockwise) to local cartesian, relative to the center.
-  point: (radius: number, angle: number) => readonly [number, number];
-}

packages/x-charts/src/hooks/usePolarGeometry.test.tsx

@@ -42,17 +42,6 @@ function makeWrapper(props: Partial<typeof defaultProps> = {}) {
 const options: any = { wrapper: makeWrapper() };
 
 describe('usePolarGeometry', () => {
-  // useDrawingArea() runs before the rotation/radius axis null-check inside
-  // the hook, and it throws (via useChartsContext) when there's no
-  // ChartsDataProvider/ChartsContainer ancestor at all — so the hook's own
-  // `if (!rotationAxis || !radiusAxis) return null` branch is unreachable
-  // outside *any* chart context. Confirmed by an actual test run.
-  it('should throw when rendered outside of a charts context', () => {
-    expect(() => {
-      renderHook(() => usePolarGeometry());
-    }).to.throw(/Could not find the Charts context/);
-  });
-
   it('should compute the chart center from the real drawing area', () => {
     const { result } = renderHook(
       () => ({

packages/x-charts/src/hooks/usePolarGeometry.tsx

@@ -34,6 +34,7 @@ export function usePolarGeometry(): PolarGeometry | null {
     cx: left + width / 2,
     cy: top + height / 2,
     angleScale,
+    bandwidth: 'bandwidth' in angleScale ? angleScale.bandwidth() : 0,
     radiusScale,
     point: (radius, angle) => [radius * Math.sin(angle), -radius * Math.cos(angle)],
     pointInverse: (x, y) => [Math.sqrt(x * x + y * y), Math.atan2(x, -y)],
@@ -56,6 +57,11 @@ export interface PolarGeometry<
    * The scale that maps rotation axis values to angles in radians.
    */
   angleScale: TAngleScale;
+  /**
+   * The angular width of each band on the rotation axis.
+   * Zero when the rotation axis uses a point scale instead of a band scale.
+   */
+  bandwidth: number;
   /**
    * The scale that maps data values to radii (distance from the chart center).
    */

packages/x-charts/src/models/index.ts

@@ -16,6 +16,9 @@ export type {
   RotationAxis,
   AxisItemIdentifier,
   AxisValueFormatterContext,
+  D3Scale,
+  D3OrdinalScale,
+  D3ContinuousScale,
 } from './axis';
 export type { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 

scripts/x-charts-premium.exports.json

@@ -282,7 +282,10 @@
   { "name": "cyanPalette", "kind": "Variable" },
   { "name": "cyanPaletteDark", "kind": "Variable" },
   { "name": "cyanPaletteLight", "kind": "Variable" },
+  { "name": "D3ContinuousScale", "kind": "TypeAlias" },
   { "name": "D3NamedProjection", "kind": "TypeAlias" },
+  { "name": "D3OrdinalScale", "kind": "TypeAlias" },
+  { "name": "D3Scale", "kind": "TypeAlias" },
   { "name": "DEFAULT_AXIS_SIZE_HEIGHT", "kind": "Variable" },
   { "name": "DEFAULT_AXIS_SIZE_WIDTH", "kind": "Variable" },
   { "name": "DEFAULT_MARGINS", "kind": "Variable" },

scripts/x-charts-pro.exports.json

@@ -262,6 +262,9 @@
   { "name": "cyanPalette", "kind": "Variable" },
   { "name": "cyanPaletteDark", "kind": "Variable" },
   { "name": "cyanPaletteLight", "kind": "Variable" },
+  { "name": "D3ContinuousScale", "kind": "TypeAlias" },
+  { "name": "D3OrdinalScale", "kind": "TypeAlias" },
+  { "name": "D3Scale", "kind": "TypeAlias" },
   { "name": "DEFAULT_AXIS_SIZE_HEIGHT", "kind": "Variable" },
   { "name": "DEFAULT_AXIS_SIZE_WIDTH", "kind": "Variable" },
   { "name": "DEFAULT_MARGINS", "kind": "Variable" },

scripts/x-charts.exports.json

@@ -235,6 +235,9 @@
   { "name": "cyanPalette", "kind": "Variable" },
   { "name": "cyanPaletteDark", "kind": "Variable" },
   { "name": "cyanPaletteLight", "kind": "Variable" },
+  { "name": "D3ContinuousScale", "kind": "TypeAlias" },
+  { "name": "D3OrdinalScale", "kind": "TypeAlias" },
+  { "name": "D3Scale", "kind": "TypeAlias" },
   { "name": "DEFAULT_AXIS_SIZE_HEIGHT", "kind": "Variable" },
   { "name": "DEFAULT_AXIS_SIZE_WIDTH", "kind": "Variable" },
   { "name": "DEFAULT_MARGINS", "kind": "Variable" },