jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: custom number formatter function

Browse Source 
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
};
```
This commit is contained in:
Ankush Menat 2022-07-15 16:33:46 +05:30
parent 5ea1d33fdf
commit 624cf70f03
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/charts/AxisChart.js
View File

@ -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;

7
src/js/objects/ChartComponents.js
View File

@ -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
})
);
},

11
src/js/utils/draw.js
View File

@ -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,
});
}