var d3 = require('d3');
var React = require('react');
class StackedBarChart extends React.Component {
calcMinMax(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(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(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() {
var height = 400;
var width = 1000;
var legendWidth = 100;
var xMargin = 70;
var 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 (
);
}
}
module.exports = StackedBarChart;