Label viewbox in polar charts (#6180)

Author: PavelVanecek

src/component/Label.tsx

@@ -404,9 +404,16 @@ export function Label({ offset = 5, ...restProps }: Props) {
   } = props;
 
   const polarViewBox = useAppSelector(selectPolarViewBox);
-  const viewBoxFromContext = useViewBox();
+  const cartesianViewBox = useViewBox();
 
-  const viewBox = viewBoxFromProps || polarViewBox || viewBoxFromContext;
+  /*
+   * I am not proud about this solution but it's a quick fix for https://github.com/recharts/recharts/issues/6030#issuecomment-3155352460.
+   * What we should really do is split Label into two components: CartesianLabel and PolarLabel and then handle their respective viewBoxes separately.
+   * Also other components should set its own viewBox in a context so that we can fix https://github.com/recharts/recharts/issues/6156
+   */
+  const resolvedViewBox = position === 'center' ? cartesianViewBox : (polarViewBox ?? cartesianViewBox);
+
+  const viewBox = viewBoxFromProps || resolvedViewBox;
 
   if (
     !viewBox ||
@@ -415,14 +422,19 @@ export function Label({ offset = 5, ...restProps }: Props) {
     return null;
   }
 
+  const propsWithViewBox = {
+    ...props,
+    viewBox,
+  };
+
   if (isValidElement(content)) {
-    const { labelRef: _, ...propsWithoutLabelRef } = props;
+    const { labelRef: _, ...propsWithoutLabelRef } = propsWithViewBox;
     return cloneElement(content, propsWithoutLabelRef);
   }
 
   let label: ReactNode;
   if (typeof content === 'function') {
-    label = createElement(content as any, props);
+    label = createElement(content as any, propsWithViewBox);
 
     if (isValidElement(label)) {
       return label;

storybook/stories/API/chart/PieChart.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Label, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from '../../../../src';
-import { pageData } from '../../data';
+import { pageDataWithFillColor } from '../../data';
 import { CategoricalChartProps } from '../props/ChartProps';
 import { ActiveShapeProps } from '../props/ActiveShapeProps';
 import { getStoryArgsFromArgsTypesObject } from '../props/utils';
@@ -34,7 +34,7 @@ export const Simple = {
   },
   args: {
     ...getStoryArgsFromArgsTypesObject(CategoricalChartProps),
-    data: pageData,
+    data: pageDataWithFillColor,
     activeShape: { fill: 'red' },
     margin: {
       top: 0,
@@ -47,29 +47,29 @@ export const Simple = {
 
 export const Donut = {
   render: (args: Record<string, any>, context: RechartsStoryContext) => {
-    const { data } = args;
     return (
-      <ResponsiveContainer width="100%" height={400}>
-        <PieChart {...args}>
-          <Pie data={data} dataKey="uv" nameKey="name" innerRadius={50} outerRadius={80}>
-            <Label position="center" fill="#000" fontSize={12} fontWeight="bold" dy={-7}>
-              Donut
-            </Label>
-            <Label position="center" fontSize={12} fontWeight="bold" dy={8}>
-              Chart
-            </Label>
-          </Pie>
-          <RechartsHookInspector
-            position={context.rechartsInspectorPosition}
-            setPosition={context.rechartsSetInspectorPosition}
-          />
-        </PieChart>
-      </ResponsiveContainer>
+      <PieChart {...args}>
+        <Pie data={args.data} dataKey="uv" nameKey="name" innerRadius={50} outerRadius={80} cornerRadius={8}>
+          <Label position="center" fill="#000" fontSize={12} fontWeight="bold" dy={-7}>
+            Donut
+          </Label>
+          <Label position="center" fontSize={12} fontWeight="bold" dy={8}>
+            Chart
+          </Label>
+          <Legend align="right" verticalAlign="middle" layout="vertical" />
+        </Pie>
+        <RechartsHookInspector
+          position={context.rechartsInspectorPosition}
+          setPosition={context.rechartsSetInspectorPosition}
+        />
+      </PieChart>
     );
   },
   args: {
     ...getStoryArgsFromArgsTypesObject(CategoricalChartProps),
-    data: pageData,
+    width: 500,
+    height: 300,
+    data: pageDataWithFillColor,
   },
 };
 

test/component/Label.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-
-import { Label, Line, LineChart, ReferenceLine, Surface } from '../../src';
+import { describe, it, expect, vi } from 'vitest';
+import { Label, Line, LineChart, PieChart, ReferenceLine, Surface } from '../../src';
 import { cleanupMockAnimation, mockAnimation } from '../helper/animation-frame-helper';
 
 const data = [
@@ -156,4 +156,90 @@ describe('<Label />', () => {
 
     cleanupMockAnimation();
   });
+
+  describe('in PieChart', () => {
+    describe('with custom content function', () => {
+      it('should pass the correct props to the content function when position=center', () => {
+        const contentFn = vi.fn();
+        render(
+          <PieChart height={100} width={200}>
+            <Label value="text" position="center" content={contentFn} />
+          </PieChart>,
+        );
+
+        expect(contentFn).toHaveBeenLastCalledWith(
+          {
+            viewBox: {
+              height: 90,
+              width: 190,
+              x: 5,
+              y: 5,
+            },
+            value: 'text',
+            content: contentFn,
+            position: 'center',
+            offset: 5,
+          },
+          {},
+        );
+      });
+
+      it('should pass the correct props to the content function when position=insideEnd', () => {
+        const contentFn = vi.fn();
+        render(
+          <PieChart height={100} width={200}>
+            <Label value="text" position="insideEnd" content={contentFn} />
+          </PieChart>,
+        );
+
+        expect(contentFn).toHaveBeenLastCalledWith(
+          {
+            viewBox: {
+              clockWise: false,
+              cx: 100,
+              cy: 50,
+              endAngle: 360,
+              innerRadius: 0,
+              outerRadius: 36,
+              startAngle: 0,
+            },
+            value: 'text',
+            content: contentFn,
+            position: 'insideEnd',
+            offset: 5,
+          },
+          {},
+        );
+      });
+    });
+  });
+
+  describe('in LineChart', () => {
+    describe('with custom content function', () => {
+      it('should pass the correct props to the content function', () => {
+        const contentFn = vi.fn();
+        render(
+          <LineChart width={400} height={400} data={data}>
+            <Label value="text" position="center" content={contentFn} />
+          </LineChart>,
+        );
+
+        expect(contentFn).toHaveBeenLastCalledWith(
+          {
+            viewBox: {
+              height: 390,
+              width: 390,
+              x: 5,
+              y: 5,
+            },
+            value: 'text',
+            content: contentFn,
+            position: 'center',
+            offset: 5,
+          },
+          {},
+        );
+      });
+    });
+  });
 });