Pull data from CSV for Tech Radar - javascript

I am trying to create my own Tech Radar based on Zalando Tech Radar and getting it to Pull data from a CSV.
But when I refresh the index.html. It gives me a blank page.
What am I missing here?
<script>
function draw_radar(my_entries) {
radar_visualization({
svg_id: "radar",
width: 1450,
height: 1000,
colors: {
background: "#fff",
grid: "#bbb",
inactive: "#ddd"
},
title: "My Radar",
quadrants: [
{ name: "Bottom Right" },
{ name: "Bottom Left" },
{ name: "Top Left" },
{ name: "Top Right" }
],
rings: [
{ name: "INNER", color: "#93c47d" },
{ name: "SECOND", color: "#b7e1cd" },
{ name: "THIRD", color: "#fce8b2" },
{ name: "OUTER", color: "#f4c7c3" }
],
print_layout: true,
entries: my_entries
});
}
</script>
I am following a guide and it is asking me to wrap the radar_visualization() function with a custom one, that takes an array of entry, to render the transformed rows, e.g. draw_radar(entries).
<script>
function toEntry(row) {
return {
label: row.name,
quadrant: ['Bottom Right','Bottom Left','Top Left','Top Right'].indexOf(row.quadrant),
ring: ['INNER','SECOND','THIRD','OUTER'].indexOf(row.ring),
link: row.link,
moved: ['down','none','up'].indexOf(row.moved) -1,
active:true
}
}
</script>
The guide is also mentions a way to transform a row in the CSV into an entry for the tech radar:
<script>
fetch('./data.csv')
.then(function (resp) {
return resp.text();
})
.then(function (csv) {
var entries = d3.csvParse(csv,function (row) {
return toEntry(row);
});
draw\_radar(entries);
});
</script>
This is the last part to bring them all together. But when nothing happens when I load the .html

Related

Notion js SDK asks for title even after title is provided

I am trying to create a database using notion sdk and in this is what my payload looks like:
parent: {
type: "page_id",
page_id: process.env.PAGE_ID,
},
icon: {
type: "emoji",
emoji: "🐽",
},
title: [
{
type: "text",
text: {
content: "DB Title",
},
},
],
properties: {
"Prop-1": {
date: {},
},
"Prop-2": {
multi_select: {
options: [
{
name: "option-1",
color: "green",
},
{
name: "option-2",
color: "gray",
},
{
name: "option-3",
color: "pink",
},
],
},
},
"prop-3": {
multi_select: {
options: [],
},
},
},
I have already added title which can be seen above however the response give 400 status code.
#notionhq/client warn: request fail { code: 'validation_error', message: 'Title is not provided' }
Can't figure our where am I going wrong.
You also need to add a title column to your properties. Look at the example payload in the docs, you will see a "Name" title column.
https://developers.notion.com/reference/create-a-database

Highcharts: How to give a different color to each category in barcharts?

As the question states. I'm trying to give a different color to each category in barcharts. It can be easily done in linecharts where we can pass each series as an object. But I haven't been able to do this on barcharts. Please see the picture to get more clarity.
Also, see demo code how I'm trying to achieve it. It looks something like below.
xAxis: {
categories: ['Nominal Bonds', 'Inflation', 'Equity'],
},
series: [
{
data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
},
{
data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
},
{
data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
}
]
Any help would be appreciated.
You can do it by using this: xAxis.type: 'category'
Pseudo code below:
xAxis: {
type: 'category',
},
series: [
{
data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
},
{
data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
},
{
data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
}
]
Demo: https://jsfiddle.net/BlackLabel/q97vxzct/

v2 Wix React-native-navigation: how to actually implement side Menu with bottomTabs?

I am having a bit of trouble implementing the sideMenu to the following code: (see the startTabs).
I call this after "login" is clicked on my root screen. The root screen looks like the following:
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: "navigation.playground.WelcomeScreen",
passProps: {
text: "stack with one child"
},
alignment: "center",
options: {
topBar: {
visible: true,
title: {
text: "main screen"
}
}
}
}
}]
}
}
});
const startTabs = () => {
Promise.all([
Icon.getImageSource("md-map", 30),
Icon.getImageSource("ios-share-alt", 30)
]).then(sources => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "navigation.playground.FindPlaceScreen",
options: {
bottomTab: {
text: "Find Place",
icon: sources[0]
},
topBar: {
visible: true,
title: {
text: "Find Place"
}
}
}
}
}
]
}
},
{
stack: {
children: [{
component: {
name: "navigation.playground.SharePlaceScreen",
options: {
bottomTab: {
text: "Share Place",
icon: sources[1]
},
topBar: {
// visible: true,
title: {
text: "Share Place"
}
}
}
}
}]
}
}
]
}
}
});
});
};
Now in order for me to implement sideMenu after login, Would I implement it in the "startTabs"? or elsewhere?
Solved this. Sorry I am a new programmer, so I had a spelling mistake in my sideDrawer component where "render" was spelled "redner". Took me the longest time to figure this out!!!
Otherwise the code I pasted in initial question is correct (for anyone who looks at this for reference). Thanks!

