Merge branch 'master' into adjust-placement

Author: MBilalShafi

packages/x-charts/src/RadarChart/RadarAxisHighlight/RadarAxisSliceHighlight.tsx

@@ -30,16 +30,19 @@ export function RadarAxisSliceHighlight(props: RadarAxisSliceHighlightProps) {
       {series.map(({ id, color }, seriesIndex) => {
         const { highlighted, next = highlighted, previous = highlighted } = points[seriesIndex];
 
+        const ratioPrev = previous.r / (previous.r + highlighted.r);
+        const ratioNext = next.r / (next.r + highlighted.r);
+
         return (
           <path
             className={classes?.slice}
             key={id}
             fill={color}
             d={`M
  ${center.cx} ${center.cy}
- L ${(previous.x + highlighted.x) / 2} ${(previous.y + highlighted.y) / 2}
+ L ${previous.x * (1 - ratioPrev) + highlighted.x * ratioPrev} ${previous.y * (1 - ratioPrev) + highlighted.y * ratioPrev}
  L ${highlighted.x} ${highlighted.y}
- L ${(next.x + highlighted.x) / 2} ${(next.y + highlighted.y) / 2}
+ L ${next.x * (1 - ratioNext) + highlighted.x * ratioNext} ${next.y * (1 - ratioNext) + highlighted.y * ratioNext}
  Z
  `}
             pointerEvents="none"

packages/x-charts/src/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.ts

@@ -59,6 +59,8 @@ interface UseRadarAxisHighlightReturnValue {
 interface Point {
   x: number;
   y: number;
+  r: number;
+  angle: number;
   value: number;
 }
 
@@ -110,12 +112,15 @@ export function useRadarAxisHighlight(
     points: radarSeries.map((series) => {
       const value = series.data[highlightedIndex];
 
-      const [x, y] = instance.polar2svg(radiusScale(value)!, angle);
+      const r = radiusScale(value)!;
+      const [x, y] = instance.polar2svg(r, angle);
 
       const retrunedValue: Points = {
         highlighted: {
           x,
           y,
+          r,
+          angle,
           value,
         },
       };
@@ -139,6 +144,8 @@ export function useRadarAxisHighlight(
         retrunedValue.previous = {
           x: px,
           y: py,
+          r: prevR,
+          angle: prevAngle,
           value: prevValue,
         };
       }
@@ -151,6 +158,8 @@ export function useRadarAxisHighlight(
         retrunedValue.next = {
           x: nx,
           y: ny,
+          r: nextR,
+          angle: nextAngle,
           value: nextValue,
         };
       }