localhots
/
empact
1
0
Fork 0
Code Releases Activity

Tidy up axis

This commit is contained in:
Gregory Eremin 2015-03-18 02:13:16 +07:00
parent 5f9a763078
commit 1bcee40579
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/jsx/charts/stacked_area_chart.jsx
View File

@ -186,6 +186,7 @@ var StackedAreaChart = React.createClass({
render: function() { render: function() {
var renderArea = function(pair, i) { var renderArea = function(pair, i) {
var item = pair[0], path = pair[1]; var item = pair[0], path = pair[1];
// NOTE: Rounded bottom corners is a side-effect
return ( return (
<StackedArea key={'area-'+ i} <StackedArea key={'area-'+ i}
item={item} i={i} item={item} i={i}
@ -319,8 +320,9 @@ var StackedAreaChart = React.createClass({
<g ref="dots">{renderedDots}</g> <g ref="dots">{renderedDots}</g>
<Axis <Axis
weeks={_.pluck(dotsByWeek, 0)} weeks={_.pluck(dotsByWeek, 0)}
y={this.canvasHeight + 3} y={this.canvasHeight}
width={this.state.canvasWidth} /> width={this.state.canvasWidth}
height={this.xAxisHeight} />
</svg> </svg>
<ul className="legend"> <ul className="legend">
{legend.map(renderLegend)} {legend.map(renderLegend)}
@ -398,6 +400,9 @@ var Dot = React.createClass({
}); });
var Axis = React.createClass({ var Axis = React.createClass({
topMargin: 2,
markHeight: 5,
render: function() { render: function() {
if (this.props.weeks.length === 0) { if (this.props.weeks.length === 0) {
return null; return null;
@ -425,12 +430,12 @@ var Axis = React.createClass({
<g key={'mark-'+ i}> <g key={'mark-'+ i}>
<line className="axis" <line className="axis"
x1={x} x1={x}
y1={this.props.y} y1={this.props.y + this.topMargin}
x2={x} x2={x}
y2={this.props.y + 4} /> y2={this.props.y + this.topMargin + this.markHeight} />
{!showLabel ? null : <text className="axis-mark" {!showLabel ? null : <text className="axis-mark"
x={x} x={x}
y={this.props.y + 15} y={this.props.y + this.topMargin + 14}
textAnchor={ta} textAnchor={ta}
> >
{formatDate(week)} {formatDate(week)}
@ -441,17 +446,23 @@ var Axis = React.createClass({
return ( return (
<g ref="axis"> <g ref="axis">
<rect // This rect hides area bouncing glitches
x="0"
y={this.props.y}
width={this.props.width}
height={this.props.height}
fill="#fff" />
<line className="axis" <line className="axis"
x1="0" x1="0"
y1={this.props.y} y1={this.props.y + this.topMargin}
x2={this.props.width} x2={this.props.width}
y2={this.props.y} /> y2={this.props.y + this.topMargin} />
{this.props.weeks.map(renderMark)} {this.props.weeks.map(renderMark)}
<line className="axis" <line className="axis"
x1={this.props.width - 1} x1={this.props.width - 1}
y1={this.props.y} y1={this.props.y + this.topMargin}
x2={this.props.width - 1} x2={this.props.width - 1}
y2={this.props.y + 4} /> y2={this.props.y + this.topMargin + this.markHeight} />
</g> </g>
) )
} }