AreaChart.prototype.generateChartData = function (originalData) {
var series = function (values, name) {
return {
name: name,
values: _.sortBy(values, _.result('campaign.start_date.getTime'))
}
}
var stack = d3.layout.stack()
.order('default')
.offset('zero')
.values(_.property('values'))
.x(_.property('campaign.start_date'))
.y(_.property('value'))
try {
var data = _(originalData)
.groupBy('indicator.short_name')
.map(series)
.thru(stack)
.value()
} catch (err) {
console.log(`Data error in ${originalData}`)
data = []
}
return data
}
constructor(visConfig, axisConfigArgs) {
super();
this.visConfig = visConfig;
this.axisConfig = new AxisConfig(this.visConfig, axisConfigArgs);
if (this.axisConfig.get('type') === 'category') {
this.values = this.axisConfig.values;
this.ordered = this.axisConfig.ordered;
}
this.axisScale = new AxisScale(this.axisConfig, visConfig);
this.axisTitle = new AxisTitle(this.axisConfig);
this.axisLabels = new AxisLabels(this.axisConfig, this.axisScale);
this.stack = d3.layout.stack()
.x(d => {
return d.x;
})
.y(d => {
if (this.axisConfig.get('scale.offset') === 'expand') {
return Math.abs(d.y);
}
return d.y;
})
.offset(this.axisConfig.get('scale.offset', 'zero'));
const stackedMode = ['normal', 'grouped'].includes(this.axisConfig.get('scale.mode'));
if (stackedMode) {
const self = this;
this.stack = this._stackNegAndPosVals;
}
}
_stackData: function _stackData(props) {
var offset = props.offset;
var order = props.order;
var x = props.x;
var y = props.y;
var values = props.values;
var data = this._data;
var stack = d3.layout.stack().offset(offset).order(order).x(x).y(y).values(values);
this._data = stack(this._data);
}
function streamgraph() {
var stack = d3.layout.stack()
.values(function (d) {
return d.values;
})
.x(function (d) {
return d.date;
})
.y(function (d) {
return d.price;
})
.out(function (d, y0, y) {
d.price0 = y0;
})
.order('reverse')
.offset('wiggle');
stack(symbols);
line
.y(function (d) {
return y(d.price0);
});
var t = svg.selectAll('.symbol').transition()
.duration(duration);
t.select('path.area')
.attr('d', function (d) {
return area(d.values);
});
t.select('path.line')
.style('stroke-opacity', 1e-6)
.attr('d', function (d) {
return line(d.values);
});
t.select('text')
.attr('transform', function (d) {
d = d.values[d.values.length - 1];
return 'translate(' + (width - 60) + ',' + y(d.price / 2 + d.price0) + ')';
});
setTimeout(overlappingArea, duration + delay);
}
this.charts.fakeSupplyChain.createDataAndScales = function () {
var graph = this;
this.metrics = ['upstream', 'midstream', 'downstream'];
this.data = mockData.supplyChain;
var stack = d3.layout.stack();
stack(this.data);
this.data = this.data.map(function (group, i) {
return group.map(function (d) {
// Invert the x and y values, and y0 becomes x0
// add 'step' based on index
return { x: d.y, y: d.x, x0: d.y0, step: graph.metrics[i],
type: d.type, ghgTotal: d.g }; });
});
this.tip = d3.tip()
.attr('class', 'd3-tip')
.html(function () {
var d = graph.data;
var values = [
{ name: 'Upstream', value: d[0][1].x, units: '' },
{ name: 'Midstream', value: d[1][1].x, units: '' },
{ name: 'Downstream', value: d[2][1].x, units: '' }
];
// Add total value to tooltip
values.unshift({ name: 'Total', value: d[0][1].x + d[1][1].x + d[2][1].x, units: utils.getUnits('ghgTotal', 'perBarrel') });
// values.unshift({ name: 'Total', value: utils.numberWithCommas(d.ghgTotal, self.sortRatio), units: utils.getUnits('ghgTotal', self.sortRatio) });
return utils.createTooltipHtml('', d[0][1].type, values, '', '');
})
.offset([50, 0]);
this.x = d3.scale.linear()
.domain([0, 120])
.range([0, this.width])
.nice();
this.y = d3.scale.ordinal()
.domain(['oil1', 'oil2', 'oil3', 'oil4', 'oil5', 'oil6', 'oil7', 'oil8'].reverse())
.rangeRoundBands([0, this.height], 0.05);
// The opacity scale for process step
this.processScale = d3.scale.ordinal()
.domain(['upstream', 'midstream', 'downstream'])
.rangePoints([1, 0.4]);
};
/**
* Provides an API for pulling values off the data
* and calculating values using the data
*
* @class Data
* @constructor
* @param data {Object} Elasticsearch query results
* @param attr {Object|*} Visualization options
*/
function Data(data, attr, uiState) {
if (!(this instanceof Data)) {
return new Data(data, attr, uiState);
}
this.uiState = uiState;
let self = this;
let offset;
if (attr.mode === 'stacked') {
offset = 'zero';
} else if (attr.mode === 'percentage') {
offset = 'expand';
} else if (attr.mode === 'grouped') {
offset = 'group';
} else {
offset = attr.mode;
}
this.data = data;
this.type = this.getDataType();
this.labels = this._getLabels(this.data);
this.color = this.labels ? color(this.labels, uiState.get('vis.colors')) : undefined;
this._normalizeOrdered();
this._attr = _.defaults(attr || {}, {
stack: d3.layout.stack()
.x(function (d) { return d.x; })
.y(function (d) {
if (offset === 'expand') {
return Math.abs(d.y);
}
return d.y;
})
.offset(offset || 'zero')
});
if (attr.mode === 'stacked' && attr.type === 'histogram') {
this._attr.stack.out(function (d, y0, y) {
return self._stackNegAndPosVals(d, y0, y);
});
}
}
beforeEach(ngMock.inject(function (Private) {
Vis = Private(require('ui/vislib/vis'));
Data = Private(require('ui/vislib/lib/data'));
ColumnChart = Private(require('ui/vislib/visualizations/column_chart'));
Chart = Private(require('ui/vislib/visualizations/_chart'));
el = d3.select('body').append('div').attr('class', 'column-chart');
config = {
type: 'histogram',
shareYAxis: true,
addTooltip: true,
addLegend: true,
stack: d3.layout.stack(),
};
vis = new Vis(el[0][0], config);
vis.data = new Data(data, config);
myChart = new ColumnChart(vis, el, chartData);
}));
beforeEach(ngMock.inject(function (Private) {
Vis = Private(VislibVisProvider);
Data = Private(VislibLibDataProvider);
persistedState = new (Private(PersistedStatePersistedStateProvider))();
ColumnChart = Private(VislibVisualizationsColumnChartProvider);
Chart = Private(VislibVisualizationsChartProvider);
el = d3.select('body').append('div').attr('class', 'column-chart');
config = {
type: 'histogram',
shareYAxis: true,
addTooltip: true,
addLegend: true,
stack: d3.layout.stack(),
};
vis = new Vis(el[0][0], config);
vis.data = new Data(data, config, persistedState);
myChart = new ColumnChart(vis, el, chartData);
}));
function processData (originalData, options) {
var percentage = function (dataset) {
var total = _(dataset).pluck('value').sum()
_.forEach(dataset, d => { d.value /= total })
return dataset
}
var stack = d3.layout.stack()
.offset('zero')
.values(d => { return d.values })
.x(d => { return d.campaign.start_date })
.y(d => { return d.value })
var data = _(originalData)
.each(d => { d.quarter = moment(d.campaign.start_date).format('[Q]Q YYYY') })
.groupBy(d => { return d.indicator.id + '-' + d.quarter })
.map(d => {
return _.assign({}, d[0], {
'value': _(d).pluck('value').sum()
})
})
.groupBy('quarter')
.map(percentage)
.flatten()
.reject(d => { return d.indicator.id === options.rejectId })
.groupBy('indicator.short_name')
.map((values, name) => {
return {
name: name,
values: values
}
})
.sortBy('name')
.value()
return stack(data)
}
processData() {
var included_metrics = this.data.settings.included_metrics,
stack_order = ['N/A', '--', '-', '+', '++'],
metrics,
stack,
dataset;
dataset = _.chain(this.data.aggregation.metrics_dataset)
.filter(function(d) {
var metric_id = d.rob_scores[0].data.metric.id;
return _.includes(included_metrics, metric_id);
})
.map(function(d) {
var vals = {
label: d.rob_scores[0].data.metric.name,
'N/A': 0,
'--': 0,
'-': 0,
'+': 0,
'++': 0,
},
weight = 1 / d.rob_scores.length;
d.rob_scores.forEach(function(rob) {
vals[rob.data.score_text] += weight;
if (rob.data.score_text === 'NR') {
vals['-'] += weight;
}
});
return vals;
})
.value();
metrics = _.chain(dataset)
.map(function(d) {
return d.label;
})
.uniq()
.value();
stack = d3.layout.stack()(
_.map(stack_order, function(score) {
return _.map(dataset, function(d) {
return { x: d.label, y: d[score] };
});
})
);
if (this.firstPass) {
_.extend(this.padding, {
top: this.data.settings.padding_top,
right: this.data.settings.padding_right,
bottom: this.data.settings.padding_bottom,
left: this.data.settings.padding_left,
left_original: this.data.settings.padding_left,
});
this.firstPass = false;
}
_.extend(this, {
w: this.data.settings.plot_width,
row_height: this.data.settings.row_height,
dataset,
metrics,
stack_order,
stack,
title_str: this.data.settings.title,
x_label_text: this.data.settings.xAxisLabel,
y_label_text: this.data.settings.yAxisLabel,
});
}
update: function (values, options) {
options = _.assign(this._options, options)
var margin = options.margin
values = _(values)
.filter(d => {
var v = options.value(d)
return _.isFinite(v) && v > 0
})
.sortBy(options.value)
.reverse()
.value()
let data = []
if (values.length === 1) {
// assume single indicator respresenting perentage
data.push({ value: Math.round(values[0].value * 100) / 100 })
data.push({ value: 1 - data[0].value })
} else {
data = values
}
var w = this._width - margin.left - margin.right
var h = this._height - margin.top - margin.bottom
var s = Math.min(w, h)
var svg = this._svg
svg.select('.margin')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
var xPosition = options.notInCenter ? w / 4 : w / 2
var yPosition = options.notInCenter ? h / 3 : h / 2
let g = svg.select('.data')
.attr('transform', 'translate(' + xPosition + ', ' + yPosition + ')')
let fill = color.map(data.map(options.name), options.color)
if (options.chartInDashboard) {
var legendText = _(data)
.map(d => {
return options.name(d)
})
.reverse()
.value()
var legend = svg.select('.legend').selectAll('*')
.data(legendText)
legend.enter().append('g')
.attr('class', 'series')
.attr('transform', function (d, i) { return 'translate(0,' + i * 15 + ')' })
legend.append('rect')
.attr({
'x': w + 18,
'y': 0,
'width': 12,
'height': 12
})
.style({
'fill': fill
})
legend.append('text')
.attr({
'x': w + 18,
'y': 0,
'dx': -5,
'dy': 9
})
.style({
'text-anchor': 'end',
'fill': '#999999'
})
.text(d => { return d })
legend.exit().remove()
}
if (options.percentage) {
var annotation = svg.select('.annotation').selectAll('.percentage').data([options.percentage])
annotation.enter().append('text')
annotation.attr('class', 'percentage')
.attr({'x': xPosition, 'y': yPosition, 'dy': 5})
.style({
'text-anchor': 'middle',
'opacity': d => { return d === '0%' ? 0 : 1 }
})
.text(d => { return d })
annotation.exit().remove()
}
var arc = d3.svg.arc()
.innerRadius(s / 2 * options.innerRadius)
.outerRadius(s / 2 * options.outerRadius)
svg.select('.bg')
.datum({
startAngle: 0,
endAngle: 2 * Math.PI
})
.attr('d', arc)
var scale = d3.scale.linear()
.domain(options.domain(data, options))
.range([0, 2 * Math.PI])
var pie = d3.layout.stack()
.values(function (d) {
return [d]
})
.x(options.name)
.y(options.value)
.out(function (d, y0, y) {
d.startAngle = scale(y0)
d.endAngle = scale(y0 + y)
})
var slice = g.selectAll('.slice').data(pie(_.cloneDeep(data)))
slice.enter()
.append('path')
.attr('class', 'slice')
slice.attr({
'd': arc,
'fill': _.flow(options.name, fill),
'stroke': '#fff'
}).on('mousemove', d => {
var evt = d3.event
var render = function () {
let tip = options.name(d)
? `${options.name(d)}: ${options.yFormat(options.value(d))}`
: options.yFormat(options.value(d))
return (
<Tooltip left={evt.pageX} top={evt.pageY}>
<div>
<p>{tip}</p>
</div>
</Tooltip>
)
}
if (this.layer) {
this.layer._render = render
} else {
this.layer = new Layer(document.body, render)
}
this.layer.render()
})
.on('mouseout', d => {
if (this.layer) {
this.layer.destroy()
this.layer = null
}
})
slice.exit().remove()
}
render: function render() {
var props = this.props;
var data = props.data;
var interpolationType = props.interpolationType || (props.interpolate ? 'cardinal' : 'linear');
var _getDimensions = this.getDimensions();
var innerWidth = _getDimensions.innerWidth;
var innerHeight = _getDimensions.innerHeight;
var trans = _getDimensions.trans;
var svgMargins = _getDimensions.svgMargins;
var yOrient = this.getYOrient();
if (!Array.isArray(data)) {
data = [data];
}
var yScale = d3.scale.linear().range([innerHeight, 0]);
var xValues = [];
var yValues = [];
var seriesNames = [];
var yMaxValues = [];
var domain = props.domain || {};
var xDomain = domain.x || [];
var yDomain = domain.y || [];
data.forEach(function (series) {
var upper = 0;
seriesNames.push(series.name);
series.values.forEach(function (val) {
upper = Math.max(upper, props.yAccessor(val));
xValues.push(props.xAccessor(val));
yValues.push(props.yAccessor(val));
});
yMaxValues.push(upper);
});
var xScale = void 0;
if (xValues.length > 0 && Object.prototype.toString.call(xValues[0]) === '[object Date]' && props.xAxisTickInterval) {
xScale = d3.time.scale().range([0, innerWidth]);
} else {
xScale = d3.scale.linear().range([0, innerWidth]);
}
var xdomain = d3.extent(xValues);
if (xDomain[0] !== undefined && xDomain[0] !== null) xdomain[0] = xDomain[0];
if (xDomain[1] !== undefined && xDomain[1] !== null) xdomain[1] = xDomain[1];
xScale.domain(xdomain);
var ydomain = [0, d3.sum(yMaxValues)];
if (yDomain[0] !== undefined && yDomain[0] !== null) ydomain[0] = yDomain[0];
if (yDomain[1] !== undefined && yDomain[1] !== null) ydomain[1] = yDomain[1];
yScale.domain(ydomain);
props.colors.domain(seriesNames);
var stack = d3.layout.stack().x(props.xAccessor).y(props.yAccessor).values(function (d) {
return d.values;
});
var layers = stack(data);
var dataSeries = layers.map(function (d, idx) {
return React.createElement(DataSeries, {
key: idx,
seriesName: d.name,
fill: props.colors(props.colorAccessor(d, idx)),
index: idx,
xScale: xScale,
yScale: yScale,
data: d.values,
xAccessor: props.xAccessor,
yAccessor: props.yAccessor,
interpolationType: interpolationType,
hoverAnimation: props.hoverAnimation
});
});
return React.createElement(
Chart,
{
viewBox: this.getViewBox(),
legend: props.legend,
data: data,
margins: props.margins,
colors: props.colors,
colorAccessor: props.colorAccessor,
width: props.width,
height: props.height,
title: props.title
},
React.createElement(
'g',
{ transform: trans, className: props.className },
React.createElement(XAxis, {
xAxisClassName: 'rd3-areachart-xaxis',
xScale: xScale,
xAxisTickValues: props.xAxisTickValues,
xAxisTickInterval: props.xAxisTickInterval,
xAxisTickCount: props.xAxisTickCount,
xAxisLabel: props.xAxisLabel,
xAxisLabelOffset: props.xAxisLabelOffset,
tickFormatting: props.xAxisFormatter,
xOrient: props.xOrient,
yOrient: yOrient,
margins: svgMargins,
width: innerWidth,
height: innerHeight,
horizontalChart: props.horizontal,
gridVertical: props.gridVertical,
gridVerticalStroke: props.gridVerticalStroke,
gridVerticalStrokeWidth: props.gridVerticalStrokeWidth,
gridVerticalStrokeDash: props.gridVerticalStrokeDash
}),
React.createElement(YAxis, {
yAxisClassName: 'rd3-areachart-yaxis',
yScale: yScale,
yAxisTickValues: props.yAxisTickValues,
yAxisTickInterval: props.yAxisTickInterval,
yAxisTickCount: props.yAxisTickCount,
yAxisLabel: props.yAxisLabel,
yAxisLabelOffset: props.yAxisLabelOffset,
tickFormatting: props.yAxisFormatter,
xOrient: props.xOrient,
yOrient: yOrient,
margins: svgMargins,
width: innerWidth,
height: props.height,
horizontalChart: props.horizontal,
gridHorizontal: props.gridHorizontal,
gridHorizontalStroke: props.gridHorizontalStroke,
gridHorizontalStrokeWidth: props.gridHorizontalStrokeWidth,
gridHorizontalStrokeDash: props.gridHorizontalStrokeDash
}),
dataSeries
)
);
}
var Rickshaw={namespace:function(a,b){var c=a.split("."),d=Rickshaw;for(var e=1,f=c.length;e<f;e++)currentPart=c[e],d[currentPart]=d[currentPart]||{},d=d[currentPart];return d},keys:function(a){var b=[];for(var c in a)b.push(c);return b},extend:function(a,b){for(var c in b)a[c]=b[c];return a}};if(typeof module!="undefined"&&module.exports){var d3=require("d3");module.exports=Rickshaw}(function(a){function j(a){return b.call(a)===i}function k(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function l(a){if(m(a)!==h)throw new TypeError;var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c);return b}function m(a){switch(a){case null:return c;case void 0:return d}var b=typeof a;switch(b){case"boolean":return e;case"number":return f;case"string":return g}return h}function n(a){return typeof a=="undefined"}function p(a){var b=a.toString().match(/^[\s\(]*function[^(]*\(([^)]*)\)/)[1].replace(/\/\/.*?[\r\n]|\/\*(?:.|[\r\n])*?\*\//g,"").replace(/\s+/g,"").split(",");return b.length==1&&!b[0]?[]:b}function q(a,b){var c=a;return function(){var a=r([t(c,this)],arguments);return b.apply(this,a)}}function r(a,b){var c=a.length,d=b.length;while(d--)a[c+d]=b[d];return a}function s(a,b){return a=o.call(a,0),r(a,b)}function t(a,b){if(arguments.length<2&&n(arguments[0]))return this;var c=a,d=o.call(arguments,2);return function(){var a=s(d,arguments);return c.apply(b,a)}}var b=Object.prototype.toString,c="Null",d="Undefined",e="Boolean",f="Number",g="String",h="Object",i="[object Function]",o=Array.prototype.slice,u=function(){},v=function(){function b(){}function c(){function d(){this.initialize.apply(this,arguments)}var a=null,c=[].slice.apply(arguments);j(c[0])&&(a=c.shift()),k(d,v.Methods),d.superclass=a,d.subclasses=[];if(a){b.prototype=a.prototype,d.prototype=new b;try{a.subclasses.push(d)}catch(e){}}for(var f=0,g=c.length;f<g;f++)d.addMethods(c[f]);return d.prototype.initialize||(d.prototype.initialize=u),d.prototype.constructor=d,d}function d(b){var c=this.superclass&&this.superclass.prototype,d=l(b);a&&(b.toString!=Object.prototype.toString&&d.push("toString"),b.valueOf!=Object.prototype.valueOf&&d.push("valueOf"));for(var e=0,f=d.length;e<f;e++){var g=d[e],h=b[g];if(c&&j(h)&&p(h)[0]=="$super"){var i=h;h=q(function(a){return function(){return c[a].apply(this,arguments)}}(g),i),h.valueOf=t(i.valueOf,i),h.toString=t(i.toString,i)}this.prototype[g]=h}return this}var a=function(){for(var a in{toString:1})if(a==="toString")return!1;return!0}();return{create:c,Methods:{addMethods:d}}}();a.exports?a.exports.Class=v:a.Class=v})(Rickshaw),Rickshaw.namespace("Rickshaw.Compat.ClassList"),Rickshaw.Compat.ClassList=function(){typeof document!="undefined"&&!("classList"in document.createElement("a"))&&function(a){"use strict";var b="classList",c="prototype",d=(a.HTMLElement||a.Element)[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){var b=0,c=this.length;for(;b<c;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(b==="")throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){var b=f.call(a.className),c=b?b.split(/\s+/):[],d=0,e=c.length;for(;d<e;d++)this.push(c[d]);this._updateClassName=function(){a.className=this.toString()}},k=j[c]=[],l=function(){return new j(this)};h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",i(this,a)!==-1},k.add=function(a){a+="",i(this,a)===-1&&(this.push(a),this._updateClassName())},k.remove=function(a){a+="";var b=i(this,a);b!==-1&&(this.splice(b,1),this._updateClassName())},k.toggle=function(a){a+="",i(this,a)===-1?this.add(a):this.remove(a)},k.toString=function(){return this.join(" ")};if(e.defineProperty){var m={get:l,enumerable:!0,configurable:!0};try{e.defineProperty(d,b,m)}catch(n){n.number===-2146823252&&(m.enumerable=!1,e.defineProperty(d,b,m))}}else e[c].__defineGetter__&&d.__defineGetter__(b,l)}(window)},(typeof RICKSHAW_NO_COMPAT!="undefined"&&!RICKSHAW_NO_COMPAT||typeof RICKSHAW_NO_COMPAT=="undefined")&&new Rickshaw.Compat.ClassList,Rickshaw.namespace("Rickshaw.Graph"),Rickshaw.Graph=function(a){this.element=a.element,this.series=a.series,this.defaults={interpolation:"cardinal",offset:"zero",min:undefined,max:undefined},Rickshaw.keys(this.defaults).forEach(function(b){this[b]=a[b]||this.defaults[b]},this),this.window={},this.updateCallbacks=[];var b=this;this.initialize=function(a){this.validateSeries(a.series),this.series.active=function(){return b.series.filter(function(a){return!a.disabled})},this.setSize({width:a.width,height:a.height}),this.element.classList.add("rickshaw_graph"),this.vis=d3.select(this.element).append("svg:svg").attr("width",this.width).attr("height",this.height);var c=[Rickshaw.Graph.Renderer.Stack,Rickshaw.Graph.Renderer.Line,Rickshaw.Graph.Renderer.Bar,Rickshaw.Graph.Renderer.Area,Rickshaw.Graph.Renderer.ScatterPlot];c.forEach(function(a){if(!a)return;b.registerRenderer(new a({graph:b}))}),this.setRenderer(a.renderer||"stack",a),this.discoverRange()},this.validateSeries=function(a){if(!(a instanceof Array||a instanceof Rickshaw.Series)){var b=Object.prototype.toString.apply(a);throw"series is not an array: "+b}var c;a.forEach(function(a){if(!(a instanceof Object))throw"series element is not an object: "+a;if(!a.data)throw"series has no data: "+JSON.stringify(a);if(!(a.data instanceof Array))throw"series data is not an array: "+JSON.stringify(a.data);c=c||a.data.length;if(c&&a.data.length!=c)throw"series cannot have differing numbers of points: "+c+" vs "+a.data.length+"; see Rickshaw.Series.zeroFill()";var b=typeof a.data[0].x,d=typeof a.data[0].y;if(b!="number"||d!="number")throw"x and y properties of points should be numbers instead of "+b+" and "+d})},this.dataDomain=function(){var a=this.series[0].data;return[a[0].x,a.slice(-1).shift().x]},this.discoverRange=function(){var a=this.renderer.domain();this.x=d3.scale.linear().domain(a.x).range([0,this.width]),this.y=d3.scale.linear().domain(a.y).range([this.height,0]),this.y.magnitude=d3.scale.linear().domain([a.y[0]-a.y[0],a.y[1]-a.y[0]]).range([0,this.height])},this.render=function(){var a=this.stackData();this.discoverRange(),this.renderer.render(),this.updateCallbacks.forEach(function(a){a()})},this.update=this.render,this.stackData=function(){var a=this.series.active().map(function(a){return a.data}).map(function(a){return a.filter(function(a){return this._slice(a)},this)},this);this.stackData.hooks.data.forEach(function(c){a=c.f.apply(b,[a])});var c=d3.layout.stack();c.offset(b.offset);var d=c(a);this.stackData.hooks.after.forEach(function(c){d=c.f.apply(b,[a])});var e=0;return this.series.forEach(function(a){if(a.disabled)return;a.stack=d[e++]}),this.stackedData=d,d},this.stackData.hooks={data:[],after:[]},this._slice=function(a){if(this.window.xMin||this.window.xMax){var b=!0;return this.window.xMin&&a.x<this.window.xMin&&(b=!1),this.window.xMax&&a.x>this.window.xMax&&(b=!1),b}return!0},this.onUpdate=function(a){this.updateCallbacks.push(a)},this.registerRenderer=function(a){this._renderers=this._renderers||{},this._renderers[a.name]=a},this.configure=function(a){(a.width||a.height)&&this.setSize(a),Rickshaw.keys(this.defaults).forEach(function(b){this[b]=b in a?a[b]:b in this?this[b]:this.defaults[b]},this),this.setRenderer(a.renderer||this.renderer.name,a)},this.setRenderer=function(a,b){if(!this._renderers[a])throw"couldn't find renderer "+a;this.renderer=this._renderers[a],typeof b=="object"&&this.renderer.configure(b)},this.setSize=function(a){a=a||{};if(typeof window!==undefined)var b=window.getComputedStyle(this.element,null),c=parseInt(b.getPropertyValue("width")),d=parseInt(b.getPropertyValue("height"));this.width=a.width||c||400,this.height=a.height||d||250,this.vis&&this.vis.attr("width",this.width).attr("height",this.height)},this.initialize(a)},Rickshaw.namespace("Rickshaw.Fixtures.Color"),Rickshaw.Fixtures.Color=function(){this.schemes={},this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse(),this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"],this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"],this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse(),this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"},this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse(),this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"],this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]},Rickshaw.namespace("Rickshaw.Fixtures.RandomData"),Rickshaw.Fixtures.RandomData=function(a){var b;a=a||1;var c=200,d=Math.floor((new Date).getTime()/1e3);this.addData=function(b){var e=Math.random()*100+15+c,f=b[0].length,g=1;b.forEach(function(b){var c=Math.random()*20,h=e/25+g++ +(Math.cos(f*g*11/960)+2)*15+(Math.cos(f/7)+2)*7+(Math.cos(f/17)+2)*1;b.push({x:f*a+d,y:h+c})}),c=e*.85}},Rickshaw.namespace("Rickshaw.Fixtures.Time"),Rickshaw.Fixtures.Time=function(){var a=(new Date).getTimezoneOffset()*60,b=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],this.units=[{name:"decade",seconds:315576e3,formatter:function(a){return parseInt(a.getUTCFullYear()/10)*10}},{name:"year",seconds:31557600,formatter:function(a){return a.getUTCFullYear()}},{name:"month",seconds:2635200,formatter:function(a){return b.months[a.getUTCMonth()]}},{name:"week",seconds:604800,formatter:function(a){return b.formatDate(a)}},{name:"day",seconds:86400,formatter:function(a){return a.getUTCDate()}},{name:"6 hour",seconds:21600,formatter:function(a){return b.formatTime(a)}},{name:"hour",seconds:3600,formatter:function(a){return b.formatTime(a)}},{name:"15 minute",seconds:900,formatter:function(a){return b.formatTime(a)}},{name:"minute",seconds:60,formatter:function(a){return a.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(a){return a.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(a){return a.getUTCSeconds()+"s"}}],this.unit=function(a){return this.units.filter(function(b){return a==b.name}).shift()},this.formatDate=function(a){return a.toUTCString().match(/, (\w+ \w+ \w+)/)[1]},this.formatTime=function(a){return a.toUTCString().match(/(\d+:\d+):/)[1]},this.ceil=function(a,b){if(b.name=="month"){var c=new Date((a+b.seconds-1)*1e3),d=new Date(0);return d.setUTCFullYear(c.getUTCFullYear()),d.setUTCMonth(c.getUTCMonth()),d.setUTCDate(1),d.setUTCHours(0),d.setUTCMinutes(0),d.setUTCSeconds(0),d.setUTCMilliseconds(0),d.getTime()/1e3}if(b.name=="year"){var c=new Date((a+b.seconds-1)*1e3),d=new Date(0);return d.setUTCFullYear(c.getUTCFullYear()),d.setUTCMonth(0),d.setUTCDate(1),d.setUTCHours(0),d.setUTCMinutes(0),d.setUTCSeconds(0),d.setUTCMilliseconds(0),d.getTime()/1e3}return Math.ceil(a/b.seconds)*b.seconds}},Rickshaw.namespace("Rickshaw.Fixtures.Number"),Rickshaw.Fixtures.Number.formatKMBT=function(a){return a>=1e12?a/1e12+"T":a>=1e9?a/1e9+"B":a>=1e6?a/1e6+"M":a>=1e3?a/1e3+"K":a<1&&a>0?a.toFixed(2):a==0?"":a},Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(a){return a>=0x4000000000000?a/0x4000000000000+"P":a>=1099511627776?a/1099511627776+"T":a>=1073741824?a/1073741824+"G":a>=1048576?a/1048576+"M":a>=1024?a/1024+"K":a<1&&a>0?a.toFixed(2):a==0?"":a},Rickshaw.namespace("Rickshaw.Color.Palette"),Rickshaw.Color.Palette=function(a){var b=new Rickshaw.Fixtures.Color;a=a||{},this.schemes={},this.scheme=b.schemes[a.scheme]||a.scheme||b.schemes.colorwheel,this.runningIndex=0,this.generatorIndex=0;if(a.interpolatedStopCount){var c=this.scheme.length-1,d,e,f=[];for(d=0;d<c;d++){f.push(this.scheme[d]);var g=d3.interpolateHsl(this.scheme[d],this.scheme[d+1]);for(e=1;e<a.interpolatedStopCount;e++)f.push(g(1/a.interpolatedStopCount*e))}f.push(this.scheme[this.scheme.length-1]),this.scheme=f}this.rotateCount=this.scheme.length,this.color=function(a){return this.scheme[a]||this.scheme[this.runningIndex++]||this.interpolateColor()||"#808080"},this.interpolateColor=function(){if(!Array.isArray(this.scheme))return;var a;return this.generatorIndex==this.rotateCount*2-1?(a=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[0])(.5),this.generatorIndex=0,this.rotateCount*=2):(a=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[this.generatorIndex+1])(.5),this.generatorIndex++),this.scheme.push(a),a}},Rickshaw.namespace("Rickshaw.Graph.Ajax"),Rickshaw.Graph.Ajax=Rickshaw.Class.create({initialize:function(a){this.dataURL=a.dataURL,this.onData=a.onData||function(a){return a},this.onComplete=a.onComplete||function(){},this.onError=a.onError||function(){},this.args=a,this.request()},request:function(){$.ajax({url:this.dataURL,dataType:"json",success:this.success.bind(this),error:this.error.bind(this)})},error:function(){console.log("error loading dataURL: "+this.dataURL),this.onError(this)},success:function(a,b){a=this.onData(a),this.args.series=this._splice({data:a,series:this.args.series}),this.graph=new Rickshaw.Graph(this.args),this.graph.render(),this.onComplete(this)},_splice:function(a){var b=a.data,c=a.series;return a.series?(c.forEach(function(a){var c=a.key||a.name;if(!c)throw"series needs a key or a name";b.forEach(function(b){var d=b.key||b.name;if(!d)throw"data needs a key or a name";if(c==d){var e=["color","name","data"];e.forEach(function(c){a[c]=a[c]||b[c]})}})}),c):b}}),Rickshaw.namespace("Rickshaw.Graph.Annotate"),Rickshaw.Graph.Annotate=function(a){var b=this.graph=a.graph;this.elements={timeline:a.element};var c=this;this.data={},this.elements.timeline.classList.add("rickshaw_annotation_timeline"),this.add=function(a,b,d){c.data[a]=c.data[a]||{boxes:[]},c.data[a].boxes.push({content:b,end:d})},this.update=function(){Rickshaw.keys(c.data).forEach(function(a){var b=c.data[a],d=c.graph.x(a);if(d<0||d>c.graph.x.range()[1]){b.element&&(b.line.classList.add("offscreen"),b.element.style.display="none"),b.boxes.forEach(function(a){a.rangeElement&&a.rangeElement.classList.add("offscreen")});return}if(!b.element){var e=b.element=document.createElement("div");e.classList.add("annotation"),this.elements.timeline.appendChild(e),e.addEventListener("click",function(a){e.classList.toggle("active"),b.line.classList.toggle("active"),b.boxes.forEach(function(a){a.rangeElement&&a.rangeElement.classList.toggle("active")})},!1)}b.element.style.left=d+"px",b.element.style.display="block",b.boxes.forEach(function(a){var e=a.element;e||(e=a.element=document.createElement("div"),e.classList.add("content"),e.innerHTML=a.content,b.element.appendChild(e),b.line=document.createElement("div"),b.line.classList.add("annotation_line"),c.graph.element.appendChild(b.line),a.end&&(a.rangeElement=document.createElement("div"),a.rangeElement.classList.add("annotation_range"),c.graph.element.appendChild(a.rangeElement)));if(a.end){var f=d,g=Math.min(c.graph.x(a.end),c.graph.x.range()[1]);f>g&&(g=d,f=Math.max(c.graph.x(a.end),c.graph.x.range()[0]));var h=g-f;a.rangeElement.style.left=f+"px",a.rangeElement.style.width=h+"px",a.rangeElement.classList.remove("offscreen")}b.line.classList.remove("offscreen"),b.line.style.left=d+"px"})},this)},this.graph.onUpdate(function(){c.update()})},Rickshaw.namespace("Rickshaw.Graph.Axis.Time"),Rickshaw.Graph.Axis.Time=function(a){var b=this;this.graph=a.graph,this.elements=[],this.ticksTreatment=a.ticksTreatment||"plain",this.fixedTimeUnit=a.timeUnit;var c=new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var a,b=c.units,d=this.graph.x.domain(),e=d[1]-d[0];return b.forEach(function(b){Math.floor(e/b.seconds)>=2&&(a=a||b)}),a||c.units[c.units.length-1]},this.tickOffsets=function(){var a=this.graph.x.domain(),b=this.fixedTimeUnit||this.appropriateTimeUnit(),d=Math.ceil((a[1]-a[0])/b.seconds),e=a[0],f=[];for(var g=0;g<d;g++)tickValue=c.ceil(e,b),e=tickValue+b.seconds/2,f.push({value:tickValue,unit:b});return f},this.render=function(){this.elements.forEach(function(a){a.parentNode.removeChild(a)}),this.elements=[];var a=this.tickOffsets();a.forEach(function(a){if(b.graph.x(a.value)>b.graph.x.range()[1])return;var c=document.createElement("div");c.style.left=b.graph.x(a.value)+"px",c.classList.add("x_tick"),c.classList.add(b.ticksTreatment);var d=document.createElement("div");d.classList.add("title"),d.innerHTML=a.unit.formatter(new Date(a.value*1e3)),c.appendChild(d),b.graph.element.appendChild(c),b.elements.push(c)})},this.graph.onUpdate(function(){b.render()})},Rickshaw.namespace("Rickshaw.Graph.Axis.Y"),Rickshaw.Graph.Axis.Y=function(a){var b=this,c=.1;this.initialize=function(a){this.graph=a.graph,this.orientation=a.orientation||"right";var c=a.pixelsPerTick||75;this.ticks=a.ticks||Math.floor(this.graph.height/c),this.tickSize=a.tickSize||4,this.ticksTreatment=a.ticksTreatment||"plain",a.element?(this.element=a.element,this.vis=d3.select(a.element).append("svg:svg").attr("class","rickshaw_graph y_axis"),this.element=this.vis[0][0],this.element.style.position="relative",this.setSize({width:a.width,height:a.height})):this.vis=this.graph.vis,this.graph.onUpdate(function(){b.render()})},this.setSize=function(a){a=a||{};if(!this.element)return;if(typeof window!="undefined"){var b=window.getComputedStyle(this.element.parentNode,null),d=parseInt(b.getPropertyValue("width"));if(!a.auto)var e=parseInt(b.getPropertyValue("height"))}this.width=a.width||d||this.graph.width*c,this.height=a.height||e||this.graph.height,this.vis.attr("width",this.width).attr("height",this.height*(1+c));var f=this.height*c;this.element.style.top=-1*f+"px"},this.render=function(){this.graph.height!==this._renderHeight&&this.setSize({auto:!0});var b=d3.svg.axis().scale(this.graph.y).orient(this.orientation);b.tickFormat(a.tickFormat||function(a){return a});if(this.orientation=="left")var d=this.height*c,e="translate("+this.width+", "+d+")";this.element&&this.vis.selectAll("*").remove(),this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",e).call(b.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var f=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(b.ticks(this.ticks).tickSubdivide(0).tickSize(f)),this._renderHeight=this.graph.height},this.initialize(a)},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight"),Rickshaw.Graph.Behavior.Series.Highlight=function(a){this.graph=a.graph,this.legend=a.legend;var b=this,c={};this.addHighlightEvents=function(a){a.element.addEventListener("mouseover",function(d){b.legend.lines.forEach(function(b){if(a===b)return;c[b.series.name]=c[b.series.name]||b.series.color,b.series.color=d3.interpolateRgb(b.series.color,d3.rgb("#d8d8d8"))(.8).toString()}),b.graph.update()},!1),a.element.addEventListener("mouseout",function(a){b.legend.lines.forEach(function(a){c[a.series.name]&&(a.series.color=c[a.series.name])}),b.graph.update()},!1)},this.legend&&this.legend.lines.forEach(function(a){b.addHighlightEvents(a)})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order"),Rickshaw.Graph.Behavior.Series.Order=function(a){this.graph=a.graph,this.legend=a.legend;var b=this;$(function(){$(b.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(a,c){var d=[];$(b.legend.list).find("li").each(function(a,b){if(!b.series)return;d.push(b.series)});for(var e=b.graph.series.length-1;e>=0;e--)b.graph.series[e]=d.shift();b.graph.update()}}),$(b.legend.list).disableSelection()}),this.graph.onUpdate(function(){var a=window.getComputedStyle(b.legend.element).height;b.legend.element.style.height=a})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle"),Rickshaw.Graph.Behavior.Series.Toggle=function(a){this.graph=a.graph,this.legend=a.legend;var b=this;this.addAnchor=function(a){var c=document.createElement("a");c.innerHTML="✔",c.classList.add("action"),a.element.insertBefore(c,a.element.firstChild),c.onclick=function(b){a.series.disabled?(a.series.enable(),a.element.classList.remove("disabled")):(a.series.disable(),a.element.classList.add("disabled"))};var d=a.element.getElementsByTagName("span")[0];d.onclick=function(c){var d=a.series.disabled;if(!d)for(var e=0;e<b.legend.lines.length;e++){var f=b.legend.lines[e];if(a.series!==f.series&&!f.series.disabled){d=!0;break}}d?(a.series.enable(),a.element.classList.remove("disabled"),b.legend.lines.forEach(function(b){a.series!==b.series&&(b.series.disable(),b.element.classList.add("disabled"))})):b.legend.lines.forEach(function(a){a.series.enable(),a.element.classList.remove("disabled")})}},this.legend&&(this.legend.lines.forEach(function(a){b.addAnchor(a)})),this._addBehavior=function(){this.graph.series.forEach(function(a){a.disable=function(){if(b.graph.series.length<=1)throw"only one series left";a.disabled=!0,b.graph.update()},a.enable=function(){a.disabled=!1,b.graph.update()}})},this._addBehavior(),this.updateBehaviour=function(){this._addBehavior()}},Rickshaw.namespace("Rickshaw.Graph.HoverDetail"),Rickshaw.Graph.HoverDetail=Rickshaw.Class.create({initialize:function(a){var b=this.graph=a.graph;this.xFormatter=a.xFormatter||function(a){return(new Date(a*1e3)).toUTCString()},this.yFormatter=a.yFormatter||function(a){return a.toFixed(2)};var c=this.element=document.createElement("div");c.className="detail",this.visible=!0,b.element.appendChild(c),this.lastEvent=null,this._addListeners(),this.onShow=a.onShow,this.onHide=a.onHide,this.onRender=a.onRender,this.formatter=a.formatter||this.formatter},formatter:function(a,b,c,d,e,f){return a.name+": "+e},update:function(a){a=a||this.lastEvent;if(!a)return;this.lastEvent=a;if(!a.target.nodeName.match(/^(path|svg|rect)$/))return;var b=this.graph,c=a.offsetX||a.layerX,d=a.offsetY||a.layerY,e=b.x.invert(c),f=b.stackedData,g=f.slice(-1).shift(),h=d3.scale.linear().domain([g[0].x,g.slice(-1).shift().x]).range([0,g.length]),i=Math.floor(h(e)),j=Math.min(i||0,f[0].length-1);for(var k=i;k<f[0].length-1;){if(!f[0][k]||!f[0][k+1])break;if(f[0][k].x<=e&&f[0][k+1].x>e){j=k;break}f[0][k+1]<=e?k++:k--}var e=f[0][j].x,l=this.xFormatter(e),m=b.x(e),n=0,o=b.series.active().map(function(a){return{order:n++,series:a,name:a.name,value:a.stack[j]}}),p,q=function(a,b){return a.value.y0+a.value.y-(b.value.y0+b.value.y)},r=b.y.magnitude.invert(b.element.offsetHeight-d);o.sort(q).forEach(function(a){a.formattedYValue=this.yFormatter.constructor==Array?this.yFormatter[o.indexOf(a)](a.value.y):this.yFormatter(a.value.y),a.graphX=m,a.graphY=b.y(a.value.y0+a.value.y),r>a.value.y0&&r<a.value.y0+a.value.y&&!p&&(p=a,a.active=!0)},this),this.element.innerHTML="",this.element.style.left=b.x(e)+"px",this.visible&&this.render({detail:o,domainX:e,formattedXValue:l,mouseX:c,mouseY:d})},hide:function(){this.visible=!1,this.element.classList.add("inactive"),typeof this.onHide=="function"&&this.onHide()},show:function(){this.visible=!0,this.element.classList.remove("inactive"),typeof this.onShow=="function"&&this.onShow()},render:function(a){var b=a.detail,c=a.domainX,d=a.mouseX,e=a.mouseY,f=a.formattedXValue,g=document.createElement("div");g.className="x_label",g.innerHTML=f,this.element.appendChild(g),b.forEach(function(a){var b=document.createElement("div");b.className="item",b.innerHTML=this.formatter(a.series,c,a.value.y,f,a.formattedYValue,a),b.style.top=this.graph.y(a.value.y0+a.value.y)+"px",this.element.appendChild(b);var d=document.createElement("div");d.className="dot",d.style.top=b.style.top,d.style.borderColor=a.series.color,this.element.appendChild(d),a.active&&(b.className="item active",d.className="dot active")},this),this.show(),typeof this.onRender=="function"&&this.onRender(a)},_addListeners:function(){this.graph.element.addEventListener("mousemove",function(a){this.visible=!0,this.update(a)}.bind(this),!1),this.graph.onUpdate(function(){this.update()}.bind(this)),this.graph.element.addEventListener("mouseout",function(a){a.relatedTarget&&!(a.relatedTarget.compareDocumentPosition(this.graph.element)&Node.DOCUMENT_POSITION_CONTAINS)&&this.hide()}.bind(this),!1)}}),Rickshaw.namespace("Rickshaw.Graph.JSONP"),Rickshaw.Graph.JSONP=Rickshaw.Class.create(Rickshaw.Graph.Ajax,{request:function(){$.ajax({url:this.dataURL,dataType:"jsonp",success:this.success.bind(this),error:this.error.bind(this)})}}),Rickshaw.namespace("Rickshaw.Graph.Legend"),Rickshaw.Graph.Legend=function(a){var b=this.element=a.element,c=this.graph=a.graph,d=this;b.classList.add("rickshaw_legend");var e=this.list=document.createElement("ul");b.appendChild(e);var f=c.series.map(function(a){return a}).reverse();this.lines=[],this.addLine=function(a){var b=document.createElement("li");b.className="line";var c=document.createElement("div");c.className="swatch",c.style.backgroundColor=a.color,b.appendChild(c);var f=document.createElement("span");f.className="label",f.innerHTML=a.name,b.appendChild(f),e.appendChild(b),b.series=a,a.noLegend&&(b.style.display="none");var g={element:b,series:a};d.shelving&&(d.shelving.addAnchor(g),d.shelving.updateBehaviour()),d.highlighter&&d.highlighter.addHighlightEvents(g),d.lines.push(g)},f.forEach(function(a){d.addLine(a)}),c.onUpdate(function(){})},Rickshaw.namespace("Rickshaw.Graph.RangeSlider"),Rickshaw.Graph.RangeSlider=function(a){var b=this.element=a.element,c=this.graph=a.graph;$(function(){$(b).slider({range:!0,min:c.dataDomain()[0],max:c.dataDomain()[1],values:[c.dataDomain()[0],c.dataDomain()[1]],slide:function(a,b){c.window.xMin=b.values[0],c.window.xMax=b.values[1],c.update(),c.dataDomain()[0]==b.values[0]&&(c.window.xMin=undefined),c.dataDomain()[1]==b.values[1]&&(c.window.xMax=undefined)}})}),b[0].style.width=c.width+"px",c.onUpdate(function(){var a=$(b).slider("option","values");$(b).slider("option","min",c.dataDomain()[0]),$(b).slider("option","max",c.dataDomain()[1]),c.window.xMin==undefined&&(a[0]=c.dataDomain()[0]),c.window.xMax==undefined&&(a[1]=c.dataDomain()[1]),$(b).slider("option","values",a)})},Rickshaw.namespace("Rickshaw.Graph.Renderer"),Rickshaw.Graph.Renderer=Rickshaw.Class.create({initialize:function(a){this.graph=a.graph,this.tension=a.tension||this.tension,this.graph.unstacker=this.graph.unstacker||new Rickshaw.Graph.Unstacker({graph:this.graph}),this.configure(a)},seriesPathFactory:function(){},seriesStrokeFactory:function(){},defaults:function(){return{tension:.8,strokeWidth:2,unstack:!0,padding:{top:.01,right:0,bottom:.01,left:0},stroke:!1,fill:!1}},domain:function(){var a=[],b=this.graph.stackedData||this.graph.stackData(),c=this.unstack?b:[b.slice(-1).shift()];c.forEach(function(b){b.forEach(function(b){a.push(b.y+b.y0)})});var d=b[0][0].x,e=b[0][b[0].length-1].x;d-=(e-d)*this.padding.left,e+=(e-d)*this.padding.right;var f=this.graph.min==="auto"?d3.min(a):this.graph.min||0,g=this.graph.max||d3.max(a);if(this.graph.min==="auto"||f<0)f-=(g-f)*this.padding.bottom;return this.graph.max===undefined&&(g+=(g-f)*this.padding.top),{x:[d,e],y:[f,g]}},render:function(){var a=this.graph;a.vis.selectAll("*").remove();var b=a.vis.selectAll("path").data(this.graph.stackedData).enter().append("svg:path").attr("d",this.seriesPathFactory()),c=0;a.series.forEach(function(a){if(a.disabled)return;a.path=b[0][c++],this._styleSeries(a)},this)},_styleSeries:function(a){var b=this.fill?a.color:"none",c=this.stroke?a.color:"none";a.path.setAttribute("fill",b),a.path.setAttribute("stroke",c),a.path.setAttribute("stroke-width",this.strokeWidth),a.path.setAttribute("class",a.className)},configure:function(a){a=a||{},Rickshaw.keys(this.defaults()).forEach(function(b){if(!a.hasOwnProperty(b)){this[b]=this[b]||this.graph[b]||this.defaults()[b];return}typeof this.defaults()[b]=="object"?Rickshaw.keys(this.defaults()[b]).forEach(function(c){this[b][c]=a[b][c]!==undefined?a[b][c]:this[b][c]!==undefined?this[b][c]:this.defaults()[b][c]},this):this[b]=a[b]!==undefined?a[b]:this[b]!==undefined?this[b]:this.graph[b]!==undefined?this.graph[b]:this.defaults()[b]},this)},setStrokeWidth:function(a){a!==undefined&&(this.strokeWidth=a)},setTension:function(a){a!==undefined&&(this.tension=a)}}),Rickshaw.namespace("Rickshaw.Graph.Renderer.Line"),Rickshaw.Graph.Renderer.Line=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"line",defaults:function($super){return Rickshaw.extend($super(),{unstack:!0,fill:!1,stroke:!0})},seriesPathFactory:function(){var a=this.graph;return d3.svg.line().x(function(b){return a.x(b.x)}).y(function(b){return a.y(b.y)}).interpolate(this.graph.interpolation).tension(this.tension)}}),Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack"),Rickshaw.Graph.Renderer.Stack=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"stack",defaults:function($super){return Rickshaw.extend($super(),{fill:!0,stroke:!1,unstack:!1})},seriesPathFactory:function(){var a=this.graph;return d3.svg.area().x(function(b){return a.x(b.x)}).y0(function(b){return a.y(b.y0)}).y1(function(b){return a.y(b.y+b.y0)}).interpolate(this.graph.interpolation).tension(this.tension)}}),Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar"),Rickshaw.Graph.Renderer.Bar=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"bar",defaults:function($super){var a=Rickshaw.extend($super(),{gapSize:.05,unstack:!1});return delete a.tension,a},initialize:function($super,a){a=a||{},this.gapSize=a.gapSize||this.gapSize,$super(a)},domain:function($super){var a=$super(),b=this._frequentInterval();return a.x[1]+=parseInt(b.magnitude),a},barWidth:function(){var a=this.graph.stackedData||this.graph.stackData(),b=a.slice(-1).shift(),c=this._frequentInterval(),d=this.graph.x(b[0].x+c.magnitude*(1-this.gapSize));return d},render:function(){var a=this.graph;a.vis.selectAll("*").remove();var b=this.barWidth(),c=0,d=a.series.filter(function(a){return!a.disabled}).length,e=this.unstack?b/d:b,f=function(b){var c=[1,0,0,b.y<0?-1:1,0,b.y<0?a.y.magnitude(Math.abs(b.y))*2:0];return"matrix("+c.join(",")+")"};a.series.forEach(function(b){if(b.disabled)return;var d=a.vis.selectAll("path").data(b.stack).enter().append("svg:rect").attr("x",function(b){return a.x(b.x)+c}).attr("y",function(b){return a.y(b.y0+Math.abs(b.y))*(b.y<0?-1:1)}).attr("width",e).attr("height",function(b){return a.y.magnitude(Math.abs(b.y))}).attr("transform",f);Array.prototype.forEach.call(d[0],function(a){a.setAttribute("fill",b.color)}),this.unstack&&(c+=e)},this)},_frequentInterval:function(){var a=this.graph.stackedData||this.graph.stackData(),b=a.slice(-1).shift(),c={};for(var d=0;d<b.length-1;d++){var e=b[d+1].x-b[d].x;c[e]=c[e]||0,c[e]++}var f={count:0};return Rickshaw.keys(c).forEach(function(a){f.count<c[a]&&(f={count:c[a],magnitude:a})}),this._frequentInterval=function(){return f},f}}),Rickshaw.namespace("Rickshaw.Graph.Renderer.Area"),Rickshaw.Graph.Renderer.Area=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"area",defaults:function($super){return Rickshaw.extend($super(),{unstack:!1,fill:!1,stroke:!1})},seriesPathFactory:function(){var a=this.graph;return d3.svg.area().x(function(b){return a.x(b.x)}).y0(function(b){return a.y(b.y0)}).y1(function(b){return a.y(b.y+b.y0)}).interpolate(a.interpolation).tension(this.tension)},seriesStrokeFactory:function(){var a=this.graph;return d3.svg.line().x(function(b){return a.x(b.x)}).y(function(b){return a.y(b.y+b.y0)}).interpolate(a.interpolation).tension(this.tension)},render:function(){var a=this.graph;a.vis.selectAll("*").remove();var b=a.vis.selectAll("path").data(this.graph.stackedData).enter().insert("svg:g","g");b.append("svg:path").attr("d",
z = 10 / (.1 + Math.random());
for (var i = 0; i < n; i++) {
var w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
var a = [], i;
for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
for (i = 0; i < 5; ++i) bump(a);
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
var n = 4, // number of layers
m = 58, // number of samples per layer
stack = d3.layout.stack(),
layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 10, bottom: 20, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .08);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
this._init = function () {
this._calcSize();
// The svg.
svg = this.$el.append('svg')
.attr('class', 'chart');
// X scale. Range updated in function.
x = d3.time.scale();
// Y scale. Range updated in function.
y = d3.scale.linear();
// Stack fn.
stack = d3.layout.stack()
// Define where to get the values from.
.values(d => d.values)
.x(d => d.timestep)
// Where to get the y value. This will be used by the
// area function as y0 (which is used to stack.)
.y(d => d.people_total);
// Area definition function.
area = d3.svg.area()
.x(d => x(d.timestep))
// The y0 and y1 define the upper and lower positions for the
// area. This will be used to stack the areas.
.y0(d => y(d.y0))
.y1(d => y(d.y0 + d.y));
// Line function for the delimit the area.
line = d3.svg.line()
.x(d => x(d.timestep))
.y(d => y(d.y0 + d.y));
// Define xAxis function.
xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickSize(0)
.tickPadding(10)
.tickFormat(d3.time.format('%b %y'));
yAxis = d3.svg.axis()
.scale(y)
.tickSize(0)
.orient('left')
.tickPadding(5)
.tickFormat(d => `${(d / 1e6)}M`);
// Chart elements
dataCanvas = svg.append('g')
.attr('class', 'data-canvas')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svg.append('g')
.attr('class', 'x axis')
.append('text')
.attr('class', 'label')
.attr('text-anchor', 'start');
svg.append('g')
.attr('class', 'y axis')
.append('text')
.attr('class', 'label')
.attr('text-anchor', 'middle');
// Group to hold the areas.
dataCanvas.append('g')
.attr('class', 'area-group');
// Group to hold the area delimiter lines.
dataCanvas.append('g')
.attr('class', 'area-line-group');
// Group to hold the area delimiter line points.
dataCanvas.append('g')
.attr('class', 'area-line-points-group');
// //////////////////////////////////////////////////
// Focus elements.
// Focus line and circles show on hover.
// Group to hold the focus elements.
var focus = dataCanvas.append('g')
.attr('class', 'focus-elements')
.style('display', 'none');
// Vertical focus line.
focus.append('line')
.attr('class', 'focus-line');
// Groups to hold the focus circles.
focus.append('g')
.attr('class', 'focus-circles');
// Add focus rectangle. Will be responsible to trigger the events.
dataCanvas.append('rect')
.attr('class', 'trigger-rect')
.style('fill', 'none')
.style('pointer-events', 'all')
.on('mouseover', this._onMouseOver)
.on('mouseout', this._onMouseOut)
.on('mousemove', this._onMouseMove);
};
selection.each(function (data, index) {
data = accessor.call(this, data, index);
var adjustedWidth = width - margin.left - margin.right;
var adjustedHeight = height - margin.top - margin.bottom;
var svgEvents = events().listeners(listeners);
/* Stacking Options ******************************** */
var stack = d3.layout.stack()
.x(xValue)
.y(stacks.scale === "z" ? zValue : yValue)
.offset(stacks.offset)
.order(stacks.order)
.out(stacks.out);
data = stack(data);
/* ******************************** */
/* Scales ******************************** */
var x = xScale.scale
.domain(xScale.domain ? xScale.domain.call(this, d3.merge(data)) : xDomain(data, xValue))
.clamp(xScale.clamp)
.range([0, adjustedWidth]);
var y = yScale.scale
.domain(yScale.domain ? yScale.domain.call(this, d3.merge(data)) : domain(data, yValue))
.clamp(yScale.clamp)
.range([adjustedHeight, 0]);
var z = zScale.scale
.domain(zScale.domain ? zScale.domain.call(this, d3.merge(data)) : domain(data, zValue))
.clamp(zScale.clamp)
.range([adjustedHeight, 0]);
if (xScale.nice) { x.nice(); }
if (yScale.nice) { y.nice(); }
if (zScale.nice) { z.nice(); }
/* ******************************** */
/* Canvas ******************************** */
var svg = d3.select(this).selectAll("svg")
.data([data])
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.call(svgEvents);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
/* ******************************** */
/* Brush ******************************** */
if (listeners.brushstart && listeners.brushstart.length ||
listeners.brush && listeners.brush.length ||
listeners.brushend && listeners.brushend.length) {
var brush = brushComponent()
.class(brushOpts.class)
.xScale(brushOpts.x ? x : null)
.yScale(brushOpts.y ? y : null)
.opacity(brushOpts.opacity)
.clamp(brushOpts.clamp)
.extent(brushOpts.extent)
.height(adjustedHeight)
.brushstart(listeners.brushstart)
.brush(listeners.brush)
.brushend(listeners.brushend);
g.call(brush);
}
/* ******************************** */
/* Zero-line ******************************** */
if (zeroLine.show) {
var zLine = zeroAxisLine()
.x1(function () { return x.range()[0]; })
.x2(function () { return x.range()[1]; })
.y1(function () { return y(0); })
.y2(function () { return y(0); });
g.append("g")
.datum([{}])
.call(builder(zeroLine, zLine));
}
/* ******************************** */
/* Axes ******************************** */
if (xAxis.gridlines) {
xAxis.tick.innerTickSize = -adjustedHeight;
}
if (yAxis.gridlines) {
yAxis.tick.innerTickSize = -adjustedWidth;
}
if (xAxis.show) {
var axisX = axis()
.scale(x)
.class(xAxis.class)
.transform(xAxis.transform || "translate(0," + (y.range()[0]) + ")")
.tick(xAxis.tick)
.tickText(xAxis.tickText)
.rotateLabels(xAxis.rotateLabels)
.title(xAxis.title);
g.call(axisX);
}
if (yAxis.show) {
var axisY = axis()
.scale(y)
.orient("left")
.class(yAxis.class)
.transform(yAxis.transform || "translate(0,0)")
.tick(yAxis.tick)
.tickText(yAxis.tickText)
.title(yAxis.title);
g.call(axisY);
}
if (zAxis.show) {
var axisZ = axis()
.scale(z)
.orient("right")
.class(zAxis.class)
.transform(zAxis.transform || "translate(" + x.range()[1] + "," + "0)")
.tick(zAxis.tick)
.tickText(zAxis.tickText)
.title(zAxis.title);
g.call(axisZ);
}
/* ******************************** */
/* ClipPath ******************************** */
var clippath = clip().width(adjustedWidth).height(adjustedHeight);
var clippedG = g.call(clippath).append("g")
.attr("clip-path", "url(#" + clippath.id() + ")");
/* ******************************** */
/* SVG Elements ******************************** */
var elements = [
{type: "area", func: areas(), opts: area},
{type: "bar", func: bars(), opts: bar},
{type: "line", func: lines(), opts: line},
{type: "points", func: circles(), opts: points}
];
elements.forEach(function (d) {
// Only render elements when api called
if (d3.keys(d.opts).length) {
var element = functor().function(d.func);
if (d.type === "area") { d.opts.offset = stacks.offset; }
d.opts = !Array.isArray(d.opts) ? [d.opts] : d.opts;
d.opts.forEach(function (props) {
var isZ = props.scale && props.scale.toLowerCase() === "z";
props.x = xValue;
props.y = isZ ? zValue : yValue;
props.xScale = x;
props.yScale = isZ ? z : y;
clippedG.call(element.options(props));
});
}
});
/* ******************************** */
});
function StreamGraph(mainViewModel, json) {
var self = this,
parentDiv = '#stream',
timeGrouping = 'minute', // TODO: variable?
chartType = 'streamGraph',
margin = { top: 0, right: 0, bottom: 30, left: 90 },
width = 800 - margin.left - margin.right,
height = 130 - margin.top - margin.bottom,
duration = 750;
xTicks = 5;
/* /Begin Chart initilization code */
d3.select(parentDiv).select('.svgContainer').selectAll('*').remove();
var svg = d3.select(parentDiv).select('.svgContainer').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate('+margin.left +','+ margin.top+')');
function logViewportBoundaries(extent) {
var low = extent[0].getTime() * 1000,
high = extent[1].getTime() * 1000;
console.log("viewport boundaries", low, high);
}
var xScale = d3.time.scale()
.range([0, width]),
yScale = d3.scale.linear()
.range([height, 0]),
color = mainViewModel.getColorScale(),
viewport = d3.svg.brush()
.x(xScale)
.on('brush', function() {
mainViewModel.updateViewPort(viewport.empty() ? xScale.domain() : viewport.extent());
logViewportBoundaries(viewport.extent());
})
.on('brushend', function() {
mainViewModel.updateViewPort(viewport.empty() ? xScale.domain() : viewport.extent());
mainViewModel.updateLeaderboard(viewport.empty() ? xScale.domain() : viewport.extent());
logViewportBoundaries(viewport.extent());
});
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(mainViewModel.offsetTimeFormat);
var chart = svg.append('g')
.attr('class', 'chart');
var scanline = svg.append('line')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', 0)
.attr('y2', height)
.style('visibility', 'hidden')
.style('stroke-width', 1)
.style('stroke', '#ccc')
.style('fill', 'none');
// Append viewport
svg.append('g')
.attr('class', 'viewport')
.call(viewport)
.selectAll('rect')
.attr('height', height);
// Append xAxis
chart.append('g')
.attr('class', 'x axis')
.attr("transform", "translate(0,"+(height+10)+")");
// White rectangle for hiding scanline
svg.append("rect")
.attr("class", "hide-scanline")
.attr("width", margin.left).attr("height", (height))
.attr("transform", "translate(" + -margin.left + ",0)");
svg.on('mousemove', function(d, i) {
var mousex = d3.mouse(this)[0];
mainViewModel.updateScanlines(xScale.invert(mousex));
updateVolumeTooltip(mousex);
})
.on('mouseover', function(d, i) {
var mousex = d3.mouse(this)[0];
mainViewModel.updateScanlines(xScale.invert(mousex));
updateVolumeTooltip(mousex);
})
.on('mouseout', function(d, i) {
mainViewModel.updateScanlines(null);
updateVolumeTooltip(null);
});
self.updateScanline = function(timestamp) {
if (timestamp !== null) {
scanline.style('visibility', 'visible')
.attr("transform", "translate(" + xScale(timestamp) + ",0)");
}
else {
scanline.style('visibility', 'hidden');
}
}
function updateVolumeTooltip(mousePosition) {
var invertedDate = xScale.invert(mousePosition);
var matchingTimestamp = binTimestamp(invertedDate.getTime());
var volumes = dataset.map(function(datum) {
var volume = null;
if (mousePosition !== null) {
volume = 0;
var matching = datum.values.filter(function(value, index) {
return value.timestamp == matchingTimestamp;
});
if (matching.length > 0) {
volume = matching[0].volume;
}
}
return {
code : datum.key,
volume : volume
}
});
mainViewModel.updateCurrentVolumes(volumes);
}
// Area generator for stream graph polygons
var area = d3.svg.area()
.interpolate('basis')
.x(function(d) { return xScale(d.date); });
// Line generator for chart's edges
var line = d3.svg.line()
.interpolate('basis')
.x(function(d) { return xScale(d.date); });
// Stack layout for streamgraph
var stack = d3.layout.stack()
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.volume; })
.out(function(d, y0, y) { d.volume0 = y0; })
.order('reverse');
/* /End Chart initilization code */
// Switching between graph types
d3.select('.pick-stream-chart').selectAll('button')
.on('click', function() {
var selectedChart = this.value;
console.log("selectedChart: ", selectedChart);
d3.selectAll('.pick-stream-chart button').classed('active', false);
d3.select(this).classed('active', true);
switch(selectedChart) {
case 'streamGraph':
streamGraph(dataset);
break;
case 'areaGraph':
areaGraph(dataset);
break;
default:
console.error('Picked an unknown stream chart type {' + selectedChart +'}\n Reverting to streamGraph');
streamGraph(dataset);
}
});
function drawChart(data) {
var minDate = d3.min(data, function(d) { return d.values[0].date; })
maxDate = d3.max(data, function(d) { return d.values[d.values.length - 1].date; });
// Update domain of scales with this date range
xScale.domain([minDate, maxDate]);
// Draw X Axis
d3.select(parentDiv).select('.x.axis').call(xAxis);
// Make streamgraph enamate from center of chart
area.y0(height / 2)
.y1(height / 2);
var g = chart.selectAll('.code')
.data(data)
.enter();
var codes = g.append('g')
.attr('class', 'code');
// add some paths that will
// be used to display the lines and
// areas that make up the charts
codes.append('path')
.attr('class', 'area')
.style('fill', function(d) { return color(d.key); })
.attr('d', function(d) { return area(d.values); });
codes.append('path')
.attr('class', 'line')
.style('stroke-opacity', 0.0001);
streamGraph(data);
}
function streamGraph(data) {
stack.offset('silhouette');
stack(data);
var yMax = d3.max(data[0].values.map(function(d) { return d.volume0 + d.volume; }));
yScale.domain([0, yMax])
.range([height, 0]);
line.y(function(d) { return yScale(d.volume0); });
area.y0(function(d) { return yScale(d.volume0); })
.y1(function(d) { return yScale(d.volume0 + d.volume); });
var t = chart.selectAll('.code')
.transition()
.duration(duration);
t.select('path.area')
.style('fill-opacity', 1.0)
.attr('d', function(d) { return area(d.values); });
t.select('path.line')
.style('stroke-opacity', 0.0001)
.attr('d', function(d) { return line(d.values); });
}
function areaGraph(data) {
yScale.domain([0, d3.max(data.map(function(d) { return d.maxVolume; }))])
.range([height, 0]);
area.y0(height)
.y1(function(d) { return yScale(d.volume); });
line.y(function(d) { return yScale(d.volume); });
var t = chart.selectAll('.code')
.transition()
.duration(duration);
t.select('path.area')
.style('fill-opacity', 0.5)
.attr('d', function(d) { return area(d.values); });
t.select('path.line')
.style('stroke-opacity', .8)
.attr('d', function(d) { return line(d.values); });
}
// Bins the generated timestamp into the same itnerval
// set with var timeGrouping
function binTimestamp(timestamp) {
timestamp = parseInt(timestamp);
var divVal = null
switch (timeGrouping) {
case 'minute':
divVal = 1000 * 60;
break;
case 'second':
divVal = 1000;
break;
case 'millisecond':
divVal = 1;
break;
default:
console.warn('Binning unsupported timestamp type', timeGrouping, timestamp);
break;
}
return parseInt(timestamp / divVal) * divVal;
}
self.updateTime = function() {
d3.select('#stream').select('.x.axis').call(xAxis);
};
function init(timeGrouping, data) {
var tweetVolume = function (volumeDatum) {
// TODO: Include favorites and/or retweet counts in here?
return parseInt(volumeDatum.numTweets);
}
data.forEach(function(codeGroup) {
codeGroup.values.forEach(function(d) {
d.date = new Date(parseInt(d.timestamp));
// d.date = parseInt(d.timestamp);
d.volume = tweetVolume(d);
d.key = codeGroup.key;
});
codeGroup.values.sort(function(a, b) {
return a.date - b.date;
});
codeGroup.maxVolume = d3.max(codeGroup.values, function(d) { return d.volume; });
});
data.sort(function(a, b) { return b.maxVolume - a.maxVolume; });
dataset = data;
drawChart(dataset);
}
init(timeGrouping, json);
return self;
}
selection.each(function (data) {
var stack = d3.layout.stack().x(xValue).y(yValue).offset(offset || "zero");
var layers = stack(data);
var n = layers.length; // number of layers
var svg;
var g;
var stackLayer;
var bars;
layers = layers.map(function (d) {
return d.map(function (e, i) {
return [xValue.call(d, e, i), yValue.call(d, e, i), y0.call(d, e, i)];
});
});
xScale.domain(xDomain.call(d3.merge(layers)));
yScale.domain(yDomain.call(d3.merge(layers)));
svg = d3.select(this).append("svg")
.data([layers])
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
g = svg.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
stackLayer = g.selectAll(".layer")
.data(function (d) { return d; })
.enter().append("g")
.attr("class", stackClass);
// Enter
bars = stackLayer.selectAll("rect")
.data(function (d) { return d; })
.enter().append("rect")
.attr("class", barClass)
.attr("fill", barFill);
// Update
bars.attr("x", function (d, i, j) {
if (offset === "grouped") {
return xScale(d[0]) + xScale.rangeBand() / n * j;
}
return xScale(d[0]);
})
.attr("width", function () {
if (offset === "grouped") {
return xScale.rangeBand() / n;
}
return xScale.rangeBand();
})
.attr("y", function (d) {
if (offset === "grouped") {
return yScale(d.y);
}
return yScale(d.y0) - yScale(d.y0 + d.y);
})
.attr("height", function (d) {
if (offset === "grouped") {
return height - yScale(d.y);
}
return yScale(d.y0) - yScale(d.y0 + d.y);
});
// Exit
bars.exit().remove();
g.append("g").attr("class", "x axis");
g.append("g").attr("class", "y axis");
if (showXAxis) {
g.select(".x.axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.call(xAxis.scale(xScale))
.append("text")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(xAxisTitle);
}
if (showYAxis) {
g.select(".y.axis")
.call(yAxis.scale(yScale))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(yAxisTitle);
}
});
getStack: function () {
return d3.layout.stack()
.values(function (d) { return d.values; })
.x(function (d) { return d.date; });
},
function renderer(data, layer, options) {
this.checkDependencies('cartesian');
var duration = options.chart.animations.duration != null ? options.chart.animations.duration : 400;
var x = function (val) { return this.xScale(val) + this.rangeBand / 2 + 0.5; }.bind(this);
var y = function (val) { return this.yScale(val) + 0.5; }.bind(this);
var h = options.chart.plotHeight;
var classFn = function (d, i) { return 'series s-' + (i+1) + ' ' + d.name; };
var stack = d3.layout.stack().values(function (d) { return d.data; });
var startArea = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function (d) { return h; })
.y1(function(d) { return h; });
var areaBase = options.area.areaBase != null ? options.area.areaBase : options.yAxis.min;
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function (d) { return options.area.stacked ? y(d.y0 || areaBase || 0) : y(0); })
.y1(function(d) { return y((options.area.stacked ? d.y0 : 0) + d.y); });
if(options.area.smooth) {
area.interpolate('cardinal');
startArea.interpolate('cardinal');
}
renderSeries();
if (options.tooltip && options.tooltip.enable)
renderTooltipTrackers();
function renderSeries() {
data = options.area.preprocess(data);
var series = layer.selectAll('g.series')
.data(stack(data));
series.enter()
.append('svg:g')
.append('path').datum(function (d) { return d.data; })
.attr('class', 'area')
.attr('d', startArea);
series.attr('class', classFn);
series.exit().remove();
if (options.chart.animations && options.chart.animations.enable) {
series.select('.area')
.datum(function (d) { return d.data; })
.transition().duration(options.chart.animations.duration || duration)
.attr('d', area);
} else {
series.select('.area')
.datum(function (d) { return d.data; })
.attr('d', area);
}
}
function renderTooltipTrackers() {
var trackerSize = 10;
// add the tooltip trackers regardless
var markers = layer.selectAll('.tooltip-trackers')
.data(data, function (d) { return d.name; });
markers.enter().append('g')
.attr('class', 'tooltip-trackers');
markers.exit().remove();
var blocks = markers.selectAll('.tooltip-tracker')
.data(function (d) {
return d.data;
}, function (d, i) {
return [d.x,d.y,d.y0].join('&');
});
blocks.enter().append('rect')
.attr('class', 'tooltip-tracker')
.attr('opacity', 0)
.attr('width', trackerSize * 2);
blocks.attr('x', function(d) { return x(d.x) - trackerSize; })
.attr('y', function(d) { return y((options.area.stacked ? d.y0 : 0) + d.y); })
.attr('height', function(d) { return y(0) - y(d.y); });
blocks.exit().remove();
}
}
function stackedArea() {
var stack = d3.layout.stack()
.values(function (d) {
return d.values;
})
.x(function (d) {
return d.date;
})
.y(function (d) {
return d.price;
})
.out(function (d, y0, y) {
d.price0 = y0;
})
.order('reverse');
stack(symbols);
y
.domain([0, d3.max(symbols[0].values.map(function (d) {
return d.price + d.price0;
}))])
.range([height, 0]);
line
.y(function (d) {
return y(d.price0);
});
area
.y0(function (d) {
return y(d.price0);
})
.y1(function (d) {
return y(d.price0 + d.price);
});
var t = svg.selectAll('.symbol').transition()
.duration(duration)
.attr('transform', 'translate(0,0)')
.each('end', function () {
d3.select(this).attr('transform', null);
});
t.select('path.area')
.attr('d', function (d) {
return area(d.values);
});
t.select('path.line')
.style('stroke-opacity', function (d, i) {
return i < 3 ? 1e-6 : 1;
})
.attr('d', function (d) {
return line(d.values);
});
t.select('text')
.attr('transform', function (d) {
d = d.values[d.values.length - 1];
return 'translate(' + (width - 60) + ',' + y(d.price / 2 + d.price0) + ')';
});
setTimeout(streamgraph, duration + delay);
}
this.stackData = function() {
var data = this.series.active()
.map( function(d) { return d.data } )
.map( function(d) { return d.filter( function(d) { return this._slice(d) }, this ) }, this);
var preserve = this.preserve;
if (!preserve) {
this.series.forEach( function(series) {
if (series.scale) {
// data must be preserved when a scale is used
preserve = true;
}
} );
}
data = preserve ? Visuals.clone(data) : data;
this.series.active().forEach( function(series, index) {
if (series.scale) {
// apply scale to each series
var seriesData = data[index];
if(seriesData) {
seriesData.forEach( function(d) {
d.y = series.scale(d.y);
} );
}
}
} );
this.stackData.hooks.data.forEach( function(entry) {
data = entry.f.apply(self, [data]);
} );
var stackedData;
if (!this.renderer.unstack) {
this._validateStackable();
var layout = d3.layout.stack();
layout.offset( self.offset );
stackedData = layout(data);
}
stackedData = stackedData || data;
this.stackData.hooks.after.forEach( function(entry) {
stackedData = entry.f.apply(self, [data]);
} );
var i = 0;
this.series.forEach( function(series) {
if (series.disabled) return;
series.stack = stackedData[i++];
} );
this.stackedData = stackedData;
return stackedData;
};
var Rickshaw={namespace:function(e,t){var n=e.split("."),r=Rickshaw;for(var i=1,s=n.length;i<s;i++){var o=n[i];r[o]=r[o]||{},r=r[o]}return r},keys:function(e){var t=[];for(var n in e)t.push(n);return t},extend:function(e,t){for(var n in t)e[n]=t[n];return e},clone:function(e){return JSON.parse(JSON.stringify(e))}};if(typeof module!="undefined"&&module.exports){var d3=require("d3");module.exports=Rickshaw}(function(e){function f(e){return t.call(e)===a}function l(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function c(e){if(h(e)!==u)throw new TypeError;var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n);return t}function h(e){switch(e){case null:return n;case void 0:return r}var t=typeof e;switch(t){case"boolean":return i;case"number":return s;case"string":return o}return u}function p(e){return typeof e=="undefined"}function v(e){var t=e.toString().match(/^[\s\(]*function[^(]*\(([^)]*)\)/)[1].replace(/\/\/.*?[\r\n]|\/\*(?:.|[\r\n])*?\*\//g,"").replace(/\s+/g,"").split(",");return t.length==1&&!t[0]?[]:t}function m(e,t){var n=e;return function(){var e=g([b(n,this)],arguments);return t.apply(this,e)}}function g(e,t){var n=e.length,r=t.length;while(r--)e[n+r]=t[r];return e}function y(e,t){return e=d.call(e,0),g(e,t)}function b(e,t){if(arguments.length<2&&p(arguments[0]))return this;var n=e,r=d.call(arguments,2);return function(){var e=y(r,arguments);return n.apply(t,e)}}var t=Object.prototype.toString,n="Null",r="Undefined",i="Boolean",s="Number",o="String",u="Object",a="[object Function]",d=Array.prototype.slice,w=function(){},E=function(){function t(){}function n(){function r(){this.initialize.apply(this,arguments)}var e=null,n=[].slice.apply(arguments);f(n[0])&&(e=n.shift()),l(r,E.Methods),r.superclass=e,r.subclasses=[];if(e){t.prototype=e.prototype,r.prototype=new t;try{e.subclasses.push(r)}catch(i){}}for(var s=0,o=n.length;s<o;s++)r.addMethods(n[s]);return r.prototype.initialize||(r.prototype.initialize=w),r.prototype.constructor=r,r}function r(t){var n=this.superclass&&this.superclass.prototype,r=c(t);e&&(t.toString!=Object.prototype.toString&&r.push("toString"),t.valueOf!=Object.prototype.valueOf&&r.push("valueOf"));for(var i=0,s=r.length;i<s;i++){var o=r[i],u=t[o];if(n&&f(u)&&v(u)[0]=="$super"){var a=u;u=m(function(e){return function(){return n[e].apply(this,arguments)}}(o),a),u.valueOf=b(a.valueOf,a),u.toString=b(a.toString,a)}this.prototype[o]=u}return this}var e=function(){for(var e in{toString:1})if(e==="toString")return!1;return!0}();return{create:n,Methods:{addMethods:r}}}();e.exports?e.exports.Class=E:e.Class=E})(Rickshaw),Rickshaw.namespace("Rickshaw.Compat.ClassList"),Rickshaw.Compat.ClassList=function(){typeof document!="undefined"&&!("classList"in document.createElement("a"))&&function(e){"use strict";var t="classList",n="prototype",r=(e.HTMLElement||e.Element)[n],i=Object,s=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(e){var t=0,n=this.length;for(;t<n;t++)if(t in this&&this[t]===e)return t;return-1},u=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},a=function(e,t){if(t==="")throw new u("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new u("INVALID_CHARACTER_ERR","String contains an invalid character");return o.call(e,t)},f=function(e){var t=s.call(e.className),n=t?t.split(/\s+/):[],r=0,i=n.length;for(;r<i;r++)this.push(n[r]);this._updateClassName=function(){e.className=this.toString()}},l=f[n]=[],c=function(){return new f(this)};u[n]=Error[n],l.item=function(e){return this[e]||null},l.contains=function(e){return e+="",a(this,e)!==-1},l.add=function(e){e+="",a(this,e)===-1&&(this.push(e),this._updateClassName())},l.remove=function(e){e+="";var t=a(this,e);t!==-1&&(this.splice(t,1),this._updateClassName())},l.toggle=function(e){e+="",a(this,e)===-1?this.add(e):this.remove(e)},l.toString=function(){return this.join(" ")};if(i.defineProperty){var h={get:c,enumerable:!0,configurable:!0};try{i.defineProperty(r,t,h)}catch(p){p.number===-2146823252&&(h.enumerable=!1,i.defineProperty(r,t,h))}}else i[n].__defineGetter__&&r.__defineGetter__(t,c)}(window)},(typeof RICKSHAW_NO_COMPAT!="undefined"&&!RICKSHAW_NO_COMPAT||typeof RICKSHAW_NO_COMPAT=="undefined")&&new Rickshaw.Compat.ClassList,Rickshaw.namespace("Rickshaw.Graph"),Rickshaw.Graph=function(e){if(!e.element)throw"Rickshaw.Graph needs a reference to an element";this.element=e.element,this.series=e.series,this.defaults={interpolation:"cardinal",offset:"zero",min:undefined,max:undefined,preserve:!1},Rickshaw.keys(this.defaults).forEach(function(t){this[t]=e[t]||this.defaults[t]},this),this.window={},this.updateCallbacks=[];var t=this;this.initialize=function(e){this.validateSeries(e.series),this.series.active=function(){return t.series.filter(function(e){return!e.disabled})},this.setSize({width:e.width,height:e.height}),this.element.classList.add("rickshaw_graph"),this.vis=d3.select(this.element).append("svg:svg").attr("width",this.width).attr("height",this.height);var n=[Rickshaw.Graph.Renderer.Stack,Rickshaw.Graph.Renderer.Line,Rickshaw.Graph.Renderer.Bar,Rickshaw.Graph.Renderer.Area,Rickshaw.Graph.Renderer.ScatterPlot];n.forEach(function(e){if(!e)return;t.registerRenderer(new e({graph:t}))}),this.setRenderer(e.renderer||"stack",e),this.discoverRange()},this.validateSeries=function(e){if(!(e instanceof Array||e instanceof Rickshaw.Series)){var t=Object.prototype.toString.apply(e);throw"series is not an array: "+t}var n;e.forEach(function(e){if(!(e instanceof Object))throw"series element is not an object: "+e;if(!e.data)throw"series has no data: "+JSON.stringify(e);if(!(e.data instanceof Array))throw"series data is not an array: "+JSON.stringify(e.data);var t=e.data[0].x,n=e.data[0].y;if(typeof t!="number"||typeof n!="number"&&n!==null)throw"x and y properties of points should be numbers instead of "+typeof t+" and "+typeof n},this)},this.dataDomain=function(){var e=this.series[0].data;return[e[0].x,e.slice(-1).shift().x]},this.discoverRange=function(){var e=this.renderer.domain();this.x=d3.scale.linear().domain(e.x).range([0,this.width]),this.y=d3.scale.linear().domain(e.y).range([this.height,0]),this.y.magnitude=d3.scale.linear().domain([e.y[0]-e.y[0],e.y[1]-e.y[0]]).range([0,this.height])},this.render=function(){var e=this.stackData();this.discoverRange(),this.renderer.render(),this.updateCallbacks.forEach(function(e){e()})},this.update=this.render,this.stackData=function(){var e=this.series.active().map(function(e){return e.data}).map(function(e){return e.filter(function(e){return this._slice(e)},this)},this);e=this.preserve?Rickshaw.clone(e):e,this.stackData.hooks.data.forEach(function(n){e=n.f.apply(t,[e])});var n;if(!this.renderer.unstack){this._validateStackable();var r=d3.layout.stack();r.offset(t.offset),n=r(e)}n=n||e,this.stackData.hooks.after.forEach(function(r){n=r.f.apply(t,[e])});var i=0;return this.series.forEach(function(e){if(e.disabled)return;e.stack=n[i++]}),this.stackedData=n,n},this._validateStackable=function(){var e=this.series,t;e.forEach(function(e){t=t||e.data.length;if(t&&e.data.length!=t)throw"stacked series cannot have differing numbers of points: "+t+" vs "+e.data.length+"; see Rickshaw.Series.fill()"},this)},this.stackData.hooks={data:[],after:[]},this._slice=function(e){if(this.window.xMin||this.window.xMax){var t=!0;return this.window.xMin&&e.x<this.window.xMin&&(t=!1),this.window.xMax&&e.x>this.window.xMax&&(t=!1),t}return!0},this.onUpdate=function(e){this.updateCallbacks.push(e)},this.registerRenderer=function(e){this._renderers=this._renderers||{},this._renderers[e.name]=e},this.configure=function(e){(e.width||e.height)&&this.setSize(e),Rickshaw.keys(this.defaults).forEach(function(t){this[t]=t in e?e[t]:t in this?this[t]:this.defaults[t]},this),this.setRenderer(e.renderer||this.renderer.name,e)},this.setRenderer=function(e,t){if(!this._renderers[e])throw"couldn't find renderer "+e;this.renderer=this._renderers[e],typeof t=="object"&&this.renderer.configure(t)},this.setSize=function(e){e=e||{};if(typeof window!==undefined)var t=window.getComputedStyle(this.element,null),n=parseInt(t.getPropertyValue("width"),10),r=parseInt(t.getPropertyValue("height"),10);this.width=e.width||n||400,this.height=e.height||r||250,this.vis&&this.vis.attr("width",this.width).attr("height",this.height)},this.initialize(e)},Rickshaw.namespace("Rickshaw.Fixtures.Color"),Rickshaw.Fixtures.Color=function(){this.schemes={},this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse(),this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"],this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"],this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse(),this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"},this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse(),this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"],this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]},Rickshaw.namespace("Rickshaw.Fixtures.RandomData"),Rickshaw.Fixtures.RandomData=function(e){var t;e=e||1;var n=200,r=Math.floor((new Date).getTime()/1e3);this.addData=function(t){var i=Math.random()*100+15+n,s=t[0].length,o=1;t.forEach(function(t){var n=Math.random()*20,u=i/25+o++ +(Math.cos(s*o*11/960)+2)*15+(Math.cos(s/7)+2)*7+(Math.cos(s/17)+2)*1;t.push({x:s*e+r,y:u+n})}),n=i*.85}},Rickshaw.namespace("Rickshaw.Fixtures.Time"),Rickshaw.Fixtures.Time=function(){var e=(new Date).getTimezoneOffset()*60,t=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],this.units=[{name:"decade",seconds:315576e3,formatter:function(e){return parseInt(e.getUTCFullYear()/10,10)*10}},{name:"year",seconds:31557600,formatter:function(e){return e.getUTCFullYear()}},{name:"month",seconds:2635200,formatter:function(e){return t.months[e.getUTCMonth()]}},{name:"week",seconds:604800,formatter:function(e){return t.formatDate(e)}},{name:"day",seconds:86400,formatter:function(e){return e.getUTCDate()}},{name:"6 hour",seconds:21600,formatter:function(e){return t.formatTime(e)}},{name:"hour",seconds:3600,formatter:function(e){return t.formatTime(e)}},{name:"15 minute",seconds:900,formatter:function(e){return t.formatTime(e)}},{name:"minute",seconds:60,formatter:function(e){return e.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(e){return e.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(e){return e.getUTCSeconds()+"s"}}],this.unit=function(e){return this.units.filter(function(t){return e==t.name}).shift()},this.formatDate=function(e){return e.toUTCString().match(/, (\w+ \w+ \w+)/)[1]},this.formatTime=function(e){return e.toUTCString().match(/(\d+:\d+):/)[1]},this.ceil=function(e,t){var n,r;return t.name=="month"?(n=new Date((e+t.seconds-1)*1e3),r=new Date(0),r.setUTCFullYear(n.getUTCFullYear()),r.setUTCMonth(n.getUTCMonth()),r.setUTCDate(1),r.setUTCHours(0),r.setUTCMinutes(0),r.setUTCSeconds(0),r.setUTCMilliseconds(0),r.getTime()/1e3):t.name=="year"?(n=new Date((e+t.seconds-1)*1e3),r=new Date(0),r.setUTCFullYear(n.getUTCFullYear()),r.setUTCMonth(0),r.setUTCDate(1),r.setUTCHours(0),r.setUTCMinutes(0),r.setUTCSeconds(0),r.setUTCMilliseconds(0),r.getTime()/1e3):Math.ceil(e/t.seconds)*t.seconds}},Rickshaw.namespace("Rickshaw.Fixtures.Number"),Rickshaw.Fixtures.Number.formatKMBT=function(e){return abs_y=Math.abs(e),abs_y>=1e12?e/1e12+"T":abs_y>=1e9?e/1e9+"B":abs_y>=1e6?e/1e6+"M":abs_y>=1e3?e/1e3+"K":abs_y<1&&e>0?e.toFixed(2):abs_y===0?"":e},Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(e){return abs_y=Math.abs(e),abs_y>=0x4000000000000?e/0x4000000000000+"P":abs_y>=1099511627776?e/1099511627776+"T":abs_y>=1073741824?e/1073741824+"G":abs_y>=1048576?e/1048576+"M":abs_y>=1024?e/1024+"K":abs_y<1&&e>0?e.toFixed(2):abs_y===0?"":e},Rickshaw.namespace("Rickshaw.Color.Palette"),Rickshaw.Color.Palette=function(e){var t=new Rickshaw.Fixtures.Color;e=e||{},this.schemes={},this.scheme=t.schemes[e.scheme]||e.scheme||t.schemes.colorwheel,this.runningIndex=0,this.generatorIndex=0;if(e.interpolatedStopCount){var n=this.scheme.length-1,r,i,s=[];for(r=0;r<n;r++){s.push(this.scheme[r]);var o=d3.interpolateHsl(this.scheme[r],this.scheme[r+1]);for(i=1;i<e.interpolatedStopCount;i++)s.push(o(1/e.interpolatedStopCount*i))}s.push(this.scheme[this.scheme.length-1]),this.scheme=s}this.rotateCount=this.scheme.length,this.color=function(e){return this.scheme[e]||this.scheme[this.runningIndex++]||this.interpolateColor()||"#808080"},this.interpolateColor=function(){if(!Array.isArray(this.scheme))return;var e;return this.generatorIndex==this.rotateCount*2-1?(e=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[0])(.5),this.generatorIndex=0,this.rotateCount*=2):(e=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[this.generatorIndex+1])(.5),this.generatorIndex++),this.scheme.push(e),e}},Rickshaw.namespace("Rickshaw.Graph.Ajax"),Rickshaw.Graph.Ajax=Rickshaw.Class.create({initialize:function(e){this.dataURL=e.dataURL,this.onData=e.onData||function(e){return e},this.onComplete=e.onComplete||function(){},this.onError=e.onError||function(){},this.args=e,this.request()},request:function(){$.ajax({url:this.dataURL,dataType:"json",success:this.success.bind(this),error:this.error.bind(this)})},error:function(){console.log("error loading dataURL: "+this.dataURL),this.onError(this)},success:function(e,t){e=this.onData(e),this.args.series=this._splice({data:e,series:this.args.series}),this.graph=this.graph||new Rickshaw.Graph(this.args),this.graph.render(),this.onComplete(this)},_splice:function(e){var t=e.data,n=e.series;return e.series?(n.forEach(function(e){var n=e.key||e.name;if(!n)throw"series needs a key or a name";t.forEach(function(t){var r=t.key||t.name;if(!r)throw"data needs a key or a name";if(n==r){var i=["color","name","data"];i.forEach(function(n){t[n]&&(e[n]=t[n])})}})}),n):t}}),Rickshaw.namespace("Rickshaw.Graph.Annotate"),Rickshaw.Graph.Annotate=function(e){var t=this.graph=e.graph;this.elements={timeline:e.element};var n=this;this.data={},this.elements.timeline.classList.add("rickshaw_annotation_timeline"),this.add=function(e,t,r){n.data[e]=n.data[e]||{boxes:[]},n.data[e].boxes.push({content:t,end:r})},this.update=function(){Rickshaw.keys(n.data).forEach(function(e){var t=n.data[e],r=n.graph.x(e);if(r<0||r>n.graph.x.range()[1]){t.element&&(t.line.classList.add("offscreen"),t.element.style.display="none"),t.boxes.forEach(function(e){e.rangeElement&&e.rangeElement.classList.add("offscreen")});return}if(!t.element){var i=t.element=document.createElement("div");i.classList.add("annotation"),this.elements.timeline.appendChild(i),i.addEventListener("click",function(e){i.classList.toggle("active"),t.line.classList.toggle("active"),t.boxes.forEach(function(e){e.rangeElement&&e.rangeElement.classList.toggle("active")})},!1)}t.element.style.left=r+"px",t.element.style.display="block",t.boxes.forEach(function(e){var i=e.element;i||(i=e.element=document.createElement("div"),i.classList.add("content"),i.innerHTML=e.content,t.element.appendChild(i),t.line=document.createElement("div"),t.line.classList.add("annotation_line"),n.graph.element.appendChild(t.line),e.end&&(e.rangeElement=document.createElement("div"),e.rangeElement.classList.add("annotation_range"),n.graph.element.appendChild(e.rangeElement)));if(e.end){var s=r,o=Math.min(n.graph.x(e.end),n.graph.x.range()[1]);s>o&&(o=r,s=Math.max(n.graph.x(e.end),n.graph.x.range()[0]));var u=o-s;e.rangeElement.style.left=s+"px",e.rangeElement.style.width=u+"px",e.rangeElement.classList.remove("offscreen")}t.line.classList.remove("offscreen"),t.line.style.left=r+"px"})},this)},this.graph.onUpdate(function(){n.update()})},Rickshaw.namespace("Rickshaw.Graph.Axis.Time"),Rickshaw.Graph.Axis.Time=function(e){var t=this;this.graph=e.graph,this.elements=[],this.ticksTreatment=e.ticksTreatment||"plain",this.fixedTimeUnit=e.timeUnit;var n=new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var e,t=n.units,r=this.graph.x.domain(),i=r[1]-r[0];return t.forEach(function(t){Math.floor(i/t.seconds)>=2&&(e=e||t)}),e||n.units[n.units.length-1]},this.tickOffsets=function(){var e=this.graph.x.domain(),t=this.fixedTimeUnit||this.appropriateTimeUnit(),r=Math.ceil((e[1]-e[0])/t.seconds),i=e[0],s=[];for(var o=0;o<r;o++){var u=n.ceil(i,t);i=u+t.seconds/2,s.push({value:u,unit:t})}return s},this.render=function(){this.elements.forEach(function(e){e.parentNode.removeChild(e)}),this.elements=[];var e=this.tickOffsets();e.forEach(function(e){if(t.graph.x(e.value)>t.graph.x.range()[1])return;var n=document.createElement("div");n.style.left=t.graph.x(e.value)+"px",n.classList.add("x_tick"),n.classList.add(t.ticksTreatment);var r=document.createElement("div");r.classList.add("title"),r.innerHTML=e.unit.formatter(new Date(e.value*1e3)),n.appendChild(r),t.graph.element.appendChild(n),t.elements.push(n)})},this.graph.onUpdate(function(){t.render()})},Rickshaw.namespace("Rickshaw.Graph.Axis.X"),Rickshaw.Graph.Axis.X=function(e){var t=this,n=.1;this.initialize=function(e){this.graph=e.graph,this.orientation=e.orientation||"top";var n=e.pixelsPerTick||75;this.ticks=e.ticks||Math.floor(this.graph.width/n),this.tickSize=e.tickSize||4,this.ticksTreatment=e.ticksTreatment||"plain",e.element?(this.element=e.element,this._discoverSize(e.element,e),this.vis=d3.select(e.element).append("svg:svg").attr("height",this.height).attr("width",this.width).attr("class","rickshaw_graph x_axis_d3"),this.element=this.vis[0][0],this.element.style.position="relative",this.setSize({width:e.width,height:e.height})):this.vis=this.graph.vis,this.graph.onUpdate(function(){t.render()})},this.setSize=function(e){e=e||{};if(!this.element)return;this._discoverSize(this.element.parentNode,e),this.vis.attr("height",this.height).attr("width",this.width*(1+n));var t=Math.floor(this.width*n/2);this.element.style.left=-1*t+"px"},this.render=function(){this.graph.width!==this._renderWidth&&this.setSize({auto:!0});var t=d3.svg.axis().scale(this.graph.x).orient(this.orientation);t.tickFormat(e.tickFormat||function(e){return e});var r=Math.floor(this.width*n/2)||0,i;if(this.orientation=="top"){var s=this.height||this.graph.height;i="translate("+r+","+s+")"}else i="translate("+r+", 0)";this.element&&this.vis.selectAll("*").remove(),this.vis.append("svg:g").attr("class",["x_ticks_d3",this.ticksTreatment].join(" ")).attr("transform",i).call(t.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var o=(this.orientation=="bottom"?1:-1)*this.graph.height;this.graph.vis.append("svg:g").attr("class","x_grid_d3").call(t.ticks(this.ticks).tickSubdivide(0).tickSize(o)),this._renderHeight=this.graph.height},this._discoverSize=function(e,t){if(typeof window!="undefined"){var r=window.getComputedStyle(e,null),i=parseInt(r.getPropertyValue("height"),10);if(!t.auto)var s=parseInt(r.getPropertyValue("width"),10)}this.width=(t.width||s||this.graph.width)*(1+n),this.height=t.height||i||40},this.initialize(e)},Rickshaw.namespace("Rickshaw.Graph.Axis.Y"),Rickshaw.Graph.Axis.Y=function(e){var t=this,n=.1;this.initialize=function(e){this.graph=e.graph,this.orientation=e.orientation||"right";var n=e.pixelsPerTick||75;this.ticks=e.ticks||Math.floor(this.graph.height/n),this.tickSize=e.tickSize||4,this.ticksTreatment=e.ticksTreatment||"plain",e.element?(this.element=e.element,this.vis=d3.select(e.element).append("svg:svg").attr("class","rickshaw_graph y_axis"),this.element=this.vis[0][0],this.element.style.position="relative",this.setSize({width:e.width,height:e.height})):this.vis=this.graph.vis,this.graph.onUpdate(function(){t.render()})},this.setSize=function(e){e=e||{};if(!this.element)return;if(typeof window!="undefined"){var t=window.getComputedStyle(this.element.parentNode,null),r=parseInt(t.getPropertyValue("width"),10);if(!e.auto)var i=parseInt(t.getPropertyValue("height"),10)}this.width=e.width||r||this.graph.width*n,this.height=e.height||i||this.graph.height,this.vis.attr("width",this.width).attr("height",this.height*(1+n));var s=this.height*n;this.element.style.top=-1*s+"px"},this.render=function(){this.graph.height!==this._renderHeight&&this.setSize({auto:!0});var t=d3.svg.axis().scale(this.graph.y).orient(this.orientation);t.tickFormat(e.tickFormat||function(e){return e});if(this.orientation=="left")var r=this.height*n,i="translate("+this.width+", "+r+")";this.element&&this.vis.selectAll("*").remove(),this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",i).call(t.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var s=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(t.ticks(this.ticks).tickSubdivide(0).tickSize(s)),this._renderHeight=this.graph.height},this.initialize(e)},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight"),Rickshaw.Graph.Behavior.Series.Highlight=function(e){this.graph=e.graph,this.legend=e.legend;var t=this,n={},r=null;this.addHighlightEvents=function(e){e.element.addEventListener("mouseover",function(i){if(r)return;r=e,t.legend.lines.forEach(function(r,i){if(e===r){if(i>0&&t.graph.renderer.unstack){var s=t.graph.series.length-i-1;r.originalIndex=s;var o=t.graph.series.splice(s,1)[0];t.graph.series.push(o)}return}n[r.series.name]=n[r.series.name]||r.series.color,r.series.color=d3.interpolateRgb(r.series.color,d3.rgb("#d8d8d8"))(.8).toString()}),t.graph.update()},!1),e.element.addEventListener("mouseout",function(i){if(!r)return;r=null,t.legend.lines.forEach(function(r){if(e===r&&r.hasOwnProperty("originalIndex")){var i=t.graph.series.pop();t.graph.series.splice(r.originalIndex,0,i),delete r.originalIndex}n[r.series.name]&&(r.series.color=n[r.series.name])}),t.graph.update()},!1)},this.legend&&this.legend.lines.forEach(function(e){t.addHighlightEvents(e)})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order"),Rickshaw.Graph.Behavior.Series.Order=function(e){this.graph=e.graph,this.legend=e.legend;var t=this;if(typeof window.$=="undefined")throw"couldn't find jQuery at window.$";if(typeof window.$.ui=="undefined")throw"couldn't find jQuery UI at window.$.ui";$(function(){$(t.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(e,n){var r=[];$(t.legend.list).find("li").each(function(e,t){if(!t.series)return;r.push(t.series)});for(var i=t.graph.series.length-1;i>=0;i--)t.graph.series[i]=r.shift();t.graph.update()}}),$(t.legend.list).disableSelection()}),this.graph.onUpdate(function(){var e=window.getComputedStyle(t.legend.element).height;t.legend.element.style.height=e})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle"),Rickshaw.Graph.Behavior.Series.Toggle=function(e){this.graph=e.graph,this.legend=e.legend;var t=this;this.addAnchor=function(e){var n=document.createElement("a");n.innerHTML="✔",n.classList.add("action"),e.element.insertBefore(n,e.element.firstChild),n.onclick=function(t){e.series.disabled?(e.series.enable(),e.element.classList.remove("disabled")):(e.series.disable(),e.element.classList.add("disabled"))};var r=e.element.getElementsByTagName("span")[0];r.onclick=function(n){var r=e.series.disabled;if(!r)for(var i=0;i<t.legend.lines.length;i++){var s=t.legend.lines[i];if(e.series!==s.series&&!s.series.disabled){r=!0;break}}r?(e.series.enable(),e.element.classList.remove("disabled"),t.legend.lines.forEach(function(t){e.series!==t.series&&(t.series.disable(),t.element.classList.add("disabled"))})):t.legend.lines.forEach(function(e){e.series.enable(),e.element.classList.remove("disabled")})}},this.legend&&(typeof $!="undefined"&&$(this.legend.list).sortable&&$(this.legend.list).sortable({start:function(e,t){t.item.bind("no.onclick",function(e){e.preventDefault()})},stop:function(e,t){setTimeout(function(){t.item.unbind("no.onclick")},250)}}),this.legend.lines.forEach(function(e){t.addAnchor(e)})),this._addBehavior=function(){this.graph.series.forEach(function(e){e.disable=function(){if(t.graph.series.length<=1)throw"only one series left";e.disabled=!0,t.graph.update()},e.enable=function(){e.disabled=!1,t.graph.update()}})},this._addBehavior(),this.updateBehaviour=function(){this._addBehavior()}},Rickshaw.namespace("Rickshaw.Graph.HoverDetail"),Rickshaw.Graph.HoverDetail=Rickshaw.Class.create({initialize:function(e){var t=this.graph=e.graph;this.xFormatter=e.xFormatter||function(e){return(new Date(e*1e3)).toUTCString()},this.yFormatter=e.yFormatter||function(e){return e===null?e:e.toFixed(2)};var n=this.element=document.createElement("div");n.className="detail",this.visible=!0,t.element.appendChild(n),this.lastEvent=null,this._addListeners(),this.onShow=e.onShow,this.onHide=e.onHide,this.onRender=e.onRender,this.formatter=e.formatter||this.formatter},formatter:function(e,t,n,r,i,s){return e.name+": "+i},update:function(e){e=e||this.lastEvent;if(!e)return;this.lastEvent=e;if(!e.target.nodeName.match(/^(path|svg|rect)$/))return;var t=this.graph,n=e.offsetX||e.layerX,r=e.offsetY||e.layerY,i=0,s=[],o;this.graph.series.active().forEach(function(e){var u=this.graph.stackedData[i++],a=t.x.invert(n),f=d3.scale.linear().domain([u[0].x,u.slice(-1)[0].x]).range([0,u.length-1]),l=Math.round(f(a)),c=Math.min(l||0,u.length-1);for(var h=l;h<u.length-1;){if(!u[h]||!u[h+1])break;if(u[h].x<=a&&u[h+1].x>a){c=h;break}u[h+1].x<=a?h++:h--}c<0&&(c=0);var p=u[c],d=Math.sqrt(Math.pow(Math.abs(t.x(p.x)-n),2)+Math.pow(Math.abs(t.y(p.y+p.y0)-r),2)),v=e.xFormatter||this.xFormatter,m=e.yFormatter||this.yFormatter,g={formattedXValue:v(p.x),formattedYValue:m(p.y),series:e,value:p,distance:d,order:i,name:e.name};if(!o||d<o.distance)o=g;s.push(g)},this),o.active=!0;var u=o.value.x,a=o.formattedXValue;this.element.innerHTML="",this.element.style.left=t.x(u)+"px",this.visible&&this.render({points:s,detail:s,mouseX:n,mouseY:r,formattedXValue:a,domainX:u})},hide:function(){this.visible=!1,this.element.classList.add("inactive"),typeof this.onHide=="function"&&this.onHide()},show:function(){this.visible=!0,this.element.classList.remove("inactive"),typeof this.onShow=="function"&&this.onShow()},render:function(e){var t=this.graph,n=e.points,r=n.filter(function(e){return e.active}).shift();if(r.value.y===null)return;var i=this.xFormatter(r.value.x),s=this.yFormatter(r.value.y);this.element.innerHTML="",this.element.style.left=t.x(r.value.x)+"px";var o=document.createElement("div");o.className="x_label",o.innerHTML=i,this.element.appendChild(o);var u=document.createElement("div");u.className="item",u.innerHTML=this.formatter(r.series,r.value.x,r.value.y,i,s,r),u.style.top=this.graph.y(r.value.y0+r.value.y)+"px",this.element.appendChild(u);var a=document.createElement("div");a.className="dot",a.style.top=u.style.top,a.style.borderColor=r.series.color,this.element.appendChild(a),r.active&&(u.className="item active",a.className="dot active"),this.show(),typeof this.onRender=="function"&&this.onRender(e)},_addListeners:function(){this.graph.element.addEventListener("mousemove",function(e){this.visible=!0,this.update(e)}.bind(this),!1),this.graph.onUpdate(function(){this.update()}.bind(this)),this.graph.element.addEventListener("mouseout",function(e){e.relatedTarget&&!(e.relatedTarget.compareDocumentPosition(this.graph.element)&Node.DOCUMENT_POSITION_CONTAINS)&&this.hide()}.bind(this),!1)}}),Rickshaw.namespace("Rickshaw.Graph.JSONP"),Rickshaw.Graph.JSONP=Rickshaw.Class.create(Rickshaw.Graph.Ajax,{request:function(){$.ajax({url:this.dataURL,dataType:"jsonp",success:this.success.bind(this),error:this.error.bind(this)})}}),Rickshaw.namespace("Rickshaw.Graph.Legend"),Rickshaw.Graph.Legend=function(e){var t=this.element=e.element,n=this.graph=e.graph,r=this;t.classList.add("rickshaw_legend");var i=this.list=document.createElement("ul");t.appendChild(i);var s=n.series.map(function(e){return e});e.naturalOrder||(s=s.reverse()),this.lines=[],this.addLine=function(e){var t=document.createElement("li");t.className="line",e.disabled&&(t.className+=" disabled");var n=document.createElement("div");n.className="swatch",n.style.backgroundColor=e.color,t.appendChild(n);var s=document.createElement("span");s.className="label",s.innerHTML=e.name,t.appendChild(s),i.appendChild(t),t.series=e,e.noLegend&&(t.style.display="none");var o={element:t,series:e};r.shelving&&(r.shelving.addAnchor(o),r.shelving.updateBehaviour()),r.highlighter&&r.highlighter.addHighlightEvents(o),r.lines.push(o)},s.forEach(function(e){r.addLine(e)}),n.onUpdate(function(){})},Rickshaw.namespace("Rickshaw.Graph.RangeSlider"),Rickshaw.Graph.RangeSlider=Rickshaw.Class.create({initialize:function(e){var t=this.element=e.element,n=this.graph=e.graph;this.build(),n.onUpdate(function(){this.update()}.bind(this))},build:function(){var e=this.element,t=this.graph;$(function(){$(e).slider({range:!0,min:t.dataDomain()[0],max:t.dataDomain()[1],values:[t.dataDomain()[0],t.dataDomain()[1]],slide:function(e,n){t.window.xMin=n.values[0],t.window.xMax=n.values[1],t.update(),t.dataDomain()[0]==n.values[0]&&(t.window.xMin=undefined),t.dataDomain()[1]==n.values[1]&&(t.window.xMax=undefined)}})}),e[0].style.width=t.width+"px"},update:function(){var e=this.element,t=this.graph,n=$(e).slider("option","values");$(e).slider("option","min",t.dataDomain()[0]),$(e).slider("option","max",t.dataDomain()[1]),t.window.xMin==null&&(n[0]=t.dataDomain()[0]),t.window.xMax==null&&(n[1]=t.dataDomain()[1]),$(e).slider("option","values",n)}}),Rickshaw.namespace("Rickshaw.Graph.Renderer"),Rickshaw.Graph.Renderer=Rickshaw.Class.create({initialize:function(e){this.graph=e.graph,this.tension=e.tension||this.tension,this.graph.unstacker=this.graph.unstacker||new Rickshaw.Graph.Unstacker({graph:this.graph}),this.configure(e)},seriesPathFactory:function(){},seriesStrokeFactory:function(){},defaults:function(){return{tension:.8,strokeWidth:2,unstack:!0,padding:{top:.01,right:0,bottom:.01,left:0},stroke:!1,fill:!1}},domain:function(){var e={xMin:[],xMax:[],y:[]},t=this.graph.stackedData||this.graph.stackData(),n=t[0][0],r=n.x,i=n.x,s=n.y+n.y0,o=n.y+n.y0;t.forEach(function(e){e.forEach(function(e){if(e.y==null)return;var t=e.y+e.y0;t<s&&(s=t),t>o&&(o=t)}),e[0].x<r&&(r=e[0].x),e[e.length-1].x>i&&(i=e[e.length-1].x)}),r-=(i-r)*this.padding.left,i+=(i-r)*this.padding.right,s=this.graph.min==="auto"?s:this.graph.min||0,o=this.graph.max===undefined?o:this.graph.max;if(this.graph.min==="auto"||s<0)s-=(o-s)*this.padding.bottom;return this.graph.max===undefined&&(o+=(o-s)*this.padding.top),{x:[r,i],y:[s,o]}},render:function(){var e=this.graph;e.vis.selectAll("*").remove();var t=e.vis.selectAll("path").data(this.graph.stackedData).enter().append("svg:path").attr("d",this.seriesPathFactory()),n=0;e.series.forEach(function(e){if(e.disabled)return;e.path=t[0][n++],this._styleSeries(e)},this)},_styleSeries:function(e){var t=this.fill?e.color:"none",n=this.stroke?e.color:"none";e.path.setAttribute("fill",t),e.path.setAttribute("stroke",n),e.path.setAttribute("stroke-width",this.strokeWidth),e.path.setAttribute("class",e.className)},configure:function(e){e=e||{},Rickshaw.keys(this.defaults()).forEach(function(t){if(!e.hasOwnProperty(t)){this[t]=this[t]||this.graph[t]||this.defaults()[t];return}typeof this.defaults()[t]=="object"?Rickshaw.keys(this.defaults()[t]).forEach(function(n){this[t][n]=e[t][n]!==undefined?e[t][n]:this[t][n]!==undefined?this[t][n]:this.defaults()[t][n]},this):this[t]=e[t]!==undefined?e[t]:this[t]!==undefined?this[t]:this.graph[t]!==undefined?this.graph[t]:this.defaults()[t]},this)},setStrokeWidth:function(e){e!==undefined&&(this.strokeWidth=e)},setTension:function(e){e!==undefined&&(this.tension=e)}}),Rickshaw.namespace("Rickshaw.Graph.Renderer.Line"),Rickshaw.Graph.Renderer.Line=Rickshaw
stack: function(data) {
return d3.layout.stack()(data);
},
* Is a EventEmitter. See EVENTS for how components should be notified of new data.
*/
var _ = require('lodash');
var d3 = require('d3');
var numeral = require('numeral');
var Reflux = require('reflux');
var actions = require('actions/actionsEnum');
var Exit = require('models/Exit');
var ShareClass = require('models/ShareClass');
// Layout calculators
var PERCENTAGE_STACK_CALC = d3.layout.stack().values(stake => stake.percentages).y(o => o.n);
var VALUE_STACK_CALC = d3.layout.stack().values(stake => stake.values ).y(o => o.n);
var PERCENTAGE_FORMATTER = d3.format('%');
numeral.language('en', {
delimiters: {
thousands: ',',
decimal: '.'
},
abbreviations: {
thousand: 'k',
million: 'M',
billion: 'B',
trillion: 'T'
import d3 from 'd3';
var n = 20, // number of layers
m = 200, // number of samples per layer
stack = d3.layout.stack().offset("wiggle"),
layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));
var width = 960,
height = 500;
var x = d3.scale.linear()
.domain([0, m - 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);
var color = d3.scale.linear()
.range(["#aad", "#556"]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select("body").append("svg")
.attr('id', 'chart')
.attr("width", width)
.attr("height", height);
},
updateClipPath() {
var data = this.internalStorage_get();
var props = this.props;
var width = props.width - props.margin.left - props.margin.right;
var height = props.height + 1; // +1 for the base axis line
d3.select("#" + data.clipPathID + " rect").attr({
width,
height
});
},
getStack() {
return d3.layout
.stack()
.values(function(d) {
return d.values;
})
.x(function(d) {
return d.date;
});
},
getYScale(props) {
return d3.scale.linear().domain([0, props.maxY]).range([props.height, 0]);
},
formatYAxis(ticks, maxY) {
var formatPercent = d3.scale.linear().tickFormat(ticks, ".0%");
function chart(csvpath, color) {
if (color == "blue") {
colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
var strokecolor = colorrange[0];
var format = d3.time.format("%m/%d/%y");
var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-10, 0]);
var z = d3.scale.ordinal()
.range(colorrange);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.weeks);
var yAxis = d3.svg.axis()
.scale(y);
var yAxisr = d3.svg.axis()
.scale(y);
var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(node).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select(node)
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "900px")
.style("left", "55px");
var graph = d3.csv(csvpath, function(data) {
data.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var layers = stack(nest.entries(data));
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxis.orient("right"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis.orient("left"));
svg.selectAll(".layer")
.attr("opacity", 1)
.on("mouseover", function(d, i) {
d3.selectAll(".layer").transition()
.duration(250)
.attr("opacity", function(d, j) {
return j != i ? 0.6 : 1;
});
})
.on("mousemove", function(d, i) {
var mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var selected = (d.values);
for (var k = 0; k < selected.length; k++) {
datearray[k] = selected[k].date;
datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
}
var mousedate = datearray.indexOf(invertedx);
var pro = d.values[mousedate].value;
d3.select(this)
.classed("hover", true)
.attr("stroke", strokecolor)
.attr("stroke-width", "0.5px");
d3.select('.remove').html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
})
.on("mouseout", function(d, i) {
var mousex = d3.mouse(this);
mousex = mousex[0];
var invertedx = x.invert(mousex);
invertedx = invertedx.getMonth() + invertedx.getDate();
var mousedate = datearray.indexOf(invertedx);
var pro = d.values[mousedate].value;
d3.selectAll(".layer")
.transition()
.duration(250)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke-width", "0px");
d3.select('.remove').html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
});
var vertical = d3.select(node)
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "950px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");
d3.select(node).select('svg')
.on("mousemove", function(){
var mousex = d3.mouse(this);
mousex = mousex[0] + 10;
d3.selectAll('.remove').style("left", mousex + "px" );
})
.on("mouseover", function(){
var mousex = d3.mouse(this);
mousex = mousex[0] + 10;
d3.selectAll('.remove').style("left", mousex + "px");
});
});
}
var Rickshaw={namespace:function(namespace,obj){var parts=namespace.split(".");var parent=Rickshaw;for(var i=1,length=parts.length;i<length;i++){var currentPart=parts[i];parent[currentPart]=parent[currentPart]||{};parent=parent[currentPart]}return parent},keys:function(obj){var keys=[];for(var key in obj)keys.push(key);return keys},extend:function(destination,source){for(var property in source){destination[property]=source[property]}return destination}};if(typeof module!=="undefined"&&module.exports){var d3=require("d3");module.exports=Rickshaw}(function(globalContext){var _toString=Object.prototype.toString,NULL_TYPE="Null",UNDEFINED_TYPE="Undefined",BOOLEAN_TYPE="Boolean",NUMBER_TYPE="Number",STRING_TYPE="String",OBJECT_TYPE="Object",FUNCTION_CLASS="[object Function]";function isFunction(object){return _toString.call(object)===FUNCTION_CLASS}function extend(destination,source){for(var property in source)if(source.hasOwnProperty(property))destination[property]=source[property];return destination}function keys(object){if(Type(object)!==OBJECT_TYPE){throw new TypeError}var results=[];for(var property in object){if(object.hasOwnProperty(property)){results.push(property)}}return results}function Type(o){switch(o){case null:return NULL_TYPE;case void 0:return UNDEFINED_TYPE}var type=typeof o;switch(type){case"boolean":return BOOLEAN_TYPE;case"number":return NUMBER_TYPE;case"string":return STRING_TYPE}return OBJECT_TYPE}function isUndefined(object){return typeof object==="undefined"}var slice=Array.prototype.slice;function argumentNames(fn){var names=fn.toString().match(/^[\s\(]*function[^(]*\(([^)]*)\)/)[1].replace(/\/\/.*?[\r\n]|\/\*(?:.|[\r\n])*?\*\//g,"").replace(/\s+/g,"").split(",");return names.length==1&&!names[0]?[]:names}function wrap(fn,wrapper){var __method=fn;return function(){var a=update([bind(__method,this)],arguments);return wrapper.apply(this,a)}}function update(array,args){var arrayLength=array.length,length=args.length;while(length--)array[arrayLength+length]=args[length];return array}function merge(array,args){array=slice.call(array,0);return update(array,args)}function bind(fn,context){if(arguments.length<2&&isUndefined(arguments[0]))return this;var __method=fn,args=slice.call(arguments,2);return function(){var a=merge(args,arguments);return __method.apply(context,a)}}var emptyFunction=function(){};var Class=function(){var IS_DONTENUM_BUGGY=function(){for(var p in{toString:1}){if(p==="toString")return false}return true}();function subclass(){}function create(){var parent=null,properties=[].slice.apply(arguments);if(isFunction(properties[0]))parent=properties.shift();function klass(){this.initialize.apply(this,arguments)}extend(klass,Class.Methods);klass.superclass=parent;klass.subclasses=[];if(parent){subclass.prototype=parent.prototype;klass.prototype=new subclass;try{parent.subclasses.push(klass)}catch(e){}}for(var i=0,length=properties.length;i<length;i++)klass.addMethods(properties[i]);if(!klass.prototype.initialize)klass.prototype.initialize=emptyFunction;klass.prototype.constructor=klass;return klass}function addMethods(source){var ancestor=this.superclass&&this.superclass.prototype,properties=keys(source);if(IS_DONTENUM_BUGGY){if(source.toString!=Object.prototype.toString)properties.push("toString");if(source.valueOf!=Object.prototype.valueOf)properties.push("valueOf")}for(var i=0,length=properties.length;i<length;i++){var property=properties[i],value=source[property];if(ancestor&&isFunction(value)&&argumentNames(value)[0]=="$super"){var method=value;value=wrap(function(m){return function(){return ancestor[m].apply(this,arguments)}}(property),method);value.valueOf=bind(method.valueOf,method);value.toString=bind(method.toString,method)}this.prototype[property]=value}return this}return{create:create,Methods:{addMethods:addMethods}}}();if(globalContext.exports){globalContext.exports.Class=Class}else{globalContext.Class=Class}})(Rickshaw);Rickshaw.namespace("Rickshaw.Compat.ClassList");Rickshaw.Compat.ClassList=function(){if(typeof document!=="undefined"&&!("classList"in document.createElement("a"))){(function(view){"use strict";var classListProp="classList",protoProp="prototype",elemCtrProto=(view.HTMLElement||view.Element)[protoProp],objCtr=Object,strTrim=String[protoProp].trim||function(){return this.replace(/^\s+|\s+$/g,"")},arrIndexOf=Array[protoProp].indexOf||function(item){var i=0,len=this.length;for(;i<len;i++){if(i in this&&this[i]===item){return i}}return-1},DOMEx=function(type,message){this.name=type;this.code=DOMException[type];this.message=message},checkTokenAndGetIndex=function(classList,token){if(token===""){throw new DOMEx("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(token)){throw new DOMEx("INVALID_CHARACTER_ERR","String contains an invalid character")}return arrIndexOf.call(classList,token)},ClassList=function(elem){var trimmedClasses=strTrim.call(elem.className),classes=trimmedClasses?trimmedClasses.split(/\s+/):[],i=0,len=classes.length;for(;i<len;i++){this.push(classes[i])}this._updateClassName=function(){elem.className=this.toString()}},classListProto=ClassList[protoProp]=[],classListGetter=function(){return new ClassList(this)};DOMEx[protoProp]=Error[protoProp];classListProto.item=function(i){return this[i]||null};classListProto.contains=function(token){token+="";return checkTokenAndGetIndex(this,token)!==-1};classListProto.add=function(token){token+="";if(checkTokenAndGetIndex(this,token)===-1){this.push(token);this._updateClassName()}};classListProto.remove=function(token){token+="";var index=checkTokenAndGetIndex(this,token);if(index!==-1){this.splice(index,1);this._updateClassName()}};classListProto.toggle=function(token){token+="";if(checkTokenAndGetIndex(this,token)===-1){this.add(token)}else{this.remove(token)}};classListProto.toString=function(){return this.join(" ")};if(objCtr.defineProperty){var classListPropDesc={get:classListGetter,enumerable:true,configurable:true};try{objCtr.defineProperty(elemCtrProto,classListProp,classListPropDesc)}catch(ex){if(ex.number===-2146823252){classListPropDesc.enumerable=false;objCtr.defineProperty(elemCtrProto,classListProp,classListPropDesc)}}}else if(objCtr[protoProp].__defineGetter__){elemCtrProto.__defineGetter__(classListProp,classListGetter)}})(window)}};if(typeof RICKSHAW_NO_COMPAT!=="undefined"&&!RICKSHAW_NO_COMPAT||typeof RICKSHAW_NO_COMPAT==="undefined"){new Rickshaw.Compat.ClassList}Rickshaw.namespace("Rickshaw.Graph");Rickshaw.Graph=function(args){this.element=args.element;this.series=args.series;this.defaults={interpolation:"cardinal",offset:"zero",min:undefined,max:undefined};Rickshaw.keys(this.defaults).forEach(function(k){this[k]=args[k]||this.defaults[k]},this);this.window={};this.updateCallbacks=[];var self=this;this.initialize=function(args){this.validateSeries(args.series);this.series.active=function(){return self.series.filter(function(s){return!s.disabled})};this.setSize({width:args.width,height:args.height});this.element.classList.add("rickshaw_graph");this.vis=d3.select(this.element).append("svg:svg").attr("width",this.width).attr("height",this.height);var renderers=[Rickshaw.Graph.Renderer.Stack,Rickshaw.Graph.Renderer.Line,Rickshaw.Graph.Renderer.Bar,Rickshaw.Graph.Renderer.Area,Rickshaw.Graph.Renderer.Pie,Rickshaw.Graph.Renderer.ScatterPlot];renderers.forEach(function(r){if(!r)return;self.registerRenderer(new r({graph:self}))});this.setRenderer(args.renderer||"stack",args);this.discoverRange()};this.validateSeries=function(series){if(!(series instanceof Array)&&!(series instanceof Rickshaw.Series)){var seriesSignature=Object.prototype.toString.apply(series);throw"series is not an array: "+seriesSignature}var pointsCount;series.forEach(function(s){if(!(s instanceof Object)){throw"series element is not an object: "+s}if(!s.data){throw"series has no data: "+JSON.stringify(s)}if(!(s.data instanceof Array)){throw"series data is not an array: "+JSON.stringify(s.data)}var x=s.data[0].x;var y=s.data[0].y;if(typeof x!="number"||typeof y!="number"&&y!==null){throw"x and y properties of points should be numbers instead of "+typeof x+" and "+typeof y}},this)};this.dataDomain=function(){var data=this.series[0].data;return[data[0].x,data.slice(-1).shift().x]};this.discoverRange=function(){var domain=this.renderer.domain();this.x=d3.scale.linear().domain(domain.x).range([0,this.width]);this.y=d3.scale.linear().domain(domain.y).range([this.height,0]);this.y.magnitude=d3.scale.linear().domain([domain.y[0]-domain.y[0],domain.y[1]-domain.y[0]]).range([0,this.height])};this.render=function(){var stackedData=this.stackData();this.discoverRange();this.renderer.render();this.updateCallbacks.forEach(function(callback){callback()})};this.update=this.render;this.stackData=function(){var data=this.series.active().map(function(d){return d.data}).map(function(d){return d.filter(function(d){return this._slice(d)},this)},this);this.stackData.hooks.data.forEach(function(entry){data=entry.f.apply(self,[data])});var stackedData;if(!this.renderer.unstack){this._validateStackable();var layout=d3.layout.stack();layout.offset(self.offset);stackedData=layout(data)}stackedData=stackedData||data;this.stackData.hooks.after.forEach(function(entry){stackedData=entry.f.apply(self,[data])});var i=0;this.series.forEach(function(series){if(series.disabled)return;series.stack=stackedData[i++]});this.stackedData=stackedData;return stackedData};this._validateStackable=function(){var series=this.series;var pointsCount;series.forEach(function(s){pointsCount=pointsCount||s.data.length;if(pointsCount&&s.data.length!=pointsCount){throw"stacked series cannot have differing numbers of points: "+pointsCount+" vs "+s.data.length+"; see Rickshaw.Series.fill()"}},this)};this.stackData.hooks={data:[],after:[]};this._slice=function(d){if(this.window.xMin||this.window.xMax){var isInRange=true;if(this.window.xMin&&d.x<this.window.xMin)isInRange=false;if(this.window.xMax&&d.x>this.window.xMax)isInRange=false;return isInRange}return true};this.onUpdate=function(callback){this.updateCallbacks.push(callback)};this.registerRenderer=function(renderer){this._renderers=this._renderers||{};this._renderers[renderer.name]=renderer};this.configure=function(args){if(args.width||args.height){this.setSize(args)}Rickshaw.keys(this.defaults).forEach(function(k){this[k]=k in args?args[k]:k in this?this[k]:this.defaults[k]},this);this.setRenderer(args.renderer||this.renderer.name,args)};this.setRenderer=function(name,args){if(!this._renderers[name]){throw"couldn't find renderer "+name}this.renderer=this._renderers[name];if(typeof args=="object"){this.renderer.configure(args)}};this.setSize=function(args){args=args||{};if(typeof window!==undefined){var style=window.getComputedStyle(this.element,null);var elementWidth=parseInt(style.getPropertyValue("width"));var elementHeight=parseInt(style.getPropertyValue("height"))}this.width=args.width||elementWidth||400;this.height=args.height||elementHeight||250;this.vis&&this.vis.attr("width",this.width).attr("height",this.height)};this.initialize(args)};Rickshaw.namespace("Rickshaw.Fixtures.Color");Rickshaw.Fixtures.Color=function(){this.schemes={};this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse();this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"];this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"];this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse();this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"};this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse();this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"];this.schemes.munin=["#00cc00","#0066b3","#ff8000","#ffcc00","#330099","#990099","#ccff00","#ff0000","#808080","#008f00","#00487d","#b35a00","#b38f00","#6b006b","#8fb300","#b30000","#bebebe","#80ff80","#80c9ff","#ffc080","#ffe680","#aa80ff","#ee00cc","#ff8080","#666600","#ffbfff","#00ffcc","#cc6699","#999900"]};Rickshaw.namespace("Rickshaw.Fixtures.RandomData");Rickshaw.Fixtures.RandomData=function(timeInterval){var addData;timeInterval=timeInterval||1;var lastRandomValue=200;var timeBase=Math.floor((new Date).getTime()/1e3);this.addData=function(data){var randomValue=Math.random()*100+15+lastRandomValue;var index=data[0].length;var counter=1;data.forEach(function(series){var randomVariance=Math.random()*20;var v=randomValue/25+counter++ +(Math.cos(index*counter*11/960)+2)*15+(Math.cos(index/7)+2)*7+(Math.cos(index/17)+2)*1;series.push({x:index*timeInterval+timeBase,y:v+randomVariance})});lastRandomValue=randomValue*.85}};Rickshaw.namespace("Rickshaw.Fixtures.Time");Rickshaw.Fixtures.Time=function(){var tzOffset=(new Date).getTimezoneOffset()*60;var self=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];this.units=[{name:"decade",seconds:86400*365.25*10,formatter:function(d){return parseInt(d.getUTCFullYear()/10)*10}},{name:"year",seconds:86400*365.25,formatter:function(d){return d.getUTCFullYear()}},{name:"month",seconds:86400*30.5,formatter:function(d){return self.months[d.getUTCMonth()]}},{name:"week",seconds:86400*7,formatter:function(d){return self.formatDate(d)}},{name:"day",seconds:86400,formatter:function(d){return d.getUTCDate()}},{name:"6 hour",seconds:3600*6,formatter:function(d){return self.formatTime(d)}},{name:"hour",seconds:3600,formatter:function(d){return self.formatTime(d)}},{name:"15 minute",seconds:60*15,formatter:function(d){return self.formatTime(d)}},{name:"minute",seconds:60,formatter:function(d){return d.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(d){return d.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(d){return d.getUTCSeconds()+"s"}}];this.unit=function(unitName){return this.units.filter(function(unit){return unitName==unit.name}).shift()};this.formatDate=function(d){return d.toUTCString().match(/, (\w+ \w+ \w+)/)[1]};this.formatTime=function(d){return d.toUTCString().match(/(\d+:\d+):/)[1]};this.ceil=function(time,unit){if(unit.name=="month"){var nearFuture=new Date((time+unit.seconds-1)*1e3);var rounded=new Date(0);rounded.setUTCFullYear(nearFuture.getUTCFullYear());rounded.setUTCMonth(nearFuture.getUTCMonth());rounded.setUTCDate(1);rounded.setUTCHours(0);rounded.setUTCMinutes(0);rounded.setUTCSeconds(0);rounded.setUTCMilliseconds(0);return rounded.getTime()/1e3}if(unit.name=="year"){var nearFuture=new Date((time+unit.seconds-1)*1e3);var rounded=new Date(0);rounded.setUTCFullYear(nearFuture.getUTCFullYear());rounded.setUTCMonth(0);rounded.setUTCDate(1);rounded.setUTCHours(0);rounded.setUTCMinutes(0);rounded.setUTCSeconds(0);rounded.setUTCMilliseconds(0);return rounded.getTime()/1e3}return Math.ceil(time/unit.seconds)*unit.seconds}};Rickshaw.namespace("Rickshaw.Fixtures.Number");Rickshaw.Fixtures.Number.formatKMBT=function(y){abs_y=Math.abs(y);if(abs_y>=1e12){return y/1e12+"T"}else if(abs_y>=1e9){return y/1e9+"B"}else if(abs_y>=1e6){return y/1e6+"M"}else if(abs_y>=1e3){return y/1e3+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y==0){return""}else{return y}};Rickshaw.Fixtures.Number.formatBase1024KMGTP=function(y){abs_y=Math.abs(y);if(abs_y>=0x4000000000000){return y/0x4000000000000+"P"}else if(abs_y>=1099511627776){return y/1099511627776+"T"}else if(abs_y>=1073741824){return y/1073741824+"G"}else if(abs_y>=1048576){return y/1048576+"M"}else if(abs_y>=1024){return y/1024+"K"}else if(abs_y<1&&y>0){return y.toFixed(2)}else if(abs_y==0){return""}else{return y}};Rickshaw.namespace("Rickshaw.Color.Palette");Rickshaw.Color.Palette=function(args){var color=new Rickshaw.Fixtures.Color;args=args||{};this.schemes={};this.scheme=color.schemes[args.scheme]||args.scheme||color.schemes.colorwheel;this.runningIndex=0;this.generatorIndex=0;if(args.interpolatedStopCount){var schemeCount=this.scheme.length-1;var i,j,scheme=[];for(i=0;i<schemeCount;i++){scheme.push(this.scheme[i]);var generator=d3.interpolateHsl(this.scheme[i],this.scheme[i+1]);for(j=1;j<args.interpolatedStopCount;j++){scheme.push(generator(1/args.interpolatedStopCount*j))}}scheme.push(this.scheme[this.scheme.length-1]);this.scheme=scheme}this.rotateCount=this.scheme.length;this.color=function(key){return this.scheme[key]||this.scheme[this.runningIndex++]||this.interpolateColor()||"#808080"};this.interpolateColor=function(){if(!Array.isArray(this.scheme))return;var color;if(this.generatorIndex==this.rotateCount*2-1){color=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[0])(.5);this.generatorIndex=0;this.rotateCount*=2}else{color=d3.interpolateHsl(this.scheme[this.generatorIndex],this.scheme[this.generatorIndex+1])(.5);this.generatorIndex++}this.scheme.push(color);return color}};Rickshaw.namespace("Rickshaw.Graph.Ajax");Rickshaw.Graph.Ajax=Rickshaw.Class.create({initialize:function(args){this.dataURL=args.dataURL;this.onData=args.onData||function(d){return d};this.onComplete=args.onComplete||function(){};this.onError=args.onError||function(){};this.args=args;this.request()},request:function(){$.ajax({url:this.dataURL,dataType:"json",success:this.success.bind(this),error:this.error.bind(this)})},error:function(){console.log("error loading dataURL: "+this.dataURL);this.onError(this)},success:function(data,status){data=this.onData(data);this.args.series=this._splice({data:data,series:this.args.series});this.graph=new Rickshaw.Graph(this.args);this.graph.render();this.onComplete(this)},_splice:function(args){var data=args.data;var series=args.series;if(!args.series)return data;series.forEach(function(s){var seriesKey=s.key||s.name;if(!seriesKey)throw"series needs a key or a name";data.forEach(function(d){var dataKey=d.key||d.name;if(!dataKey)throw"data needs a key or a name";if(seriesKey==dataKey){var properties=["color","name","data"];properties.forEach(function(p){s[p]=s[p]||d[p]})}})});return series}});Rickshaw.namespace("Rickshaw.Graph.Annotate");Rickshaw.Graph.Annotate=function(args){var graph=this.graph=args.graph;this.elements={timeline:args.element};var self=this;this.data={};this.elements.timeline.classList.add("rickshaw_annotation_timeline");this.add=function(time,content,end_time){self.data[time]=self.data[time]||{boxes:[]};self.data[time].boxes.push({content:content,end:end_time})};this.update=function(){Rickshaw.keys(self.data).forEach(function(time){var annotation=self.data[time];var left=self.graph.x(time);if(left<0||left>self.graph.x.range()[1]){if(annotation.element){annotation.line.classList.add("offscreen");annotation.element.style.display="none"}annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.add("offscreen")});return}if(!annotation.element){var element=annotation.element=document.createElement("div");element.classList.add("annotation");this.elements.timeline.appendChild(element);element.addEventListener("click",function(e){element.classList.toggle("active");annotation.line.classList.toggle("active");annotation.boxes.forEach(function(box){if(box.rangeElement)box.rangeElement.classList.toggle("active")})},false)}annotation.element.style.left=left+"px";annotation.element.style.display="block";annotation.boxes.forEach(function(box){var element=box.element;if(!element){element=box.element=document.createElement("div");element.classList.add("content");element.innerHTML=box.content;annotation.element.appendChild(element);annotation.line=document.createElement("div");annotation.line.classList.add("annotation_line");self.graph.element.appendChild(annotation.line);if(box.end){box.rangeElement=document.createElement("div");box.rangeElement.classList.add("annotation_range");self.graph.element.appendChild(box.rangeElement)}}if(box.end){var annotationRangeStart=left;var annotationRangeEnd=Math.min(self.graph.x(box.end),self.graph.x.range()[1]);if(annotationRangeStart>annotationRangeEnd){annotationRangeEnd=left;annotationRangeStart=Math.max(self.graph.x(box.end),self.graph.x.range()[0])}var annotationRangeWidth=annotationRangeEnd-annotationRangeStart;box.rangeElement.style.left=annotationRangeStart+"px";box.rangeElement.style.width=annotationRangeWidth+"px";box.rangeElement.classList.remove("offscreen")}annotation.line.classList.remove("offscreen");annotation.line.style.left=left+"px"})},this)};this.graph.onUpdate(function(){self.update()})};Rickshaw.namespace("Rickshaw.Graph.Axis.Time");Rickshaw.Graph.Axis.Time=function(args){var self=this;this.graph=args.graph;this.elements=[];this.ticksTreatment=args.ticksTreatment||"plain";this.fixedTimeUnit=args.timeUnit;var time=new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var unit;var units=time.units;var domain=this.graph.x.domain();var rangeSeconds=domain[1]-domain[0];units.forEach(function(u){if(Math.floor(rangeSeconds/u.seconds)>=2){unit=unit||u}});return unit||time.units[time.units.length-1]};this.tickOffsets=function(){var domain=this.graph.x.domain();var unit=this.fixedTimeUnit||this.appropriateTimeUnit();var count=Math.ceil((domain[1]-domain[0])/unit.seconds);var runningTick=domain[0];var offsets=[];for(var i=0;i<count;i++){var tickValue=time.ceil(runningTick,unit);runningTick=tickValue+unit.seconds/2;offsets.push({value:tickValue,unit:unit})}return offsets};this.render=function(){this.elements.forEach(function(e){e.parentNode.removeChild(e)});this.elements=[];var offsets=this.tickOffsets();offsets.forEach(function(o){if(self.graph.x(o.value)>self.graph.x.range()[1])return;var element=document.createElement("div");element.style.left=self.graph.x(o.value)+"px";element.classList.add("x_tick");element.classList.add(self.ticksTreatment);var title=document.createElement("div");title.classList.add("title");title.innerHTML=o.unit.formatter(new Date(o.value*1e3));element.appendChild(title);self.graph.element.appendChild(element);self.elements.push(element)})};this.graph.onUpdate(function(){self.render()})};Rickshaw.namespace("Rickshaw.Graph.Axis.Y");Rickshaw.Graph.Axis.Y=function(args){var self=this;var berthRate=.1;this.initialize=function(args){this.graph=args.graph;this.orientation=args.orientation||"right";var pixelsPerTick=args.pixelsPerTick||75;this.ticks=args.ticks||Math.floor(this.graph.height/pixelsPerTick);this.tickSize=args.tickSize||4;this.ticksTreatment=args.ticksTreatment||"plain";if(args.element){this.element=args.element;this.vis=d3.select(args.element).append("svg:svg").attr("class","rickshaw_graph y_axis");this.element=this.vis[0][0];this.element.style.position="relative";this.setSize({width:args.width,height:args.height})}else{this.vis=this.graph.vis}this.graph.onUpdate(function(){self.render()})};this.setSize=function(args){args=args||{};if(!this.element)return;if(typeof window!=="undefined"){var style=window.getComputedStyle(this.element.parentNode,null);var elementWidth=parseInt(style.getPropertyValue("width"));if(!args.auto){var elementHeight=parseInt(style.getPropertyValue("height"))}}this.width=args.width||elementWidth||this.graph.width*berthRate;this.height=args.height||elementHeight||this.graph.height;this.vis.attr("width",this.width).attr("height",this.height*(1+berthRate));var berth=this.height*berthRate;this.element.style.top=-1*berth+"px"};this.render=function(){if(this.graph.height!==this._renderHeight)this.setSize({auto:true});var axis=d3.svg.axis().scale(this.graph.y).orient(this.orientation);axis.tickFormat(args.tickFormat||function(y){return y});if(this.orientation=="left"){var berth=this.height*berthRate;var transform="translate("+this.width+", "+berth+")"}if(this.element){this.vis.selectAll("*").remove()}this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",transform).call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var gridSize=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(gridSize));this._renderHeight=this.graph.height};this.initialize(args)};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight");Rickshaw.Graph.Behavior.Series.Highlight=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;var colorSafe={};var activeLine=null;this.addHighlightEvents=function(l){l.element.addEventListener("mouseover",function(e){if(activeLine)return;else activeLine=l;self.legend.lines.forEach(function(line,index){if(l===line){if(index>0&&self.graph.renderer.unstack){var seriesIndex=self.graph.series.length-index-1;line.originalIndex=seriesIndex;var series=self.graph.series.splice(seriesIndex,1)[0];self.graph.series.push(series)}return}colorSafe[line.series.name]=colorSafe[line.series.name]||line.series.color;line.series.color=d3.interpolateRgb(line.series.color,d3.rgb("#d8d8d8"))(.8).toString()});self.graph.update()},false);l.element.addEventListener("mouseout",function(e){if(!activeLine)return;else activeLine=null;self.legend.lines.forEach(function(line){if(l===line&&line.hasOwnProperty("originalIndex")){var series=self.graph.series.pop();self.graph.series.splice(line.originalIndex,0,series);delete line["originalIndex"]}if(colorSafe[line.series.name]){line.series.color=colorSafe[line.series.name]}});self.graph.update()},false)};if(this.legend){this.legend.lines.forEach(function(l){self.addHighlightEvents(l)})}};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order");Rickshaw.Graph.Behavior.Series.Order=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;$(function(){$(self.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(event,ui){var series=[];$(self.legend.list).find("li").each(function(index,item){if(!item.series)return;series.push(item.series)});for(var i=self.graph.series.length-1;i>=0;i--){self.graph.series[i]=series.shift()}self.graph.update()}});$(self.legend.list).disableSelection()});this.graph.onUpdate(function(){var h=window.getComputedStyle(self.legend.element).height;self.legend.element.style.height=h})};Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");Rickshaw.Graph.Behavior.Series.Toggle=function(args){this.graph=args.graph;this.legend=args.legend;var self=this;this.addAnchor=function(line){var anchor=document.createElement("a");anchor.innerHTML="✔";anchor.classList.add("action");line.element.insertBefore(anchor,line.element.firstChild);anchor.onclick=function(e){if(line.series.disabled){line.series.enable();line.element.classList.remove("disabled")}else{line.series.disable();line.element.classList.add("disabled")}};var label=line.element.getElementsByTagName("span")[0];label.onclick=function(e){var disableAllOtherLines=line.series.disabled;if(!disableAllOtherLines){for(var i=0;i<self.legend.lines.length;i++){var l=self.legend.lines[i];if(line.series===l.series){}else if(l.series.disabled){}else{disableAllOtherLines=true;break}}}if(disableAllOtherLines){line.series.enable();line.element.classList.remove("disabled");self.legend.lines.forEach(function(l){if(line.series===l.series){}else{l.series.disable();l.element.classList.add("disabled")}})}else{self.legend.lines.forEach(function(l){l.series.enable();l.element.classList.remove("disabled")})}}};if(this.legend){$(this.legend.list).sortable({start:function(event,ui){ui.item.bind("no.onclick",function(event){event.preventDefault()})},stop:function(event,ui){setTimeout(function(){ui.item.unbind("no.onclick")},250)}});this.legend.lines.forEach(function(l){self.addAnchor(l)})}this._addBehavior=function(){this.graph.series.forEach(function(s){s.disable=function(){if(self.graph.series.length<=1){throw"only one series left"}s.disabled=true;self.graph.update()};s.enable=function(){s.disabled=false;self.graph.update()}})};this._addBehavior();this.updateBehaviour=function(){this._addBehavior()}};Rickshaw.namespace("Rickshaw.Graph.HoverDetail");Rickshaw.Graph.HoverDetail=Rickshaw.Class.create({initialize:function(args){var graph=this.graph=args.graph;this.xFormatter=args.xFormatter||function(x){return new Date(x*1e3).toUTCString()};this.yFormatter=args.yFormatter||function(y){return y===null?y:y.toFixed(2)};var element=this.element=document.createElement("div");element.className="detail";this.visible=true;graph.element.appendChild(element);this.lastEvent=null;this._addListeners();this.onShow=args.onShow;this.onHide=args.onHide;this.onRender=args.onRender;this.formatter=args.formatter||this.formatter},formatter:function(series,x,y,formattedX,formattedY,d){return series.name+": "+formattedY},update:function(e){e=e||this.lastEvent;if(!e)return;this.lastEvent=e;if(!e.target.nodeName.match(/^(path|svg|rect)$/))return;var graph=this.graph;var eventX=e.offsetX||e.layerX;var eventY=e.offsetY||e.layerY;var j=0;var points=[];var nearestPoint;this.graph.series.active().forEach(function(series){var data=this.graph.stackedData[j++];var domainX=graph.x.invert(eventX);var domainIndexScale=d3.scale.linear().domain([data[0].x,data.slice(-1)[0].x]).range([0,data.length]);var approximateIndex=Math.floor(domainIndexScale(domainX));var dataIndex=Math.min(approximateIndex||0,data.length-1);for(var i=approximateIndex;i<data.length-1;){if(!data[i]||!data[i+1])break;if(data[i].x<=domainX&&data[i+1].x>domainX){dataIndex=i;break}if(data[i+1].x<=domainX){i++}else{i--}}var value=data[dataIndex];var distance=Math.sqrt(Math.pow(Math.abs(graph.x(value.x)-eventX),2)+Math.pow(Math.abs(graph.y(value.y+value.y0)-eventY),2));var xFormatter=series.xFormatter||this.xFormatter;var yFormatter=series.yFormatter||this.yFormatter;var point={formattedXValue:xFormatter(value.x),formattedYValue:yFormatter(value.y),series:series,value:value,distance:distance,order:j,name:series.name};if(!nearestPoint||distance<nearestPoint.distance){nearestPoint=point}points.push(point)},this);nearestPoint.active=true;var domainX=nearestPoint.value.x;var formattedXValue=nearestPoint.formattedXValue;this.element.innerHTML="";this.element.style.left=graph.x(domainX)+"px";this.visible&&this.render({points:points,detail:points,mouseX:eventX,mouseY:eventY,formattedXValue:formattedXValue,domainX:domainX})},hide:function(){this.visible=false;this.element.classList.add("inactive");if(typeof this.onHide=="function"){this.onHide()}},show:function(){this.visible=true;this.element.classList.remove("inactive");if(typeof this.onShow=="function"){this.onShow()}},render:function(args){var graph=this.graph;var points=args.points;var point=points.filter(function(p){return p.active}).shift();if(point.value.y===null)return;var formattedXValue=this.xFormatter(point.value.x);var formattedYValue=this.yFormatter(point.value.y);this.element.innerHTML="";this.element.style.left=graph.x(point.value.x)+"px";var xLabel=document.createElement("div");xLabel.className="x_label";xLabel.innerHTML=formattedXValue;this.element.appendChild(xLabel);var item=document.createElement("div");item.className="item";item.innerHTML=this.formatter(point.series,point.value.x,point.value.y,formattedXValue,formattedYValue,point);item.style.top=this.graph.y(point.value.y0+point.value.y)+"px";this.element.appendChild(item);var dot=document.createElement("div");dot.className="dot";dot.style.top=item.style.top;dot.style.borderColor=point.series.color;this.element.appendChild(dot);if(point.active){item.className="item active";dot.className="dot active"}this.show();
render() {
const {props} = this;
let {data} = props;
const interpolationType = (
props.interpolationType || (props.interpolate ? 'cardinal' : 'linear')
);
const {innerWidth, innerHeight, trans, svgMargins} = this.getDimensions();
const yOrient = this.getYOrient();
if (!Array.isArray(data)) {
data = [data];
}
const yScale = d3.scale.linear()
.range([innerHeight, 0]);
const xValues = [];
const yValues = [];
const seriesNames = [];
const yMaxValues = [];
const domain = props.domain || {};
const xDomain = domain.x || [];
const yDomain = domain.y || [];
data.forEach((series) => {
let upper = 0;
seriesNames.push(series.name);
series.values.forEach((val) => {
upper = Math.max(upper, props.yAccessor(val));
xValues.push(props.xAccessor(val));
yValues.push(props.yAccessor(val));
});
yMaxValues.push(upper);
});
let xScale;
if (xValues.length > 0 && _.isDate(xValues[0]) && props.xAxisTickInterval) {
xScale = d3.time.scale()
.range([0, innerWidth]);
} else {
xScale = d3.scale.linear()
.range([0, innerWidth]);
}
const xdomain = d3.extent(xValues);
if (!_.isEmpty(xDomain[0])) xdomain[0] = xDomain[0];
if (!_.isEmpty(xDomain[1])) xdomain[1] = xDomain[1];
xScale.domain(xdomain);
const ydomain = [0, d3.sum(yMaxValues)];
if (!_.isEmpty(yDomain[0])) ydomain[0] = yDomain[0];
if (!_.isEmpty(yDomain[1])) ydomain[1] = yDomain[1];
yScale.domain(ydomain);
props.colors.domain(seriesNames);
const stack = d3.layout.stack()
.x(props.xAccessor)
.y(props.yAccessor)
.values((d) => d.values);
const layers = stack(data);
const dataSeries = layers.map((d, idx) => (
<DataSeries
key={idx}
seriesName={d.name}
fill={props.colors(props.colorAccessor(d, idx))}
index={idx}
xScale={xScale}
yScale={yScale}
data={d.values}
xAccessor={props.xAccessor}
yAccessor={props.yAccessor}
interpolationType={interpolationType}
hoverAnimation={props.hoverAnimation}
/>
));
return (
<Chart
viewBox={this.getViewBox()}
legend={props.legend}
data={data}
margins={props.margins}
colors={props.colors}
colorAccessor={props.colorAccessor}
width={props.width}
height={props.height}
title={props.title}
>
<g transform={trans} className={props.className}>
<XAxis
xAxisClassName="rd3-areachart-xaxis"
xScale={xScale}
xAxisTickValues={props.xAxisTickValues}
xAxisTickInterval={props.xAxisTickInterval}
xAxisTickCount={props.xAxisTickCount}
xAxisLabel={props.xAxisLabel}
xAxisLabelOffset={props.xAxisLabelOffset}
tickFormatting={props.xAxisFormatter}
xOrient={props.xOrient}
yOrient={yOrient}
margins={svgMargins}
width={innerWidth}
height={innerHeight}
horizontalChart={props.horizontal}
gridVertical={props.gridVertical}
gridVerticalStroke={props.gridVerticalStroke}
gridVerticalStrokeWidth={props.gridVerticalStrokeWidth}
gridVerticalStrokeDash={props.gridVerticalStrokeDash}
/>
<YAxis
yAxisClassName="rd3-areachart-yaxis"
yScale={yScale}
yAxisTickValues={props.yAxisTickValues}
yAxisTickInterval={props.yAxisTickInterval}
yAxisTickCount={props.yAxisTickCount}
yAxisLabel={props.yAxisLabel}
yAxisLabelOffset={props.yAxisLabelOffset}
tickFormatting={props.yAxisFormatter}
xOrient={props.xOrient}
yOrient={yOrient}
margins={svgMargins}
width={innerWidth}
height={props.height}
horizontalChart={props.horizontal}
gridHorizontal={props.gridHorizontal}
gridHorizontalStroke={props.gridHorizontalStroke}
gridHorizontalStrokeWidth={props.gridHorizontalStrokeWidth}
gridHorizontalStrokeDash={props.gridHorizontalStrokeDash}
/>
{dataSeries}
</g>
</Chart>
);
}
