[UIK-5881][d3-chart] donut rebranding/change only default donut thickness

playground/entries/Chart/Donut.tsx

@@ -13,7 +13,6 @@ type DonutChartProps = {
   legendProps: Omit<LegendChartProps, 'direction'>;
   donutProps: {
     halfsize: boolean;
-    innerRadius: number;
     innerLabel: string;
   };
 };
@@ -72,11 +71,6 @@ const entry: PlaygroundEntry<DonutChartJSXProps> = {
           value: false,
           displayName: 'Half size',
         },
-        innerRadius: {
-          type: 'text-number',
-          value: 60,
-          displayName: 'Inner Radius',
-        },
         innerLabel: {
           type: 'text',
           value: 'Example',

semcore/d3-chart/__tests__/donut-chart.browser-test.tsx

@@ -1,4 +1,4 @@
-import type { Page } from '@semcore/testing-utils/playwright';
+import type { Locator, Page } from '@semcore/testing-utils/playwright';
 import { expect, test } from '@semcore/testing-utils/playwright';
 import { expectEachToHaveAttribute, loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
@@ -18,6 +18,32 @@ export const locators = {
     text ? page.getByText(text) : page.locator('[data-ui-name="Legend.Item"], [data-ui-name="LegendTable.LegendItem"], [data-ui-name="LegendFlex.LegendItem"]'),
 };
 
+/**
+The center of a donut pie is empty, so .hover() misses the segment and times out.
+Hover over the middle of the ring instead.
+*/
+const hoverPie = async (pie: Locator) => {
+  const box = await pie.boundingBox();
+
+  if (!box) throw new Error('Donut.Pie is not rendered');
+
+  const point = await pie.evaluate((path: SVGPathElement) => {
+    const totalLength = path.getTotalLength();
+    const onOuterArc = path.getPointAtLength(totalLength * 0.25);
+    const onInnerArc = path.getPointAtLength(totalLength * 0.75);
+    const svgPoint = path.ownerSVGElement!.createSVGPoint();
+
+    svgPoint.x = (onOuterArc.x + onInnerArc.x) / 2;
+    svgPoint.y = (onOuterArc.y + onInnerArc.y) / 2;
+
+    const { x, y } = svgPoint.matrixTransform(path.getScreenCTM()!);
+
+    return { x, y };
+  });
+
+  await pie.hover({ position: { x: point.x - box.x, y: point.y - box.y } });
+};
+
 /* =====================================================
 @visual
 Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -68,7 +94,7 @@ test.describe(`${TAG.VISUAL}`, () => {
 
       await test.step('Verify pie highlights on hover', async () => {
         const pies = locators.pie(page);
-        await pies.nth(1).hover();
+        await hoverPie(pies.nth(1));
 
         if (item.showTooltip) {
           const tooltip = page.locator('[data-ui-name="Donut.Tooltip"]');
@@ -126,7 +152,7 @@ test.describe(`${TAG.VISUAL}`, () => {
 
       await test.step('Verify pie highlights on hover', async () => {
         const pies = locators.pie(page);
-        await pies.nth(1).hover();
+        await hoverPie(pies.nth(1));
 
         if (item.showTooltip) {
           const tooltip = page.locator('[data-ui-name="Donut.Tooltip"]');

semcore/d3-chart/__tests__/index.test.tsx

@@ -23,6 +23,7 @@ import {
   Chart,
   ChartLegend,
   HoverLine,
+  Donut,
   // @ts-ignore
 } from '../src';
 import { PlotA11yView } from '../src/a11y/PlotA11yView';
@@ -748,6 +749,106 @@ describe('Chart.Donut', () => {
   });
 });
 
+const DONUT_THICKNESS = 12;
+const DONUT_INCREASE_FACTOR = 8;
+
+const getPieGeometry = (pie: Element) => {
+  const d = pie.getAttribute('d') ?? '';
+  const radii = [...new Set([...d.matchAll(/A([\d.]+),/g)].map((match) => Number(match[1])))];
+  const outerRadius = Math.max(...radii);
+  const innerRadius = radii.length > 1 ? Math.min(...radii) : 0;
+
+  return { outerRadius, innerRadius, thickness: outerRadius - innerRadius };
+};
+
+const renderDonut = (
+  donutProps: Record<string, unknown> = {},
+  [plotWidth, plotHeight]: [number, number] = [300, 300],
+) => {
+  const { container } = render(
+    <Plot width={plotWidth} height={plotHeight} data={ChartOptions.donut.data}>
+      <Donut {...donutProps}>
+        <Donut.Pie dataKey='a' name='Pie 1' />
+        <Donut.Pie dataKey='b' name='Pie 2' />
+        <Donut.Pie dataKey='c' name='Pie 3' />
+      </Donut>
+    </Plot>,
+  );
+
+  return queryAllByAttribute('data-ui-name', container, 'Donut.Pie').map(getPieGeometry);
+};
+
+describe('Donut geometry', () => {
+  beforeEach(cleanup);
+
+  test.concurrent('should render a 12px thick ring by default', async () => {
+    const [pie] = renderDonut();
+
+    // outerRadius = (300 - DONUT_INCREASE_FACTOR * 2) / 2 = 142
+    expect(pie.outerRadius).toBe(142);
+    expect(pie.innerRadius).toBe(142 - DONUT_THICKNESS);
+    expect(pie.thickness).toBe(DONUT_THICKNESS);
+  });
+
+  test.concurrent('should keep the 12px thickness regardless of the plot size', async () => {
+    const sizes: [number, number][] = [
+      [300, 300],
+      [120, 120],
+      [60, 60],
+      [40, 40], // the smallest plot where a 12px ring still fits
+    ];
+
+    for (const size of sizes) {
+      const [pie] = renderDonut({}, size);
+
+      expect(pie.thickness, `plot ${size[0]}x${size[1]}`).toBe(DONUT_THICKNESS);
+    }
+  });
+
+  test.concurrent('should keep the 12px thickness for a semi donut', async () => {
+    const [pie] = renderDonut({ halfsize: true }, [300, 150]);
+
+    expect(pie.thickness).toBe(DONUT_THICKNESS);
+  });
+
+  test.concurrent('should let an explicit innerRadius override the default', async () => {
+    const [pie] = renderDonut({ innerRadius: 50 });
+
+    expect(pie.innerRadius).toBe(50);
+    expect(pie.outerRadius).toBe(142);
+  });
+
+  test.concurrent('should render a full pie when innerRadius is explicitly 0', async () => {
+    const [pie] = renderDonut({ innerRadius: 0 });
+
+    expect(pie.innerRadius).toBe(0);
+    expect(pie.thickness).toBe(142);
+  });
+
+  test.concurrent('should clamp the inner radius to 0 instead of going negative', async () => {
+    const [pie] = renderDonut({}, [30, 30]);
+
+    expect(pie.outerRadius).toBe(7);
+    expect(pie.innerRadius).toBe(0);
+  });
+
+  test.concurrent('should expand an active pie outwards keeping its inner edge', async () => {
+    const { container } = render(
+      <Plot width={300} height={300} data={ChartOptions.donut.data}>
+        <Donut>
+          <Donut.Pie active dataKey='a' name='Pie 1' />
+          <Donut.Pie dataKey='b' name='Pie 2' />
+        </Donut>
+      </Plot>,
+    );
+    const [activePie, idlePie] = queryAllByAttribute('data-ui-name', container, 'Donut.Pie').map(getPieGeometry);
+
+    expect(activePie.innerRadius).toBe(idlePie.innerRadius);
+    expect(activePie.outerRadius).toBe(idlePie.outerRadius + DONUT_INCREASE_FACTOR);
+    expect(activePie.thickness).toBe(DONUT_THICKNESS + DONUT_INCREASE_FACTOR);
+  });
+});
+
 describe('Chart.Line', () => {
   beforeEach(cleanup);
 

semcore/d3-chart/src/Donut.jsx

@@ -84,6 +84,7 @@ function transitionRadiusPie({
 }
 
 const increaseFactor = 8;
+const donutThickness = 12;
 
 function getOuterRadius({ size, halfsize }) {
   const [width, height] = size;
@@ -97,19 +98,19 @@ class DonutRoot extends Component {
   static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = ({
-    innerRadius = 0,
+    innerRadius: innerRadiusProp,
     paddingAngle = 0,
     outerRadius,
     halfsize = false,
     $rootProps: { size },
   }) => {
-    const d3Arc = arc()
-      .outerRadius(outerRadius || getOuterRadius({ size, halfsize, outerRadius }))
-      .innerRadius(innerRadius)
-      .padAngle(paddingAngle);
+    const radius = outerRadius || getOuterRadius({ size, halfsize });
+    const innerRadius = innerRadiusProp ?? Math.max(radius - donutThickness, 0);
+
+    const d3Arc = arc().outerRadius(radius).innerRadius(innerRadius).padAngle(paddingAngle);
 
     const d3ArcOut = arc()
-      .outerRadius((outerRadius || getOuterRadius({ size, halfsize })) + increaseFactor)
+      .outerRadius(radius + increaseFactor)
       .innerRadius(innerRadius)
       .padAngle(paddingAngle);
 
@@ -180,8 +181,9 @@ class DonutRoot extends Component {
   };
 
   animationActivePie = ({ data, active, selector, element }) => {
-    const { duration, innerRadius, d3Arc, paddingAngle } = this.asProps;
+    const { duration, d3Arc, paddingAngle } = this.asProps;
     const outerRadius = d3Arc.outerRadius()();
+    const innerRadius = d3Arc.innerRadius()();
     const outerRadiusStartEnd = active
       ? [+element.dataset['currentRadius'] || outerRadius, outerRadius + increaseFactor]
       : [+element.dataset['currentRadius'] || outerRadius, outerRadius];

semcore/d3-chart/src/component/Chart/DonutChart.tsx

@@ -24,7 +24,6 @@ class DonutChartComponent extends AbstractChart<
   static defaultProps = {
     direction: 'row-reverse',
     alignItems: 'flex-start',
-    innerRadius: 100,
     marginX: 0,
     marginY: 0,
     locale: 'en',

semcore/d3-chart/src/component/Chart/DonutChart.type.ts

@@ -32,7 +32,6 @@ export type DonutChartProps = Intergalactic.InternalTypings.EfficientOmit<
 export type DonutChartDefaultProps = {
   direction: 'row-reverse';
   alignItems: 'flex-start';
-  innerRadius: 100;
   marginX: 0;
   marginY: 0;
   locale: 'en';

semcore/d3-chart/src/types/Donut.d.ts

@@ -10,7 +10,7 @@ export interface IDonutProps extends DonutProps, UnknownProperties {}
 export type DonutProps = Context & {
   /** Inner radius
    * @default 0
-   * */
+   */
   innerRadius?: number;
   /** Outer radius
    * @default calculated by the formula from width, height

stories/components/d3-chart/docs/examples/donut-chart/donut-controlled-highlight.tsx

@@ -23,7 +23,7 @@ const Demo = () => {
   return (
     <Flex mt={3} alignItems='flex-start' flexWrap>
       <Plot height={120} width={120} mt={6} mb={6} data={data}>
-        <Donut innerRadius={30}>
+        <Donut>
           {Object.keys(data).map((name, index) => (
             <Donut.Pie
               key={name}

stories/components/d3-chart/docs/examples/donut-chart/donut.tsx

@@ -8,7 +8,7 @@ import DonutMockData from '../../../__mocks__/donut';
 const Demo = () => {
   return (
     <Plot width={300} height={300} data={data}>
-      <Donut innerRadius={100}>
+      <Donut>
         <Donut.Pie dataKey='a' name='Pie 1' />
         <Donut.Pie dataKey='b' name='Pie 2' />
         <Donut.Pie dataKey='c' name='Pie 3' />

stories/components/d3-chart/docs/examples/donut-chart/edge-cases.tsx

@@ -6,7 +6,7 @@ import DonutMockData from '../../../__mocks__/donut';
 const Demo = () => {
   return (
     <Plot width={300} height={300} data={data}>
-      <Donut innerRadius={100}>
+      <Donut>
         <Donut.EmptyData />
         <Donut.Pie dataKey='a' name='a' />
         <Donut.Pie dataKey='b' name='b' />

stories/components/d3-chart/docs/examples/donut-chart/legend-and-pattern-fill.tsx

@@ -45,7 +45,7 @@ const Demo = () => {
   return (
     <Flex direction='row' gap={5}>
       <Plot width={width} height={height} data={data} dataHints={dataHints} patterns>
-        <Donut innerRadius={height / 2 - 50}>
+        <Donut>
           {legendItems.filter((item) => item.checked).length === 0 && <Donut.EmptyData />}
           {legendItems.map((item, index) => {
             return (

stories/components/d3-chart/docs/examples/donut-chart/semi-donut.tsx

@@ -8,7 +8,7 @@ import DonutMockData from '../../../__mocks__/donut';
 const Demo = () => {
   return (
     <Plot width={300} height={150} data={data}>
-      <Donut halfsize innerRadius={100}>
+      <Donut halfsize>
         <Donut.Pie dataKey='a' name='Pie 1' />
         <Donut.Pie dataKey='b' name='Pie 2' />
         <Donut.Pie dataKey='c' name='Pie 3' />

stories/components/d3-chart/tests/examples/donut-chart/donut-props.tsx

@@ -26,7 +26,7 @@ const Demo = (props: DonutPropsWithLabel) => {
   return (
     <Plot width={300} height={300} data={data}>
       <Donut
-        innerRadius={innerRadius}
+        {...(innerRadius !== undefined ? { innerRadius } : {})}
         outerRadius={outerRadius}
         paddingAngle={paddingAngle}
         duration={duration}
@@ -72,7 +72,6 @@ const defaultData = {
 };
 
 export const defaultProps: DonutPropsWithLabel = {
-  innerRadius: 0,
   outerRadius: undefined,
   paddingAngle: 0,
   duration: 500,