feat: add support for quadrant deep-linking

README.md

@@ -108,6 +108,17 @@ If you do not want to host the JSON file publicly, you can follow [these steps](
 
 **_Note:_** The JSON file parsing is using D3 library, so consult the [D3 documentation](https://github.com/d3/d3-request/blob/master/README.md#json) for the data format details.
 
+### Deep linking to a particular quadrant
+
+You can use the optional query string parameter `quadrant` to specify the quadrant to view.
+
+Supported values are:
+
+- `first`
+- `second`
+- `third`
+- `fourth`
+
 ### Building the radar
 
 Paste the URL in the input field on the home page.

spec/util/urlUtils-spec.js

@@ -1,4 +1,4 @@
-const { constructSheetUrl, getDocumentOrSheetId, getSheetName } = require('../../src/util/urlUtils')
+const { constructSheetUrl, getDocumentOrSheetId, getSheetName, getQuadrantFromURL } = require('../../src/util/urlUtils')
 const config = require('../../src/config')
 const queryParams = require('../../src/util/queryParamProcessor')
 
@@ -80,4 +80,26 @@ describe('Url Utils', () => {
 
     expect(sheetName).toEqual('sheetName')
   })
+
+  it('should return all if no quadrant found in url', () => {
+    queryParams.mockReturnValue({ some: 'param' })
+    delete window.location
+    window.location = Object.create(window)
+    window.location.href = 'https://thoughtworks.com/radar?sheet=radar'
+    window.location.search = '?'
+    const quadrant = getQuadrantFromURL()
+
+    expect(quadrant).toBe('all')
+  })
+
+  it('should return quadrant if found in url', () => {
+    queryParams.mockReturnValue({ quadrant: 'FIRST' })
+    delete window.location
+    window.location = Object.create(window)
+    window.location.href = 'https://thoughtworks.com/radar?sheet=radar'
+    window.location.search = '?'
+    const quadrant = getQuadrantFromURL()
+
+    expect(quadrant).toBe('first')
+  })
 })

src/graphing/radar.js

@@ -20,11 +20,12 @@ const {
   renderMobileView,
   renderRadarLegends,
   removeScrollListener,
+  selectRadarQuadrant,
 } = require('./components/quadrants')
 const { renderQuadrantTables } = require('./components/quadrantTables')
 const { addQuadrantNameInPdfView, addRadarLinkInPdfView } = require('./pdfPage')
 
-const { constructSheetUrl } = require('../util/urlUtils')
+const { constructSheetUrl, getQuadrantFromURL } = require('../util/urlUtils')
 const { toRadian } = require('../util/mathUtils')
 
 const MIN_BLIP_WIDTH = 12
@@ -832,9 +833,26 @@ const Radar = function (size, radar) {
       hideTooltipOnScroll(tip)
       addRadarLinkInPdfView()
     }
+
+    selectQuadrantsToShow(quadrants)
   }
 
   return self
 }
 
+function selectQuadrantsToShow(quadrants) {
+  const quadrantToShow = getQuadrantFromURL()
+  let quadrant
+
+  for (const q of quadrants) {
+    if (q.order === quadrantToShow) {
+      quadrant = q
+    }
+  }
+
+  if (quadrant) {
+    selectRadarQuadrant(quadrant.order, quadrant.startAngle, quadrant.quadrant.name())
+  }
+}
+
 module.exports = Radar

src/util/urlUtils.js

@@ -23,8 +23,16 @@ function getSheetName() {
   return queryParams.sheetName
 }
 
+function getQuadrantFromURL() {
+  const queryParams = QueryParams(window.location.search.substring(1))
+  const quadrantQueryString = queryParams.quadrant
+
+  return quadrantQueryString?.toLowerCase() ?? 'all'
+}
+
 module.exports = {
   constructSheetUrl,
   getDocumentOrSheetId,
   getSheetName,
+  getQuadrantFromURL,
 }