var d3 = require('d3'); var React = require('react'); module.exports = React.createClass({ displayName: "StackedBarChart", calcMinMax: function(series) { var children = []; for (var child in series) { if (series.hasOwnProperty(child)) children.push(series[child]); } var positiveValues = [0]; var negativeValues = [0]; if (children.length > 0 && children[0].length > 0) { for (var j = 0; j < children[0].length; j++) { positiveValues.push(children.reduce(function(accum, curr, i, arr) { if (arr[i][j] > 0) return accum + arr[i][j]; return accum; }, 0)); negativeValues.push(children.reduce(function(accum, curr, i, arr) { if (arr[i][j] < 0) return accum + arr[i][j]; return accum; }, 0)); } } return [Math.min.apply(Math, negativeValues), Math.max.apply(Math, positiveValues)]; }, sortedSeries: function(series) { // Return an array of the series names, from highest to lowest sums (in // absolute terms) var seriesNames = []; var seriesValues = {}; for (var child in series) { if (series.hasOwnProperty(child)) { seriesNames.push(child); seriesValues[child] = series[child].reduce(function(accum, curr, i, arr) { return accum + Math.abs(curr); }, 0); } } seriesNames.sort(function(a, b) { return seriesValues[b] - seriesValues[a]; }); return seriesNames; }, calcAxisMarkSeparation: function(minMax, height, ticksPerHeight) { var targetTicks = height / ticksPerHeight; var range = minMax[1]-minMax[0]; var rangePerTick = range/targetTicks; var roundOrder = Math.floor(Math.log(rangePerTick) / Math.LN10); var roundTo = Math.pow(10, roundOrder); return Math.ceil(rangePerTick/roundTo)*roundTo; }, render: function() { height = 400; width = 600; legendWidth = 100; xMargin = 70; yMargin = 70; height -= yMargin*2; width -= xMargin*2; var minMax = this.calcMinMax(this.props.report.FlattenedSeries); var xAxisMarksEvery = this.calcAxisMarkSeparation(minMax, height, 40); var y = d3.scaleLinear() .range([0, height]) .domain(minMax); var x = d3.scaleLinear() .range([0, width]) .domain([0, this.props.report.Labels.length + 0.5]); var sortedSeries = this.sortedSeries(this.props.report.FlattenedSeries); var bars = []; var labels = []; var barWidth = x(0.75); var barStart = x(0.25) + (x(1) - barWidth)/2; // Add Y axis marks and labels, and initialize positive- and // negativeSum arrays var positiveSum = []; var negativeSum = []; for (var i=0; i < this.props.report.Labels.length; i++) { positiveSum.push(0); negativeSum.push(0); var labelX = x(i) + barStart + barWidth/2; var labelY = height + 15; labels.push(( {this.props.report.Labels[i]} )); labels.push(( )); } // Make X axis marks and labels var makeXLabel = function(value) { labels.push(( )); labels.push(( {value} )); } for (var i=0; i < minMax[1]; i+= xAxisMarksEvery) makeXLabel(i); for (var i=0-xAxisMarksEvery; i > minMax[0]; i -= xAxisMarksEvery) makeXLabel(i); // Add all the bars and group them var legendMap = {}; var childId=1; for (var i=0; i < sortedSeries.length; i++) { var child = sortedSeries[i]; var childData = this.props.report.FlattenedSeries[child]; var rectClasses = "chart-element chart-color" + (childId % 12); var self = this; var rectOnClick = function() { var childName = child; var onSelectSeries = self.props.onSelectSeries; return function() { onSelectSeries(childName); }; }(); var seriesBars = []; for (var j=0; j < childData.length; j++) { var value = childData[j]; if (value == 0) continue; if (value > 0) { rectHeight = y(value) - y(0); positiveSum[j] += rectHeight; rectY = height - y(0) - positiveSum[j]; } else { rectHeight = y(0) - y(value); rectY = height - y(0) + negativeSum[j]; negativeSum[j] += rectHeight; } seriesBars.push(( {child}: {value} )); } if (seriesBars.length > 0) { legendMap[child] = childId; bars.push(( {seriesBars} )); childId++; } } var legend = []; for (var series in legendMap) { var legendClasses = "chart-color" + (legendMap[series] % 12); var legendY = (legendMap[series] - 1)*15; legend.push(( )); legend.push(( {series} )); } return ( {bars} {labels} {legend} ); } });