Sfoglia il codice sorgente

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
};
```
pull/388/head
Ankush Menat 2 anni fa
parent
commit
624cf70f03
3 ha cambiato i file con 19 aggiunte e 5 eliminazioni
  1. +4
    -2
      src/js/charts/AxisChart.js
  2. +6
    -1
      src/js/objects/ChartComponents.js
  3. +9
    -2
      src/js/utils/draw.js

+ 4
- 2
src/js/charts/AxisChart.js Vedi 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;


+ 6
- 1
src/js/objects/ChartComponents.js Vedi 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
})
);
},



+ 9
- 2
src/js/utils/draw.js Vedi 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,
});
}



Caricamento…
Annulla
Salva