fix(Arc|Pie|PieChart): Consider width when responsively setting outer…

…Radius (non-fixed value)
techniq · Feb 5, 2025 · 54581a4 · 54581a4
1 parent 4f77d23
commit 54581a4
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 63 deletions.
diff --git a/.changeset/mean-mails-glow.md b/.changeset/mean-mails-glow.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Arc|Pie|PieChart): Consider width when responsively setting outerRadius (non-fixed value)
diff --git a/.changeset/silent-knives-move.md b/.changeset/silent-knives-move.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+docs(Arc|Pie|PieChart): Allow all examples to resize to demonsrtrate responsiveness
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
@@ -71,10 +71,7 @@
   export let innerRadius: number | undefined = undefined;
 
   /**
-   * Define outerRadius.  Defaults to yRange max / 2 (ie. chart height / 2)
-   */
-  /**
-   * Define outerRadius. Defaults to yRange max (ie. chart height / 2)
+   * Define outerRadius. Defaults to smallest width (xRange) or height (yRange) dimension (/ 2)
    *   • value >= 1: discrete value
    *   • value < 1: percent of chart height / 2
    *   • value < 0: offset of chart height / 2
@@ -100,7 +97,7 @@
   export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
   export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
 
-  const { yRange } = chartContext();
+  const { xRange, yRange } = chartContext();
 
   $: scale = scaleLinear().domain(domain).range(range);
 
@@ -122,7 +119,7 @@
     }
   }
 
-  $: _outerRadius = getOuterRadius(outerRadius, (max<number>($yRange) ?? 0) / 2);
+  $: _outerRadius = getOuterRadius(outerRadius, (Math.min($xRange[1], $yRange[0]) ?? 0) / 2);
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {
     if (innerRadius == null) {

diff --git a/packages/layerchart/src/lib/components/Pie.svelte b/packages/layerchart/src/lib/components/Pie.svelte
@@ -66,7 +66,7 @@
 
   export let sort: ((a: any, b: any) => number) | null | undefined = undefined;
 
-  const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
+  const { data: contextData, x, y, xRange, c, cScale, config } = chartContext();
 
   // @ts-expect-error
   $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));

diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -37,7 +37,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -49,7 +49,7 @@
 <h2>Disable sorting</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie sort={null} />
@@ -61,7 +61,7 @@
 <h2>Partial range (Chart xRange)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" xRange={[-90, 90]} c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -73,7 +73,7 @@
 <h2>Partial range (range prop)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie range={[-90, 90]} />
@@ -85,7 +85,7 @@
 <h2>Pad angle</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie padAngle={0.05} />
@@ -97,7 +97,7 @@
 <h2>Pad angle</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} padAngle={0.03} />
@@ -111,7 +111,7 @@
 <h3>If value >= 1, value will be treated as discrete</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} />
@@ -123,7 +123,7 @@
 <h3>If value >= 0 and less than 1, value will be treated as a percentage of outerRadius</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={0.9} />
@@ -135,7 +135,7 @@
 <h3>If value less than 0, value will be treated as a offset of outerRadius</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={-30} />
@@ -147,7 +147,7 @@
 <h2>Outer radius</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie outerRadius={100} />
@@ -159,7 +159,7 @@
 <h2>Multiple (data prop)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} {data} />
@@ -178,7 +178,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded resize overflow-auto">
       <Chart {data} x="value" c="date" cRange={keyColors}>
         <Svg center>
           {#if show}
@@ -193,7 +193,7 @@
 <h2>Offset</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie offset={4} />
@@ -205,7 +205,7 @@
 <h2>default slot / render each `Arc`</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie let:arcs>
@@ -227,7 +227,7 @@
 <h2>Centroid labels</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date">
       <Svg center>
         <Pie let:arcs>
@@ -269,7 +269,7 @@
 <h2>Tooltip</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
       <Svg center>
         <Pie {tooltip} />
@@ -293,7 +293,7 @@
 <h2>Tooltip with Arcs (slot)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
       <Svg center>
         <Pie let:arcs>
@@ -354,7 +354,7 @@
 <h3>left</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:height>
       <Svg>
         <Group x={height / 2} center="y">
@@ -368,7 +368,7 @@
 <h3>center</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -380,7 +380,7 @@
 <h3>right</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:width let:height>
       <Svg>
         <Group x={width - height / 2} center="y">