Example of supplying content directly in code about build-your-own-radar

[turneand]

Great project, looks like it's going to be really useful to me. But, as I am also unable to access google docs within most organisations I was also looking for a way to inline the data or load externally.

I think the code could do with refactoring to break out the common base code for parsing the sheets, but below is a standalone replacement for "factory.js" that allows the data to be contained inline, which is proving sufficient for my requirements. Hopefully could prove useful to others trying out similar things.

Can also provide as a PR if useful although will have to remind myself how to write tests in javascript first (not done javascript for many years).

document.title = 'Inline Data Example'

// store data inline directly as a table...
const rawDataTable = [
    [ 'name',                          'ring',   'quadrant',               'isNew', 'description' ],
    [ 'Grafana',                       'adopt',  'tools',                  'TRUE',  'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Packer',                        'adopt',  'tools',                  'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Apache Kafka',                  'trial',  'tools',                  'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Spring Boot',                   'adopt',  'languages & frameworks', 'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'AngularJS',                     'hold',   'languages & frameworks', 'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Docker',                        'adopt',  'platforms',              'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Pivotal Cloud Foundry',         'trial',  'platforms',              'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'AWS Application Load Balancer', 'assess', 'platforms',              'TRUE',  'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Overambitious API gateways',    'hold',   'platforms',              'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Superficial private cloud',     'hold',   'platforms',              'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Pipelines as code',             'adopt',  'techniques',             'TRUE',  'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Bug bounties',                  'trial',  'techniques',             'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ],
    [ 'Cloud lift and shift',          'hold',   'techniques',             'FALSE', 'This is the description. You can use basic html such as the <strong>strong tag to emphasise keywords and phrases</strong> and insert <a href="https://www.thoughtworks.com">anchor links to documentation and referance material</a>.' ]
]

// which will need to be converted to an array of objects...
const rawData = rawDataTable.slice(1).map(function(x) {
    // likely a better way to do this ?
    var response = {}
    for (var i = 0; i < x.length; i++)  {
        response[rawDataTable[0][i]] = x[i];
    }
    return response
})

const _ = {
    map: require('lodash/map'),
    uniqBy: require('lodash/uniqBy'),
    capitalize: require('lodash/capitalize'),
    each: require('lodash/each')
};

const InputSanitizer = require('./inputSanitizer');
const Radar = require('../models/radar');
const Quadrant = require('../models/quadrant');
const Ring = require('../models/ring');
const Blip = require('../models/blip');
const GraphingRadar = require('../graphing/radar');
const MalformedDataError = require('../exceptions/malformedDataError');
const ContentValidator = require('./contentValidator');
const ExceptionMessages = require('./exceptionMessages');

const InlineSheet = function () {
    var self = {};

    self.build = function () {
        var columnNames = Object.keys(rawData[0])

        var contentValidator = new ContentValidator(columnNames);
        contentValidator.verifyContent();
        contentValidator.verifyHeaders();

        var all = rawData;
        var blips = _.map(all, new InputSanitizer().sanitize);
        var rings = _.map(_.uniqBy(blips, 'ring'), 'ring');
        var ringMap = {};
        var maxRings = 4;

        _.each(rings, function (ringName, i) {
            if (i == maxRings) {
                throw new MalformedDataError(ExceptionMessages.TOO_MANY_RINGS);
            }
            ringMap[ringName] = new Ring(ringName, i);
        });

        var quadrants = {};
        _.each(blips, function (blip) {
            if (!quadrants[blip.quadrant]) {
                quadrants[blip.quadrant] = new Quadrant(_.capitalize(blip.quadrant));
            }
            quadrants[blip.quadrant].add(new Blip(blip.name, ringMap[blip.ring], blip.isNew.toLowerCase() === 'true', blip.topic, blip.description))
        });

        var radar = new Radar();
        _.each(quadrants, function (quadrant) {
            radar.addQuadrant(quadrant)
        });

        var size = (window.innerHeight - 133) < 620 ? 620 : window.innerHeight - 133;
        new GraphingRadar(size, radar).init().plot();
    };

    return self;
};

module.exports = InlineSheet;

Then, with a small change to the site.js file, this can be used instead of a google sheet:

//const RadarFactory = require('./util/factory');
const RadarFactory = require('./util/inlineFactory');

RadarFactory().build();

[Rajik]

@turneand We are so glad to know that this is going to be useful for you! Thank you for looking into the code and giving us suggestions to refactor. You are welcome to give us a pull request, please do so.

[miguecoll]

We have bypassed the Googleshhet selection form symply hardcoding the URL as a var on factory.js:

---

const GoogleSheetInput = function () {
var self = {};

self.build = function () {
    var hardCodedCrap = 'sheetId=URL_FOR_GOOGLE_SHEET?usp=sharing'
    var domainName = DomainName(hardCodedCrap);
    var queryParams = QueryParams(hardCodedCrap);

---

We find usefull to have the data on googlesheet but we want to have it "preselected".

[viveksoundrapandi]

@emmanuel You can put the csv file in the same folder as the html file that runs D3 javascript code, and change the code to something like d3.csv("file.csv")
File: /src/util/factory.js
Change line 107 in function : const CSVDocument = function (url) {
From: d3.csv(url, createBlips);
To: d3.csv("local_file.csv", createBlips);

[sgarap]

@viveksoundrapandi Is this approach working for you? It did't for me. I can see teh home page to enter the url. When i enter the csv name, i see the following error.

Oops! It seems like there are some problems with loading your data.
Please check FAQs for possible solutions.

[bharathnatarajan1]

@viveksoundrapandi I have also tried the approach you suggested. it didn't work for me as well. Any further suggestions?

[gustavz]

I am also interested to get it run with local csv files.

@emmanuel You can put the csv file in the same folder as the html file that runs D3 javascript code, and change the code to something like d3.csv("file.csv")
File: /src/util/factory.js
Change line 107 in function : const CSVDocument = function (url) {
From: d3.csv(url, createBlips);
To: d3.csv("local_file.csv", createBlips);

does not work

[brianreumere]

I wanted to host this myself and have it automatically load content from a local CSV file. I got it working by editing the GoogleSheetInput function in src/util/factory.js to never load the form and automatically call the CSVDocument function:

const GoogleSheetInput = function () {
  var self = {}
  var sheet

  self.build = function () {
    var domainName = DomainName(window.location.search.substring(1))
    var queryString = window.location.href.match(/sheetId(.*)/)
    var queryParams = queryString ? QueryParams(queryString[0]) : {}

    sheet = CSVDocument("data.csv")
    sheet.init().build()
  }

  return self
}

I initially put data.csv in a newly created dist folder at the root of the repo, but this seems like not an ideal pattern for Node.js (I am not a Javascript developer at all), so I created a new assets folder at the root of the repo, created the assets/data.csv file, and edited webpack.config.js to use this folder as the content base when running locally:

  devServer: {
    contentBase: './assets',
    host: '0.0.0.0',
    port: 8080
  }

I still haven't figured out a good way to deploy this (will probably try to deploy it to ECS Fargate) and make sure the CSV file is available and loaded properly, but this got it working for local development at least.

[setchy]

@devansh-sharma-tw with byor supporting csv, json, Google sheets, this issue may be able to be closed