[add] support negative data

docs/assets/js/index.js

@@ -2,14 +2,15 @@ let bar_data = {
 	"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
 	"datasets": [{
 			"color": "orange",
-			"values": [50804, 10000, 20000, 61500, 82936.88, 24010, 4000, 6000, 25840, 50804.82, 116820, 6000],
+			"values": [50804, 10000, 20000, -61500, 82936.88, 24010, 4000, 6000, 25840, 50804.82, 116820, 6000],
+			// "values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
 			"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
 		}
 		,
 		{
 			"color": "blue",
-			"values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
+			// "values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
-			// "values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
+			"values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0],
 			"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
 		}
 	]
@@ -19,17 +20,20 @@ let line_data = {
 	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 	"datasets": [{
 			"color": "green",
-			"values": [25, 40, 30, 35, 48, 52, 17]
+			// "values": [25, 40, 30, 35, 48, 52, 17],
+			"values": [25, -90, -30, 35, 48, 52, -17]
+
 		}
 	]
 };
 
 let more_line_data = {
 	0: {
-		values: [25, 40, 30, 35, 48, 52, 17]
+		values: [25, -90, -30, 35, 48, 52, -17]
 	},
 	1: {
-		values: [35, 48, 40, 30, 52, 17, 25]
+		// values: [35, 48, 40, 30, 52, 17, 25]
+		values: [25, -40, -30, 35, 48, 52, -17]
 	},
 	2: {
 		values: [5, 48, 52, 17, 25, 40, 30]
@@ -63,6 +67,13 @@ let more_line_data = {
 	}
 }
 
+let line_chart = new frappe.chart.FrappeChart ({
+	parent: "#charts-2",
+	data: line_data,
+	type: 'bar',
+	height: 140
+})
+
 let bar_chart = new frappe.chart.FrappeChart ({
 	parent: "#charts-1",
 	data: bar_data,
@@ -71,18 +82,11 @@ let bar_chart = new frappe.chart.FrappeChart ({
 	is_navigable: 1
 })
 
-let line_chart = new frappe.chart.FrappeChart ({
-	parent: "#charts-2",
-	data: line_data,
-	type: 'line',
-	height: 140
-})
-
 bar_chart.parent.addEventListener('data-select', (e) => {
 	line_chart.update_values([more_line_data[e.index]]);
 });
 
-console.log("chart", bar_chart);
+// console.log("chart", bar_chart);
 
 
 let heatmap_data = {}

docs/index.html

@@ -26,7 +26,7 @@
       <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
         <div class="jumbotron" style="background: transparent;">
           <h1>Frappé Charts</h1>
-          <p class="mt-2">GitHub-style simple and modern charts for the web</p>
+          <p class="mt-2">GitHub-inspired simple and modern charts for the web</p>
           <p class="mt-2">with zero dependencies.</p>
         </div>
 

src/charts.js

@@ -243,47 +243,7 @@ frappe.chart.FrappeChart = class {
 	}
 
 	// Objects
-	setup_utils() {
+	setup_utils() { }
-		this.draw = {
-			'bar': (x, y, args, color, index) => {
-				let total_width = this.avg_unit_width - args.space_width;
-				let start_x = x - total_width/2;
-
-				let width = total_width / args.no_of_datasets;
-				let current_x = start_x + width * index;
-				if(y == this.height) {
-					y = this.height * 0.98;
-				}
-				return $$.createSVG('rect', {
-					className: `bar mini fill ${color}`,
-					x: current_x,
-					y: y,
-					width: width,
-					height: this.height - y
-				});
-
-			},
-			'dot': (x, y, args, color) => {
-				return $$.createSVG('circle', {
-					className: `fill ${color}`,
-					cx: x,
-					cy: y,
-					r: args.radius
-				});
-			}
-		};
-
-		this.animate = {
-			'bar': (bar, new_y, args) => {
-				return [bar, {height: args.new_height, y: new_y}, 300, "easein"];
-				// bar.animate({height: args.new_height, y: new_y}, 300, mina.easein);
-			},
-			'dot': (dot, new_y) => {
-				return [dot, {cy: new_y}, 300, "easein"];
-				// dot.animate({cy: new_y}, 300, mina.easein);
-			}
-		};
-	}
 }
 
 frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
@@ -300,6 +260,8 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 
 		this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
 			'yellow', 'orange', 'red'];
+
+		this.zero_line = this.height;
 	}
 
 	setup_values() {
@@ -316,8 +278,18 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 	}
 
 	setup_y() {
-		this.setup_metrics();
+		const values = this.get_all_y_values();
-		this.y_axis_values = this.get_y_axis_values(this.upper_limit, this.parts);
+		this.y_axis_values = this.get_y_axis_points(values);
+
+		const y_pts = this.y_axis_values;
+		const value_range = y_pts[y_pts.length-1] - y_pts[0];
+		this.multiplier = this.height / value_range;
+
+		const zero_index = y_pts.indexOf(0);
+		const interval = y_pts[1] - y_pts[0];
+		const interval_height = interval * this.multiplier;
+
+		this.zero_line = this.height - (zero_index * interval_height);
 	}
 
 	setup_components() {
@@ -353,13 +325,14 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 			label_class = 'y-axis-label';
 		}
 
-		this.y_axis_values.map((point) => {
+		this.y_axis_values.map((point, i) => {
 			let line = $$.createSVG('line', {
 				x1: start_at,
 				x2: width,
 				y1: 0,
 				y2: 0
 			});
+
 			let text = $$.createSVG('text', {
 				className: 'y-value-text',
 				x: text_end_at,
@@ -370,9 +343,14 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 
 			let y_level = $$.createSVG('g', {
 				className: `tick ${label_class}`,
-				transform: `translate(0, ${this.height - point * this.multiplier })`
+				transform: `translate(0, ${this.zero_line - point * this.multiplier })`
 			});
 
+			// Non-first Zero line
+			if(point === 0 && i !== 0) {
+				line.style.stroke = "rgba(27, 31, 35, 0.6)";
+			}
+
 			y_level.appendChild(line);
 			y_level.appendChild(text);
 
@@ -435,7 +413,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		this.svg_units_group.textContent = '';
 		this.y.map((d, i) => {
 			// Anim: Don't draw initial values, store them and update later
-			d.y_tops = new Array(d.values.length).fill(this.height); // no value
+			d.y_tops = new Array(d.values.length).fill(this.zero_line); // no value
 			data.push({values: d.values});
 			d.svg_units = [];
 
@@ -443,10 +421,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 			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);
@@ -496,7 +470,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 
 			let specific_y_level = $$.createSVG('g', {
 				className: `tick`,
-				transform: `translate(0, ${this.height - d.value * this.multiplier })`
+				transform: `translate(0, ${this.zero_line - d.value * this.multiplier })`
 			});
 
 			specific_y_level.appendChild(line);
@@ -544,6 +518,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 					}
 				});
 
+				// TODO: upside-down tooltips
 				this.tip.set_values(x, y, title, '', values);
 				this.tip.show_tip();
 				break;
@@ -556,11 +531,10 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 		// Just update values prop, setup_y() will do the rest
 		this.y.map((d, i) => {d.values = new_y[i].values;});
 
-		let old_upper_limit = this.upper_limit;
 		this.setup_y();
-		if(old_upper_limit !== this.upper_limit){
+
+		// Maybe not always
 		this.make_y_axis();
-		}
 
 		let elements_to_animate = [];
 		elements_to_animate = this.animate_for_equilength_data(elements_to_animate);
@@ -577,7 +551,10 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 
 		// elements_to_animate = elements_to_animate.concat(this.update_y_axis());
 		let anim_svg = $$.runSVGAnimation(this.svg, 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)
@@ -599,12 +576,14 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 
 	animate_for_equilength_data(elements_to_animate) {
 		this.y.map((d) => {
-			d.y_tops = d.values.map(val => frappe.chart.utils.float_2(this.height - val * this.multiplier));
+			this.set_y_tops(d);
+
+			let type = this.unit_args.type;
 			d.svg_units.map((unit, j) => {
-				elements_to_animate.push(this.animate[this.unit_args.type](
+				elements_to_animate.push(this.animate[type](
 					{unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data
 					d.y_tops[j],
-					{new_height: this.height - d.y_tops[j]}
+					this.zero_line
 				));
 			});
 		});
@@ -618,55 +597,140 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 	}
 
 	// Helpers
-	get_upper_limit_and_parts(array) {
+	get_y_axis_points(array) {
+		//*** Where the magic happens ***
+
+		// Calculates best-fit y intervals from given values
+		// and returns the interval array
+
+		// TODO: Fractions
+
+		let max_bound, min_bound, pos_no_of_parts, neg_no_of_parts, part_size;
+
+		// Critical values
 		let max_val = parseInt(Math.max(...array));
-		if((max_val+"").length <= 1) {
+		let min_val = parseInt(Math.min(...array));
-			return [10, 5];
+		if(min_val >= 0) {
-		} else {
+			min_val = 0;
-			let multiplier = Math.pow(10, ((max_val+"").length - 1));
-			let significant = Math.ceil(max_val/multiplier);
-			if(significant % 2 !== 0) significant++;
-			let parts = (significant < 5) ? significant : significant/2;
-			return [significant * multiplier, parts];
-		}
 		}
 
-	get_y_axis_values(upper_limit, parts) {
+		let get_params = (value1, value2) => {
-		let y_axis = [];
+			let bound1, bound2, no_of_parts_1, no_of_parts_2, interval_size;
-		for(var i = 0; i <= parts; i++){
+			if((value1+"").length <= 1) {
-			y_axis.push(upper_limit / parts * i);
+				[bound1, no_of_parts_1] = [10, 5];
+			} else {
+				[bound1, no_of_parts_1] = this.calc_upper_bound_and_no_of_parts(value1);
 			}
-		return y_axis;
+
+			interval_size = bound1 / no_of_parts_1;
+			no_of_parts_2 = this.calc_no_of_parts(value2, interval_size);
+			bound2 = no_of_parts_2 * interval_size;
+
+			return [bound1, bound2, no_of_parts_1, no_of_parts_2, interval_size];
+		}
+
+		const abs_min_val = min_val * -1;
+		if(abs_min_val <= max_val) {
+			// Get the positive region intervals
+			// then calc negative ones accordingly
+			[max_bound, min_bound, pos_no_of_parts, neg_no_of_parts, part_size]
+				= get_params(max_val, abs_min_val);
+			if(abs_min_val === 0) {
+				min_bound = 0; neg_no_of_parts = 0;
+			}
+		} else {
+			// Get the negative region here first
+			[min_bound, max_bound, neg_no_of_parts, pos_no_of_parts, part_size]
+				= get_params(abs_min_val, max_val);
+		}
+
+		// Make both region parts even
+		if(pos_no_of_parts % 2 !== 0) pos_no_of_parts++;
+		if(neg_no_of_parts % 2 !== 0) {
+			// every increase in no_of_parts entails an increase in corresponding bound
+			// except here, it happens implicitly after every calc_no_of_parts() call
+			neg_no_of_parts++;
+			min_bound += part_size;
+		}
+
+		let no_of_parts = pos_no_of_parts + neg_no_of_parts;
+		if(no_of_parts > 5) {
+			no_of_parts /= 2;
+			part_size *= 2;
+		}
+
+		return this.get_intervals(
+			(-1) * min_bound,
+			part_size,
+			no_of_parts
+		);
+	}
+
+	get_intervals(start, interval_size, count) {
+		let intervals = [];
+		for(var i = 0; i <= count; i++){
+			intervals.push(start);
+			start += interval_size;
+		}
+		console.log("intervals", intervals, count);
+		return intervals;
+	}
+
+	calc_upper_bound_and_no_of_parts(max_val) {
+		// Given a positive value, calculates a nice-number upper bound
+		// and a consequent optimal number of parts
+
+		const part_size = Math.pow(10, ((max_val+"").length - 1));
+
+		let no_of_parts = this.calc_no_of_parts(max_val, part_size);
+
+		// Use it to get a nice even upper bound
+		const upper_bound = part_size * no_of_parts;
+
+		return [upper_bound, this.get_optimal_no_of_parts(no_of_parts)];
+	}
+
+	calc_no_of_parts(value, divisor) {
+		// value should be a positive number, divisor should be greater than 0
+		// returns an even no of parts
+		let no_of_parts = Math.ceil(value / divisor);
+		if(no_of_parts % 2 !== 0) no_of_parts++; // Make it an even number
+
+		return no_of_parts;
+	}
+
+	get_optimal_no_of_parts(no_of_parts) {
+		// aka Divide by 2 if too large
+		return (no_of_parts < 5) ? no_of_parts : no_of_parts / 2;
 	}
 
 	set_avg_unit_width_and_x_offset() {
+		// Set the ... you get it
 		this.avg_unit_width = this.width/(this.x.length - 1);
 		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 = [];
+
+		// Add in all the y values in the datasets
 		this.y.map(d => {
 			all_values = all_values.concat(d.values);
 		});
+
+		// Add in all the specific values
 		return all_values.concat(this.specific_values.map(d => d.value));
 	}
 
-	calc_all_y_tops() {
+	set_y_tops(d) {
-		this.y.map(d => {
+		d.y_tops = d.values.map( val => frappe.chart.utils.float_2(this.zero_line - val * this.multiplier));
-			d.y_tops = d.values.map( val => frappe.chart.utils.float_2(this.height - val * this.multiplier));
-		});
 	}
 
 	calc_min_tops() {
+		// Maintain a global array having the ...
+
 		this.y_min_tops = new Array(this.x_axis_values.length).fill(9999);
+
 		this.y.map(d => {
 			d.y_tops.map( (y_top, i) => {
 				if(y_top < this.y_min_tops[i]) {
@@ -675,6 +739,58 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
 			});
 		});
 	}
+
+	setup_utils() {
+		this.draw = {
+			'bar': (x, y, args, color, index) => {
+				let total_width = this.avg_unit_width - args.space_width;
+				let start_x = x - total_width/2;
+
+				let width = total_width / args.no_of_datasets;
+				let current_x = start_x + width * index;
+				if(y == this.zero_line) {
+					y = this.zero_line * 0.98;
+				}
+
+				return $$.createSVG('rect', {
+					className: `bar mini fill ${color}`,
+					x: current_x,
+					y: y,
+					width: width,
+					height: this.zero_line - y
+				});
+
+			},
+			'dot': (x, y, args, color) => {
+				return $$.createSVG('circle', {
+					className: `fill ${color}`,
+					cx: x,
+					cy: y,
+					r: args.radius
+				});
+			}
+		};
+
+		this.animate = {
+			'bar': (bar_obj, y_top, zero_line) => {
+				let height, y;
+				if (y_top < zero_line) {
+					height = zero_line - y_top;
+					y = y_top;
+				} else {
+					height = y_top - zero_line;
+					y = zero_line;
+				}
+
+				return [bar_obj, {height: height, y: y}, 300, "easein"];
+				// bar.animate({height: args.new_height, y: y_top}, 300, mina.easein);
+			},
+			'dot': (dot_obj, y_top) => {
+				return [dot_obj, {cy: y_top}, 300, "easein"];
+				// dot.animate({cy: y_top}, 300, mina.easein);
+			}
+		};
+	}
 }
 
 frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
@@ -1010,7 +1126,6 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
 			let data_value = 0;
 			let color_index = 0;
 
-			// TODO: More foolproof for any data
 			let timestamp = Math.floor(current_date.getTime()/1000).toFixed(1);
 
 			if(this.data[timestamp]) {