[start] same filler and moving existing logic for axes

dist/frappe-charts.esm.js

@@ -179,23 +179,16 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 	return [height, y];
 }
 
-function equilizeNoOfPositions(old_x, old_y, new_x, new_y) {
-	let extra_count = new_x.length - old_x.length;
-	if(extra_count >= 0) {
-		// Substitute current unit set with a squiggled one (more units at end)
-		// in order to animate to stretch it later to new points
-		old_x = fillArray(old_x, extra_count);
-		old_y = fillArray(old_y, extra_count);
-	} else {
-		// Modify the new points to have extra points
-		// with the same position at end, old positions will squeeze in
-		new_x = fillArray(new_x, extra_count);
-		new_y = fillArray(new_y, extra_count);
-	}
-	return [old_x, old_y, new_x, new_y];
-}
+function equilizeNoOfPositions(oldPos, newPos,
+	extra_count=newPos.length - oldPos.length) {
 
-// Constants used
+	if(extra_count > 0) {
+		oldPos = fillArray(oldPos, extra_count);
+	} else {
+		newPos = fillArray(newPos, extra_count);
+	}
+	return [oldPos, newPos];
+}
 
 function $$2(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@@ -330,7 +323,7 @@ function makeText(className, x, y, content) {
 	});
 }
 
