jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

correct order of updates with new data

Browse Source
This commit is contained in:
pratu16x7 2017-10-02 01:12:05 +05:30
parent 505a2eef3e
commit dfc14c7a71
1 changed files with 24 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/charts.js
View File

@ -320,12 +320,8 @@ class AxisGraph extends FrappeChart {
make_graph_components() { make_graph_components() {
this.make_y_axis(); this.make_y_axis();
this.make_x_axis(); this.make_x_axis();
if(this.specific_values.length > 0) {
this.make_y_specifics();
}
this.draw_graph(); this.draw_graph();
this.make_y_specifics();
} }
// make HORIZONTAL lines for y values // make HORIZONTAL lines for y values
@ -424,6 +420,7 @@ class AxisGraph extends FrappeChart {
} }
draw_graph() { draw_graph() {
// TODO: Don't animate on refresh
let data = []; let data = [];
this.y.map((d, i) => { this.y.map((d, i) => {
// Anim: Don't draw initial values, store them and update later // Anim: Don't draw initial values, store them and update later
@ -546,53 +543,44 @@ class AxisGraph extends FrappeChart {
// API // API
update_values(new_y) { update_values(new_y) {
let u = this.unit_args; // Just update values prop, setup_y() will do the rest
let elements = []; this.y.map((d, i) => {d.values = new_y[i].values;});
let old_upper_limit = this.upper_limit;
this.setup_y();
if(this.old_upper_limit !== this.upper_limit){
this.make_y_axis();
}
let elements_to_animate = [];
this.y.map((d, i) => { this.y.map((d, i) => {
let new_d = new_y[i]; d.y_tops = d.values.map(val => chart_utils.float_2(this.height - val * this.multiplier));
new_d.y_tops = new_d.values.map(val => chart_utils.float_2(this.height - val * this.multiplier));
let new_units = [];
// below is equal to this.y[i].svg_units..
d.svg_units.map((unit, j) => { d.svg_units.map((unit, j) => {
let current_y_top = d.y_tops[j]; elements_to_animate.push(this.animate[this.unit_args.type](
let current_height = this.height - current_y_top; {unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data
d.y_tops[j],
let new_y_top = new_d.y_tops[j]; {new_height: this.height - d.y_tops[j]}
let new_height = current_height - (new_y_top - current_y_top); ));
let args = this.animate[u.type]({unit:unit, array:d.svg_units, index: j}, new_y_top, {new_height: new_height});
elements.push(args);
// Replace values and formatted and tops
[d.values, d.y_tops] = [new_d.values, new_d.y_tops];
}); });
}); });
this.calc_min_tops(); this.calc_min_tops();
// create new x,y pair string and animate path // create new x,y pair string and animate path
if(this.y[0].path) { if(this.y[0].path) {
new_y.map((e, i) => { this.y.map((e, i) => {
let new_points_list = e.y_tops.map((y, i) => (this.x_axis_values[i] + ',' + y)); let new_points_list = e.y_tops.map((y, i) => (this.x_axis_values[i] + ',' + y));
let new_path_str = "M"+new_points_list.join("L"); let new_path_str = "M"+new_points_list.join("L");
let args = [{unit:this.y[i].path, object: this.y[i], key:'path'}, {d:new_path_str}, 300, "easein"]; let args = [{unit:this.y[i].path, object: this.y[i], key:'path'}, {d:new_path_str}, 300, "easein"];
elements.push(args); elements_to_animate.push(args);
}); });
} }
// elements = elements.concat(this.update_y_axis()); // elements_to_animate = elements_to_animate.concat(this.update_y_axis());
let new_svg_units, anim_svg; let anim_svg = $$.runSVGAnimation(this.svg, elements_to_animate);
[new_svg_units, anim_svg] = $$.runSVGAnimation(this.svg, elements);
this.chart_wrapper.innerHTML = ''; this.chart_wrapper.innerHTML = '';
this.chart_wrapper.appendChild(anim_svg); this.chart_wrapper.appendChild(anim_svg);
// Replace the new svg (data has long been replaced)
setTimeout(() => { setTimeout(() => {
this.chart_wrapper.innerHTML = ''; this.chart_wrapper.innerHTML = '';
this.chart_wrapper.appendChild(this.svg); this.chart_wrapper.appendChild(this.svg);
@ -601,17 +589,7 @@ class AxisGraph extends FrappeChart {
update_y_axis() { update_y_axis() {
let elements = []; let elements = [];
let old_upper_limit = this.upper_limit;
this.setup_y();
console.log("upper limits", old_upper_limit, this.upper_limit);
if(this.old_upper_limit !== this.upper_limit){
// resetup y_axis
this.make_y_axis();
}
this.y.map((d, i) => {
this.make_new_units(d.y_tops, d.color || this.colors[i], i);
this.make_path && this.make_path(d, d.color || this.colors[i]);
});
return elements; return elements;
} }
@ -620,7 +598,6 @@ class AxisGraph extends FrappeChart {
} }
add_data_point(data_point) { add_data_point(data_point) {
//
this.x.push(data_point.label); this.x.push(data_point.label);
this.y.values.push(); this.y.values.push();
} }
@ -1434,7 +1411,7 @@ $$.runSVGAnimation = (svg_container, elements) => {
elements[i][0] = new_elements[i]; elements[i][0] = new_elements[i];
}); });
return [new_elements, anim_svg]; return anim_svg;
} }
$$.animateSVG = (element, props, dur, easing_type="linear") => { $$.animateSVG = (element, props, dur, easing_type="linear") => {