localhots/empact
1
0
Fork 0
Code Releases Activity

Thin out labels

Browse Source
This commit is contained in:
Gregory Eremin 2015-03-17 01:23:40 +07:00
parent 4d3ddad9a2
commit e6b1eced20
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/scripts/src/charts/stacked_area_chart.jsx
View File

@ -394,12 +394,24 @@ var Axis = React.createClass({
return null;
}
var renderMark = function(week, i) {
var x = i/(this.props.weeks.length - 1)*this.props.width,
var len = this.props.weeks.length,
x = i/(len - 1)*this.props.width,
showLabel,
ta = (i === 0
? 'start'
: (i === this.props.weeks.length - 1
: (i === len - 1
? 'end'
: 'middle'));
// Thin out labels
if (len > 20) {
showLabel = (i % 2 === 0);
} else if (len > 10) {
showLabel = (i % 2 === 0);
} else {
showLabel = true;
}
return (
<g key={'mark-'+ i}>
<line
@ -408,14 +420,14 @@ var Axis = React.createClass({
x2={x}
y2={this.props.y + 4}
stroke="#666" strokeWidth="1" />
<text className="axis-mark"
{showLabel ? <text className="axis-mark"
x={x}
y={this.props.y + 15}
textAnchor={ta}
fill="#666"
>
{formatDate(week)}
</text>
</text> : null}
</g>
);
}.bind(this);