AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-order quadrants in the chart

Browse Source 
so that the first one is in the top-left corner
This commit is contained in:
Jarosław Marek
2021-04-29 22:02:51 +12:00
parent 725b6f9924
commit e8eff6bdab
4 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Chart/BlipPoints.tsx
View File

@@ -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),

14
src/components/Chart/QuadrantRings.tsx
View File

@@ -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;