Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom dashboard - Just displaying a number #5578

Open
Daniel15 opened this Issue Mar 7, 2019 · 6 comments

Comments

Projects
None yet
5 participants
@Daniel15
Copy link

Daniel15 commented Mar 7, 2019

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

This comment has been minimized.

Copy link
Contributor

cakrit commented Mar 8, 2019

What you need is a badge

@jakk2809

This comment has been minimized.

Copy link

jakk2809 commented Mar 8, 2019

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

This comment has been minimized.

Copy link
Author

Daniel15 commented Mar 8, 2019

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

This comment has been minimized.

Copy link

jakk2809 commented Mar 8, 2019

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

This comment has been minimized.

Copy link
Author

Daniel15 commented Mar 10, 2019

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

This comment has been minimized.

Copy link
Contributor

gmosx commented Mar 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.