Re-order quadrants in the chart

so that the first one is in the top-left corner

src/components/Chart/BlipPoints.tsx

@@ -21,9 +21,9 @@ const generateCoordinates = (enrichedBlip, xScale, yScale) => {
     const radius = randomBetween(previousRingRadius + ringPadding, ringRadius - ringPadding);
     /* 
     Multiples of PI/2. To apply the calculated position to the specific quadrant.
-    Order here is counter-clockwise and starts at the top left, so we need to "invert" quadrant positions
+    Order here is counter-clockwise, so we need to "invert" quadrant positions (i.e. swap 2 with 4)
     */
-    const shift = pi * [4, 3, 2, 1][enrichedBlip.quadrantPosition - 1] / 2;
+    const shift = pi * [1, 4, 3, 2][enrichedBlip.quadrantPosition - 1] / 2;
 
     return {
         x: xScale(Math.cos(randomDegree + shift) * radius),

src/components/Chart/QuadrantRings.tsx

@@ -3,9 +3,13 @@ import * as d3 from 'd3';
 import { chartConfig } from '../../config';
 
 const arcPath = (quadrantPosition, ringPosition, xScale) => {
-  const startAngle = (quadrantPosition - 1) * Math.PI / 2,
-      endAngle = quadrantPosition *  Math.PI / 2,
-      arcAttrs =  chartConfig.ringsAttributes[ringPosition - 1],
+  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 arcAttrs =  chartConfig.ringsAttributes[ringPosition - 1],
       ringRadiusPx = xScale(arcAttrs.radius) - xScale(0),
       arc = d3.arc();
 
@@ -20,10 +24,10 @@ const arcPath = (quadrantPosition, ringPosition, xScale) => {
 export default function QuadrantRings ({ quadrant, xScale}) {
     // order from top-right clockwise
     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: 0,         y: 0,          cx: 1, cy: 1, r: 1}
+      {x: 0,         y: xScale(0),  cx: 1, cy: 0, r: 1}
     ];
     const gradientId = `${quadrant.position}-radial-gradient`,
         quadrantSize = chartConfig.size / 2;

src/components/RadarGrid/RadarGrid.tsx

@@ -7,10 +7,10 @@ import './radar-grid.scss';
 
 const QuadrantLabel = ({quadrant}) => {
     const stylesMap = [
+        {top: 0, left: 0},
         {top: 0, right: 0},
         {bottom: 0, right: 0},
-        {bottom: 0, left: 0},
-        {top: 0, left: 0},
+        {bottom: 0, left: 0}
     ]
 
     return (

src/config.ts

@@ -5,40 +5,40 @@ export const radarNameShort = radarName;
 
 export const homepageContent = HomepageOption.both; // by defaul show both versions so that people can choose which one they like more (or keep both)
 
-// Quadrants positions start from the top right and go clockwise
-export const quadrantsMap = { 
+// Quadrants positions start from the top left and go clockwise
+export const quadrantsMap = {
+  'languages-and-frameworks': {
+    id: 'languages-and-frameworks',
+    displayName: 'Languages & Frameworks',
+    colour: '#84BFA4',
+    txtColour: '#444444',
+    position: 1,
+    description: "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
+  },
   'methods-and-patterns': {
     id: 'methods-and-patterns',
     displayName: 'Methods & Patterns',
     colour: '#248EA6',
     txtColour: 'white',
-    position: 1,
+    position: 2,
     description: 'Here we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.'
   },
   'platforms-and-aoe-services': {
     id: 'platforms-and-aoe-services',
     displayName: 'Platforms and Operations',
     colour: '#F25244',
     txtColour: '#444444',
-    position: 2,
+    position: 3,
     description: 'Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of.'
   },
   'tools': {
     id:  'tools',
     displayName: 'Tools',
     colour: '#F2A25C',
     txtColour: 'white',
-    position: 3,
-    description: 'Here we put different software tools - from small helpers to bigger software projects'
-  },
-  'languages-and-frameworks': {
-    id: 'languages-and-frameworks',
-    displayName: 'Languages & Frameworks',
-    colour: '#84BFA4',
-    txtColour: '#444444',
     position: 4,
-    description: "We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds."
-  },
+    description: 'Here we put different software tools - from small helpers to bigger software projects'
+  }
 };
 
 export const chartConfig = {