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

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

@@ -9,7 +9,7 @@ import type { TooltipType } from './Tooltip';
 export interface IDonutProps extends DonutProps, UnknownProperties {}
 export type DonutProps = Context & {
   /** Inner radius
-   * @default 0
+   * @default 12
    * */
   innerRadius?: number;
   /** Outer radius

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' />