fix(radar): angle arc colors

src/components/Chart/QuadrantRings.tsx

@@ -4,20 +4,20 @@ import React from "react";
 import { ConfigData } from "../../config";
 import { QuadrantConfig } from "../../model";
 
+const arcAngel = [
+  [(3 * Math.PI) / 2, (4 * Math.PI) / 2],
+  [0, Math.PI / 2],
+  [Math.PI, Math.PI * 3 / 2],
+  [Math.PI / 2, Math.PI],
+];
+
 function arcPath(
   quadrantPosition: number,
   ringPosition: number,
   xScale: d3.ScaleLinear<number, number>,
   config: ConfigData
 ) {
-  const startAngle =
-    quadrantPosition === 1
-      ? (3 * Math.PI) / 2
-      : ((quadrantPosition - 2) * Math.PI) / 2;
-  const endAngle =
-    quadrantPosition === 1
-      ? (4 * Math.PI) / 2
-      : ((quadrantPosition - 1) * Math.PI) / 2;
+  const [startAngle, endAngle] = arcAngel[quadrantPosition - 1];
   const arcAttrs = config.chartConfig.ringsAttributes[ringPosition],
     ringRadiusPx = xScale(arcAttrs.radius) - xScale(0),
     arc = d3.arc();
@@ -41,8 +41,8 @@ const QuadrantRings: React.FC<{
   const gradientAttributes = [
     { x: 0, y: 0, cx: 1, cy: 1, r: 1 },
     { x: xScale(0), y: 0, cx: 0, cy: 1, r: 1 },
-    { x: xScale(0), y: xScale(0), cx: 0, cy: 0, r: 1 },
     { x: 0, y: xScale(0), cx: 1, cy: 0, r: 1 },
+    { x: xScale(0), y: xScale(0), cx: 0, cy: 0, r: 1 },
   ];
   const gradientId = `${quadrant.position}-radial-gradient`,
     quadrantSize = config.chartConfig.size / 2;

src/components/Chart/RadarChart.tsx

@@ -75,6 +75,10 @@ const RadarChart: React.FC<{
           <XAxis scale={xScale} />
         </g>
 
+        {Object.values(config.quadrantsMap).map((value, index) => {
+          console.log(value)
+          return null
+        })}
         {Object.values(config.quadrantsMap).map((value, index) => (
           <QuadrantRings
             key={index}