fix(radar): angle arc colors

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aoe_technology_radar",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "aoe_technology_radar",
-      "version": "3.3.4",
+      "version": "3.4.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@apideck/better-ajv-errors": "0.3.6",

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 =
+  const [startAngle, endAngle] = arcAngel[quadrantPosition - 1];
-    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 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}