fix: Pie and Arc components now correctly use Chart's xRange prop for angle degrees instead of the computed viewport pixel range, and compute radius from chart dimensions instead of scale range

Author: techniq

.changeset/fix-pie-arc-xrange.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Pie and Arc components now correctly use Chart's `xRange` prop for angle degrees instead of the computed viewport pixel range, and compute radius from chart dimensions instead of scale range

packages/layerchart/src/lib/components/Arc.svelte

@@ -254,7 +254,10 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);
@@ -279,13 +282,11 @@
     }
   }
 
-  const outerRadius = $derived(
-    getOuterRadius(outerRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-  );
+  const chartRadius = $derived((Math.min(ctx.width, ctx.height) ?? 0) / 2);
+
+  const outerRadius = $derived(getOuterRadius(outerRadiusProp, chartRadius));
   const trackOuterRadius = $derived(
-    trackOuterRadiusProp
-      ? getOuterRadius(trackOuterRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-      : outerRadius
+    trackOuterRadiusProp ? getOuterRadius(trackOuterRadiusProp, chartRadius) : outerRadius
   );
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {

packages/layerchart/src/lib/components/Pie.svelte

@@ -108,15 +108,21 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.config.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(0, () => endAngle, motion);
 
   const pie = $derived.by(() => {
     let _pie = d3pie<any>()
       .startAngle(
-        startAngleProp ?? degreesToRadians(ctx.config.xRange ? min(ctx.xRange) : min(range))
+        startAngleProp ??
+          degreesToRadians(
+            (ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!
+          )
       )
       .endAngle(motionEndAngle.current)
       .padAngle(padAngle)