feature: add optional support for moved in / out blips

README.md

@@ -29,6 +29,10 @@ Create a Google Sheet. Give it at least the below column headers, and put in the
 | Apache Kylin  | assess | platforms              | TRUE  | Apache Kylin is an open source analytics solution ...   |
 | JSF           | hold   | languages & frameworks | FALSE | We continue to see teams run into trouble using JSF ... |
 
+### Moved In / Out
+
+If you want to show movement of blips, add the optional columns `hasMovedIn` and `hasMovedOut` to your dataset
+
 ### Sharing the sheet
 
 - In Google Sheets, click on "Share".

spec/graphing/blips-spec.js

@@ -193,6 +193,44 @@ describe('Blips', function () {
     expect(actual).toEqual('`ring1 ring, group of 12 New Blips')
   })
 
+  it('should return moved in assistive text for moved in blip', function () {
+    const blip = {
+      isGroup: () => false,
+      ring: () => {
+        return {
+          name: () => 'ring1',
+        }
+      },
+      blipText: () => '12 New Blips',
+      name: () => 'blip1',
+      isNew: () => false,
+      hasMovedIn: () => true,
+      hasMovedOut: () => false,
+    }
+
+    const actual = blipAssistiveText(blip)
+    expect(actual).toEqual('ring1 ring, blip1, moved in blip.')
+  })
+
+  it('should return moved out blip assistive text for moved out blip', function () {
+    const blip = {
+      isGroup: () => false,
+      ring: () => {
+        return {
+          name: () => 'ring1',
+        }
+      },
+      blipText: () => '12 New Blips',
+      name: () => 'blip1',
+      isNew: () => false,
+      hasMovedIn: () => false,
+      hasMovedOut: () => true,
+    }
+
+    const actual = blipAssistiveText(blip)
+    expect(actual).toEqual('ring1 ring, blip1, moved out blip.')
+  })
+
   it('should return group blip with appropriate values', function () {
     const ringBlips = mockRingBlips(20)
     const groupBlip = createGroupBlip(ringBlips, 'New', { name: () => 'ring1' }, 'first')

spec/models/blip-spec.js

@@ -14,7 +14,7 @@ describe('Blip', function () {
   })
 
   it('has a topic', function () {
-    blip = new Blip('My Blip', new Ring('My Ring'), true, 'topic', 'description')
+    blip = new Blip('My Blip', new Ring('My Ring'), true, false, false, 'topic', 'description')
 
     expect(blip.topic()).toEqual('topic')
   })
@@ -24,7 +24,7 @@ describe('Blip', function () {
   })
 
   it('has a description', function () {
-    blip = new Blip('My Blip', new Ring('My Ring'), true, 'topic', 'description')
+    blip = new Blip('My Blip', new Ring('My Ring'), true, false, false, 'topic', 'description')
 
     expect(blip.description()).toEqual('description')
   })
@@ -67,6 +67,30 @@ describe('Blip', function () {
     expect(blip.isNew()).toBe(false)
   })
 
+  it('has moved in', function () {
+    blip = new Blip('My Blip', new Ring('My Ring'), false, true)
+
+    expect(blip.hasMovedIn()).toBe(true)
+  })
+
+  it('has not moved in', function () {
+    blip = new Blip('My Blip', new Ring('My Ring'), false, false)
+
+    expect(blip.hasMovedIn()).toBe(false)
+  })
+
+  it('has moved out', function () {
+    blip = new Blip('My Blip', new Ring('My Ring'), false, false, true)
+
+    expect(blip.hasMovedOut()).toBe(true)
+  })
+
+  it('has not moved out', function () {
+    blip = new Blip('My Blip', new Ring('My Ring'), false, false, false)
+
+    expect(blip.hasMovedOut()).toBe(false)
+  })
+
   it('has false as default value for isGroup', function () {
     expect(blip.isGroup()).toEqual(false)
   })

spec/util/inputSanitizer-spec.js

@@ -107,6 +107,8 @@ describe('Input Santizer for Protected sheet', function () {
       ring: '',
       quadrant: '',
       isNew: '',
+      hasMovedIn: '',
+      hasMovedOut: '',
     })
   })
 })

src/common.js

@@ -6,7 +6,9 @@ require('./images/search-logo-2x.svg')
 require('./images/banner-image-mobile.jpg')
 require('./images/banner-image-desktop.jpg')
 require('./images/new.svg')
+require('./images/moved.svg')
 require('./images/existing.svg')
+require('./images/no-change.svg')
 require('./images/arrow-icon.svg')
 require('./images/first-quadrant-btn-bg.svg')
 require('./images/second-quadrant-btn-bg.svg')

src/graphing/blips.js

