localhots
/
empact
1
0
Fork 0
Code Releases Activity

Remove bar chart's label underlay

This commit is contained in:
Gregory Eremin 2015-03-16 14:43:20 +07:00
parent edf8affd73
commit c4629edfac
1 changed files with 17 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/scripts/src/charts/bar_chart.jsx
View File

@ -182,7 +182,7 @@ var Bar = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
labelX: 0, labelX: 0,
lastLabelX: 2*this.labelPaddingH lastLabelX: this.labelPaddingH
}; };
}, },
@ -207,24 +207,23 @@ var Bar = React.createClass({
offset = this.props.offset, offset = this.props.offset,
label = this.props.item + ': ' + numberFormat(val), label = this.props.item + ': ' + numberFormat(val),
labelWidth = textWidth(label), labelWidth = textWidth(label),
labelOuterWidth = labelWidth + 2*this.labelPaddingH, labelOffsetWidth = labelWidth + 2*this.labelPaddingH,
labelOffsetWidth = labelOuterWidth + 2*this.labelPaddingH,
labelX; labelX;
if (offset === 0) { if (offset === 0) {
labelX = 2*this.labelPaddingH; labelX = this.labelPaddingH;
} else { } else {
if (val < 0) { if (val < 0) {
if (offset >= labelOffsetWidth) { if (offset >= labelOffsetWidth) {
labelX = offset - labelOffsetWidth + 2*this.labelPaddingH; labelX = offset - labelOffsetWidth + this.labelPaddingH;
} else { } else {
labelX = offset + 2*this.labelPaddingH; labelX = offset + this.labelPaddingH;
} }
} else { } else {
if (offset + labelOffsetWidth <= this.props.max) { if (offset + labelOffsetWidth <= this.props.max) {
labelX = offset + 2*this.labelPaddingH; labelX = offset + this.labelPaddingH;
} else { } else {
labelX = offset - labelOffsetWidth + 2*this.labelPaddingH; labelX = offset - labelOffsetWidth + this.labelPaddingH;
} }
} }
} }
@ -236,18 +235,11 @@ var Bar = React.createClass({
}, },
animateAll: function() { animateAll: function() {
var bar = this.refs.bar, this.clearAnimations(this.refs.bar);
underlay = this.refs.label.refs.underlay, this.clearAnimations(this.refs.label);
text = this.refs.label.refs.text, this.animate(this.refs.bar, 'width', this.state.lastBarWidth, this.state.barWidth);
padH = this.labelPaddingH; this.animate(this.refs.bar, 'x', this.state.lastBarX, this.props.x);
this.animate(this.refs.label, 'x', this.state.lastLabelX, this.state.labelX);
this.clearAnimations(bar);
this.clearAnimations(underlay);
this.clearAnimations(text);
this.animate(bar, 'width', this.state.lastBarWidth, this.state.barWidth);
this.animate(bar, 'x', this.state.lastBarX, this.props.x);
this.animate(underlay, 'x', this.state.lastLabelX - padH, this.state.labelX - padH);
this.animate(text, 'x', this.state.lastLabelX, this.state.labelX);
}, },
render: function() { render: function() {
@ -263,8 +255,7 @@ var Bar = React.createClass({
return ( return (
<g onClick={this.props.onClick}> <g onClick={this.props.onClick}>
<rect ref="bar" <rect ref="bar" className="bar"
className="bar"
fill={this.props.color} fill={this.props.color}
width={barWidth} width={barWidth}
height={this.props.height} height={this.props.height}
@ -272,39 +263,12 @@ var Bar = React.createClass({
y={this.props.y} y={this.props.y}
rx="2" rx="2"
ry="2" /> ry="2" />
<BarLabel ref="label" <text ref="label" className="label"
item={this.props.item}
value={this.props.value}
width={labelOuterWidth}
height={this.labelOuterHeight}
x={this.state.labelX} x={this.state.labelX}
y={this.props.y + this.labelMarginV} /> y={this.props.y + this.labelMarginV + this.labelHeight}>
</g> {label}
);
}
});
var BarLabel = React.createClass({
render: function() {
var text = (this.props.item ? this.props.item +': '+ numberFormat(this.props.value) : '');
return (
<g>
<rect ref="underlay" key="underlay"
className="label_underlay"
width={this.props.width}
height={this.props.height}
x={this.props.x}
y={this.props.y}
rx="3"
ry="3" />
<text ref="text" key="text"
className="label"
x={this.props.x}
y={this.props.y + 16}
height={20}>
{text}
</text> </text>
</g> </g>
); );
} }
}) });