Available Widgets

Dimitrios Zorbas edited this page Feb 21, 2017 · 4 revisions

Creating a Kitto dashboard using the installer populates your new dashboard with a few essential widgets.

Below you can find a list of those core widgets, the data structure they expect to receive and options you can use to tweak their behavior.

All options below are defined using HTML data attributes.
For example in the widget below, we have defined the title, text and moreinfo options.

      <div class="widget-welcome"
           data-widget="Text"
           data-source="text"
           data-title="Hello"
           data-text="This is your shiny new dashboard."
           data-moreinfo="Protip: You can drag the widgets around!">
      </div>

All widgets accept a source options which specifies the topic on which to listen for data.
Defaults to the lowercase name of the widget (eg for the "Text" widget, it is "text").

Read providing-data-to-widgets for info on how to send data to a widget.

For additional (3rd party) widgets, read here.

To update the core widgets run:

sh -c "$(curl -fsSL https://gist.githubusercontent.com/Zorbash/98afb51cb7287ff7fe3b2b9a3331dc5f/raw/16ec3aa6e7ef88ee121ee4c30fc982e5f8775850/kitto_updater.sh)"

Number

number-widget

Options

  • title: The header of the widget
  • moreinfo: The footer of the widget
  • changerate: Set it to "off" if you don't want to display the change rate

Data Source

{ "value": 42 }

Live example: curl -XGET 'http://kitto.io/events?topics=random'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/random -d '{ "value": 42 }'

Text

text-widget

Options

Data Source

{ "text": "Hello, this is text" }

Live example: curl -XGET 'http://kitto.io/events?topics=text'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/text -d '{ "text": "Hello, this is text" }'

List

list-widget

Options

  • title: The header of the list
  • moreinfo: The footer of the list.
  • unordered: When set to true, uses a `
      for the list

Data Source

{ "items": [{ "value": 42, "label": "the answer"} ,{ "value": 9001, "label": "Kitto's awesomeness lvl" }]}

Live example: curl -XGET 'http://kitto.io/events?topics=buzzwords'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/buzzwords -d '{ "items": [{ "value": 42, "label": "the answer"} ,{ "value": 9001, "label": "Kitto's awesomeness lvl" }]}'

Graph

graph-widget

Options

  • graph-type: area (default), bar, line

Data Source

Expects time series data like:

{ "points": [{ "y": 96.0, "x": 11730821} ,{ "y": 17.0, "x": 11730822 }]}

Live example: curl -XGET 'http://kitto.io/events?topics=convergence'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/convergence -d '{ "points": [{"x": 1, "y": 42}] }'

Meter

meter-widget

Options

  • min: The minimum value of the meter, defaults to 0.
  • max: The maximum value of the meter, default to 100.

Data Source

{ "value": 42 }

Live example: curl -XGET 'http://kitto.io/events?topics=random'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/random -d '{ "value": 42 }'

Clock

clock-widget

Options

N/A

Data Source

N/A

Image

image-widget

Options

N/A

Data Source

{ "image": "https://imageurl.com" }
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.