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> ); }