Meteor cross collection arrays

I am trying to pull an array from a different collection using collection2. I have been able to do this with objects using the following example for users:
users: {
type: String,
label: "Inspector",
optional: true,
autoform: {
firstOption: 'Choose an Inspector',
options: function() {
return Meteor.users.find({}, {
sort: {
profile: 1,
firstName: 1
}
}).map(function(c) {
return {
label: c.profile.firstName + " " + c.profile.lastName,
value: c._id
};
});
}
}
},
I would like to do the same but for an array of objects. Here is what the source data looks like:
{
"_id": "xDkso4FXHt63K7evG",
"AboveGroundSections": [{
"sectionName": "one"
}, {
"sectionName": "two"
}],
"AboveGroundItems": [{
"itemSection": "one",
"itemDescription": "dfgsdfg",
"itemCode": "dsfgsdg"
}, {
"itemSection": "two",
"itemDescription": "sdfgsdfg",
"itemCode": "sdfgsdgfsd"
}]
}
Here is what my function looks like:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options: function() {
return TemplateData.find({}, {
sort: {
AboveGroundSections: 1,
sectionName: [0]
}
}).map(function(c) {
return {
label: c.AboveGroundSections.sectionName,
value: c.AboveGroundSections.sectionName
}
});
}
}
},
I know this, it's just not pulling the data for me. I am sure, I am just missing something small. I am trying to pull all objects within the AboveGroundSection array.
Your .map() is iterating over the set of documents but not over the arrays inside each document. Also I don't think your sorting is going to work the way you hope because of the inner nesting.
Try:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options() {
let opt = [];
TemplateData.find().forEach(c => {
c.AboveGroundSections.forEach(s => { opt.push(s.sectionName) });
});
return opt.sort().map(o => { return { label: o, value: o } });
}
}
},
Also if your AboveGroundSections array only has a single key per element then you can simplify:
"AboveGroundSections": [
{ "sectionName": "one" },
{ "sectionName": "two" }
]
To:
"AboveGroundSections": [
"one",
"two"
]

I tried to add a release dropdown to my chart and have it reload when a new release is selected, but it doesnt

so I am trying to modify the example Cumulative flow chart here so that it has a release dropdown, making it so that it only shows information pertaining to a given release. My problem is that when a new release is selected from the release dropdown, the graph does not reload itself, and so it never actually shows information pertinent to the selected release. I think I have implemented the listeners correctly but I am not sure, so I am wondering if someone could tell me why this is happening and how to fix it. Thanks! My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Historical Summary</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CFDCalculator', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
config: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
getMetrics: function() {
return _.map(this.getStateFieldValues(), function(stateFieldValue) {
return {
as: stateFieldValue,
groupByField: this.getStateFieldName(),
allowedValues: [stateFieldValue],
f: 'groupByCount',
display: 'area'
};
}, this);
}
});
Ext.define('Rally.example.CFDChart', {
extend: 'Rally.app.App',
requires: [
'Rally.example.CFDCalculator'
],
launch: function() {
this.add({
xtype: 'rallyreleasecombobox',
fieldLabel: 'Filter by Release:',
project: this.getContext().getProject(),
//value: Rally.util.Ref.getRelativeUri(this.getContext().getRelease()),
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
//context: this.getContext();
});
},
_onSelect: function() {
var histChart = this.down('rallychart');
histChart.refresh({
storeConfig: {
filters: [this._getOwnerFilter()]
}
});
},
_getOwnerFilter: function() {
//var userCombo = this.down('rallyusersearchcombobox');
var releaseValue = this.down('rallyreleasecombobox');
return {
property: 'Release',
operator: '=',
value: releaseValue.getValue()
};
},
/**
* Generate the store config to retrieve all snapshots for stories and defects in the current project scope
* within the last 30 days
*/
_getStoreConfig: function() {
return {
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'TestSet' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) }
},
fetch: ['ScheduleState'],
hydrate: ['ScheduleState'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity
};
},
/**
* Generate a valid Highcharts configuration object to specify the chart
*/
_getChartConfig: function() {
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Project Cumulative Flow: User Stories & Test Sets'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
}
});
Rally.launchApp('Rally.example.CFDChart', {
name: 'Historical summary: test cases, stories, and defects'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Your code errors with "Uncaught TypeError: undefined is not a function" on line
histChart.refresh
I modified example of ProjectCumulativeFlow to filter by Release. Full code is in this github repo.
Instead of extending Rally.app.App, I extended Rally.app.TimeboxScopedApp.
SnapshotStore may filter by Release, but requires ObjectID.
Here is the find:
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'Defect' ] },
Release: this.getContext().getTimeboxScope().record.data.ObjectID,
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID
}
To update the app after Release selection check if the chart already exists (if yes, destroy it):
onScopeChange: function() {
if (this.down('#mychart')) {
this.down('#mychart').destroy();
}
this.add({
xtype: 'rallychart',
itemId: 'mychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
});
},

Categories