jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

move animate constants entirely to animate.js

Browse Source
This commit is contained in:
pratu16x7 2017-11-25 23:39:26 +05:30
parent 1bba271403
commit a61f336d71
9 changed files with 219 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
dist/frappe-charts.esm.js vendored
View File

@ -450,6 +450,13 @@ var UnitRenderer = (function() {
return UnitRenderer; return UnitRenderer;
})(); })();
const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350;
const MARKER_LINE_ANIM_DUR = 350;
const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein';
var Animator = (function() { var Animator = (function() {
var Animator = function(totalHeight, totalWidth, zeroLine, avgUnitWidth) { var Animator = function(totalHeight, totalWidth, zeroLine, avgUnitWidth) {
// constants // constants
@ -469,18 +476,18 @@ var Animator = (function() {
x = start + (width * index); x = start + (width * index);
return [barObj, {width: width, height: height, x: x, y: y}, 350, "easein"]; return [barObj, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING];
// bar.animate({height: args.newHeight, y: yTop}, 350, mina.easein); // bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
}, },
dot: function(dotObj, x, yTop) { dot: function(dotObj, x, yTop) {
return [dotObj, {cx: x, cy: yTop}, 350, "easein"]; return [dotObj, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING];
// dot.animate({cy: yTop}, 350, mina.easein); // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
}, },
path: function(d, pathStr) { path: function(d, pathStr) {
let pathComponents = []; let pathComponents = [];
const animPath = [{unit: d.path, object: d, key: 'path'}, {d:"M"+pathStr}, 350, "easein"]; const animPath = [{unit: d.path, object: d, key: 'path'}, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
pathComponents.push(animPath); pathComponents.push(animPath);
if(d.regionPath) { if(d.regionPath) {
@ -490,14 +497,36 @@ var Animator = (function() {
const animRegion = [ const animRegion = [
{unit: d.regionPath, object: d, key: 'regionPath'}, {unit: d.regionPath, object: d, key: 'regionPath'},
{d:"M" + regStartPt + pathStr + regEndPt}, {d:"M" + regStartPt + pathStr + regEndPt},
350, PATH_ANIM_DUR,
"easein" STD_EASING
]; ];
pathComponents.push(animRegion); pathComponents.push(animRegion);
} }
return pathComponents; return pathComponents;
}, },
verticalLine: function(xLine, newX, oldX) {
return [
{unit: xLine, array: [0], index: 0},
{transform: `${ newX }, 0`},
MARKER_LINE_ANIM_DUR,
STD_EASING,
"translate",
{transform: `${ oldX }, 0`}
];
},
horizontalLine: function(yLine, newY, oldY) {
return [
{unit: yLine, array: [0], index: 0},
{transform: `0, ${ newY }`},
MARKER_LINE_ANIM_DUR,
STD_EASING,
"translate",
{transform: `0, ${ oldY }`}
];
}
}; };
return Animator; return Animator;
@ -514,7 +543,7 @@ const EASING = {
easeinout: "0.42 0 0.58 1" easeinout: "0.42 0 0.58 1"
}; };
function animateSVG(element, props, dur, easingType="linear", type=undefined, oldValues={}) { function animateSVGElement(element, props, dur, easingType="linear", type=undefined, oldValues={}) {
let animElement = element.cloneNode(true); let animElement = element.cloneNode(true);
let newElement = element.cloneNode(true); let newElement = element.cloneNode(true);
@ -570,7 +599,7 @@ function transform(element, style) { // eslint-disable-line no-unused-vars
element.style.oTransform = style; element.style.oTransform = style;
} }
function runSVGAnimation(svgContainer, elements) { function animateSVG(svgContainer, elements) {
let newElements = []; let newElements = [];
let animElements = []; let animElements = [];
@ -581,7 +610,7 @@ function runSVGAnimation(svgContainer, elements) {
let animElement, newElement; let animElement, newElement;
element[0] = obj.unit; element[0] = obj.unit;
[animElement, newElement] = animateSVG(...element); [animElement, newElement] = animateSVGElement(...element);
newElements.push(newElement); newElements.push(newElement);
animElements.push([animElement, parent]); animElements.push([animElement, parent]);
@ -605,6 +634,25 @@ function runSVGAnimation(svgContainer, elements) {
return animSvg; return animSvg;
} }
function runSMILAnimation(parent, svgElement, elementsToAnimate) {
if(elementsToAnimate.length === 0) return;
let animSvgElement = animateSVG(svgElement, elementsToAnimate);
if(svgElement.parentNode == parent) {
parent.removeChild(svgElement);
parent.appendChild(animSvgElement);
}
// Replace the new svgElement (data has already been replaced)
setTimeout(() => {
if(animSvgElement.parentNode == parent) {
parent.removeChild(animSvgElement);
parent.appendChild(svgElement);
}
}, REPLACE_ALL_NEW_DUR);
}
function normalize(x) { function normalize(x) {
// Calculates mantissa and exponent of a number // Calculates mantissa and exponent of a number
// Returns normalized number and exponent // Returns normalized number and exponent
@ -1366,7 +1414,8 @@ class AxisChart extends BaseChart {
} }
makeXLines(positions, values) { makeXLines(positions, values) {
let [start_at, height, text_start_at, axis_line_class] = getXLineProps(this.height, this.x_axis_mode); let [start_at, height, text_start_at,
axis_line_class] = getXLineProps(this.height, this.x_axis_mode);
this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`); this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
let char_width = 8; let char_width = 8;
@ -1406,8 +1455,8 @@ class AxisChart extends BaseChart {
} }
makeYLines(positions, values) { makeYLines(positions, values) {
let [width, text_end_at, axis_line_class, start_at] = getYLineProps( let [width, text_end_at, axis_line_class,
this.width, this.y_axis_mode); start_at] = getYLineProps(this.width, this.y_axis_mode);
this.yAxisLines = []; this.yAxisLines = [];
this.y_axis_group.textContent = ''; this.y_axis_group.textContent = '';
@ -1427,25 +1476,6 @@ class AxisChart extends BaseChart {
}); });
} }
// make_y_specifics(positions, value_objs) {
// this.specific_y_group.textContent = '';
// value_objs.map((d, i) => {
// this.specific_y_group.appendChild(
// makeYLine(
// 0,
// this.width,
// this.width + 5,
// d.title.toUpperCase(),
// 'specific-value',
// 'specific-value',
// positions[i],
// false,
// d.line_type
// )
// );
// });
// }
draw_graph(init=false) { draw_graph(init=false) {
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
this.y.map((d, i) => { this.y.map((d, i) => {
@ -1589,7 +1619,6 @@ class AxisChart extends BaseChart {
if(!new_x) { if(!new_x) {
new_x = this.x; new_x = this.x;
} }
this.elements_to_animate = [];
this.updating = true; this.updating = true;
this.old_x_values = this.x.slice(); this.old_x_values = this.x.slice();
@ -1612,72 +1641,55 @@ class AxisChart extends BaseChart {
this.animate_graphs(); this.animate_graphs();
// Trigger animation with the animatable elements in this.elements_to_animate
this.run_animation();
this.updating = false; this.updating = false;
} }
run_animation() {
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
this.chart_wrapper.appendChild(anim_svg);
}
// Replace the new svg (data has long been replaced)
setTimeout(() => {
if(anim_svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(anim_svg);
this.chart_wrapper.appendChild(this.svg);
}
}, 250);
}
animate_graphs() { animate_graphs() {
this.elements_to_animate = [];
// Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements(
this.x_old_axis_positions.slice(),
this.x_axis_positions.slice()
);
let [oldYAxis, newYAxis] = equilizeNoOfElements(
this.oldYAxisPositions.slice(),
this.yAxisPositions.slice()
);
let newXValues = this.x.slice();
let newYValues = this.y_axis_values.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) {
this.makeXLines(old_x, newXValues);
}
// No Y extra check?
this.makeYLines(oldYAxis, newYValues);
// Animation
if(extra_points !== 0) {
this.animateXLines(old_x, new_x);
}
this.animateYLines(oldYAxis, newYAxis);
this.y.map(d => { this.y.map(d => {
// Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements(
this.x_old_axis_positions.slice(),
this.x_axis_positions.slice()
);
let [old_y, new_y] = equilizeNoOfElements( let [old_y, new_y] = equilizeNoOfElements(
this.old_y_axis_tops[d.index].slice(), this.old_y_axis_tops[d.index].slice(),
d.y_tops.slice() d.y_tops.slice()
); );
let [oldYAxis, newYAxis] = equilizeNoOfElements(
this.oldYAxisPositions.slice(),
this.yAxisPositions.slice()
);
let newXValues = this.x.slice();
let newYValues = this.y_axis_values.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) { if(extra_points > 0) {
this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]);
this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length); this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length);
this.makeXLines(old_x, newXValues);
}
// No Y extra check?
this.makeYLines(oldYAxis, newYValues);
if(!this.updating) {
// Animation
if(extra_points !== 0) {
this.animateXLines(old_x, new_x);
}
d.path && this.animate_path(d, new_x, new_y);
this.animate_units(d, new_x, new_y);
this.animateYLines(oldYAxis, newYAxis);
} }
// Animation
d.path && this.animate_path(d, new_x, new_y);
this.animate_units(d, new_x, new_y);
}); });
runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
setTimeout(() => { setTimeout(() => {
this.y.map(d => { this.y.map(d => {
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]); this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]);
@ -1693,7 +1705,7 @@ class AxisChart extends BaseChart {
animate_path(d, new_x, new_y) { animate_path(d, new_x, new_y) {
const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y)); const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y));
this.elements_to_animate = this.elements_to_animate this.elements_to_animate = this.elements_to_animate
.concat(this.animator['path'](d, newPointsList.join("L"))); .concat(this.animator.path(d, newPointsList.join("L")));
} }
animate_units(d, new_x, new_y) { animate_units(d, new_x, new_y) {
@ -1713,32 +1725,22 @@ class AxisChart extends BaseChart {
animateXLines(oldX, newX) { animateXLines(oldX, newX) {
this.xAxisLines.map((xLine, i) => { this.xAxisLines.map((xLine, i) => {
this.elements_to_animate.push([ this.elements_to_animate.push(this.animator.verticalLine(
{unit: xLine, array: [0], index: 0}, xLine, newX[i], oldX[i]
{transform: `${ newX[i] }, 0`}, ));
350,
"easein",
"translate",
{transform: `${ oldX[i] }, 0`}
]);
}); });
} }
animateYLines(oldY, newY) { animateYLines(oldY, newY) {
this.yAxisLines.map((yLine, i) => { this.yAxisLines.map((yLine, i) => {
this.elements_to_animate.push([ this.elements_to_animate.push(this.animator.horizontalLine(
{unit: yLine, array: [0], index: 0}, yLine, newY[i], oldY[i]
{transform: `0, ${ newY[i] }`}, ));
350,
"easein",
"translate",
{transform: `0, ${ oldY[i] }`}
]);
}); });
} }
animateYAnnotations() { animateYAnnotations() {
//
} }
add_data_point(y_point, x_point, index=this.x.length) { add_data_point(y_point, x_point, index=this.x.length) {
@ -2261,30 +2263,9 @@ class PieChart extends BaseChart {
}); });
if(init){ if(init){
this.run_animation(); runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
} }
} }
run_animation() {
// if(this.isAnimate) return ;
// this.isAnimate = true;
if(!this.elements_to_animate || this.elements_to_animate.length === 0) return;
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
this.chart_wrapper.appendChild(anim_svg);
}
// Replace the new svg (data has long been replaced)
setTimeout(() => {
// this.isAnimate = false;
if(anim_svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(anim_svg);
this.chart_wrapper.appendChild(this.svg);
}
}, 650);
}
calTranslateByAngle(property){ calTranslateByAngle(property){
const{radius,hoverRadio} = this; const{radius,hoverRadio} = this;

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

142
src/js/charts/AxisChart.js
View File

@ -2,9 +2,9 @@ import { offset } from '../utils/dom';
import { UnitRenderer, makeXLine, makeYLine } from '../utils/draw'; import { UnitRenderer, makeXLine, makeYLine } from '../utils/draw';
import { equilizeNoOfElements, getXLineProps, getYLineProps } from '../utils/draw-utils'; import { equilizeNoOfElements, getXLineProps, getYLineProps } from '../utils/draw-utils';
import { Animator } from '../utils/animate'; import { Animator } from '../utils/animate';
import { runSVGAnimation } from '../utils/animation'; import { runSMILAnimation } from '../utils/animation';
import { calcIntervals } from '../utils/intervals'; import { calcIntervals } from '../utils/intervals';
import { floatTwo, arraysEqual, getStringWidth } from '../utils/helpers'; import { floatTwo, getStringWidth } from '../utils/helpers';
import BaseChart from './BaseChart'; import BaseChart from './BaseChart';
export default class AxisChart extends BaseChart { export default class AxisChart extends BaseChart {
@ -144,7 +144,8 @@ export default class AxisChart extends BaseChart {
} }
makeXLines(positions, values) { makeXLines(positions, values) {
let [start_at, height, text_start_at, axis_line_class] = getXLineProps(this.height, this.x_axis_mode); let [start_at, height, text_start_at,
axis_line_class] = getXLineProps(this.height, this.x_axis_mode);
this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`); this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
let char_width = 8; let char_width = 8;
@ -184,8 +185,8 @@ export default class AxisChart extends BaseChart {
} }
makeYLines(positions, values) { makeYLines(positions, values) {
let [width, text_end_at, axis_line_class, start_at] = getYLineProps( let [width, text_end_at, axis_line_class,
this.width, this.y_axis_mode); start_at] = getYLineProps(this.width, this.y_axis_mode);
this.yAxisLines = []; this.yAxisLines = [];
this.y_axis_group.textContent = ''; this.y_axis_group.textContent = '';
@ -205,25 +206,6 @@ export default class AxisChart extends BaseChart {
}); });
} }
// make_y_specifics(positions, value_objs) {
// this.specific_y_group.textContent = '';
// value_objs.map((d, i) => {
// this.specific_y_group.appendChild(
// makeYLine(
// 0,
// this.width,
// this.width + 5,
// d.title.toUpperCase(),
// 'specific-value',
// 'specific-value',
// positions[i],
// false,
// d.line_type
// )
// );
// });
// }
draw_graph(init=false) { draw_graph(init=false) {
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
this.y.map((d, i) => { this.y.map((d, i) => {
@ -367,7 +349,6 @@ export default class AxisChart extends BaseChart {
if(!new_x) { if(!new_x) {
new_x = this.x; new_x = this.x;
} }
this.elements_to_animate = [];
this.updating = true; this.updating = true;
this.old_x_values = this.x.slice(); this.old_x_values = this.x.slice();
@ -390,72 +371,55 @@ export default class AxisChart extends BaseChart {
this.animate_graphs(); this.animate_graphs();
// Trigger animation with the animatable elements in this.elements_to_animate
this.run_animation();
this.updating = false; this.updating = false;
} }
run_animation() {
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
this.chart_wrapper.appendChild(anim_svg);
}
// Replace the new svg (data has long been replaced)
setTimeout(() => {
if(anim_svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(anim_svg);
this.chart_wrapper.appendChild(this.svg);
}
}, 250);
}
animate_graphs() { animate_graphs() {
this.elements_to_animate = [];
// Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements(
this.x_old_axis_positions.slice(),
this.x_axis_positions.slice()
);
let [oldYAxis, newYAxis] = equilizeNoOfElements(
this.oldYAxisPositions.slice(),
this.yAxisPositions.slice()
);
let newXValues = this.x.slice();
let newYValues = this.y_axis_values.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) {
this.makeXLines(old_x, newXValues);
}
// No Y extra check?
this.makeYLines(oldYAxis, newYValues);
// Animation
if(extra_points !== 0) {
this.animateXLines(old_x, new_x);
}
this.animateYLines(oldYAxis, newYAxis);
this.y.map(d => { this.y.map(d => {
// Pre-prep, equilize no of positions between old and new
let [old_x, new_x] = equilizeNoOfElements(
this.x_old_axis_positions.slice(),
this.x_axis_positions.slice()
);
let [old_y, new_y] = equilizeNoOfElements( let [old_y, new_y] = equilizeNoOfElements(
this.old_y_axis_tops[d.index].slice(), this.old_y_axis_tops[d.index].slice(),
d.y_tops.slice() d.y_tops.slice()
); );
let [oldYAxis, newYAxis] = equilizeNoOfElements(
this.oldYAxisPositions.slice(),
this.yAxisPositions.slice()
);
let newXValues = this.x.slice();
let newYValues = this.y_axis_values.slice();
let extra_points = this.x_axis_positions.slice().length - this.x_old_axis_positions.slice().length;
if(extra_points > 0) { if(extra_points > 0) {
this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]); this.make_path && this.make_path(d, old_x, old_y, this.colors[d.index]);
this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length); this.make_new_units_for_dataset(old_x, old_y, this.colors[d.index], d.index, this.y.length);
this.makeXLines(old_x, newXValues);
}
// No Y extra check?
this.makeYLines(oldYAxis, newYValues);
if(!this.updating) {
// Animation
if(extra_points !== 0) {
this.animateXLines(old_x, new_x);
}
d.path && this.animate_path(d, new_x, new_y);
this.animate_units(d, new_x, new_y);
this.animateYLines(oldYAxis, newYAxis);
} }
// Animation
d.path && this.animate_path(d, new_x, new_y);
this.animate_units(d, new_x, new_y);
}); });
runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
setTimeout(() => { setTimeout(() => {
this.y.map(d => { this.y.map(d => {
this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]); this.make_path && this.make_path(d, this.x_axis_positions, d.y_tops, this.colors[d.index]);
@ -471,7 +435,7 @@ export default class AxisChart extends BaseChart {
animate_path(d, new_x, new_y) { animate_path(d, new_x, new_y) {
const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y)); const newPointsList = new_y.map((y, i) => (new_x[i] + ',' + y));
this.elements_to_animate = this.elements_to_animate this.elements_to_animate = this.elements_to_animate
.concat(this.animator['path'](d, newPointsList.join("L"))); .concat(this.animator.path(d, newPointsList.join("L")));
} }
animate_units(d, new_x, new_y) { animate_units(d, new_x, new_y) {
@ -491,32 +455,22 @@ export default class AxisChart extends BaseChart {
animateXLines(oldX, newX) { animateXLines(oldX, newX) {
this.xAxisLines.map((xLine, i) => { this.xAxisLines.map((xLine, i) => {
this.elements_to_animate.push([ this.elements_to_animate.push(this.animator.verticalLine(
{unit: xLine, array: [0], index: 0}, xLine, newX[i], oldX[i]
{transform: `${ newX[i] }, 0`}, ));
350,
"easein",
"translate",
{transform: `${ oldX[i] }, 0`}
]);
}); });
} }
animateYLines(oldY, newY) { animateYLines(oldY, newY) {
this.yAxisLines.map((yLine, i) => { this.yAxisLines.map((yLine, i) => {
this.elements_to_animate.push([ this.elements_to_animate.push(this.animator.horizontalLine(
{unit: yLine, array: [0], index: 0}, yLine, newY[i], oldY[i]
{transform: `0, ${ newY[i] }`}, ));
350,
"easein",
"translate",
{transform: `0, ${ oldY[i] }`}
]);
}); });
} }
animateYAnnotations() { animateYAnnotations() {
//
} }
add_data_point(y_point, x_point, index=this.x.length) { add_data_point(y_point, x_point, index=this.x.length) {

25
src/js/charts/PieChart.js
View File

@ -2,7 +2,7 @@ import BaseChart from './BaseChart';
import { $, offset } from '../utils/dom'; import { $, offset } from '../utils/dom';
import { makePath } from '../utils/draw'; import { makePath } from '../utils/draw';
import { lightenDarkenColor } from '../utils/colors'; import { lightenDarkenColor } from '../utils/colors';
import { runSVGAnimation, transform } from '../utils/animation'; import { runSMILAnimation, transform } from '../utils/animation';
const ANGLE_RATIO = Math.PI / 180; const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360; const FULL_ANGLE = 360;
@ -118,30 +118,9 @@ export default class PieChart extends BaseChart {
}); });
if(init){ if(init){
this.run_animation(); runSMILAnimation(this.chart_wrapper, this.svg, this.elements_to_animate);
} }
} }
run_animation() {
// if(this.isAnimate) return ;
// this.isAnimate = true;
if(!this.elements_to_animate || this.elements_to_animate.length === 0) return;
let anim_svg = runSVGAnimation(this.svg, this.elements_to_animate);
if(this.svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(this.svg);
this.chart_wrapper.appendChild(anim_svg);
}
// Replace the new svg (data has long been replaced)
setTimeout(() => {
// this.isAnimate = false;
if(anim_svg.parentNode == this.chart_wrapper) {
this.chart_wrapper.removeChild(anim_svg);
this.chart_wrapper.appendChild(this.svg);
}
}, 650);
}
calTranslateByAngle(property){ calTranslateByAngle(property){
const{radius,hoverRadio} = this; const{radius,hoverRadio} = this;

43
src/js/utils/animate.js
View File

@ -1,5 +1,12 @@
import { getBarHeightAndYAttr } from './draw-utils'; import { getBarHeightAndYAttr } from './draw-utils';
const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350;
const MARKER_LINE_ANIM_DUR = 350;
export const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein';
export var Animator = (function() { export var Animator = (function() {
var Animator = function(totalHeight, totalWidth, zeroLine, avgUnitWidth) { var Animator = function(totalHeight, totalWidth, zeroLine, avgUnitWidth) {
// constants // constants
@ -19,18 +26,18 @@ export var Animator = (function() {
x = start + (width * index); x = start + (width * index);
return [barObj, {width: width, height: height, x: x, y: y}, 350, "easein"]; return [barObj, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING];
// bar.animate({height: args.newHeight, y: yTop}, 350, mina.easein); // bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
}, },
dot: function(dotObj, x, yTop) { dot: function(dotObj, x, yTop) {
return [dotObj, {cx: x, cy: yTop}, 350, "easein"]; return [dotObj, {cx: x, cy: yTop}, UNIT_ANIM_DUR, STD_EASING];
// dot.animate({cy: yTop}, 350, mina.easein); // dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
}, },
path: function(d, pathStr) { path: function(d, pathStr) {
let pathComponents = []; let pathComponents = [];
const animPath = [{unit: d.path, object: d, key: 'path'}, {d:"M"+pathStr}, 350, "easein"]; const animPath = [{unit: d.path, object: d, key: 'path'}, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
pathComponents.push(animPath); pathComponents.push(animPath);
if(d.regionPath) { if(d.regionPath) {
@ -40,14 +47,36 @@ export var Animator = (function() {
const animRegion = [ const animRegion = [
{unit: d.regionPath, object: d, key: 'regionPath'}, {unit: d.regionPath, object: d, key: 'regionPath'},
{d:"M" + regStartPt + pathStr + regEndPt}, {d:"M" + regStartPt + pathStr + regEndPt},
350, PATH_ANIM_DUR,
"easein" STD_EASING
]; ];
pathComponents.push(animRegion); pathComponents.push(animRegion);
} }
return pathComponents; return pathComponents;
}, },
verticalLine: function(xLine, newX, oldX) {
return [
{unit: xLine, array: [0], index: 0},
{transform: `${ newX }, 0`},
MARKER_LINE_ANIM_DUR,
STD_EASING,
"translate",
{transform: `${ oldX }, 0`}
];
},
horizontalLine: function(yLine, newY, oldY) {
return [
{unit: yLine, array: [0], index: 0},
{transform: `0, ${ newY }`},
MARKER_LINE_ANIM_DUR,
STD_EASING,
"translate",
{transform: `0, ${ oldY }`}
];
}
}; };
return Animator; return Animator;

27
src/js/utils/animation.js
View File

@ -1,5 +1,7 @@
// Leveraging SMIL Animations // Leveraging SMIL Animations
import { REPLACE_ALL_NEW_DUR } from './animate';
const EASING = { const EASING = {
ease: "0.25 0.1 0.25 1", ease: "0.25 0.1 0.25 1",
linear: "0 0 1 1", linear: "0 0 1 1",
@ -9,7 +11,7 @@ const EASING = {
easeinout: "0.42 0 0.58 1" easeinout: "0.42 0 0.58 1"
}; };
function animateSVG(element, props, dur, easingType="linear", type=undefined, oldValues={}) { function animateSVGElement(element, props, dur, easingType="linear", type=undefined, oldValues={}) {
let animElement = element.cloneNode(true); let animElement = element.cloneNode(true);
let newElement = element.cloneNode(true); let newElement = element.cloneNode(true);
@ -65,7 +67,7 @@ export function transform(element, style) { // eslint-disable-line no-unused-var
element.style.oTransform = style; element.style.oTransform = style;
} }
export function runSVGAnimation(svgContainer, elements) { function animateSVG(svgContainer, elements) {
let newElements = []; let newElements = [];
let animElements = []; let animElements = [];
@ -76,7 +78,7 @@ export function runSVGAnimation(svgContainer, elements) {
let animElement, newElement; let animElement, newElement;
element[0] = obj.unit; element[0] = obj.unit;
[animElement, newElement] = animateSVG(...element); [animElement, newElement] = animateSVGElement(...element);
newElements.push(newElement); newElements.push(newElement);
animElements.push([animElement, parent]); animElements.push([animElement, parent]);
@ -99,3 +101,22 @@ export function runSVGAnimation(svgContainer, elements) {
return animSvg; return animSvg;
} }
export function runSMILAnimation(parent, svgElement, elementsToAnimate) {
if(elementsToAnimate.length === 0) return;
let animSvgElement = animateSVG(svgElement, elementsToAnimate);
if(svgElement.parentNode == parent) {
parent.removeChild(svgElement);
parent.appendChild(animSvgElement);
}
// Replace the new svgElement (data has already been replaced)
setTimeout(() => {
if(animSvgElement.parentNode == parent) {
parent.removeChild(animSvgElement);
parent.appendChild(svgElement);
}
}, REPLACE_ALL_NEW_DUR);
}