diff --git a/app/scripts/src/charts/animation.jsx b/app/scripts/src/charts/animation.jsx
index 4cbfda4..e3329fb 100644
--- a/app/scripts/src/charts/animation.jsx
+++ b/app/scripts/src/charts/animation.jsx
@@ -10,7 +10,11 @@ var ChartAnimationMixin = {
anim.setAttributeNS(null, 'values', from +';'+ to);
anim.setAttributeNS(null, 'dur', this.animDuration +'ms');
anim.setAttributeNS(null, 'calcMode', 'spline');
- anim.setAttributeNS(null, 'keySplines', this.easing);
+ // Easings to consider:
+ // easeOutCirc: 0.075 0.82 0.165 1
+ // easeOutBack: 0.175 0.885 0.32 1.275
+ // easeInOutCubic: 0.645 0.045 0.355 1
+ anim.setAttributeNS(null, 'keySplines', '0.175 0.885 0.32 1.275');
anim.setAttributeNS(null, 'repeatCount', '1');
anim.addEventListener('endEvent', function() {
node.setAttributeNS(null, attr, to);
diff --git a/app/scripts/src/charts/bar_chart.jsx b/app/scripts/src/charts/bar_chart.jsx
index 8d7a9d3..d207ade 100644
--- a/app/scripts/src/charts/bar_chart.jsx
+++ b/app/scripts/src/charts/bar_chart.jsx
@@ -75,7 +75,6 @@ var BarChart = React.createClass({
points.push(point);
}
- // console.log("Setting points!");
this.setState({
points: points,
min: _.min(points, this.state.sort)[this.state.sort],
@@ -97,7 +96,6 @@ var BarChart = React.createClass({
},
render: function() {
- // console.log("Render barchart!", this.state);
return (
@@ -150,9 +148,6 @@ var BarChart = React.createClass({
var Bar = React.createClass({
mixins: [ReactRouter.Navigation, ChartAnimationMixin],
- // easing: '0.075 0.82 0.165 1', // easeOutCirc
- easing: '0.175 0.885 0.32 1.275', // easeOutBack
-
height: 30,
labelPaddingH: 5, // Label horizontal padding
labelPaddingV: 2, // Label vertical padding
@@ -176,7 +171,6 @@ var Bar = React.createClass({
return;
}
- // console.log("New bar props!", newProps.item, newProps.x, newProps.width);
this.setState({
lastBarX: (this.props.x !== undefined ? this.props.x : newProps.x),
lastBarWidth: (this.props.width !== undefined ? this.props.width : newProps.width),
@@ -187,16 +181,11 @@ var Bar = React.createClass({
calculateLabelPosition: function() {
var val = this.props.value,
offset = this.props.offset,
- width = this.props.width,
label = this.props.item + ': ' + val,
labelWidth = textWidth(label),
labelOuterWidth = labelWidth + 2*this.labelPaddingH,
labelOffsetWidth = labelOuterWidth + 2*this.labelPaddingH,
- labelMarginV = (this.props.height - this.labelOuterHeight)/2,
- labelX,
- labelY = this.props.y + this.labelOuterHeight + 1, // 1 is magic
- barX = this.props.x,
- barX2 = barX + width;
+ labelX;
if (offset === 0) {
labelX = 2*this.labelPaddingH;
@@ -222,30 +211,34 @@ var Bar = React.createClass({
},
animateAll: function() {
- // console.log("animate bar!", this.state, this.props);
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);
+ this.animate(this.refs.label, 'x', this.state.lastLabelX, this.state.labelX);
},
render: function() {
var label = this.props.item ? (this.props.item + ': ' + this.props.value) : '',
labelWidth = textWidth(label),
- labelOuterWidth = labelWidth + 2*this.labelPaddingH;
+ labelOuterWidth = (labelWidth == 0 ? 0 : labelWidth + 2*this.labelPaddingH),
+ barX = (this.state.lastBarX && this.state.lastBarX !== this.props.x
+ ? this.state.lastBarX
+ : this.props.x),
+ barWidth = (this.state.lastBarWidth && this.state.lastBarWidth !== this.props.width
+ ? this.state.lastBarWidth
+ : this.props.width);
- // var width = this.state.lastBarWidth === 0 ? this.props.width : this.state.lastBarWidth;
return (
diff --git a/app/scripts/src/charts/stacked_area_chart.jsx b/app/scripts/src/charts/stacked_area_chart.jsx
index 89edb63..32b231d 100644
--- a/app/scripts/src/charts/stacked_area_chart.jsx
+++ b/app/scripts/src/charts/stacked_area_chart.jsx
@@ -205,7 +205,6 @@ var StackedAreaChart = React.createClass({
var StackedArea = React.createClass({
mixins: [ChartAnimationMixin],
- easing: '0.175 0.885 0.32 1.275', // easeOutBack
getInitialState: function() {
return {};