donut labels

Author: daniele-mng

src/web/components/chart/donut/Labels.tsx

@@ -26,7 +26,7 @@ interface LabelsProps<TData extends LabelData> {
 }
 
 const LABEL_RADIUS_OFFSET = 10;
-const LABEL_X = 85;
+const LABEL_EDGE_OFFSET = 15;
 const LABEL_GAP = 16;
 
 interface LabelPosition {
@@ -115,7 +115,8 @@ const Labels = <TData extends LabelData = LabelData>({
         const arcPoint = arc.centroid(currentArc);
         const outerArcPoint = outerArc.centroid(currentArc);
         const {isRightSide, y} = labelPositions[index];
-        const labelPoint = [isRightSide ? LABEL_X : -LABEL_X, y];
+        const labelX = outerRadiusX + LABEL_EDGE_OFFSET;
+        const labelPoint = [isRightSide ? labelX : -labelX, y];
         const points = [arcPoint, outerArcPoint, labelPoint]
           .map(point => point.join(','))
           .join(' ');

src/web/components/chart/donut/__tests__/Labels.test.tsx

@@ -45,12 +45,32 @@ describe('Labels', () => {
     expect(document.querySelectorAll('.pie-label')).toHaveLength(2);
   });
 
-  test('should keep external labels inside the chart edge', () => {
+  test('should keep external labels outside the donut edge', () => {
     renderLabels([{toolTip: 'Single slice', value: 100}]);
 
     expect(screen.getByText('100')).toHaveAttribute(
       'transform',
-      'translate(-85,110)',
+      'translate(-115,110)',
+    );
+  });
+
+  test('should move labels outside the donut when it grows', () => {
+    const {render} = rendererWith();
+    render(
+      <Labels
+        centerX={150}
+        centerY={150}
+        data={[{toolTip: 'Single slice', value: 100}]}
+        innerRadiusX={191}
+        innerRadiusY={191}
+        outerRadiusX={294}
+        outerRadiusY={294}
+      />,
+    );
+
+    expect(screen.getByText('100')).toHaveAttribute(
+      'transform',
+      'translate(-309,304)',
     );
   });