Custom dashboard - Just displaying a number

[Daniel15]

Question summary

When creating a custom dashboard (as documented at https://docs.netdata.cloud/web/gui/custom/#custom-dashboards), is there a way to just display a number, without a chart? As an example, I want to display "System Uptime" (system.uptime) as just a time span, without a graph. The way I imagine this working is that I could add a div or span with data-chart-library="inline" or something like that, and it'd just insert the raw value into the element.

Alternatively, I'm happy to write my own JavaScript to actually do the rendering on my page. After loading dashboard.js, is there a JS API I can hook in to get chart data? It could be something like this:

register({
  chart: 'system.uptime',
  handler: (data) => {
    // Run whatever code I want, using `data`
  },
})

Is such a function available in the JS SDK, or is it tightly coupled to the chart libraries themselves?

[cakrit]

What you need is a badge

[jakk2809]

Can badges display data dynamically? Like when it's running normally and when you hover-over different parts of a chart? I've been trying to use this (https://docs.netdata.cloud/web/gui/custom/#extracting-dimension-values) to insert values into a span, but the dimension needs to be visible somewhere in an existing chart to extract the data.

[Daniel15]

Can badges display data dynamically? Like when it's running normally and when you hover-over different parts of a chart?

Yeah, this is what I want as well. I'll probably end up pulling apart the dashboard.js file and seeing if there's anywhere I can hook into it. I haven't looked into it too far, but I'm thinking that adding a dummy chart library to NETDATA.chartLibraries that contains my own custom create/update logic would work. It would be really nice for Netdata to have an officially documented JavaScript SDK though.

[jakk2809]

A workaround I found is to insert a data-netdata div with:

data-chart-library="dygraph"
data-width="0%"
data-height="0%"
data-dimensions="<dim>"
data-show-value-of-<dim>-at="<dim>_value"

Then do the usual <span id="<dim>_value"></span> elsewhere in your webpage where you want the value to show up.

[Daniel15]

Here's my initial attempt at creating a text-only renderer:

NETDATA.chartLibraries.textonly = {
  autoresize: () => false,
  container_class: () => 'netdata-container',
  create(state, data) {
    // Round to one decimal place
    state.element.innerHTML = Math.round(data.result[0] * 10) / 10;
    return true;
  },
  enabled: true,
  format: () => 'array',
  initialized: true,
  initialize: callback => callback(),
  legend: () => null,
  max_updates_to_recreate: () => 5000,
  options: () => 'absolute',
  pixels_per_point: () => 3,
  track_colors: () => false,
  update: (state, data) => NETDATA.chartLibraries.textonly.create(state, data),
  xssRegexIgnore: new RegExp('^/api/v1/data\.result$'),
};

Usage:

<div data-netdata="system.cpu" data-chart-library="textonly"></div>

Demo: https://d.ls/netdata/textonly-test.htm

I wonder if something like this would be accepted as a pull request for Netdata?

[gmosx]

@Daniel15 It's definitely interesting. @ktsaou what do you think?

I would change the name to just text. I would also make it more stylable, e.g. use and enclosing span/div with a class.

[stale]

Currently netdata team doesn't have enough capacity to work on this issue. We will be more than glad to accept a pull request with a solution to problem described here. This issue will be closed after another 60 days of inactivity.

[cakrit]

@Daniel15 can you do a PR as you suggested so that any additional improvements are discussed there?

[Daniel15]

Sure, will see if I can get some free time to submit a pull request for this :)