Add support for alternative radars in JSON format

README.md

@@ -108,6 +108,52 @@ 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.
 
+#### Multiple alternative radars in JSON
+
+Just like with Google Spreadsheets, you can provide multiple alternative radars in the same JSON file by returning an object instead of an array.
+The keys of the object will be the names of the alternative radars, and show up as buttons at the bottom of the radar, allowing the user to choose which radar to view:
+
+![Alternative Radar buttons shown on the radar](assets/alternative_radars-min.png)
+
+The above example of a JSON structure, split into two different radars would look like this:
+
+```json
+{
+  "First": [
+    {
+      "name": "Composer",
+      "ring": "adopt",
+      "quadrant": "tools",
+      "isNew": "TRUE",
+      "description": "Although the idea of dependency..."
+    },
+    {
+      "name": "Canary builds",
+      "ring": "trial",
+      "quadrant": "techniques",
+      "isNew": "FALSE",
+      "description": "Many projects have external code..."
+    }
+  ],
+  "Second": [
+    {
+      "name": "Apache Kylin",
+      "ring": "assess",
+      "quadrant": "platforms",
+      "isNew": "TRUE",
+      "description": "Apache Kylin is an open source..."
+    },
+    {
+      "name": "JSF",
+      "ring": "hold",
+      "quadrant": "languages & frameworks",
+      "isNew": "FALSE",
+      "description": "We continue to see teams run..."
+    }
+  ]
+}
+```
+
 ### Building the radar
 
 Paste the URL in the input field on the home page.

spec/end_to_end_tests/config.json

@@ -1,6 +1,7 @@
 {
-  "CSV_FILE_URL": "https://raw.githubusercontent.com/thoughtworks/build-your-own-radar/master/spec/end_to_end_tests/resources/sheet.csv",
-  "JSON_FILE_URL": "https://raw.githubusercontent.com/thoughtworks/build-your-own-radar/master/spec/end_to_end_tests/resources/data.json",
+  "CSV_FILE_URL": "/e2e_resources/sheet.csv",
+  "JSON_FILE_URL": "/e2e_resources/data.json",
+  "JSON_MULTI_RADAR_FILE_URL": "/e2e_resources/multi_data.json",
   "PUBLIC_GOOGLE_SHEET_URL": "https://docs.google.com/spreadsheets/d/1wZVb8V53O0Lzr4iMaz4qjJZKteA1xQhJNajGq0jE9sw",
   "PUBLIC_GOOGLE_SHEET_TITLE": "BYOR Test - Public Google Sheet",
   "PUBLIC_GOOGLE_SHEET_RADAR_SHEET_NAMES": ["Build your Technology Radar", "Build your Technology Radar - Sheet 2"],

spec/end_to_end_tests/pageObjects/byor_page.js

@@ -16,6 +16,11 @@ class ByorPage {
     cy.get(this.textBox).type(config.JSON_FILE_URL)
   }
 
+  provideMultiJsonName() {
+    cy.get(this.textBox).clear()
+    cy.get(this.textBox).type(config.JSON_MULTI_RADAR_FILE_URL)
+  }
+
   providePublicSheetUrl() {
     cy.get(this.textBox).clear()
     cy.get(this.textBox).type(config.PUBLIC_GOOGLE_SHEET_URL)

spec/end_to_end_tests/specs/end_to_end.cy.js

@@ -412,6 +412,71 @@ describe('Build radar with CSV', () => {
   })
 })
 
