Using Numeral.js in Vega graphs to format numbers

Elastic Stack Kibana
1

I was wondering if its possible to use Numeral.js in custom vega graphs to format results into human readable values, and if so, how to do it. In my use case I want to format bytes to a number with the best prefix as per Numeral Formatting | Kibana Guide [master] | Elastic

I can see there a format function which is used in the sankey example, and also mentioned in this forum post but as far as I can tell this the d3js format function and not the Numeral.js format.

Thank you!

2

Hi, this is a good question. Unfortunately you can't mix these two things- the Vega formatting is totally separate from Kibana formatting. We actually have a way that we could mix the two, but it's never come up before.

Would you mind opening a Github issue requesting this? Otherwise I will do one: Issues · elastic/kibana · GitHub

1 Like
3

You can do this manually. I stopped at GB but you could keep going if you need.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "data": [
    {
      "name": "table",
      "values": [
        {"bytes": 58},
        {"bytes": 2358},
        {"bytes": 35458},
        {"bytes": 323258},
        {"bytes": 54421358},
        {"bytes": 45454421358}
      ],
      "transform": [
        {"type": "formula", "as": "fbytes", "expr": "datum.bytes < 1024 ? datum.bytes + ' B' : (datum.bytes < 1024 * 1024) ?  format(datum.bytes / 1024, ',.2f') + ' KB' : (datum.bytes < 1024 * 1024 * 1024) ? format(datum.bytes / 1024 / 1024, ',.2f') + ' MB' : (datum.bytes / 1024 / 1024 / 1024) ? format(datum.bytes / 1024 / 1024 / 1024, ',.2f') + ' GB' : 'default value if not matched'"}
      ]
    }
  ]
}

Output

image

1 Like
4

Thank you, I've made a ticket here

5

Thank you! That will get me the formatting I need for the moment.

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.