Plugins 〉Interactive Tree Panel


Developer
Equans NL

Sign up to receive occasional product news and updates:



Panel
community

Interactive Tree Panel

  • Overview
  • Installation
  • Change log
  • Related content

Interactive Tree Plugin

Welcome to the Interactive Tree Plugin, your solution for creating interactive Tree diagrams in Grafana 10.0+.

Plugin Demo

How it Works

The Interactive Tree Panel is designed to visualize hierarchical data effortlessly. To use it effectively, make sure your dataset includes the following fields for each row:

  • Node ID: Identifies each node uniquely.
  • Parent ID: Specifies the parent node's ID for each node.
  • Node Name: Describes the name or label of each node.

Don't worry if you have additional fields; the panel can handle them seamlessly. In the panel settings, you can customize the column names corresponding to Node ID, Parent ID, and Node Name.

The panel starts by identifying rows with NULL in the Parent ID field; these are considered root nodes. It then recursively adds child nodes by matching the Node ID of a root node with the Parent ID of other nodes.

Hierarchical Data Example

Panel Options

When configuring the panel, you have several customization options at your disposal:

  • Node ID field name: Specify the field containing the node IDs.
  • Node label field name: Define the field that holds the node labels.
  • Node parent ID field name: Set the field containing the parent node IDs.
  • Expanded levels: Control the number of expanded tree layers initially displayed.
  • Show item count: Toggle to display the count of first-level child nodes for nodes with children.
  • Order in each level: Sort nodes by name in ascending, descending, or custom order.
  • Allow multi select using Ctrl-Click or Shift-Click: Enable multiple node selection by holding the Ctrl or shift key.
  • Node click dashboard variable: Define the dashboard variable to set when clicking a node or leaf.

Plugin Options Demo

With the Interactive Tree Plugin, you can effortlessly create interactive and informative tree diagrams to visualize your hierarchical data. Explore the possibilities and make your data come to life!

Installing Interactive Tree Panel on Grafana Cloud:

For more information, visit the docs on plugin installation.

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.3.1 (2023-10-27)

Bug Fixes

  • add missing css for wrapping overflow (6a77b1e)

1.3.0 (2023-10-24)

Features

  • Select nodes based on dashboard variable (7f7b090)

Bug Fixes

  • remove tree-click-event-control-mode (578d391)

1.2.7 (2023-10-19)

Bug Fixes

1.2.0 (2023-10-17)

Features

  • remove onClick handler to be more sandboxed (b5209bb)

1.1.0 (2023-10-17)

Features

  • validate detached branches (a1cab8b)
  • validate on unique ID values (ad8c4de)
  • validate that parent exists (1a31244)

Bug Fixes

  • remove toString() in favor of backtick (205225a)
  • spelling mistakes in error's (076579f)

1.0.0 (Unreleased)

Initial release.