From 624cf70f03c08ba36ed394ab51a3177fc7df1be2 Mon Sep 17 00:00:00 2001
From: Ankush Menat <ankush@frappe.io>
Date: Fri, 15 Jul 2022 16:33:46 +0530
Subject: [PATCH] feat: custom number formatter function

You can now pass `numberFormatter` in `axisOptions` to customize
number shortening behaviour.

The interface for this function is pretty simple

```javascript
(value) => {
    // format value
    return value
};
```
---
 src/js/charts/AxisChart.js        |  6 ++++--
 src/js/objects/ChartComponents.js |  7 ++++++-
 src/js/utils/draw.js              | 11 +++++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js
index 6d57488..0bbdc86 100644
--- a/src/js/charts/AxisChart.js
+++ b/src/js/charts/AxisChart.js
@@ -40,6 +40,8 @@ export default class AxisChart extends BaseChart {
 		this.config.yAxisMode = options.axisOptions.yAxisMode || 'span';
 		this.config.xIsSeries = options.axisOptions.xIsSeries || 0;
 		this.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0;
+		this.config.numberFormatter = options.axisOptions.numberFormatter;
+
 		this.config.yAxisRange = options.axisOptions.yAxisRange || {},
 
 		this.config.formatTooltipX = options.tooltipOptions.formatTooltipX;
@@ -196,8 +198,8 @@ export default class AxisChart extends BaseChart {
 				{
 					mode: this.config.yAxisMode,
 					width: this.width,
-					shortenNumbers: this.config.shortenYAxisNumbers
-					// pos: 'right'
+					shortenNumbers: this.config.shortenYAxisNumbers,
+					numberFormatter: this.config.numberFormatter,
 				},
 				function () {
 					return this.state.yAxis;
diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js
index a0d01c7..cc088b6 100644
--- a/src/js/objects/ChartComponents.js
+++ b/src/js/objects/ChartComponents.js
@@ -125,7 +125,12 @@ let componentConfigs = {
 		makeElements(data) {
 			return data.positions.map((position, i) =>
 				yLine(position, data.labels[i], this.constants.width,
-					{ mode: this.constants.mode, pos: this.constants.pos, shortenNumbers: this.constants.shortenNumbers })
+					{
+						mode: this.constants.mode,
+						pos: this.constants.pos,
+						shortenNumbers: this.constants.shortenNumbers,
+						numberFormatter: this.constants.numberFormatter
+					})
 			);
 		},
 
diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js
index e0401e0..0f767dc 100644
--- a/src/js/utils/draw.js
+++ b/src/js/utils/draw.js
@@ -324,7 +324,13 @@ function makeVertLine(x, label, y1, y2, options = {}) {
 
 function makeHoriLine(y, label, x1, x2, options = {}) {
 	if (!options.lineType) options.lineType = '';
-	if (options.shortenNumbers) label = shortenLargeNumber(label);
+	if (options.shortenNumbers) {
+		if (options.numberFormatter) {
+			label = options.numberFormatter(label);
+		} else {
+			label = shortenLargeNumber(label);
+		}
+	}
 
 	let className = 'line-horizontal ' + options.className +
 		(options.lineType === "dashed" ? "dashed" : "");
@@ -391,7 +397,8 @@ export function yLine(y, label, width, options = {}) {
 	return makeHoriLine(y, label, x1, x2, {
 		className: options.className,
 		lineType: options.lineType,
-		shortenNumbers: options.shortenNumbers
+		shortenNumbers: options.shortenNumbers,
+		numberFormatter: options.numberFormatter,
 	});
 }