aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-12-27 07:52:28 -05:00
Code Issues Releases Wiki Activity

Reports: Add keys to everything to make React happy

Browse Source
This commit is contained in:
Aaron Lindsay 2017-02-19 16:42:22 -05:00
parent 9c20f3bb02
commit 6ccf9208f0
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/components/ReportsTab.js
View File

@ -49,26 +49,28 @@ module.exports = React.createClass({
}; };
}(); }();
titleTracks.push(( titleTracks.push((
<Button bsStyle="link" <Button key={i*2} bsStyle="link"
onClick={navOnClick}> onClick={navOnClick}>
{name} {name}
</Button> </Button>
)); ));
titleTracks.push((<span>/</span>)); titleTracks.push((<span key={i*2+1}>/</span>));
seriesTraversal.push(this.props.selectedReport.seriesTraversal[i]); seriesTraversal.push(this.props.selectedReport.seriesTraversal[i]);
} }
if (titleTracks.length == 0) if (titleTracks.length == 0) {
titleTracks.push(( titleTracks.push((
<Button bsStyle="link"> <Button key={0} bsStyle="link">
{this.props.selectedReport.report.Title} {this.props.selectedReport.report.Title}
</Button> </Button>
)); ));
else } else {
var i = this.props.selectedReport.seriesTraversal.length-1;
titleTracks.push(( titleTracks.push((
<Button bsStyle="link"> <Button key={i*2+2} bsStyle="link">
{this.props.selectedReport.seriesTraversal[this.props.selectedReport.seriesTraversal.length-1]} {this.props.selectedReport.seriesTraversal[i]}
</Button> </Button>
)); ));
}
report = (<Panel header={titleTracks}> report = (<Panel header={titleTracks}>
<StackedBarChart <StackedBarChart

16
js/components/StackedBarChart.js
View File

@ -92,20 +92,20 @@ module.exports = React.createClass({
var labelX = x(i) + barStart + barWidth/2; var labelX = x(i) + barStart + barWidth/2;
var labelY = height + 15; var labelY = height + 15;
labels.push(( labels.push((
<text x={labelX} y={labelY} transform={"rotate(45 "+labelX+" "+labelY+")"}>{this.props.report.Labels[i]}</text> <text key={"y-axis-label-"+i} x={labelX} y={labelY} transform={"rotate(45 "+labelX+" "+labelY+")"}>{this.props.report.Labels[i]}</text>
)); ));
labels.push(( labels.push((
<line className="axis-tick" x1={labelX} y1={height-3} x2={labelX} y2={height+3} /> <line key={"y-axis-tick-"+i} className="axis-tick" x1={labelX} y1={height-3} x2={labelX} y2={height+3} />
)); ));
} }
// Make X axis marks and labels // Make X axis marks and labels
var makeXLabel = function(value) { var makeXLabel = function(value) {
labels.push(( labels.push((
<line className="axis-tick" x1={-3} y1={height - y(value)} x2={3} y2={height - y(value)} /> <line key={"x-axis-tick-"+value} className="axis-tick" x1={-3} y1={height - y(value)} x2={3} y2={height - y(value)} />
)); ));
labels.push(( labels.push((
<text is x={-10} y={height - y(value) + 6} text-anchor={"end"}>{value}</text> <text key={"x-axis-label-"+value} is x={-10} y={height - y(value) + 6} text-anchor={"end"}>{value}</text>
)); ));
} }
for (var i=0; i < minMax[1]; i+= xAxisMarksEvery) for (var i=0; i < minMax[1]; i+= xAxisMarksEvery)
@ -146,7 +146,7 @@ module.exports = React.createClass({
} }
seriesBars.push(( seriesBars.push((
<g> <g key={"stacked-bar-"+j}>
<title>{child}: {value}</title> <title>{child}: {value}</title>
<rect onClick={rectOnClick} className={rectClasses} x={x(j) + barStart} y={rectY} width={barWidth} height={rectHeight} rx={1} ry={1}/> <rect onClick={rectOnClick} className={rectClasses} x={x(j) + barStart} y={rectY} width={barWidth} height={rectHeight} rx={1} ry={1}/>
</g> </g>
@ -155,7 +155,7 @@ module.exports = React.createClass({
if (seriesBars.length > 0) { if (seriesBars.length > 0) {
legendMap[child] = childId; legendMap[child] = childId;
bars.push(( bars.push((
<g className="chart-series"> <g key={"series-bars-"+childId} className="chart-series">
{seriesBars} {seriesBars}
</g> </g>
)); ));
@ -168,10 +168,10 @@ module.exports = React.createClass({
var legendClasses = "chart-color" + (legendMap[series] % 12); var legendClasses = "chart-color" + (legendMap[series] % 12);
var legendY = (legendMap[series] - 1)*15; var legendY = (legendMap[series] - 1)*15;
legend.push(( legend.push((
<rect className={legendClasses} x={0} y={legendY} width={10} height={10}/> <rect key={"legend-key-"+legendMap[series]} className={legendClasses} x={0} y={legendY} width={10} height={10}/>
)); ));
legend.push(( legend.push((
<text x={0 + 15} y={legendY + 10}>{series}</text> <text key={"legend-label-"+legendMap[series]} x={0 + 15} y={legendY + 10}>{series}</text>
)); ));
} }