mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
e9aa8a3c2f
* draw dotted line for incomplete data * add title to tooltip * refactor parts into separate components * move utils * refactor render logic of tooltip * more refactoring * fix issue in safari * tweaks * test * make an approximation as a straight line. * update screenshots * fix the tooltip hiding behavior. * add prop for disabling animation
34 lines
863 B
TypeScript
34 lines
863 B
TypeScript
import * as d3 from 'd3';
|
|
|
|
export type AnimationType = 'left' | 'fadeIn' | 'none';
|
|
|
|
export const animateLeft = (path: SVGPathElement) => {
|
|
const totalLength = path.getTotalLength() || 0;
|
|
d3.select(path)
|
|
.attr('opacity', 1)
|
|
.attr('stroke-dasharray', `${ totalLength },${ totalLength }`)
|
|
.attr('stroke-dashoffset', totalLength)
|
|
.transition()
|
|
.duration(750)
|
|
.ease(d3.easeLinear)
|
|
.attr('stroke-dashoffset', 0);
|
|
};
|
|
|
|
export const animateFadeIn = (path: SVGPathElement) => {
|
|
d3.select(path)
|
|
.transition()
|
|
.duration(750)
|
|
.ease(d3.easeLinear)
|
|
.attr('opacity', 1);
|
|
};
|
|
|
|
export const noneAnimation = (path: SVGPathElement) => {
|
|
d3.select(path).attr('opacity', 1);
|
|
};
|
|
|
|
export const ANIMATIONS: Record<AnimationType, (path: SVGPathElement) => void> = {
|
|
left: animateLeft,
|
|
fadeIn: animateFadeIn,
|
|
none: noneAnimation,
|
|
};
|