-function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos) {
+function makeXLine$1(height, textStartAt, point, labelClass, axisLineClass, xPos) {
 	let line = createSVG('line', {
 		x1: 0,
 		x2: 0,
@@ -1381,7 +1374,7 @@ class AxisChart extends BaseChart {
 				}
 			}
 			this.x_axis_group.appendChild(
-				makeXLine(
+				makeXLine$1(
 					height,
 					text_start_at,
 					point,
@@ -1761,12 +1754,15 @@ class AxisChart extends BaseChart {
 	animate_graphs() {
 		this.y.map(d => {
 			// Pre-prep, equilize no of positions between old and new
-			let [old_x, old_y, new_x, new_y] = equilizeNoOfPositions(
+			let [old_x, new_x] = equilizeNoOfPositions(
 				this.x_old_axis_positions.slice(),
+				this.x_axis_positions.slice()
+			);
+			let [old_y, new_y] = equilizeNoOfPositions(
 				this.old_y_axis_tops[d.index].slice(),
-				this.x_axis_positions.slice(),
 				d.y_tops.slice()
 			);
+
 			if(new_x.length - old_x.length > 0) {
 				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);
@@ -1820,7 +1816,7 @@ class AxisChart extends BaseChart {
 			if(typeof new_pos === 'string') {
 				new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
 			}
-			const x_line = makeXLine(
+			const x_line = makeXLine$1(
 				height,
 				text_start_at,
 				value, // new value
@@ -2857,14 +2853,6 @@ class Heatmap extends BaseChart {
 	}
 }
 
-// if ("development" !== 'production') {
-// 	// Enable LiveReload
-// 	document.write(
-// 		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
-// 		':35729/livereload.js?snipver=1"></' + 'script>'
-// 	);
-// }
-
 const chartTypes = {
 	line: LineChart,
 	bar: BarChart,

src/js/charts/AxisChart.js

@@ -557,12 +557,15 @@ export default class AxisChart extends BaseChart {
 	animate_graphs() {
 		this.y.map(d => {
 			// Pre-prep, equilize no of positions between old and new
-			let [old_x, old_y, new_x, new_y] = equilizeNoOfPositions(
+			let [old_x, new_x] = equilizeNoOfPositions(
 				this.x_old_axis_positions.slice(),
+				this.x_axis_positions.slice()
+			);
+			let [old_y, new_y] = equilizeNoOfPositions(
 				this.old_y_axis_tops[d.index].slice(),
-				this.x_axis_positions.slice(),
 				d.y_tops.slice()
 			);
+
 			if(new_x.length - old_x.length > 0) {
 				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);

src/js/utils/animate.js

@@ -1,6 +1,87 @@
 import { getBarHeightAndYAttr } from './draw-utils';
 
-export function getAnimXLine() {}
+let add_and_animate_line = (value, old_pos, new_pos) => {
+	if(typeof new_pos === 'string') {
+		new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
+	}
+	const x_line = makeXLine(
+		height,
+		text_start_at,
+		value, // new value
+		'x-value-text',
+		axis_line_class,
+		old_pos // old position
+	);
+	this.x_axis_group.appendChild(x_line);
+
+	this.elements_to_animate && this.elements_to_animate.push([
+		{unit: x_line, array: [0], index: 0},
+		{transform: `${ new_pos }, 0`},
+		350,
+		"easein",
+		"translate",
+		{transform: `${ old_pos }, 0`}
+	]);
+};
+
+export function getAnimXLine(height, text_start_at, axis_line_class) {
+	// Animate X AXIS to account for more or less axis lines
+
+	const old_pos = this.x_old_axis_positions;
+	const new_pos = this.x_axis_positions;
+
+	const old_vals = this.old_x_values;
+	const new_vals = this.x;
+
+	const last_line_pos = old_pos[old_pos.length - 1];
+
+	this.x_axis_group.textContent = '';
+
+	this.make_new_axis_anim_lines(
+		old_pos,
+		new_pos,
+		old_vals,
+		new_vals,
+		last_line_pos,
+		add_and_animate_line
+	);
+}
+
+export function make_new_axis_anim_lines(old_pos, new_pos, old_vals, new_vals, last_line_pos, add_and_animate_line, group) {
+	let superimposed_positions, superimposed_values;
+	let no_of_extras = new_vals.length - old_vals.length;
+	if(no_of_extras > 0) {
+		// More axis are needed
+		// First make only the superimposed (same position) ones
+		// Add in the extras at the end later
+		superimposed_positions = new_pos.slice(0, old_pos.length);
+		superimposed_values = new_vals.slice(0, old_vals.length);
+	} else {
+		// Axis have to be reduced
+		// Fake it by moving all current extra axis to the last position
+		// You'll need filler positions and values in the new arrays
+		const filler_vals = new Array(Math.abs(no_of_extras)).fill("");
+		superimposed_values = new_vals.concat(filler_vals);
+
+		const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos + "F");
+		superimposed_positions = new_pos.concat(filler_pos);
+	}
+
+	superimposed_values.map((value, i) => {
+		add_and_animate_line(value, old_pos[i], superimposed_positions[i], i, group);
+	});
+
+	if(no_of_extras > 0) {
+		// Add in extra axis in the end
+		// and then animate to new positions
+		const extra_values = new_vals.slice(old_vals.length);
+		const extra_positions = new_pos.slice(old_pos.length);
+
+		extra_values.map((value, i) => {
+			add_and_animate_line(value, last_line_pos, extra_positions[i], i, group);
+		});
+	}
+}
 
 export function getAnimYLine() {}
 

src/js/utils/draw-utils.js

@@ -24,18 +24,13 @@ export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
 	return [height, y];
 }
 
-export function equilizeNoOfPositions(old_x, old_y, new_x, new_y) {
-	let extra_count = new_x.length - old_x.length;
-	if(extra_count >= 0) {
-		// Substitute current unit set with a squiggled one (more units at end)
-		// in order to animate to stretch it later to new points
-		old_x = fillArray(old_x, extra_count);
-		old_y = fillArray(old_y, extra_count);
+export function equilizeNoOfPositions(oldPos, newPos,
+	extra_count=newPos.length - oldPos.length) {
+
+	if(extra_count > 0) {
+		oldPos = fillArray(oldPos, extra_count);
 	} else {
-		// Modify the new points to have extra points
-		// with the same position at end, old positions will squeeze in
-		new_x = fillArray(new_x, extra_count);
-		new_y = fillArray(new_y, extra_count);
+		newPos = fillArray(newPos, extra_count);
 	}
-	return [old_x, old_y, new_x, new_y];
+	return [oldPos, newPos];
 }