Skip to main content

Widgets

Manual​

You can implement your running dash. instance on your websites and personal dashboards, via iframes that can be configured using query parameters.

<iframe
  src="https://<YOUR_SERVER_URL>/?graph=cpu&multiView=true"
  style="border-radius: 20px"
  allowtransparency="true"
  frameborder="0"
></iframe>

Parameters​

graph​

Select the specific graph that you want to show.

  • type: string (cpu, storage, ram, network, gpu)
  • required: true

multiView​

For the cpu and storage widgets, there are multi-device views. These can be shown, by passing this parameter.

  • type: boolean

filter​

For views with multiple graphs, filter the view to just a single graph.

  • type (when graph=network): string (up, down)
  • type (when graph=gpu): string (load, memory)

showPercentage​

Show a label with the current percentage of the graph.

  • type: boolean

theme​

To override the theme of the graph. If this is not passed, the default theme of the users browser is used.

  • type: string (dark, light)

color​

To override the color of the graph, passed as a hex string. If this is not passed, the default color of the widget is used. The color needs to be passed without the trailing #.

  • type: string

surface​

To override the background color, passed as a hex string. If this is not passed, the default color of the theme is used. The color needs to be passed without the trailing #.

  • type: string

innerRadius​

This changes the border-radius on the graphs. This is mainly needed to add border-radius on views with multiple graphs, like the network graph. If you want to add a bigger border-radius to the whole container, just add it to the iframe's styles.

  • type: string

gap​

This changes the gap between the graphs. This is mainly needed on views with multiple graphs, like the network graph.

  • type: string

textSize​

This changes the font-size of the texts (e.g. percentage) in your graph.

  • type: string

textOffset​

This changes the margin of the texts (e.g. percentage) in your graph.

  • type: string

Widget Creator​

General

Theming

#
#
px
px
px
px
px

Result

<iframe
  src="https://dash.mauz.dev?graph=cpu"
  style="border-radius: 20px"
  allowtransparency="true"
  frameborder="0"
></iframe>