@@ -104,9 +104,20 @@ function findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoor
 }
 
 function blipAssistiveText(blip) {
+  let blipType
+  if (blip.isNew()) {
+    blipType = 'new'
+  } else if (blip.hasMovedIn()) {
+    blipType = 'moved in'
+  } else if (blip.hasMovedOut()) {
+    blipType = 'moved out'
+  } else {
+    blipType = 'existing'
+  }
+
   return blip.isGroup()
     ? `\`${blip.ring().name()} ring, group of ${blip.blipText()}`
-    : `${blip.ring().name()} ring, ${blip.name()}, ${blip.isNew() ? 'new' : 'existing'} blip.`
+    : `${blip.ring().name()} ring, ${blip.name()}, ${blipType} blip.`
 }
 function addOuterCircle(parentSvg, order, scale = 1) {
   parentSvg
@@ -120,6 +131,66 @@ function addOuterCircle(parentSvg, order, scale = 1) {
     .style('transform', `scale(${scale})`)
 }
 
+function addMovedInLine(parentSvg, order, scale = 1) {
+  let path
+
+  switch (order) {
+    case 'first':
+      path =
+        'M16.5 34.44c0-.86.7-1.56 1.56-1.56c8.16 0 14.8-6.64 14.8-14.8c0-.86.7-1.56 1.56-1.56c.86 0 1.56.7 1.56 1.56C36 27.96 27.96 36 18.07 36C17.2 36 16.5 35.3 16.5 34.44z'
+      break
+    case 'second':
+      path =
+        'M16.5 1.56c0 .86.7 1.56 1.56 1.56c8.16 0 14.8 6.64 14.8 14.8c0 .86.7 1.56 1.56 1.56c.86 0 1.56-.7 1.56-1.56C36 8.04 27.96 0 18.07 0C17.2 0 16.5.7 16.5 1.56z'
+      break
+    case 'third':
+      path =
+        'M19.5 34.44c0-.86-.7-1.56-1.56-1.56c-8.16 0-14.8-6.64-14.8-14.8c0-.86-.7-1.56-1.56-1.56S0 17.2 0 18.07C0 27.96 8.04 36 17.93 36C18.8 36 19.5 35.3 19.5 34.44z'
+      break
+    case 'fourth':
+      path =
+        'M19.5 1.56c0 0.86-0.7 1.56-1.56 1.56c-8.16 0-14.8 6.64-14.8 14.8c0 0.86-0.7 1.56-1.56 1.56S0 18.8 0 17.93C0 8.04 8.04 0 17.93 0C18.8 0 19.5 0.7 19.5 1.56z'
+      break
+  }
+
+  parentSvg
+    .append('path')
+    .attr('opacity', '1')
+    .attr('class', order)
+    .attr('d', path)
+    .style('transform', `scale(${scale})`)
+}
+
+function addMovedOutLine(parentSvg, order, scale = 1) {
+  let path
+
+  switch (order) {
+    case 'first':
+      path =
+        'M19.5 1.56c0 0.86-0.7 1.56-1.56 1.56c-8.16 0-14.8 6.64-14.8 14.8c0 0.86-0.7 1.56-1.56 1.56S0 18.8 0 17.93C0 8.04 8.04 0 17.93 0C18.8 0 19.5 0.7 19.5 1.56z'
+      break
+    case 'second':
+      path =
+        'M19.5 34.44c0-.86-.7-1.56-1.56-1.56c-8.16 0-14.8-6.64-14.8-14.8c0-.86-.7-1.56-1.56-1.56S0 17.2 0 18.07C0 27.96 8.04 36 17.93 36C18.8 36 19.5 35.3 19.5 34.44z'
+      break
+    case 'third':
+      path =
+        'M16.5 1.56c0 .86.7 1.56 1.56 1.56c8.16 0 14.8 6.64 14.8 14.8c0 .86.7 1.56 1.56 1.56c.86 0 1.56-.7 1.56-1.56C36 8.04 27.96 0 18.07 0C17.2 0 16.5.7 16.5 1.56z'
+      break
+    case 'fourth':
+      path =
+        'M16.5 34.44c0-.86.7-1.56 1.56-1.56c8.16 0 14.8-6.64 14.8-14.8c0-.86.7-1.56 1.56-1.56c.86 0 1.56.7 1.56 1.56C36 27.96 27.96 36 18.07 36C17.2 36 16.5 35.3 16.5 34.44z'
+      break
+  }
+
+  parentSvg
+    .append('path')
+    .attr('opacity', '1')
+    .attr('class', order)
+    .attr('d', path)
+    .style('transform', `scale(${scale})`)
+}
+
 function drawBlipCircle(group, blip, xValue, yValue, order) {
   group
     .attr('transform', `scale(1) translate(${xValue - 16}, ${yValue - 16})`)
@@ -138,6 +209,16 @@ function newBlip(blip, xValue, yValue, order, group) {
   addOuterCircle(group, order, blip.scale)
 }
 
+function movedInBlip(blip, xValue, yValue, order, group) {
+  drawBlipCircle(group, blip, xValue, yValue, order)
+  addMovedInLine(group, order, blip.scale)
+}
+
+function movedOutBlip(blip, xValue, yValue, order, group) {
+  drawBlipCircle(group, blip, xValue, yValue, order)
+  addMovedOutLine(group, order, blip.scale)
+}
+
 function existingBlip(blip, xValue, yValue, order, group) {
   drawBlipCircle(group, blip, xValue, yValue, order)
 }
@@ -175,6 +256,10 @@ function drawBlipInCoordinates(blip, coordinates, order, quadrantGroup) {
     groupBlip(blip, x, y, order, group)
   } else if (blip.isNew()) {
     newBlip(blip, x, y, order, group)
+  } else if (blip.hasMovedIn()) {
+    movedInBlip(blip, x, y, order, group)
+  } else if (blip.hasMovedOut()) {
+    movedOutBlip(blip, x, y, order, group)
   } else {
     existingBlip(blip, x, y, order, group)
   }

src/graphing/components/quadrants.js

@@ -390,7 +390,7 @@ function renderRadarQuadrants(size, svg, quadrant, rings, ringCalculator, tip) {
   return quadrantGroup
 }
 
-function renderRadarLegends(radarElement) {
+function renderRadarLegends(radarElement, hasMovements) {
   const legendsContainer = radarElement.append('div').classed('radar-legends', true)
 
   const newImage = legendsContainer
@@ -401,6 +401,14 @@ function renderRadarLegends(radarElement) {
     .attr('alt', 'new blip legend icon')
     .node().outerHTML
 
+  const movedImage = legendsContainer
+    .append('img')
+    .attr('src', '/images/moved.svg')
+    .attr('width', '37px')
+    .attr('height', '37px')
+    .attr('alt', `moved in or out blip legend icon`)
+    .node().outerHTML
+
   const existingImage = legendsContainer
     .append('img')
     .attr('src', '/images/existing.svg')
@@ -409,7 +417,19 @@ function renderRadarLegends(radarElement) {
     .attr('alt', 'existing blip legend icon')
     .node().outerHTML
 
-  legendsContainer.html(`${newImage} New ${existingImage} Existing`)
+  const noChangeImage = legendsContainer
+    .append('img')
+    .attr('src', '/images/no-change.svg')
+    .attr('width', '37px')
+    .attr('height', '37px')
+    .attr('alt', 'no change blip legend icon')
+    .node().outerHTML
+
+  if (hasMovements) {
+    legendsContainer.html(`${newImage} New ${movedImage} Moved in/out ${noChangeImage} No change`)
+  } else {
+    legendsContainer.html(`${newImage} New ${existingImage} Existing`)
+  }
 }
 
 function renderMobileView(quadrant) {

src/graphing/radar.js

@@ -828,12 +828,30 @@ const Radar = function (size, radar) {
     })
 
     if (featureToggles.UIRefresh2022) {
-      renderRadarLegends(radarElement)
+      let hasMovements = hasMovementData(quadrants)
+      renderRadarLegends(radarElement, hasMovements)
       hideTooltipOnScroll(tip)
       addRadarLinkInPdfView()
     }
   }
 
+  function hasMovementData(quadrants) {
+    let hasMovements = false
+
+    for (var quadrantWrapper of quadrants) {
+      let quadrant = quadrantWrapper.quadrant
+
+      for (var blip of quadrant.blips()) {
+        if (blip.hasMovedIn() || blip.hasMovedOut()) {
+          hasMovements = true
+          break
+        }
+      }
+    }
+
+    return hasMovements
+  }
+
   return self
 }
 

src/models/blip.js

@@ -1,6 +1,6 @@
 const { graphConfig } = require('../graphing/config')
 const IDEAL_BLIP_WIDTH = 22
-const Blip = function (name, ring, isNew, topic, description) {
+const Blip = function (name, ring, isNew, hasMovedIn, hasMovedOut, topic, description) {
   let self, blipText, isGroup, id, groupIdInGraph
 
   self = {}
@@ -32,6 +32,14 @@ const Blip = function (name, ring, isNew, topic, description) {
     return isNew
   }
 
+  self.hasMovedIn = function () {
+    return hasMovedIn
+  }
+
+  self.hasMovedOut = function () {
+    return hasMovedOut
+  }
+
   self.isGroup = function () {
     return isGroup
   }

src/models/radar.js

@@ -65,6 +65,7 @@ const Radar = function () {
     setNumbers(quadrant.blips())
     addingQuadrant++
   }
+
   self.addRings = function (allRings) {
     rings = allRings
   }

src/stylesheets/_quadrants.scss

@@ -402,8 +402,8 @@
       top: calc($quadrantWidth * 2 + $quadrantsGap);
     }
 
-    img:nth-child(2) {
-      margin-left: 48px;
+    img:nth-child(n + 2) {
+      margin-left: 24px;
     }
   }