feat: draw blips in ascending order within quadrant/ring

spec/graphing/blips-spec.js

@@ -7,6 +7,7 @@ const {
   blipAssistiveText,
   createGroupBlip,
   thereIsCollision,
+  sortBlipCoordinates,
 } = require('../../src/graphing/blips')
 const Chance = require('chance')
 const { graphConfig } = require('../../src/graphing/config')
@@ -209,4 +210,33 @@ describe('Blips', function () {
     expect(thereIsCollision([41, 41], existingCoords, 22)).toBe(true)
     expect(thereIsCollision([42, 42], existingCoords, 22)).toBe(false)
   })
+
+  it('should sort blips coordinates', function () {
+    const existingCoords = [
+      { coordinates: [500, 400], width: 22 },
+      { coordinates: [200, 200], width: 22 },
+      { coordinates: [40, 40], width: 22 },
+    ]
+
+    expect(sortBlipCoordinates(existingCoords, 'first')).toEqual([
+      { coordinates: [200, 200], width: 22 },
+      { coordinates: [40, 40], width: 22 },
+      { coordinates: [500, 400], width: 22 },
+    ])
+    expect(sortBlipCoordinates(existingCoords, 'third')).toEqual([
+      { coordinates: [200, 200], width: 22 },
+      { coordinates: [40, 40], width: 22 },
+      { coordinates: [500, 400], width: 22 },
+    ])
+    expect(sortBlipCoordinates(existingCoords, 'second')).toEqual([
+      { coordinates: [500, 400], width: 22 },
+      { coordinates: [200, 200], width: 22 },
+      { coordinates: [40, 40], width: 22 },
+    ])
+    expect(sortBlipCoordinates(existingCoords, 'fourth')).toEqual([
+      { coordinates: [500, 400], width: 22 },
+      { coordinates: [200, 200], width: 22 },
+      { coordinates: [40, 40], width: 22 },
+    ])
+  })
 })

src/graphing/blips.js

@@ -7,6 +7,9 @@ const isEmpty = require('lodash/isEmpty')
 const { replaceSpaceWithHyphens, removeAllSpaces } = require('../util/stringUtil')
 const config = require('../config')
 const featureToggles = config().featureToggles
+const _ = {
+  sortBy: require('lodash/sortBy'),
+}
 
 const getRingRadius = function (ringIndex) {
   const ratios = [0, 0.316, 0.652, 0.832, 0.992]
@@ -295,13 +298,14 @@ const plotRadarBlips = function (parentElement, rings, quadrantWrapper, tooltip)
     const offset = 10
     const minRadius = getRingRadius(i) + offset
     const maxRadius = getRingRadius(i + 1) - offset
-    const allBlipCoordsInRing = []
+    let allBlipCoordsInRing = []
 
     if (ringBlips.length > graphConfig.maxBlipsInRings[i]) {
       plotGroupBlips(ringBlips, ring, quadrantOrder, parentElement, quadrantWrapper, tooltip)
       return
     }
 
+    // Calculate coordinates for blips
     ringBlips.forEach(function (blip) {
       const coordinates = findBlipCoordinates(
         blip,
@@ -312,12 +316,35 @@ const plotRadarBlips = function (parentElement, rings, quadrantWrapper, tooltip)
         quadrantOrder,
       )
       allBlipCoordsInRing.push({ coordinates, width: blip.width })
-      drawBlipInCoordinates(blip, coordinates, quadrantOrder, parentElement)
-      renderBlipDescription(blip, ring, quadrantWrapper, tooltip)
+    })
+
+    // Sort the coordinates
+    allBlipCoordsInRing = sortBlipCoordinates(allBlipCoordsInRing, quadrantOrder)
+
+    // Draw blips using sorted coordinates
+    allBlipCoordsInRing.forEach(function (blipCoords, i) {
+      drawBlipInCoordinates(ringBlips[i], blipCoords.coordinates, quadrantOrder, parentElement)
+      renderBlipDescription(ringBlips[i], ring, quadrantWrapper, tooltip)
     })
   })
 }
 
+const sortBlipCoordinates = function (blipCoordinates, quadrantOrder) {
+  return _.sortBy(blipCoordinates, (coord) => calculateAngleFromAxis(coord, quadrantOrder))
+}
+
+const calculateAngleFromAxis = function (position, quadrantOrder) {
+  const [x, y] = position.coordinates
+
+  const transposedX = x - graphConfig.effectiveQuadrantWidth
+  const transposedY = y - graphConfig.effectiveQuadrantHeight
+
+  if (quadrantOrder === 'first' || quadrantOrder === 'third') {
+    return Math.atan2(transposedY, transposedX)
+  }
+  return Math.atan2(transposedX, transposedY)
+}
+
 module.exports = {
   calculateRadarBlipCoordinates,
   plotRadarBlips,
@@ -328,4 +355,5 @@ module.exports = {
   blipAssistiveText,
   createGroupBlip,
   thereIsCollision,
+  sortBlipCoordinates,
 }