animate on initial values

src/charts.css

@@ -38,11 +38,11 @@
 .graph-container .axis,
 .graph-container .chart-label {
   font-size: 10px;
-  fill: #959ba1;
+  fill: #555b51;
 }
 .graph-container .axis line,
 .graph-container .chart-label line {
-  stroke: rgba(27, 31, 35, 0.1);
+  stroke: rgba(27, 31, 35, 0.2);
 }
 .graph-container .percentage-graph .progress {
   margin-bottom: 0px;

src/charts.js

@@ -46,7 +46,6 @@ class FrappeChart {
 		}
 
 		this.parent = document.querySelector(parent);
-		this.set_margins(height);
 
 		this.title = title;
 		this.subtitle = subtitle;
@@ -61,6 +60,8 @@ class FrappeChart {
 		if(this.is_navigable) {
 			this.current_index = 0;
 		}
+
+		this.set_margins(height);
 	}
 
 	set_margins(height) {
@@ -125,14 +126,18 @@ class FrappeChart {
 		this.parent.appendChild(this.container);
 
 		this.chart_wrapper = this.container.querySelector('.frappe-chart');
-		this.chart_wrapper.appendChild(this.make_graph_area());
+		// this.chart_wrapper.appendChild();
+
+		this.make_chart_area()
+		this.make_draw_area();
 
 		this.stats_wrapper = this.container.querySelector('.graph-stats-container');
 	}
 
-	make_graph_area() {
+	make_chart_area() {
 		this.svg = $$.createSVG('svg', {
 			className: 'chart',
+			inside: this.chart_wrapper,
 			width: this.base_width,
 			height: this.base_height
 		});
@@ -140,8 +145,19 @@ class FrappeChart {
 		return this.svg;
 	}
 
+	make_draw_area() {
+		this.draw_area = $$.createSVG("g", {
+			className: this.type,
+			inside: this.svg,
+			transform: `translate(${this.translate_x}, ${this.translate_y})`
+		});
+	};
+
 	setup_components() {
-		this.svg_units = $$.createSVG('g', {className: 'data-points'});
+		this.svg_units_group = $$.createSVG('g', {
+			className: 'data-points',
+			inside: this.draw_area
+		});
 	}
 
 	make_tooltip() {
@@ -151,6 +167,7 @@ class FrappeChart {
 		this.bind_tooltip();
 	}
 
+
 	show_summary() {}
 	show_custom_summary() {
 		this.summary.map(d => {
@@ -274,6 +291,8 @@ class AxisGraph extends FrappeChart {
 		this.get_x_tooltip = this.format_lambdas.x_tooltip;
 		this.get_y_tooltip = this.format_lambdas.y_tooltip;
 
+		this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
+			'yellow', 'orange', 'red'];
 	}
 
 	setup_values() {
@@ -287,63 +306,38 @@ class AxisGraph extends FrappeChart {
 	}
 
 	setup_y() {
-		// Metrics: upper limit, no. of parts, multiplier
 		this.setup_metrics();
-
-		// Axis values
 		this.y_axis_values = this.get_y_axis_values(this.upper_limit, this.parts);
-
-		// Data points
-		this.y.map(d => {
-			d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier));
-			d.svg_units = [];
-		});
-
-		this.calc_min_tops();
-	}
-
-	get_all_y_values() {
-		let all_values = [];
-		this.y.map(d => {
-			all_values = all_values.concat(d.values);
-		});
-		return all_values.concat(this.specific_values.map(d => d.value));
-	}
-
-	setup_metrics() {
-		let values = this.get_all_y_values();
-		[this.upper_limit, this.parts] = this.get_upper_limit_and_parts(values);
-		this.multiplier = this.height / this.upper_limit;
 	}
 
 	setup_components() {
+		this.y_axis_group = $$.createSVG('g', {className: 'y axis', inside: this.draw_area});
+		this.x_axis_group = $$.createSVG('g', {className: 'x axis', inside: this.draw_area});
+		this.specific_y_lines = $$.createSVG('g', {className: 'specific axis', inside: this.draw_area});
 		super.setup_components();
-		this.y_axis_group = $$.createSVG('g', {className: 'y axis'});
-		this.x_axis_group = $$.createSVG('g', {className: 'x axis'});
-		this.specific_y_lines = $$.createSVG('g', {className: 'specific axis'});
 	}
 
 	make_graph_components() {
 		this.make_y_axis();
 		this.make_x_axis();
 
-		this.y_colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
-			'yellow', 'orange', 'red']
-
-		this.y.map((d, i) => {
-			this.make_units(d.y_tops, d.color || this.y_colors[i], i);
-			this.make_path && this.make_path(d, d.color || this.y_colors[i]);
-		});
-
 		if(this.specific_values.length > 0) {
-			this.show_specific_values();
+			this.make_y_specifics();
 		}
 
-		this.setup_group();
+		this.draw_graph();
 	}
 
 	// make HORIZONTAL lines for y values
 	make_y_axis() {
+		if(this.y_axis_group.textContent) {
+			// animate from old to new, both elemnets
+		} else {
+			// only new
+		}
+
+		this.y_axis_group.textContent = '';
+
 		let width, text_end_at = -9, label_class = '', start_at = 0;
 		if(this.y_axis_mode === 'span') {		// long spanning lines
 			width = this.width + 6;
@@ -429,7 +423,38 @@ class AxisGraph extends FrappeChart {
 		});
 	}
 
-	make_units(y_values, color, dataset_index) {
+	draw_graph() {
+		let data = [];
+		this.y.map((d, i) => {
+			// Anim: Don't draw initial values, store them and update later
+			d.y_tops = d.values.map(val => this.height); // no value
+			data.push({values: d.values});
+			d.svg_units = [];
+
+			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]);
+		});
+
+		// Data points
+		// this.calc_all_y_tops();
+		// this.calc_min_tops();
+
+		setTimeout(() => {
+			this.update_values(data);
+		}, 500);
+	}
+
+	setup_navigation() {
+		// Hack: defer nav till initial update_values
+		setTimeout(() => {
+			super.setup_navigation();
+		}, 1000);
+	}
+
+	make_new_units(y_values, color, dataset_index) {
+		this.y[dataset_index].svg_units = [];
+		this.svg_units_group.textContent = '';
+
 		let d = this.unit_args;
 		y_values.map((y, i) => {
 			let data_unit = this.draw[d.type](
@@ -439,12 +464,12 @@ class AxisGraph extends FrappeChart {
 				color,
 				dataset_index
 			);
-			this.svg_units.appendChild(data_unit);
+			this.svg_units_group.appendChild(data_unit);
 			this.y[dataset_index].svg_units.push(data_unit);
 		});
 	}
 
-	show_specific_values() {
+	make_y_specifics() {
 		this.specific_values.map(d => {
 			let line = $$.createSVG('line', {
 				className: d.line_type === "dashed" ? "dashed": "",
@@ -474,21 +499,6 @@ class AxisGraph extends FrappeChart {
 		});
 	}
 
-	// translates everything with predefined x and y: TODO: make generic
-	setup_group() {
-		this.chart_group = $$.createSVG("g", {
-			className: this.type,
-			inside: this.svg,
-			transform: `translate(${this.translate_x}, ${this.translate_y})`
-		});
-		let all_components = [this.y_axis_group,
-			this.x_axis_group,
-			this.svg_units,
-			this.specific_y_lines]
-
-		all_components.map(c => this.chart_group.appendChild(c));
-	}
-
 	bind_tooltip() {
 		// should be w.r.t. this.parent, but will have to take care of
 		// all the elements and padding, margins on top
@@ -523,7 +533,7 @@ class AxisGraph extends FrappeChart {
 					return {
 						title: set.title,
 						value: set.formatted ? set.formatted[i] : set.values[i],
-						color: set.color || this.y_colors[j],
+						color: set.color || this.colors[j],
 					}
 				});
 
@@ -538,7 +548,6 @@ class AxisGraph extends FrappeChart {
 	update_values(new_y) {
 		let u = this.unit_args;
 		let elements = [];
-		elements = this.update_y_axis(elements);
 
 		this.y.map((d, i) => {
 			let new_d = new_y[i];
@@ -576,6 +585,7 @@ class AxisGraph extends FrappeChart {
 			});
 		}
 
+		// elements = elements.concat(this.update_y_axis());
 		let new_svg_units, anim_svg;
 
 		[new_svg_units, anim_svg] = $$.runSVGAnimation(this.svg, elements);
@@ -589,15 +599,19 @@ class AxisGraph extends FrappeChart {
 		}, 250);
 	}
 
-	// TODO:
-	update_y_axis(elements) {
-		// animate up or down
+	update_y_axis() {
+		let elements = [];
 		let old_upper_limit = this.upper_limit;
-		// this.setup_y();
+		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;
 	}
 
@@ -638,6 +652,27 @@ class AxisGraph extends FrappeChart {
 		this.x_offset = 0;
 	}
 
+	setup_metrics() {
+		// Metrics: upper limit, no. of parts, multiplier
+		let values = this.get_all_y_values();
+		[this.upper_limit, this.parts] = this.get_upper_limit_and_parts(values);
+		this.multiplier = this.height / this.upper_limit;
+	}
+
+	get_all_y_values() {
+		let all_values = [];
+		this.y.map(d => {
+			all_values = all_values.concat(d.values);
+		});
+		return all_values.concat(this.specific_values.map(d => d.value));
+	}
+
+	calc_all_y_tops() {
+		this.y.map(d => {
+			d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier));
+		});
+	}
+
 	calc_min_tops() {
 		this.y_min_tops = new Array(this.x_axis_values.length).fill(9999);
 		this.y.map(d => {
@@ -680,7 +715,7 @@ class BarGraph extends AxisGraph {
 		this.overlay = unit.cloneNode();
 		this.overlay.style.fill = '#000000';
 		this.overlay.style.opacity = '0.4';
-		this.chart_group.appendChild(this.overlay);
+		this.draw_area.appendChild(this.overlay);
 	}
 
 	bind_overlay() {
@@ -746,7 +781,7 @@ class LineGraph extends AxisGraph {
 			d: path_str
 		});
 
-		this.svg_units.prepend(d.path);
+		this.svg_units_group.prepend(d.path);
 	}
 }
 
@@ -775,7 +810,7 @@ class PercentageGraph extends FrappeChart {
 		this.setup();
 	}
 
-	make_graph_area() {
+	make_chart_area() {
 		this.chart_wrapper.addClass('graph-focus-margin').attr({
 			style: `margin-top: 45px;`
 		});