From e8eff6bdabd406a761f48f04e06eb1ba4d351c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Marek?= Date: Thu, 29 Apr 2021 22:02:51 +1200 Subject: [PATCH] Re-order quadrants in the chart so that the first one is in the top-left corner --- src/components/Chart/BlipPoints.tsx | 4 ++-- src/components/Chart/QuadrantRings.tsx | 14 ++++++++----- src/components/RadarGrid/RadarGrid.tsx | 4 ++-- src/config.ts | 28 +++++++++++++------------- 4 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/components/Chart/BlipPoints.tsx b/src/components/Chart/BlipPoints.tsx index 3cad78f..c198f93 100644 --- a/src/components/Chart/BlipPoints.tsx +++ b/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), diff --git a/src/components/Chart/QuadrantRings.tsx b/src/components/Chart/QuadrantRings.tsx index 8ba4b20..7ad0c8a 100644 --- a/src/components/Chart/QuadrantRings.tsx +++ b/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; diff --git a/src/components/RadarGrid/RadarGrid.tsx b/src/components/RadarGrid/RadarGrid.tsx index ae90f91..161ae7a 100644 --- a/src/components/RadarGrid/RadarGrid.tsx +++ b/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 ( diff --git a/src/config.ts b/src/config.ts index df840c4..8327dae 100644 --- a/src/config.ts +++ b/src/config.ts @@ -5,14 +5,22 @@ 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': { @@ -20,7 +28,7 @@ export const quadrantsMap = { 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': { @@ -28,17 +36,9 @@ export const quadrantsMap = { 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 = {