add semantic tooltip formatting

dist/frappe-charts.min.cjs.js

@@ -1045,8 +1045,6 @@ var BaseChart = function () {
 		    subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
 		    _ref$colors = _ref.colors,
 		    colors = _ref$colors === undefined ? [] : _ref$colors,
-		    _ref$format_lambdas = _ref.format_lambdas,
-		    format_lambdas = _ref$format_lambdas === undefined ? {} : _ref$format_lambdas,
 		    _ref$summary = _ref.summary,
 		    summary = _ref$summary === undefined ? [] : _ref$summary,
 		    _ref$is_navigable = _ref.is_navigable,
@@ -1066,7 +1064,6 @@ var BaseChart = function () {
 		this.subtitle = subtitle;
 
 		this.data = data;
-		this.format_lambdas = format_lambdas;
 
 		this.specific_values = data.specific_values || [];
 		this.summary = summary;
@@ -1369,9 +1366,8 @@ var AxisChart = function (_BaseChart) {
 
 		_this.is_series = args.is_series;
 
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
+		_this.format_tooltip_y = args.format_tooltip_y;
+		_this.format_tooltip_x = args.format_tooltip_x;
 
 		_this.zero_line = _this.height;
 
@@ -1730,6 +1726,16 @@ var AxisChart = function (_BaseChart) {
 			var _this11 = this;
 
 			if (!this.y_min_tops) return;
+
+			var titles = this.x;
+			if (this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
+				titles = this.x.map(function (d) {
+					return _this11.format_tooltip_x(d);
+				});
+			}
+
+			var y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
+
 			for (var i = this.x_axis_positions.length - 1; i >= 0; i--) {
 				var x_val = this.x_axis_positions[i];
 				// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@@ -1737,16 +1743,15 @@ var AxisChart = function (_BaseChart) {
 					var x = x_val + this.translate_x;
 					var y = this.y_min_tops[i] + this.translate_y;
 
-					var title = this.x.formatted && this.x.formatted.length > 0 ? this.x.formatted[i] : this.x[i];
+					var title = titles[i];
 					var values = this.y.map(function (set$$1, j) {
 						return {
 							title: set$$1.title,
-							value: set$$1.formatted ? set$$1.formatted[i] : set$$1.values[i],
+							value: y_format ? _this11.format_tooltip_y(set$$1.values[i]) : set$$1.values[i],
 							color: set$$1.color || _this11.colors[j]
 						};
 					});
 
-					// TODO: upside-down tooltips for negative values?
 					this.tip.set_values(x, y, title, '', values);
 					this.tip.show_tip();
 					break;
@@ -2547,10 +2552,6 @@ var PercentageChart = function (_BaseChart) {
 
 		_this.type = 'percentage';
 
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
-
 		_this.max_slices = 10;
 		_this.max_legend_points = 6;
 
@@ -2729,9 +2730,6 @@ var PieChart = function (_BaseChart) {
 		var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));
 
 		_this.type = 'pie';
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
 		_this.elements_to_animate = null;
 		_this.hoverRadio = args.hoverRadio || 0.1;
 		_this.max_slices = 10;

dist/frappe-charts.min.esm.js

@@ -1043,8 +1043,6 @@ var BaseChart = function () {
 		    subtitle = _ref$subtitle === undefined ? '' : _ref$subtitle,
 		    _ref$colors = _ref.colors,
 		    colors = _ref$colors === undefined ? [] : _ref$colors,
-		    _ref$format_lambdas = _ref.format_lambdas,
-		    format_lambdas = _ref$format_lambdas === undefined ? {} : _ref$format_lambdas,
 		    _ref$summary = _ref.summary,
 		    summary = _ref$summary === undefined ? [] : _ref$summary,
 		    _ref$is_navigable = _ref.is_navigable,
@@ -1064,7 +1062,6 @@ var BaseChart = function () {
 		this.subtitle = subtitle;
 
 		this.data = data;
-		this.format_lambdas = format_lambdas;
 
 		this.specific_values = data.specific_values || [];
 		this.summary = summary;
@@ -1367,9 +1364,8 @@ var AxisChart = function (_BaseChart) {
 
 		_this.is_series = args.is_series;
 
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
+		_this.format_tooltip_y = args.format_tooltip_y;
+		_this.format_tooltip_x = args.format_tooltip_x;
 
 		_this.zero_line = _this.height;
 
@@ -1728,6 +1724,16 @@ var AxisChart = function (_BaseChart) {
 			var _this11 = this;
 
 			if (!this.y_min_tops) return;
+
+			var titles = this.x;
+			if (this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
+				titles = this.x.map(function (d) {
+					return _this11.format_tooltip_x(d);
+				});
+			}
+
+			var y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
+
 			for (var i = this.x_axis_positions.length - 1; i >= 0; i--) {
 				var x_val = this.x_axis_positions[i];
 				// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@@ -1735,16 +1741,15 @@ var AxisChart = function (_BaseChart) {
 					var x = x_val + this.translate_x;
 					var y = this.y_min_tops[i] + this.translate_y;
 
-					var title = this.x.formatted && this.x.formatted.length > 0 ? this.x.formatted[i] : this.x[i];
+					var title = titles[i];
 					var values = this.y.map(function (set$$1, j) {
 						return {
 							title: set$$1.title,
-							value: set$$1.formatted ? set$$1.formatted[i] : set$$1.values[i],
+							value: y_format ? _this11.format_tooltip_y(set$$1.values[i]) : set$$1.values[i],
 							color: set$$1.color || _this11.colors[j]
 						};
 					});
 
-					// TODO: upside-down tooltips for negative values?
 					this.tip.set_values(x, y, title, '', values);
 					this.tip.show_tip();
 					break;
@@ -2545,10 +2550,6 @@ var PercentageChart = function (_BaseChart) {
 
 		_this.type = 'percentage';
 
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
-
 		_this.max_slices = 10;
 		_this.max_legend_points = 6;
 
@@ -2727,9 +2728,6 @@ var PieChart = function (_BaseChart) {
 		var _this = possibleConstructorReturn(this, (PieChart.__proto__ || Object.getPrototypeOf(PieChart)).call(this, args));
 
 		_this.type = 'pie';
-		_this.get_y_label = _this.format_lambdas.y_label;
-		_this.get_x_tooltip = _this.format_lambdas.x_tooltip;
-		_this.get_y_tooltip = _this.format_lambdas.y_tooltip;
 		_this.elements_to_animate = null;
 		_this.hoverRadio = args.hoverRadio || 0.1;
 		_this.max_slices = 10;

docs/assets/js/index.js

@@ -22,7 +22,6 @@ let line_composite_data = {
 		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
 		// "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
 		// "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
-		// "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"],
 	}]
 };
 
@@ -97,7 +96,9 @@ let type_chart = new Chart({
 	data: type_data,
 	type: 'bar',
 	height: 250,
-	is_series: 1
+	is_series: 1,
+    format_tooltip_x: d => (d + '').toUpperCase(),
+    format_tooltip_y: d => d + ' pts'
 });
 
 Array.prototype.slice.call(

docs/index.html

@@ -83,7 +83,9 @@
     title: "My Awesome Chart",
     data: data,
     type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
-    height: 250
+    height: 250,
+    format_tooltip_x: d => (d + '').toUpperCase(),
+    format_tooltip_y: d => d + ' pts'
   });</code></pre>
               <div id="chart-types" class="border"></div>
               <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">

src/scripts/charts/AxisChart.js

@@ -14,9 +14,8 @@ export default class AxisChart extends BaseChart {
 
 		this.is_series = args.is_series;
 
-		this.get_y_label = this.format_lambdas.y_label;
-		this.get_y_tooltip = this.format_lambdas.y_tooltip;
-		this.get_x_tooltip = this.format_lambdas.x_tooltip;
+		this.format_tooltip_y = args.format_tooltip_y;
+		this.format_tooltip_x = args.format_tooltip_x;
 
 		this.zero_line = this.height;
 
@@ -348,6 +347,14 @@ export default class AxisChart extends BaseChart {
 
 	map_tooltip_x_position_and_show(relX) {
 		if(!this.y_min_tops) return;
+
+		let titles = this.x;
+		if(this.format_tooltip_x && this.format_tooltip_x(this.x[0])) {
+			titles = this.x.map(d=>this.format_tooltip_x(d));
+		}
+
+		let y_format = this.format_tooltip_y && this.format_tooltip_y(this.y[0].values[0]);
+
 		for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) {
 			let x_val = this.x_axis_positions[i];
 			// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@@ -355,17 +362,15 @@ export default class AxisChart extends BaseChart {
 				let x = x_val + this.translate_x;
 				let y = this.y_min_tops[i] + this.translate_y;
 
-				let title = this.x.formatted && this.x.formatted.length>0
-					? this.x.formatted[i] : this.x[i];
+				let title = titles[i];
 				let values = this.y.map((set, j) => {
 					return {
 						title: set.title,
-						value: set.formatted ? set.formatted[i] : set.values[i],
+						value: y_format ? this.format_tooltip_y(set.values[i]) : set.values[i],
 						color: set.color || this.colors[j],
 					};
 				});
 
-				// TODO: upside-down tooltips for negative values?
 				this.tip.set_values(x, y, title, '', values);
 				this.tip.show_tip();
 				break;

src/scripts/charts/BaseChart.js

@@ -10,7 +10,6 @@ export default class BaseChart {
 		title = '',
 		subtitle = '',
 		colors = [],
-		format_lambdas = {},
 		summary = [],
 
 		is_navigable = 0,
@@ -28,7 +27,6 @@ export default class BaseChart {
 		this.subtitle = subtitle;
 
 		this.data = data;
-		this.format_lambdas = format_lambdas;
 
 		this.specific_values = data.specific_values || [];
 		this.summary = summary;

src/scripts/charts/PercentageChart.js

@@ -6,10 +6,6 @@ export default class PercentageChart extends BaseChart {
 		super(args);
 		this.type = 'percentage';
 
-		this.get_y_label = this.format_lambdas.y_label;
-		this.get_x_tooltip = this.format_lambdas.x_tooltip;
-		this.get_y_tooltip = this.format_lambdas.y_tooltip;
-
 		this.max_slices = 10;
 		this.max_legend_points = 6;
 

src/scripts/charts/PieChart.js

@@ -9,9 +9,6 @@ export default class PieChart extends BaseChart {
 	constructor(args) {
 		super(args);
 		this.type = 'pie';
-		this.get_y_label = this.format_lambdas.y_label;
-		this.get_x_tooltip = this.format_lambdas.x_tooltip;
-		this.get_y_tooltip = this.format_lambdas.y_tooltip;
 		this.elements_to_animate = null;
 		this.hoverRadio = args.hoverRadio || 0.1;
 		this.max_slices = 10;