+describe('Support multiple radars in one JSON', () => {
+  beforeEach(function () {
+    if (Cypress.currentTest.title == 'verify initial view of Radar') {
+      cy.visit(Cypress.env('host') + `/?documentId=${encodeURIComponent(testConfig.JSON_MULTI_RADAR_FILE_URL)}`)
+    } else if (
+      Cypress.currentTest.title !== 'verify url input and submit' &&
+      Cypress.currentTest.title !== 'verify keypress / to focus url input'
+    ) {
+      cy.visit(
+        Cypress.env('host') +
+          `/?documentId=${encodeURIComponent(testConfig.JSON_MULTI_RADAR_FILE_URL)}&sheetName=Second`,
+      )
+    } else {
+      cy.visit(Cypress.env('host'))
+    }
+  })
+
+  context('No chosen radar', () => {
+    it('verify url input and submit', () => {
+      byorPage.provideMultiJsonName()
+      byorPage.clickSubmitButton()
+
+      radarPage.validateGraphTitle('Multi_data - First')
+
+      radarPage.validateMobileQuadrantsHidden()
+      radarPage.validateGraphVisible()
+      radarPage.validateQuadrantOrder()
+      radarPage.validateRingOrder()
+
+      radarPage.validateActiveAlternateRadar(1)
+      radarPage.validateInactiveAlternateRadar(2)
+      radarPage.clickAlternateRadarItem(2)
+      radarPage.validateActiveAlternateRadar(2)
+      radarPage.validateInactiveAlternateRadar(1)
+      radarPage.validateGraphTitle('Multi_data - Second')
+    })
+
+    it('verify initial view of Radar', () => {
+      radarPage.validateGraphTitle('Multi_data - First')
+
+      radarPage.validateMobileQuadrantsHidden()
+      radarPage.validateGraphVisible()
+      radarPage.validateQuadrantOrder()
+      radarPage.validateRingOrder()
+
+      radarPage.validateActiveAlternateRadar(1)
+      radarPage.validateInactiveAlternateRadar(2)
+    })
+  })
+
+  context('Second chosen radar', () => {
+    it('verify initial view of Radar when alternative is chosen', () => {
+      radarPage.validateGraphTitle('Multi_data - Second')
+
+      radarPage.validateMobileQuadrantsHidden()
+      radarPage.validateGraphVisible()
+      radarPage.validateQuadrantOrder()
+      radarPage.validateRingOrder()
+
+      radarPage.validateActiveAlternateRadar(2)
+      radarPage.validateInactiveAlternateRadar(1)
+    })
+  })
+})
+
 describe('Build radar with JSON', () => {
   beforeEach(function () {
     if (

src/util/factory.js

@@ -240,7 +240,7 @@ const CSVDocument = function (url) {
   return self
 }
 
-const JSONFile = function (url) {
+const JSONFile = function (url, radarName) {
   var self = {}
 
   self.build = function () {
@@ -252,16 +252,41 @@ const JSONFile = function (url) {
       })
   }
 
+  var sheetName = radarName
   var createBlips = function (data) {
+    var radarName = sheetName
     try {
-      var columnNames = Object.keys(data[0])
+      var source
+      var alternativeRadars = []
+
+      // If the JSON is an object, but not an array it might contain
+      // multiple sheets of arrays, so we treat it as such
+      if (typeof data === 'object' && !Array.isArray(data)) {
+        alternativeRadars = Object.keys(data)
+
+        if (!radarName || radarName == 'JSON File') {
+          radarName = alternativeRadars[0]
+        }
+
+        source = data[radarName]
+      } else {
+        source = data
+      }
+
+      var columnNames = Object.keys(source[0])
       var contentValidator = new ContentValidator(columnNames)
       contentValidator.verifyContent()
       contentValidator.verifyHeaders()
-      var blips = _.map(data, new InputSanitizer().sanitize)
+      var blips = _.map(source, new InputSanitizer().sanitize)
+
+      var title = FileName(url)
+      if (radarName) {
+        title = title.substring(0, title.length - 5) + ' - ' + radarName
+      }
+
       featureToggles.UIRefresh2022
-        ? plotRadarGraph(FileName(url), blips, 'JSON File', [])
-        : plotRadar(FileName(url), blips, 'JSON File', [])
+        ? plotRadarGraph(title, blips, radarName, alternativeRadars)
+        : plotRadar(title, blips, radarName, alternativeRadars)
     } catch (exception) {
       const invalidContentError = new InvalidContentError(ExceptionMessages.INVALID_JSON_CONTENT)
       plotErrorMessage(featureToggles.UIRefresh2022 ? invalidContentError : exception, 'json')
@@ -319,14 +344,14 @@ const Factory = function () {
     const domainName = DomainName(window.location.search.substring(1))
 
     const paramId = getDocumentOrSheetId()
+    const sheetName = getSheetName()
     if (paramId && paramId.endsWith('.csv')) {
       sheet = CSVDocument(paramId)
       sheet.init().build()
     } else if (paramId && paramId.endsWith('.json')) {
-      sheet = JSONFile(paramId)
+      sheet = JSONFile(paramId, sheetName)
       sheet.init().build()
     } else if (domainName && domainName.endsWith('google.com') && paramId) {
-      const sheetName = getSheetName()
       sheet = GoogleSheet(paramId, sheetName)
       sheet.init().build()
     } else {

webpack.dev.js

@@ -3,6 +3,7 @@ const webpack = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const postcssPresetEnv = require('postcss-preset-env')
 const cssnano = require('cssnano')
+const path = require('path')
 
 const common = require('./webpack.common.js')
 const config = require('./src/config')
@@ -27,6 +28,12 @@ Object.entries(featureToggles).forEach(function ([key, value]) {
 module.exports = merge(common, {
   mode: 'development',
   entry: { main: main },
+  devServer: {
+    static: {
+      directory: path.resolve(__dirname, './spec/end_to_end_tests/resources'),
+      publicPath: '/e2e_resources',
+    },
+  },
   performance: {
     hints: false,
   },