Fix: Scale the pie chart arc values

Fix: Scale the pie chart arc values

package.json

@@ -156,12 +156,13 @@
     "@colony/redux-promise-listener": "^1.2.0",
     "@colony/unicode-confusables-noascii": "^0.1.2",
     "@hookform/resolvers": "^2.9.10",
+    "@magicbell/react-headless": "^5.0.1",
+    "@nivo/arcs": "^0.87.0",
     "@nivo/axes": "^0.87.0",
     "@nivo/bar": "^0.87.0",
     "@nivo/core": "^0.87.0",
     "@nivo/pie": "^0.87.0",
     "@nivo/tooltip": "^0.87.0",
-    "@magicbell/react-headless": "^5.0.1",
     "@phosphor-icons/react": "^2.1.5",
     "@popperjs/core": "^2.3.3",
     "@tanstack/react-table": "^8.10.0",

src/components/v5/frame/ColonyHome/partials/ReputationChart/consts.ts

@@ -29,6 +29,13 @@ export const summaryLegendColor = {
   default: 'bg-blue-400',
 };
 
+export const pieChartArcsLayerConfig = {
+  startAngle: 0,
+  endAngle: 2 * Math.PI,
+  borderColor: 'none',
+  borderWidth: 0,
+};
+
 export const pieChartConfig: Partial<PieSvgProps<ReputationChartDataItem>> = {
   colors: ({ data }) => `var(${data.color})`,
   innerRadius: 0.75,

src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/Chart.tsx

@@ -6,6 +6,7 @@ import { useReputationChartContext } from '~context/ReputationChartContext/Reput
 import { pieChartConfig } from '../consts.ts';
 import { type ReputationChartDataItem } from '../types.ts';
 
+import { ChartCustomArcsLayer } from './ChartCustomArcsLayer.tsx';
 import { ChartLoadingLayer } from './ChartLoadingLayer.tsx';
 import { ChartTooltip } from './ChartTooltip.tsx';
 import Legend from './Legend.tsx';
@@ -20,6 +21,7 @@ interface ChartProps {
 
 export const Chart: FC<ChartProps> = ({ data, emptyChartItem, isLoading }) => {
   const { setActiveLegendItem } = useReputationChartContext();
+
   return (
     <>
       <div className="relative mb-3.5 mt-5 flex h-[136px] w-full flex-shrink-0 items-center justify-center">
@@ -30,6 +32,7 @@ export const Chart: FC<ChartProps> = ({ data, emptyChartItem, isLoading }) => {
           isInteractive={!!data.length}
           onActiveIdChange={setActiveLegendItem}
           tooltip={ChartTooltip}
+          layers={[ChartCustomArcsLayer]}
         />
       </div>
 

src/components/v5/frame/ColonyHome/partials/ReputationChart/partials/ChartCustomArcsLayer.tsx

@@ -0,0 +1,79 @@
+import { ArcsLayer } from '@nivo/arcs';
+import { type ComputedDatum, type PieCustomLayerProps } from '@nivo/pie';
+import { useTooltip } from '@nivo/tooltip';
+import { pie as d3Pie } from 'd3-shape';
+import React, { type FC } from 'react';
+
+import { useReputationChartContext } from '~context/ReputationChartContext/ReputationChartContext.ts';
+import { ChartCustomTooltip } from '~v5/frame/ColonyHome/partials/ChartCustomTooltip/ChartCustomTooltip.tsx';
+
+import { pieChartArcsLayerConfig } from '../consts.ts';
+import { type ReputationChartDataItem } from '../types.ts';
+
+interface ChartCustomBarGroupLayerProps
+  extends PieCustomLayerProps<ReputationChartDataItem> {}
+
+export const ChartCustomArcsLayer: FC<ChartCustomBarGroupLayerProps> = ({
+  dataWithArc,
+  arcGenerator,
+  centerX,
+  centerY,
+}) => {
+  const { showTooltipFromEvent, hideTooltip } = useTooltip();
+  const { setActiveLegendItem, resetActiveLegendItem } =
+    useReputationChartContext();
+
+  const getScaledPieArcValues = d3Pie<
+    Omit<ComputedDatum<ReputationChartDataItem>, 'arc' | 'fill'>
+  >()
+    .value((d) => d.value * 100)
+    .startAngle(pieChartArcsLayerConfig.startAngle)
+    .endAngle(pieChartArcsLayerConfig.endAngle)
+    // This needs to be smaller than the one used for nivo due to library internal adjustments
+    .padAngle(0.15);
+
+  const scaledPieArcValues = getScaledPieArcValues([...dataWithArc]);
+
+  const updatedData = dataWithArc.map((datum, index) => ({
+    ...datum,
+    arc: {
+      ...datum.arc,
+      startAngle: scaledPieArcValues[index].startAngle,
+      endAngle: scaledPieArcValues[index].endAngle,
+    },
+  }));
+
+  const mouseInteractionHandler = (datum, event) => {
+    setActiveLegendItem(datum.id);
+    showTooltipFromEvent(
+      <ChartCustomTooltip>
+        {datum.label} {datum.value}%
+      </ChartCustomTooltip>,
+      event,
+    );
+  };
+
+  const mouseLeaveHandler = () => {
+    hideTooltip();
+    resetActiveLegendItem();
+  };
+
+  const toggleTooltipHandler = (datum, event) => {
+    mouseInteractionHandler(datum, event);
+  };
+
+  return (
+    <ArcsLayer
+      center={[centerX, centerY]}
+      data={updatedData}
+      arcGenerator={arcGenerator}
+      borderWidth={pieChartArcsLayerConfig.borderWidth}
+      borderColor={pieChartArcsLayerConfig.borderColor}
+      transitionMode="startAngle"
+      onClick={toggleTooltipHandler}
+      onMouseEnter={mouseInteractionHandler}
+      onMouseMove={mouseInteractionHandler}
+      onMouseLeave={mouseLeaveHandler}
+    />
+  );
+};