Comments (9)
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.
@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.
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.
@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.
@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.
@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.
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.
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.
@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)
- Error: internal Server Error HOT 2
- feature request: update blip drawn coordinates to be in ascending order within rings HOT 11
- Custom quadrant name yields empty quadrant HOT 4
- Chrome not prompting for Google Sheet authentication, even when pop-ups allowed HOT 6
- Broken Backward Compatibility HOT 8
- Number of quadrants in the Radar pie. HOT 6
- Can't find the Google Sheet HOT 1
- keeps loading but the radar is never created HOT 2
- Plan to make 10 quadrants
- docker build failed HOT 4
- Load CSV during container start without clicking submit HOT 5
- Custom quadrant names in BYOR HOT 8
- Custom visual HOT 3
- Cross-Origin-Opener-Policy policy would block the window.opener call. HOT 8
- Build failing on local for master HOT 4
- Enhance auto complete search for special characters (eg.: pt-br accents)
- The tool appears to be broken in a recent release HOT 5
- Class "quadrant-name-group" text/tspan not wrapping in current release HOT 2
- Order for the nodes numbering HOT 1
- please improve details in release notes HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from build-your-own-radar.