openstack/xstatic-rickshaw
Code Issues Proposed changes

Version 1.5.0

Browse Source 
Change-Id: I636b6f9188bf97780d541ae86c61af539623888a
This commit is contained in:
Radomir Dopieralski 2014-07-30 13:04:36 +02:00
parent b33f34d58a
commit 92ac93422b
3 changed files with 173 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.txt
View File

@ -1,7 +1,7 @@
XStatic-D3 XStatic-Rickshaw
-------------- --------------
D3 JavaScript library packaged for setuptools (easy_install) / pip. Rickshaw JavaScript library packaged for setuptools (easy_install) / pip.
This package is intended to be used by **any** project that needs these files. This package is intended to be used by **any** project that needs these files.

4
xstatic/pkg/rickshaw/__init__.py
View File

@ -11,9 +11,9 @@ NAME = __name__.split('.')[-1] # package name (e.g. 'foo' or 'foo_bar')
# please use a all-lowercase valid python # please use a all-lowercase valid python
# package name # package name
VERSION = '1.4.6' # version of the packaged files, please use the upstream VERSION = '1.5.0' # version of the packaged files, please use the upstream
# version number # version number
BUILD = '2' # our package build number, so we can release new builds BUILD = '0' # our package build number, so we can release new builds
# with fixes for xstatic stuff. # with fixes for xstatic stuff.
PACKAGE_VERSION = VERSION + '.' + BUILD # version used for PyPi PACKAGE_VERSION = VERSION + '.' + BUILD # version used for PyPi

247
xstatic/pkg/rickshaw/data/rickshaw.js
View File

