GithubHelp home page GithubHelp logo

Comments (9)

turneand avatar turneand commented on July 28, 2024

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();

from build-your-own-radar.

Rajik avatar Rajik commented on July 28, 2024

@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.

from build-your-own-radar.

miguecoll avatar miguecoll commented on July 28, 2024

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".

from build-your-own-radar.

viveksoundrapandi avatar viveksoundrapandi commented on July 28, 2024

@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);

from build-your-own-radar.

sgarap avatar sgarap commented on July 28, 2024

@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.

from build-your-own-radar.

bharathnatarajan1 avatar bharathnatarajan1 commented on July 28, 2024

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

from build-your-own-radar.

gustavz avatar gustavz commented on July 28, 2024

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

from build-your-own-radar.

brianreumere avatar brianreumere commented on July 28, 2024

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.

from build-your-own-radar.

setchy avatar setchy commented on July 28, 2024

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

from build-your-own-radar.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.