Tidy up axis
This commit is contained in:
parent
5f9a763078
commit
1bcee40579
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue