Skip to content

Updating bullet plugin to allow authors to define colors #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cfr108 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updating bullet plugin to allow authors to define colors #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions rmvpp/js/lib/d3.plugin.bullet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ d3.bullet = function() {
measures = bulletMeasures,
width = 960,
height = 30,
tickFormat = null;
tickFormat = null,
config = null;

// For each small multiple…
function bullet(g) {
Expand All @@ -21,7 +22,7 @@ d3.bullet = function() {
markerz = markers.call(this, d, i).slice().sort(d3.descending),
measurez = measures.call(this, d, i).slice().sort(d3.descending),
g = d3.select(this);


// Compute the new x-scale.
var x1 = d3.scale.linear()
Expand All @@ -46,6 +47,7 @@ d3.bullet = function() {

range.enter().append("rect")
.attr("class", function(d, i) { return "range s" + i; })
.attr("fill", function(d, i) { return config["colour" + i]; })
.attr("width", w0)
.attr("height", height)
.attr("x", reverse ? x0 : 0)
Expand All @@ -66,6 +68,7 @@ d3.bullet = function() {

measure.enter().append("rect")
.attr("class", function(d, i) { return "measure s" + i; })
.attr("fill", config.colour3)
.attr("width", w0)
.attr("height", height / 3)
.attr("x", reverse ? x0 : 0)
Expand All @@ -88,6 +91,7 @@ d3.bullet = function() {

marker.enter().append("line")
.attr("class", "marker")
.attr("stroke", config.colour4)
.attr("x1", x0)
.attr("x2", x0)
.attr("y1", height / 6)
Expand Down Expand Up @@ -211,6 +215,12 @@ d3.bullet = function() {
return bullet;
};

bullet.config = function(x) {
if (!arguments.length) return config;
config = x;
return bullet;
};

return bullet;
};

Expand Down
10 changes: 5 additions & 5 deletions rmvpp/plugins/bullet/bullet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
/* Replace customPluginTag with the value defined in the plugin jsvascript file */

.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .marker { /*stroke defined in config*/ stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .range.s0 { /*fill defined in config*/ }
.bullet .range.s1 { /*fill defined in config*/ }
.bullet .range.s2 { /*fill defined in config*/ }
.bullet .measure.s0 { /*fill defined in config*/ }
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
Expand Down
93 changes: 67 additions & 26 deletions rmvpp/plugins/bullet/bullet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
rmvpp = (function(rmvpp){


/**
* Plugin Configuration
*/
*/
var pluginName = "rmvpp-bullet"
var pluginDescription = "Bullets"
var rowLimit = 50;
Expand All @@ -13,13 +13,13 @@
rmvpp[pluginName] = {};
rmvpp[pluginName].pluginDescription = pluginDescription;
rmvpp[pluginName].rowLimit = rowLimit;


// Define some test data for developing in the offline test bench.
rmvpp[pluginName].testData = [
["Red Cars","car","2,000","8,000","2,000","8,900","5,000"],
["Blue Cars","car","60","80","90","88","77"],
["Brown Cars","car","60","80","999","88","100"],
["Brown Cars","car","60","80","999","88","100"],
["Yellow Cars","car","60","80","100","88","77"],
["Black Cars","car","20","80","71","88","77"],
["Green Cars","car","60","80","100","88","110"],
Expand All @@ -29,71 +29,112 @@
]

rmvpp[pluginName].columnMappingParameters = [
{ targetProperty: "title",
{ targetProperty: "title",
formLabel: "Title"
},
},
{
targetProperty: "subtitle",
targetProperty: "subtitle",
formLabel: "Subtitle"
},
{
targetProperty: "range1",
targetProperty: "range1",
formLabel: "Range 1"
},
{
targetProperty: "range2",
targetProperty: "range2",
formLabel: "Range 2"
},
{
targetProperty: "range3",
targetProperty: "range3",
formLabel: "Range 3"
},
{
targetProperty: "measure",
targetProperty: "measure",
formLabel: "Measure"
},
{
targetProperty: "marker",
targetProperty: "marker",
formLabel: "Marker"
}
}

]

rmvpp[pluginName].configurationParameters = [
{
"targetProperty":"colour0",
"label":"Largest Range Color",
"inputType":"colourpicker",
"inputOptions": {
"defaultValue": "#eeeeee"
}
},
{
"targetProperty":"colour1",
"label":"Medium Range Color",
"inputType":"colourpicker",
"inputOptions": {
"defaultValue": "#dddddd"
}
},
{
"targetProperty":"colour2",
"label":"Smallest Range Color",
"inputType":"colourpicker",
"inputOptions": {
"defaultValue": "#cccccc"
}
},
{
"targetProperty":"colour3",
"label":"Measure Color",
"inputType":"colourpicker",
"inputOptions": {
"defaultValue": "#b0c4de"
}
},
{
"targetProperty":"colour4",
"label":"Marker Color",
"inputType":"colourpicker",
"inputOptions": {
"defaultValue": "#000000"
}
}
]



rmvpp[pluginName].render = function(data, columnNames, config, container) {

// Prepare Data
var bulletData = []

for ( row in data ) {
bulletData.push(
{
title: data[row].title,
subtitle: data[row].subtitle,
title: data[row].title,
subtitle: data[row].subtitle,
ranges: [+data[row].range1.replace(/,/g,""), +data[row].range2.replace(/,/g,""), +data[row].range3.replace(/,/g,"")],
measures: [+data[row].measure.replace(/,/g,"")],
markers: [+data[row].marker.replace(/,/g,"")]
}
)
}


$(pluginName + ':first').wrap('<div id="wrap"></div>')
$('#wrap').width(900)


// Render Visual
var margin = {top: 5, right: 40, bottom: 20, left: 200},
width = 500 - margin.left - margin.right,
height = 50 - margin.top - margin.bottom;

var chart = d3.bullet()
.width(width)
.height(height);
.height(height)
.config(config);


var svg = d3.select(container).selectAll("svg")
Expand Down Expand Up @@ -125,6 +166,6 @@

// Do not modify this line
return rmvpp;


}(rmvpp || {}))