diff --git a/docs/assets/js/demoConfig.js b/docs/assets/js/demoConfig.js index 0937948..b7a0161 100644 --- a/docs/assets/js/demoConfig.js +++ b/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 diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index b697c66..9ae40f3 100644 --- a/src/js/charts/AxisChart.js +++ b/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() { diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js index d11d48b..ab4a982 100644 --- a/src/js/objects/ChartComponents.js +++ b/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}) ); }, diff --git a/src/js/utils/draw-utils.js b/src/js/utils/draw-utils.js index 5898e33..3388eb7 100644 --- a/src/js/utils/draw-utils.js +++ b/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];; } \ No newline at end of file diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js index 3db8f51..34907e5 100644 --- a/src/js/utils/draw.js +++ b/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 }); }