Commit 7d76ba45 authored by Mike Greiling's avatar Mike Greiling

add 800ms animation to the line path whenever setData is called

parent 4a17b833
......@@ -113,6 +113,7 @@ export default class BurndownChart {
this.idealData = [idealStart, idealEnd];
}
this.queueLineAnimation = true;
this.queueRender();
}
......@@ -207,6 +208,11 @@ export default class BurndownChart {
if (this.data != null && this.data.length > 1) {
this.actualLinePath.datum(this.data).attr('d', this.line);
this.idealLinePath.datum(this.idealData).attr('d', this.line);
if (this.queueLineAnimation === true) {
this.queueLineAnimation = false;
this.constructor.animateLinePath(this.actualLinePath, 800);
}
}
}
......@@ -227,4 +233,29 @@ export default class BurndownChart {
}
this.ticksLeft = seconds * 50;
}
static animateLinePath(path, duration = 1000) {
// hack to run a callback at transition end
function after(transition, callback) {
let i = 0;
transition
.each(() => (i += 1))
.each('end', function end(...args) {
i -= 1;
if (i === 0) {
callback.apply(this, args);
}
});
}
const lineLength = path.node().getTotalLength();
path
.attr('stroke-dasharray', `${lineLength} ${lineLength}`)
.attr('stroke-dashoffset', lineLength)
.transition()
.duration(duration)
.ease('linear')
.attr('stroke-dashoffset', 0)
.call(after, () => path.attr('stroke-dasharray', null));
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment