feat: added shortenYAxisNumbers option to axisOptions

docs/assets/js/demoConfig.js

@@ -27,7 +27,8 @@ export default {
 			colors: ["violet", "light-blue", "#46a9f9"],
 			valuesOverPoints: 1,
 			axisOptions: {
-				xAxisMode: "tick"
+				xAxisMode: "tick",
+				shortenYAxisNumbers: true
 			},
 			barOptions: {
 				stacked: 1

src/js/charts/AxisChart.js

@@ -38,6 +38,7 @@ export default class AxisChart extends BaseChart {
 		this.config.xAxisMode = options.axisOptions.xAxisMode || 'span';
 		this.config.yAxisMode = options.axisOptions.yAxisMode || 'span';
 		this.config.xIsSeries = options.axisOptions.xIsSeries || 0;
+		this.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0;
 
 		this.config.formatTooltipX = options.tooltipOptions.formatTooltipX;
 		this.config.formatTooltipY = options.tooltipOptions.formatTooltipY;
@@ -192,6 +193,7 @@ export default class AxisChart extends BaseChart {
 				{
 					mode: this.config.yAxisMode,
 					width: this.width,
+					shortenNumbers: this.config.shortenYAxisNumbers
 					// pos: 'right'
 				},
 				function() {

src/js/objects/ChartComponents.js

@@ -119,7 +119,7 @@ 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})
+					{mode: this.constants.mode, pos: this.constants.pos, shortenNumbers: this.constants.shortenNumbers})
 			);
 		},
 

src/js/utils/draw-utils.js

@@ -34,4 +34,22 @@ export function truncateString(txt, len) {
 	} else {
 		return txt;
 	}
+}
+
+export function shortenLargeNumber(label) {
+	let number;
+	if (typeof label === 'number') number = label;
+	else if (typeof label === 'string') {
+		number = Number(label);
+		if (Number.isNaN(number)) return label;
+	}
+
+	// Using absolute since log wont work for negative numbers
+	let p = Math.floor(Math.log10(Math.abs(number)));
+	if (p <= 2) return number; // Return as is for a 3 digit number of less
+	let	l = Math.floor(p / 3);
+	let shortened = (Math.pow(10, p - l * 3) * +(number / Math.pow(10, p)).toFixed(1))
+
+	// Correct for floating point error upto 2 decimal places
+	return Math.round(shortened*100)/100 + ' ' + ['', 'K', 'M', 'B', 'T'][l];;
 }

src/js/utils/draw.js

@@ -1,4 +1,4 @@
-import { getBarHeightAndYAttr, truncateString } from './draw-utils';
+import { getBarHeightAndYAttr, truncateString, shortenLargeNumber } from './draw-utils';
 import { getStringWidth } from './helpers';
 import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants';
 import { lightenDarkenColor } from './colors';
@@ -319,6 +319,8 @@ function makeVertLine(x, label, y1, y2, options={}) {
 function makeHoriLine(y, label, x1, x2, options={}) {
 	if(!options.stroke) options.stroke = BASE_LINE_COLOR;
 	if(!options.lineType) options.lineType = '';
+	if (options.shortenNumbers) label = shortenLargeNumber(label)
+	
 	let className = 'line-horizontal ' + options.className +
 		(options.lineType === "dashed" ? "dashed": "");
 
@@ -380,7 +382,8 @@ export function yLine(y, label, width, options={}) {
 	return makeHoriLine(y, label, x1, x2, {
 		stroke: options.stroke,
 		className: options.className,
-		lineType: options.lineType
+		lineType: options.lineType,
+		shortenNumbers: options.shortenNumbers
 	});
 }