From c6ec1214e382a047cc2f8f93338e0c7bd975e984 Mon Sep 17 00:00:00 2001 From: cfr108 Date: Wed, 12 Jul 2017 16:08:21 -0700 Subject: [PATCH] Updating bullet plugin to allow authors to define colors --- rmvpp/js/lib/d3.plugin.bullet.js | 14 ++++- rmvpp/plugins/bullet/bullet.css | 10 ++-- rmvpp/plugins/bullet/bullet.js | 93 +++++++++++++++++++++++--------- 3 files changed, 84 insertions(+), 33 deletions(-) diff --git a/rmvpp/js/lib/d3.plugin.bullet.js b/rmvpp/js/lib/d3.plugin.bullet.js index 8e6dafa..1687ead 100644 --- a/rmvpp/js/lib/d3.plugin.bullet.js +++ b/rmvpp/js/lib/d3.plugin.bullet.js @@ -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) { @@ -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() @@ -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) @@ -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) @@ -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) @@ -211,6 +215,12 @@ d3.bullet = function() { return bullet; }; + bullet.config = function(x) { + if (!arguments.length) return config; + config = x; + return bullet; + }; + return bullet; }; diff --git a/rmvpp/plugins/bullet/bullet.css b/rmvpp/plugins/bullet/bullet.css index a8e9163..d8d6e57 100644 --- a/rmvpp/plugins/bullet/bullet.css +++ b/rmvpp/plugins/bullet/bullet.css @@ -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; } diff --git a/rmvpp/plugins/bullet/bullet.js b/rmvpp/plugins/bullet/bullet.js index 53c87a4..6881361 100644 --- a/rmvpp/plugins/bullet/bullet.js +++ b/rmvpp/plugins/bullet/bullet.js @@ -1,9 +1,9 @@ rmvpp = (function(rmvpp){ - + /** * Plugin Configuration - */ + */ var pluginName = "rmvpp-bullet" var pluginDescription = "Bullets" var rowLimit = 50; @@ -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"], @@ -29,51 +29,91 @@ ] 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,"")] @@ -81,11 +121,11 @@ ) } - + $(pluginName + ':first').wrap('
') $('#wrap').width(900) - - + + // Render Visual var margin = {top: 5, right: 40, bottom: 20, left: 200}, width = 500 - margin.left - margin.right, @@ -93,7 +133,8 @@ var chart = d3.bullet() .width(width) - .height(height); + .height(height) + .config(config); var svg = d3.select(container).selectAll("svg") @@ -125,6 +166,6 @@ // Do not modify this line return rmvpp; - + }(rmvpp || {})) \ No newline at end of file