diff --git a/app/scripts/src/charts/animation.jsx b/app/scripts/src/charts/animation.jsx
index e3329fb..25a62e4 100644
--- a/app/scripts/src/charts/animation.jsx
+++ b/app/scripts/src/charts/animation.jsx
@@ -26,7 +26,7 @@ var ChartAnimationMixin = {
clearAnimations: function(ref) {
var node = ref.getDOMNode();
- while (node.firstChild) {
+ while (node.firstChild && node.firstChild.nodeName === 'animate') {
node.removeChild(node.firstChild);
}
}
diff --git a/app/scripts/src/charts/bar_chart.jsx b/app/scripts/src/charts/bar_chart.jsx
index d207ade..0d57828 100644
--- a/app/scripts/src/charts/bar_chart.jsx
+++ b/app/scripts/src/charts/bar_chart.jsx
@@ -181,7 +181,7 @@ var Bar = React.createClass({
calculateLabelPosition: function() {
var val = this.props.value,
offset = this.props.offset,
- label = this.props.item + ': ' + val,
+ label = this.props.item + ': ' + numberFormat(val),
labelWidth = textWidth(label),
labelOuterWidth = labelWidth + 2*this.labelPaddingH,
labelOffsetWidth = labelOuterWidth + 2*this.labelPaddingH,
@@ -211,17 +211,22 @@ var Bar = React.createClass({
},
animateAll: function() {
- this.clearAnimations(this.refs.bar);
- this.clearAnimations(this.refs.underlay);
- this.animate(this.refs.bar, 'width', this.state.lastBarWidth, this.props.width);
- this.animate(this.refs.bar, 'x', this.state.lastBarX, this.props.x);
- var ph = this.labelPaddingH;
- this.animate(this.refs.underlay, 'x', this.state.lastLabelX - ph, this.state.labelX - ph);
- this.animate(this.refs.label, 'x', this.state.lastLabelX, this.state.labelX);
+ var bar = this.refs.bar,
+ underlay = this.refs.label.refs.underlay,
+ text = this.refs.label.refs.text,
+ padH = this.labelPaddingH;
+
+ this.clearAnimations(bar);
+ this.clearAnimations(underlay);
+ this.clearAnimations(text);
+ this.animate(bar, 'width', this.state.lastBarWidth, this.props.width);
+ 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() {
- var label = this.props.item ? (this.props.item + ': ' + this.props.value) : '',
+ var label = this.props.item ? (this.props.item + ': ' + numberFormat(this.props.value)) : '',
labelWidth = textWidth(label),
labelOuterWidth = (labelWidth == 0 ? 0 : labelWidth + 2*this.labelPaddingH),
barX = (this.state.lastBarX && this.state.lastBarX !== this.props.x
@@ -242,20 +247,39 @@ var Bar = React.createClass({
y={this.props.y}
rx="2"
ry="2" />
-
-
- {label}
+ y={this.props.y + this.labelMarginV} />
);
}
});
+
+var BarLabel = React.createClass({
+ render: function() {
+ var text = (this.props.item ? this.props.item +': '+ numberFormat(this.props.value) : '');
+ return (
+
+
+
+ {text}
+
+
+ );
+ }
+})
diff --git a/app/scripts/src/charts/charts.jsx b/app/scripts/src/charts/charts.jsx
index 2837823..2097170 100644
--- a/app/scripts/src/charts/charts.jsx
+++ b/app/scripts/src/charts/charts.jsx
@@ -9,6 +9,11 @@ var SVGChartMixin = {
var fontFamily = 'Helvetica Neue, Helvetica, sans-serif',
fontSize = 16;
+function numberFormat(num) {
+ // FIXME: Not supported in IE10- and Safari
+ return Intl.NumberFormat().format(num);
+}
+
function textWidth(str) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
text = document.createElementNS('http://www.w3.org/2000/svg', "text");