Fix: Scale the pie chart arc values

[mmioana]

Description

• This PR addresses the problem of having pie slices in the reputation chart not being visible, but using a custom arcs layer and scaling the values used for computing the slices

Testing

TODO: Please test the reputation chart shows all pie slices and there are no empty areas.

• Step 1. Let's test first the reputation chart is still working as expected.
  Switch between All domains and the other teams within the colony

Screen.Recording.2024-10-30.at.08.21.53.mov

• Step 2. Now the fun part. Please add the following in a .diff file

diff --git a/src/components/v5/frame/ColonyHome/partials/ReputationChart/ReputationChart.tsx b/src/components/v5/frame/ColonyHome/partials/ReputationChart/ReputationChart.tsx
index 1b69c3a11..c58ea7d55 100644
--- a/src/components/v5/frame/ColonyHome/partials/ReputationChart/ReputationChart.tsx
+++ b/src/components/v5/frame/ColonyHome/partials/ReputationChart/ReputationChart.tsx
@@ -73,7 +73,44 @@ const ReputationChart = () => {
   // if no subdomains we should show Top Contributors chart instead
   // otherwise it will be a subdomain chart
   const isNoSubDomains = hasNoSubDomains(selectedDomain);
-  const chartData = isNoSubDomains ? chartDataContributors : chartDataTeams;
+  // const chartData = isNoSubDomains ? chartDataContributors : chartDataTeams;
+  const chartData = [
+    {
+      id: 'Operations',
+      label: 'Operations',
+      value: 66.97,
+      color: '--color-teams-red-400',
+      shouldTruncateLegendLabel: false,
+    },
+    {
+      id: 'Construction',
+      label: 'Construction',
+      value: 32.9,
+      color: '--color-teams-pink-400',
+      shouldTruncateLegendLabel: false,
+    },
+    {
+      id: 'Development',
+      label: 'Development',
+      value: 0.08,
+      color: '--color-teams-purple-400',
+      shouldTruncateLegendLabel: false,
+    },
+    {
+      id: 'Design',
+      label: 'Design',
+      value: 0.04,
+      color: '--color-teams-green-400',
+      shouldTruncateLegendLabel: false,
+    },
+    {
+      id: 'allOtherTeams',
+      label: 'All other',
+      value: 0.01,
+      color: '--color-gray-400',
+      shouldTruncateLegendLabel: false,
+    }
+  ]
   const reputationTitle = isNoSubDomains
     ? MSG.reputationTitleContributors
     : MSG.reputationTitleTeam;

• Step 3. Run git apply .diff
• Step 4. Now the reputation chart should have these values

• Step 5. Now hover over a pie slice. Check the tooltip is showing up and displaying the right copy - <Team name> <value>%. Also the corresponding legend item should get highlighted

Further testing

Please play around with the values from the dummy chartData in the ReputationChart.tsx and make sure all pie slices are visible

Diffs

New stuff ✨

• ChartCustomArcsLayer component
• Usage of @nivo/arcs

Resolves #3517