@ -1,3 +1,14 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['d3'], function (d3) {
return (root.Rickshaw = factory(d3));
});
} else if (typeof exports === 'object') {
module.exports = factory(require('d3'));
} else {
root.Rickshaw = factory(d3);
}
}(this, function (d3) {
/* jshint -W079 */ /* jshint -W079 */
var Rickshaw = { var Rickshaw = {
@ -34,12 +45,6 @@ var Rickshaw = {
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
} }
}; };
if (typeof module !== 'undefined' && module.exports) {
var d3 = require('d3');
module.exports = Rickshaw;
}
/* Adapted from https://github.com/Jakobo/PTClass */ /* Adapted from https://github.com/Jakobo/PTClass */
/* /*
@ -404,7 +409,8 @@ Rickshaw.Graph = function(args) {
max: undefined, max: undefined,
preserve: false, preserve: false,
xScale: undefined, xScale: undefined,
yScale: undefined yScale: undefined,
stack: true
}; };
this._loadRenderers(); this._loadRenderers();
@ -454,6 +460,7 @@ Rickshaw.Graph = function(args) {
throw "series data is not an array: " + JSON.stringify(s.data); throw "series data is not an array: " + JSON.stringify(s.data);
} }
if (s.data.length > 0) {
var x = s.data[0].x; var x = s.data[0].x;
var y = s.data[0].y; var y = s.data[0].y;
@ -461,6 +468,7 @@ Rickshaw.Graph = function(args) {
throw "x and y properties of points should be numbers instead of " + throw "x and y properties of points should be numbers instead of " +
(typeof x) + " and " + (typeof y); (typeof x) + " and " + (typeof y);
} }
}
if (s.data.length >= 3) { if (s.data.length >= 3) {
// probe to sanity check sort order // probe to sanity check sort order
@ -486,8 +494,17 @@ Rickshaw.Graph = function(args) {
var domain = this.renderer.domain(); var domain = this.renderer.domain();
this.x = (this.xScale || d3.scale.linear()).domain(domain.x).range([0, this.width]); // this.*Scale is coming from the configuration dictionary
this.y = (this.yScale || d3.scale.linear()).domain(domain.y).range([this.height, 0]); // which may be referenced by the Graph creator, or shared
// with other Graphs. We need to ensure we copy the scale
// so that our mutations do not change the object given to us.
// Hence the .copy()
this.x = (this.xScale || d3.scale.linear()).copy().domain(domain.x).range([0, this.width]);
this.y = (this.yScale || d3.scale.linear()).copy().domain(domain.y).range([this.height, 0]);
this.x.magnitude = d3.scale.linear()
.domain([domain.x[0] - domain.x[0], domain.x[1] - domain.x[0]])
.range([0, this.width]);
this.y.magnitude = d3.scale.linear() this.y.magnitude = d3.scale.linear()
.domain([domain.y[0] - domain.y[0], domain.y[1] - domain.y[0]]) .domain([domain.y[0] - domain.y[0], domain.y[1] - domain.y[0]])
@ -643,6 +660,8 @@ Rickshaw.Graph = function(args) {
this[k] = this.config[k]; this[k] = this.config[k];
}, this ); }, this );
if ('stack' in args) args.unstack = !args.stack;
var renderer = args.renderer || (this.renderer && this.renderer.name) || 'stack'; var renderer = args.renderer || (this.renderer && this.renderer.name) || 'stack';
this.setRenderer(renderer, args); this.setRenderer(renderer, args);
@ -1222,7 +1241,7 @@ Rickshaw.Graph.Ajax = Rickshaw.Class.create( {
request: function() { request: function() {
$.ajax( { jQuery.ajax( {
url: this.dataURL, url: this.dataURL,
dataType: 'json', dataType: 'json',
success: this.success.bind(this), success: this.success.bind(this),
@ -1851,21 +1870,21 @@ Rickshaw.Graph.Behavior.Series.Order = function(args) {
var self = this; var self = this;
if (typeof window.$ == 'undefined') { if (typeof window.jQuery == 'undefined') {
throw "couldn't find jQuery at window.$"; throw "couldn't find jQuery at window.jQuery";
} }
if (typeof window.$.ui == 'undefined') { if (typeof window.jQuery.ui == 'undefined') {
throw "couldn't find jQuery UI at window.$.ui"; throw "couldn't find jQuery UI at window.jQuery.ui";
} }
$(function() { jQuery(function() {
$(self.legend.list).sortable( { jQuery(self.legend.list).sortable( {
containment: 'parent', containment: 'parent',
tolerance: 'pointer', tolerance: 'pointer',
update: function( event, ui ) { update: function( event, ui ) {
var series = []; var series = [];
$(self.legend.list).find('li').each( function(index, item) { jQuery(self.legend.list).find('li').each( function(index, item) {
if (!item.series) return; if (!item.series) return;
series.push(item.series); series.push(item.series);
} ); } );
@ -1877,7 +1896,7 @@ Rickshaw.Graph.Behavior.Series.Order = function(args) {
self.graph.update(); self.graph.update();
} }
} ); } );
$(self.legend.list).disableSelection(); jQuery(self.legend.list).disableSelection();
}); });
//hack to make jquery-ui sortable behave //hack to make jquery-ui sortable behave
@ -1896,6 +1915,7 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
var self = this; var self = this;
this.addAnchor = function(line) { this.addAnchor = function(line) {
var anchor = document.createElement('a'); var anchor = document.createElement('a');
anchor.innerHTML = '✔'; anchor.innerHTML = '✔';
anchor.classList.add('action'); anchor.classList.add('action');
@ -1962,6 +1982,7 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
if (this.legend) { if (this.legend) {
var $ = jQuery;
if (typeof $ != 'undefined' && $(this.legend.list).sortable) { if (typeof $ != 'undefined' && $(this.legend.list).sortable) {
$(this.legend.list).sortable( { $(this.legend.list).sortable( {
@ -2293,7 +2314,7 @@ Rickshaw.Graph.JSONP = Rickshaw.Class.create( Rickshaw.Graph.Ajax, {
request: function() { request: function() {
$.ajax( { jQuery.ajax( {
url: this.dataURL, url: this.dataURL,
dataType: 'jsonp', dataType: 'jsonp',
success: this.success.bind(this), success: this.success.bind(this),
@ -2397,6 +2418,8 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
var element = this.element = args.element; var element = this.element = args.element;
var graph = this.graph = args.graph; var graph = this.graph = args.graph;
this.slideCallbacks = [];
this.build(); this.build();
graph.onUpdate( function() { this.update() }.bind(this) ); graph.onUpdate( function() { this.update() }.bind(this) );
@ -2406,8 +2429,10 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
var element = this.element; var element = this.element;
var graph = this.graph; var graph = this.graph;
var $ = jQuery;
var domain = graph.dataDomain(); var domain = graph.dataDomain();
var self = this;
$( function() { $( function() {
$(element).slider( { $(element).slider( {
@ -2432,9 +2457,14 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
if (domain[0] == ui.values[0]) { if (domain[0] == ui.values[0]) {
graph.window.xMin = undefined; graph.window.xMin = undefined;
} }
if (domain[1] == ui.values[1]) { if (domain[1] == ui.values[1]) {
graph.window.xMax = undefined; graph.window.xMax = undefined;
} }
self.slideCallbacks.forEach(function(callback) {
callback(graph, graph.window.xMin, graph.window.xMax);
});
} }
} ); } );
} ); } );
@ -2447,6 +2477,7 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
var element = this.element; var element = this.element;
var graph = this.graph; var graph = this.graph;
var $ = jQuery;
var values = $(element).slider('option', 'values'); var values = $(element).slider('option', 'values');
@ -2463,6 +2494,10 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
} }
$(element).slider('option', 'values', values); $(element).slider('option', 'values', values);
},
onSlide: function(callback) {
this.slideCallbacks.push(callback);
} }
}); });
@ -2476,6 +2511,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
if (!args.graph && !args.graphs) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an graph or an array of graphs"; if (!args.graph && !args.graphs) throw "Rickshaw.Graph.RangeSlider.Preview needs a reference to an graph or an array of graphs";
this.element = args.element; this.element = args.element;
this.element.style.position = 'relative';
this.graphs = args.graph ? [ args.graph ] : args.graphs; this.graphs = args.graph ? [ args.graph ] : args.graphs;
this.defaults = { this.defaults = {
@ -2486,28 +2523,45 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
frameHandleThickness: 10, frameHandleThickness: 10,
frameColor: "#d4d4d4", frameColor: "#d4d4d4",
frameOpacity: 1, frameOpacity: 1,
minimumFrameWidth: 0 minimumFrameWidth: 0,
heightRatio: 0.2
}; };
this.heightRatio = args.heightRatio || this.defaults.heightRatio;
this.defaults.gripperColor = d3.rgb(this.defaults.frameColor).darker().toString(); this.defaults.gripperColor = d3.rgb(this.defaults.frameColor).darker().toString();
this.configureCallbacks = []; this.configureCallbacks = [];
this.slideCallbacks = [];
this.previews = []; this.previews = [];
if (!args.width) this.widthFromGraph = true;
if (!args.height) this.heightFromGraph = true;
if (this.widthFromGraph || this.heightFromGraph) {
this.graphs[0].onConfigure(function () {
this.configure(args); this.render();
}.bind(this));
}
args.width = args.width || this.graphs[0].width || this.defaults.width; args.width = args.width || this.graphs[0].width || this.defaults.width;
args.height = args.height || this.graphs[0].height / 5 || this.defaults.height; args.height = args.height || this.graphs[0].height * this.heightRatio || this.defaults.height;
this.configure(args); this.configure(args);
this.render(); this.render();
}, },
onSlide: function(callback) {
this.slideCallbacks.push(callback);
},
onConfigure: function(callback) { onConfigure: function(callback) {
this.configureCallbacks.push(callback); this.configureCallbacks.push(callback);
}, },
configure: function(args) { configure: function(args) {
this.config = {}; this.config = this.config || {};
this.configureCallbacks.forEach(function(callback) { this.configureCallbacks.forEach(function(callback) {
callback(args); callback(args);
@ -2519,17 +2573,29 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
: this.defaults[k]; : this.defaults[k];
}, this); }, this);
if (args.width) { if ('width' in args || 'height' in args) {
this.previews.forEach(function(preview) {
var width = args.width - this.config.frameHandleThickness * 2; if (this.widthFromGraph) {
preview.setSize({ width: width }); this.config.width = this.graphs[0].width;
}, this); }
if (this.heightFromGraph) {
this.config.height = this.graphs[0].height * this.heightRatio;
this.previewHeight = this.config.height;
} }
if (args.height) {
this.previews.forEach(function(preview) { this.previews.forEach(function(preview) {
var height = this.previewHeight / this.graphs.length;
preview.setSize({ height: height }); var height = this.previewHeight / this.graphs.length - this.config.frameTopThickness * 2;
var width = this.config.width - this.config.frameHandleThickness * 2;
preview.setSize({ width: width, height: height });
if (this.svg) {
var svgHeight = height + this.config.frameHandleThickness * 2;
var svgWidth = width + this.config.frameHandleThickness * 2;
this.svg.style("width", svgWidth + "px");
this.svg.style("height", svgHeight + "px");
}
}, this); }, this);
} }
}, },
@ -2551,12 +2617,14 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
var graphArgs = Rickshaw.extend({}, parent.config); var graphArgs = Rickshaw.extend({}, parent.config);
var height = self.previewHeight / self.graphs.length; var height = self.previewHeight / self.graphs.length;
var renderer = parent.renderer.name;
Rickshaw.extend(graphArgs, { Rickshaw.extend(graphArgs, {
element: this.appendChild(document.createElement("div")), element: this.appendChild(document.createElement("div")),
height: height, height: height,
width: self.previewWidth, width: self.previewWidth,
series: parent.series series: parent.series,
renderer: renderer
}); });
var graph = new Rickshaw.Graph(graphArgs); var graph = new Rickshaw.Graph(graphArgs);
@ -2567,6 +2635,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
parent.onConfigure(function(args) { parent.onConfigure(function(args) {
// don't propagate height // don't propagate height
delete args.height; delete args.height;
args.width = args.width - self.config.frameHandleThickness * 2;
graph.configure(args); graph.configure(args);
graph.render(); graph.render();
}); });
@ -2620,8 +2689,8 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
.classed("rickshaw_range_slider_preview", true) .classed("rickshaw_range_slider_preview", true)
.style("height", this.config.height + "px") .style("height", this.config.height + "px")
.style("width", this.config.width + "px") .style("width", this.config.width + "px")
.style("position", "relative") .style("position", "absolute")
.style("top", -this.previewHeight + "px"); .style("top", 0);
this._renderDimming(); this._renderDimming();
this._renderFrame(); this._renderFrame();
@ -2721,12 +2790,13 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
leftHandle.enter() leftHandle.enter()
.append("rect") .append("rect")
.attr('width', this.config.frameHandleThickness) .attr('width', this.config.frameHandleThickness)
.attr('height', this.config.height)
.style("cursor", "ew-resize") .style("cursor", "ew-resize")
.style("fill-opacity", "0") .style("fill-opacity", "0")
.classed("left_handle", true); .classed("left_handle", true);
leftHandle.attr('x', this.currentFrame[0]); leftHandle
.attr('x', this.currentFrame[0])
.attr('height', this.config.height);
var rightHandle = this.svg.selectAll("rect.right_handle") var rightHandle = this.svg.selectAll("rect.right_handle")
.data([null]); .data([null]);
@ -2734,12 +2804,13 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
rightHandle.enter() rightHandle.enter()
.append("rect") .append("rect")
.attr('width', this.config.frameHandleThickness) .attr('width', this.config.frameHandleThickness)
.attr('height', this.config.height)
.style("cursor", "ew-resize") .style("cursor", "ew-resize")
.style("fill-opacity", "0") .style("fill-opacity", "0")
.classed("right_handle", true); .classed("right_handle", true);
rightHandle.attr('x', this.currentFrame[1] + this.config.frameHandleThickness); rightHandle
.attr('x', this.currentFrame[1] + this.config.frameHandleThickness)
.attr('height', this.config.height);
}, },
_renderMiddle: function() { _renderMiddle: function() {
@ -2749,14 +2820,14 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
middleHandle.enter() middleHandle.enter()
.append("rect") .append("rect")
.attr('height', this.config.height)
.style("cursor", "move") .style("cursor", "move")
.style("fill-opacity", "0") .style("fill-opacity", "0")
.classed("middle_handle", true); .classed("middle_handle", true);
middleHandle middleHandle
.attr('width', Math.max(0, this.currentFrame[1] - this.currentFrame[0])) .attr('width', Math.max(0, this.currentFrame[1] - this.currentFrame[0]))
.attr('x', this.currentFrame[0] + this.config.frameHandleThickness); .attr('x', this.currentFrame[0] + this.config.frameHandleThickness)
.attr('height', this.config.height);
}, },
_registerMouseEvents: function() { _registerMouseEvents: function() {
@ -2814,7 +2885,7 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
self.graphs.forEach(function(graph) { self.graphs.forEach(function(graph) {
var domainScale = d3.scale.linear() var domainScale = d3.scale.linear()
.interpolate(d3.interpolateRound) .interpolate(d3.interpolateNumber)
.domain([0, self.previewWidth]) .domain([0, self.previewWidth])
.range(graph.dataDomain()); .range(graph.dataDomain());
@ -2823,6 +2894,10 @@ Rickshaw.Graph.RangeSlider.Preview = Rickshaw.Class.create({
domainScale(frameAfterDrag[1]) domainScale(frameAfterDrag[1])
]; ];
self.slideCallbacks.forEach(function(callback) {
callback(graph, windowAfterDrag[0], windowAfterDrag[1]);
});
if (frameAfterDrag[0] === 0) { if (frameAfterDrag[0] === 0) {
windowAfterDrag[0] = undefined; windowAfterDrag[0] = undefined;
} }
@ -2936,19 +3011,14 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
}, },
domain: function(data) { domain: function(data) {
// Requires that at least one series contains some data
var stackedData = data || this.graph.stackedData || this.graph.stackData(); var stackedData = data || this.graph.stackedData || this.graph.stackData();
var firstPoint = stackedData[0][0];
if (firstPoint === undefined) { var xMin = +Infinity;
return { x: [null, null], y: [null, null] }; var xMax = -Infinity;
}
var xMin = firstPoint.x; var yMin = +Infinity;
var xMax = firstPoint.x; var yMax = -Infinity;
var yMin = firstPoint.y + firstPoint.y0;
var yMax = firstPoint.y + firstPoint.y0;
stackedData.forEach( function(series) { stackedData.forEach( function(series) {
@ -3181,7 +3251,7 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
barWidth: function(series) { barWidth: function(series) {
var frequentInterval = this._frequentInterval(series.stack); var frequentInterval = this._frequentInterval(series.stack);
var barWidth = this.graph.x(series.stack[0].x + frequentInterval.magnitude * (1 - this.gapSize)); var barWidth = this.graph.x.magnitude(frequentInterval.magnitude) * (1 - this.gapSize);
return barWidth; return barWidth;
}, },
@ -3457,7 +3527,13 @@ Rickshaw.Graph.Renderer.Multi = Rickshaw.Class.create( Rickshaw.Graph.Renderer,
if (!data.length) return; if (!data.length) return;
var domain = $super(data); var domain = null;
if (group.renderer && group.renderer.domain) {
domain = group.renderer.domain(data);
}
else {
domain = $super(data);
}
domains.push(domain); domains.push(domain);
}); });
@ -3586,10 +3662,6 @@ Rickshaw.Graph.Renderer.LinePlot = Rickshaw.Class.create( Rickshaw.Graph.Rendere
} ); } );
}, },
initialize: function($super, args) {
$super(args);
},
seriesPathFactory: function() { seriesPathFactory: function() {
var graph = this.graph; var graph = this.graph;
@ -3603,20 +3675,45 @@ Rickshaw.Graph.Renderer.LinePlot = Rickshaw.Class.create( Rickshaw.Graph.Rendere
return factory; return factory;
}, },
_renderDots: function() { render: function(args) {
args = args || {};
var graph = this.graph; var graph = this.graph;
graph.series.forEach(function(series) { var series = args.series || graph.series;
var vis = args.vis || graph.vis;
var dotSize = this.dotSize;
vis.selectAll('*').remove();
var data = series
.filter(function(s) { return !s.disabled })
.map(function(s) { return s.stack });
var nodes = vis.selectAll("path")
.data(data)
.enter().append("svg:path")
.attr("d", this.seriesPathFactory());
var i = 0;
series.forEach(function(series) {
if (series.disabled) return;
series.path = nodes[0][i++];
this._styleSeries(series);
}, this);
series.forEach(function(series) {
if (series.disabled) return; if (series.disabled) return;
var nodes = graph.vis.selectAll("x") var nodes = vis.selectAll("x")
.data(series.stack.filter( function(d) { return d.y !== null } )) .data(series.stack.filter( function(d) { return d.y !== null } ))
.enter().append("svg:circle") .enter().append("svg:circle")
.attr("cx", function(d) { return graph.x(d.x) }) .attr("cx", function(d) { return graph.x(d.x) })
.attr("cy", function(d) { return graph.y(d.y) }) .attr("cy", function(d) { return graph.y(d.y) })
.attr("r", function(d) { return ("r" in d) ? d.r : graph.renderer.dotSize}); .attr("r", function(d) { return ("r" in d) ? d.r : dotSize});
Array.prototype.forEach.call(nodes[0], function(n) { Array.prototype.forEach.call(nodes[0], function(n) {
if (!n) return; if (!n) return;
@ -3628,33 +3725,6 @@ Rickshaw.Graph.Renderer.LinePlot = Rickshaw.Class.create( Rickshaw.Graph.Rendere
}.bind(this)); }.bind(this));
}, this); }, this);
},
_renderLines: function() {
var graph = this.graph;
var nodes = graph.vis.selectAll("path")
.data(this.graph.stackedData)
.enter().append("svg:path")
.attr("d", this.seriesPathFactory());
var i = 0;
graph.series.forEach(function(series) {
if (series.disabled) return;
series.path = nodes[0][i++];
this._styleSeries(series);
}, this);
},
render: function() {
var graph = this.graph;
graph.vis.selectAll('*').remove();
this._renderLines();
this._renderDots();
} }
} ); } );
@ -3680,6 +3750,7 @@ Rickshaw.Graph.Smoother = Rickshaw.Class.create({
build: function() { build: function() {
var self = this; var self = this;
var $ = jQuery;
if (this.element) { if (this.element) {
$( function() { $( function() {
@ -3992,3 +4063,5 @@ Rickshaw.Series.FixedDuration = Rickshaw.Class.create(Rickshaw.Series, {
} }
} ); } );
return Rickshaw;
}));