@@ -27,7 +27,8 @@ export default { | |||||
colors: ["violet", "light-blue", "#46a9f9"], | colors: ["violet", "light-blue", "#46a9f9"], | ||||
valuesOverPoints: 1, | valuesOverPoints: 1, | ||||
axisOptions: { | axisOptions: { | ||||
xAxisMode: "tick" | |||||
xAxisMode: "tick", | |||||
shortenYAxisNumbers: true | |||||
}, | }, | ||||
barOptions: { | barOptions: { | ||||
stacked: 1 | stacked: 1 | ||||
@@ -38,6 +38,7 @@ export default class AxisChart extends BaseChart { | |||||
this.config.xAxisMode = options.axisOptions.xAxisMode || 'span'; | this.config.xAxisMode = options.axisOptions.xAxisMode || 'span'; | ||||
this.config.yAxisMode = options.axisOptions.yAxisMode || 'span'; | this.config.yAxisMode = options.axisOptions.yAxisMode || 'span'; | ||||
this.config.xIsSeries = options.axisOptions.xIsSeries || 0; | this.config.xIsSeries = options.axisOptions.xIsSeries || 0; | ||||
this.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0; | |||||
this.config.formatTooltipX = options.tooltipOptions.formatTooltipX; | this.config.formatTooltipX = options.tooltipOptions.formatTooltipX; | ||||
this.config.formatTooltipY = options.tooltipOptions.formatTooltipY; | this.config.formatTooltipY = options.tooltipOptions.formatTooltipY; | ||||
@@ -192,6 +193,7 @@ export default class AxisChart extends BaseChart { | |||||
{ | { | ||||
mode: this.config.yAxisMode, | mode: this.config.yAxisMode, | ||||
width: this.width, | width: this.width, | ||||
shortenNumbers: this.config.shortenYAxisNumbers | |||||
// pos: 'right' | // pos: 'right' | ||||
}, | }, | ||||
function() { | function() { | ||||
@@ -119,7 +119,7 @@ let componentConfigs = { | |||||
makeElements(data) { | makeElements(data) { | ||||
return data.positions.map((position, i) => | return data.positions.map((position, i) => | ||||
yLine(position, data.labels[i], this.constants.width, | 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}) | |||||
); | ); | ||||
}, | }, | ||||
@@ -34,4 +34,22 @@ export function truncateString(txt, len) { | |||||
} else { | } else { | ||||
return txt; | 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];; | |||||
} | } |
@@ -1,4 +1,4 @@ | |||||
import { getBarHeightAndYAttr, truncateString } from './draw-utils'; | |||||
import { getBarHeightAndYAttr, truncateString, shortenLargeNumber } from './draw-utils'; | |||||
import { getStringWidth } from './helpers'; | import { getStringWidth } from './helpers'; | ||||
import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants'; | import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants'; | ||||
import { lightenDarkenColor } from './colors'; | import { lightenDarkenColor } from './colors'; | ||||
@@ -319,6 +319,8 @@ function makeVertLine(x, label, y1, y2, options={}) { | |||||
function makeHoriLine(y, label, x1, x2, options={}) { | function makeHoriLine(y, label, x1, x2, options={}) { | ||||
if(!options.stroke) options.stroke = BASE_LINE_COLOR; | if(!options.stroke) options.stroke = BASE_LINE_COLOR; | ||||
if(!options.lineType) options.lineType = ''; | if(!options.lineType) options.lineType = ''; | ||||
if (options.shortenNumbers) label = shortenLargeNumber(label) | |||||
let className = 'line-horizontal ' + options.className + | let className = 'line-horizontal ' + options.className + | ||||
(options.lineType === "dashed" ? "dashed": ""); | (options.lineType === "dashed" ? "dashed": ""); | ||||
@@ -380,7 +382,8 @@ export function yLine(y, label, width, options={}) { | |||||
return makeHoriLine(y, label, x1, x2, { | return makeHoriLine(y, label, x1, x2, { | ||||
stroke: options.stroke, | stroke: options.stroke, | ||||
className: options.className, | className: options.className, | ||||
lineType: options.lineType | |||||
lineType: options.lineType, | |||||
shortenNumbers: options.shortenNumbers | |||||
}); | }); | ||||
} | } | ||||