Repository files navigation

A library that generates an interactive radar, inspired bythoughtworks.com/radar.

You can see this in action athttps://radar.thoughtworks.com. If you plug inthis data you'll seethis visualization.

The easiest way to use the app out of the box is to provide apublic Google Sheet ID from which all the data will be fetched. You can enter that ID into the input field on the first page of the application, and your radar will be generated. The data must conform to the format below for the radar to be generated correctly.

You need to make your data public in a form we can digest.

Create a Google Sheet. Give it at least the below column headers, and put in the content that you want:

• In Google sheets, go to 'File', choose 'Publish to the web...' and then click 'Publish'.
• Close the 'Publish to the web' dialog.
• Copy the URL of your editable sheet from the browser (Don't worry, this does not share the editable version).

The URL will be similar tohttps://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit. In theory we are only interested in the part between '/d/' and '/edit' but you can use the whole URL if you want.

The other way to provide your data is using CSV document format.You can enter any URL that responds CSV data into the input field on the first page.The format is just the same as that of the Google Sheet, the example is as follows:

name,ring,quadrant,isNew,description  Composer,adopt,tools,TRUE,"Although the idea of dependency management ..."  Canary builds,trial,techniques,FALSE,"Many projects have external code dependencies ..."  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 ..."

Note: The CSV file parsing is using D3 library, so consult the D3 documentation for the data format details.

Paste the URL in the input field on the home page.

That's it!

Note: The quadrants of the radar, and the order of the rings inside the radar will be drawn in the order they appear in your data.

Checkthis page for step by step guidance.

To create the data representation, you can use the Google Sheetfactory or CSV, or you can also insert all your data straight into the code.

The app usesTabletop.js to fetch the data from a Google Sheet orD3.js if supplied as CSV, so refer to their documentation for more advanced interaction. The input data is sanitized by whitelisting HTML tags withsanitize-html.

The application useswebpack to package dependencies and minify all .js and .scss files.

The application also supports private google sheets. Following flags need to be set for private sheets to work. API key and OAuth Client ID can be obtained from your Google developer console.

export ENABLE_GOOGLE_AUTH=trueexport API_KEY=[Google API Key]export CLIENT_ID=[Google Client ID]

To enable Google Tag Manager, add the following environment variable.

export GTM_ID=[GTM ID]

We have released BYOR as a docker image for our users. The image is available in ourDockerHub Repo. To pull and run the image, run the following commands.

$ docker pull wwwthoughtworks/build-your-own-radar$ docker run --rm -p 8080:80 -e SERVER_NAMES="localhost 127.0.0.1" wwwthoughtworks/build-your-own-radar$ open http://localhost:8080

All tasks are defined inpackage.json.

Pull requests are welcome; please write tests whenever possible.Make sure you have nodejs installed.

• git clone git@github.com:thoughtworks/build-your-own-radar.git
• npm install
• npm test - to run your tests
• npm run dev - to run application in localhost:8080. This will watch the .js and .css files and rebuild on file changes

To run End to End tests in headless mode

• add a new environment variable 'TEST_URL' and set it to 'http://localhost:8080/'
• npm run end_to_end_test

To run End to End tests in debug mode

• add a new environment variable 'TEST_URL' and set it to 'http://localhost:8080/'
• npm run start
• Click on 'Run all specs' in cypress window

 $ docker run -p 8080:8080 -v $PWD:/app -w /app -it node:10.15.3 /bin/sh -c 'npm install && npm run dev'

Note: If you are facing Node-sass compile error while running, please prefix the commandnpm rebuild node-sass beforenpm run dev. like this

npm install && npm rebuild node-sass && npm run dev

After building it will start onlocalhost:8080