aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2025-11-04 02:23:26 -05:00
Code Issues Releases Wiki Activity

StackedBarChart.js: Sort by decreasing value

Browse Source
This commit is contained in:
Aaron Lindsay
2017-02-19 16:39:02 -05:00
parent 5157d13737
commit 9c20f3bb02
1 changed files with 64 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
js/components/StackedBarChart.js
View File

@@ -29,6 +29,26 @@ module.exports = React.createClass({
return [Math.min.apply(Math, negativeValues), Math.max.apply(Math, positiveValues)]; 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) { calcAxisMarkSeparation: function(minMax, height, ticksPerHeight) {
var targetTicks = height / ticksPerHeight; var targetTicks = height / ticksPerHeight;
var range = minMax[1]-minMax[0]; var range = minMax[1]-minMax[0];
@@ -47,15 +67,14 @@ module.exports = React.createClass({
width -= xMargin*2; width -= xMargin*2;
var minMax = this.calcMinMax(this.props.report.FlattenedSeries); var minMax = this.calcMinMax(this.props.report.FlattenedSeries);
var xAxisMarksEvery = this.calcAxisMarkSeparation(minMax, height, 40);
var y = d3.scaleLinear() var y = d3.scaleLinear()
.range([0, height]) .range([0, height])
.domain(minMax); .domain(minMax);
var xAxisMarksEvery = this.calcAxisMarkSeparation(minMax, height, 40);
var x = d3.scaleLinear() var x = d3.scaleLinear()
.range([0, width]) .range([0, width])
.domain([0, this.props.report.Labels.length + 0.5]); .domain([0, this.props.report.Labels.length + 0.5]);
var sortedSeries = this.sortedSeries(this.props.report.FlattenedSeries);
var bars = []; var bars = [];
var labels = []; var labels = [];
@@ -94,52 +113,53 @@ module.exports = React.createClass({
for (var i=0-xAxisMarksEvery; i > minMax[0]; i -= xAxisMarksEvery) for (var i=0-xAxisMarksEvery; i > minMax[0]; i -= xAxisMarksEvery)
makeXLabel(i); makeXLabel(i);
// Add all the bars and group them
var legendMap = {}; var legendMap = {};
var childId=1; var childId=1;
for (var child in this.props.report.FlattenedSeries) { for (var i=0; i < sortedSeries.length; i++) {
if (this.props.report.FlattenedSeries.hasOwnProperty(child)) { var child = sortedSeries[i];
var childData = this.props.report.FlattenedSeries[child]; 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 = []; var rectClasses = "chart-element chart-color" + (childId % 12);
for (var i=0; i < childData.length; i++) { var self = this;
var value = childData[i]; var rectOnClick = function() {
if (value == 0) var childName = child;
continue; var onSelectSeries = self.props.onSelectSeries;
if (value > 0) { return function() {
rectHeight = y(value) - y(0); onSelectSeries(childName);
positiveSum[i] += rectHeight; };
rectY = height - y(0) - positiveSum[i]; }();
} else {
rectHeight = y(0) - y(value);
rectY = height - y(0) + negativeSum[i];
negativeSum[i] += rectHeight;
}
seriesBars.push(( var seriesBars = [];
<g> for (var j=0; j < childData.length; j++) {
<title>{child} - {value}</title> var value = childData[j];
<rect onClick={rectOnClick} className={rectClasses} x={x(i) + barStart} y={rectY} width={barWidth} height={rectHeight} rx={1} ry={1}/> if (value == 0)
</g> continue;
)); if (value > 0) {
} rectHeight = y(value) - y(0);
if (seriesBars.length > 0) { positiveSum[j] += rectHeight;
legendMap[child] = childId; rectY = height - y(0) - positiveSum[j];
childId++; } else {
bars.push(( rectHeight = y(0) - y(value);
<g className="chart-series"> rectY = height - y(0) + negativeSum[j];
{seriesBars} negativeSum[j] += rectHeight;
</g>
));
} }
seriesBars.push((
<g>
<title>{child}: {value}</title>
<rect onClick={rectOnClick} className={rectClasses} x={x(j) + barStart} y={rectY} width={barWidth} height={rectHeight} rx={1} ry={1}/>
</g>
));
}
if (seriesBars.length > 0) {
legendMap[child] = childId;
bars.push((
<g className="chart-series">
{seriesBars}
</g>
));
childId++;
} }
} }