aclindsa
/
moneygo
mirror of https://github.com/aclindsa/moneygo.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Report formatting fixes 

This adds a special cursor to indicate reports can be clicked and
ensures full legends are displayed
This commit is contained in:
Aaron Lindsay 2017-06-19 20:24:56 -04:00
parent 6d4fdafc02
commit 69bbd3db62
3 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/components/PieChart.js
View File

@ -31,17 +31,20 @@ class Slice extends React.Component {
class PieChart extends React.Component {
sortedSeries(series) {
// Return an array of the series names, from highest to lowest sums (in
// absolute terms)
// Return an array of the non-zero 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) {
var value = series[child].reduce(function(accum, curr, i, arr) {
return accum + curr;
}, 0);
if (value != 0) {
seriesValues[child] = value;
seriesNames.push(child);
}
}
}
seriesNames.sort(function(a, b) {
@ -52,17 +55,22 @@ class PieChart extends React.Component {
}
render() {
var height = 400;
var width = 600;
var legendWidth = 100;
var width = 400;
var legendWidth = 200;
var xMargin = 70;
var yMargin = 70;
var legendEntryHeight = 15;
height -= yMargin*2;
width -= xMargin*2;
var radius = Math.min(height, width)/2;
var sortedSeriesValues = this.sortedSeries(this.props.report.FlattenedSeries);
var sortedSeries = sortedSeriesValues[0];
var seriesValues = sortedSeriesValues[1];
if (height < legendEntryHeight * sortedSeries.length)
height = legendEntryHeight * sortedSeries.length;
var radius = Math.min(height, width)/2;
var r = d3.scaleLinear()
.range([0, 2*Math.PI])
.domain([0, sortedSeries.reduce(function(accum, curr, i, arr) {
@ -78,8 +86,6 @@ class PieChart extends React.Component {
for (var i=0; i < sortedSeries.length; i++) {
var child = sortedSeries[i];
var value = seriesValues[child];
if (value == 0)
continue;
var sliceClasses = "chart-element chart-color" + (childId % 12);
var self = this;
@ -113,12 +119,12 @@ class PieChart extends React.Component {
var legend = [];
for (var series in legendMap) {
var legendClasses = "chart-color" + (legendMap[series] % 12);
var legendY = (legendMap[series] - 1)*15;
var legendY = (legendMap[series] - 1)*legendEntryHeight;
legend.push((
<rect key={"legend-key-"+legendMap[series]} className={legendClasses} x={0} y={legendY} width={10} height={10}/>
));
legend.push((
<text key={"legend-label-"+legendMap[series]} x={0 + 15} y={legendY + 10}>{series}</text>
<text key={"legend-label-"+legendMap[series]} x={legendEntryHeight} y={legendY + 10}>{series}</text>
));
}

19
js/components/StackedBarChart.js
View File

@ -36,10 +36,13 @@ class StackedBarChart extends React.Component {
var seriesValues = {};
for (var child in series) {
if (series.hasOwnProperty(child)) {
seriesNames.push(child);
seriesValues[child] = series[child].reduce(function(accum, curr, i, arr) {
var value = series[child].reduce(function(accum, curr, i, arr) {
return accum + Math.abs(curr);
}, 0);
if (value != 0) {
seriesValues[child] = value;
seriesNames.push(child);
}
}
}
seriesNames.sort(function(a, b) {
@ -59,12 +62,17 @@ class StackedBarChart extends React.Component {
render() {
var height = 400;
var width = 1000;
var legendWidth = 100;
var legendWidth = 200;
var xMargin = 70;
var yMargin = 70;
var legendEntryHeight = 15;
height -= yMargin*2;
width -= xMargin*2;
var sortedSeries = this.sortedSeries(this.props.report.FlattenedSeries);
if (height < legendEntryHeight * sortedSeries.length)
height = legendEntryHeight * sortedSeries.length;
var minMax = this.calcMinMax(this.props.report.FlattenedSeries);
var xAxisMarksEvery = this.calcAxisMarkSeparation(minMax, height, 40);
var y = d3.scaleLinear()
@ -73,7 +81,6 @@ class StackedBarChart extends React.Component {
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 = [];
@ -165,12 +172,12 @@ class StackedBarChart extends React.Component {
var legend = [];
for (var series in legendMap) {
var legendClasses = "chart-color" + (legendMap[series] % 12);
var legendY = (legendMap[series] - 1)*15;
var legendY = (legendMap[series] - 1)*legendEntryHeight;
legend.push((
<rect key={"legend-key-"+legendMap[series]} className={legendClasses} x={0} y={legendY} width={10} height={10}/>
));
legend.push((
<text key={"legend-label-"+legendMap[series]} x={0 + 15} y={legendY + 10}>{series}</text>
<text key={"legend-label-"+legendMap[series]} x={legendEntryHeight} y={legendY + 10}>{series}</text>
));
}

1
static/css/reports.css
View File

@ -49,6 +49,7 @@
.chart-element {
stroke-width: 0;
cursor: pointer;
}
g.chart-series:hover .chart-element {
stroke-width: 2;