From b8b577d9eac8c340f2ed4d16fd734fd46eb83fab Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Tue, 3 Dec 2024 12:30:56 +0100
Subject: [PATCH 1/2] fix(Pie- & DonutChart): improve `activeSegment` handling
 & fix focus behavior

---
 .../src/components/DonutChart/DonutChart.mdx  |  2 +-
 .../src/components/DonutChart/DonutChart.tsx  |  2 +-
 .../components/PieChart/PieChart.module.css   |  7 +++++
 .../src/components/PieChart/PieChart.tsx      | 30 ++++++++++++++-----
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
index 737637c987e..cbf47978916 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.mdx
+++ b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -41,7 +41,7 @@ import * as ComponentStories from './DonutChart.stories';
 
 ### With highlighted active segment
 
-<Canvas of={ComponentStories.WithHighlightedActiveSegment} />
+<Canvas of={ComponentStories.WithActiveShape} />
 
 ### Hide labels
 
diff --git a/packages/charts/src/components/DonutChart/DonutChart.tsx b/packages/charts/src/components/DonutChart/DonutChart.tsx
index f4b1e3aabc9..13fa9957d76 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.tsx
+++ b/packages/charts/src/components/DonutChart/DonutChart.tsx
@@ -17,7 +17,7 @@ const DonutChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     ...props.chartConfig
   };
 
-  return <PieChart {...props} ref={ref} chartConfig={chartConfig} />;
+  return <PieChart {...props} ref={ref} chartConfig={chartConfig} data-component-name="DonutChart" />;
 });
 
 DonutChart.displayName = 'DonutChart';
diff --git a/packages/charts/src/components/PieChart/PieChart.module.css b/packages/charts/src/components/PieChart/PieChart.module.css
index 0cdf5dffd31..5493c9e7a11 100644
--- a/packages/charts/src/components/PieChart/PieChart.module.css
+++ b/packages/charts/src/components/PieChart/PieChart.module.css
@@ -4,3 +4,10 @@
     outline: none;
   }
 }
+
+[data-active-legend] {
+  background: color-mix(in srgb, var(--sapSelectedColor), transparent 87%);
+  :global(.recharts-legend-item-text) {
+    color: var(--sapTextColor) !important;
+  }
+}
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index 811e6c7232e..baee93533f9 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { enrichEventWithDetails, useStylesheet } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
@@ -108,6 +108,8 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   } = props;
 
   useStylesheet(styleData, PieChart.displayName);
+  const [componentRef, chartRef] = useSyncRef(ref);
+  const isDonutChart = props['data-component-name'] === 'DonutChart';
 
   const chartConfig = {
     margin: { right: 30, left: 30, bottom: 30, top: 30, ...(props.chartConfig?.margin ?? {}) },
@@ -192,12 +194,23 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
       const ex = mx + (cos >= 0 ? 1 : -1) * 22;
       const ey = my;
       const textAnchor = cos >= 0 ? 'start' : 'end';
+      const activeLegendItem = chartRef.current?.querySelector<HTMLLIElement>(
+        `.legend-item-${chartConfig.activeSegment}`
+      );
+      if (!activeLegendItem?.dataset.activeLegend) {
+        const allLegendItems = chartRef.current?.querySelectorAll('.recharts-legend-item');
+
+        allLegendItems.forEach((item) => item.removeAttribute('data-active-legend'));
+        activeLegendItem.setAttribute('data-active-legend', 'true');
+      }
 
       return (
         <g>
-          <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
-            {payload.name}
-          </text>
+          {isDonutChart && (
+            <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+              {payload.name}
+            </text>
+          )}
           <Sector
             cx={cx}
             cy={cy}
@@ -231,7 +244,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
         </g>
       );
     },
-    [showActiveSegmentDataLabel]
+    [showActiveSegmentDataLabel, chartConfig.activeSegment, isDonutChart]
   );
 
   const renderLabelLine = useCallback(
@@ -248,11 +261,11 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     if (chartConfig.activeSegment != null && showActiveSegmentDataLabel) {
       if (chartConfig.legendPosition === 'bottom') {
         return {
-          paddingTop: '30px'
+          paddingBlockStart: '30px'
         };
       } else if (chartConfig.legendPosition === 'top') {
         return {
-          paddingBottom: '30px'
+          paddingBlockEnd: '30px'
         };
       }
     }
@@ -265,7 +278,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   return (
     <ChartContainer
       dataset={dataset}
-      ref={ref}
+      ref={componentRef}
       loading={loading}
       Placeholder={ChartPlaceholder ?? PieChartPlaceholder}
       style={style}
@@ -296,6 +309,7 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           label={dataLabel}
           activeIndex={chartConfig.activeSegment}
           activeShape={chartConfig.activeSegment != null && renderActiveShape}
+          rootTabIndex={-1}
         >
           {centerLabel && <RechartsLabel position="center">{centerLabel}</RechartsLabel>}
           {dataset &&

From 8aa12c7c30d0936b7da441e1c668ed70cce3f638 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 5 Dec 2024 14:25:41 +0100
Subject: [PATCH 2/2] Update DonutChart.mdx

---
 packages/charts/src/components/DonutChart/DonutChart.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charts/src/components/DonutChart/DonutChart.mdx b/packages/charts/src/components/DonutChart/DonutChart.mdx
index cbf47978916..737637c987e 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.mdx
+++ b/packages/charts/src/components/DonutChart/DonutChart.mdx
@@ -41,7 +41,7 @@ import * as ComponentStories from './DonutChart.stories';
 
 ### With highlighted active segment
 
-<Canvas of={ComponentStories.WithActiveShape} />
+<Canvas of={ComponentStories.WithHighlightedActiveSegment} />
 
 ### Hide labels