Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
BrightGrafana committed Feb 21, 2024
1 parent 5495d85 commit c6dda45
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 8 deletions.
21 changes: 14 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Interactive Tree Plugin

Welcome to the Interactive Tree Plugin, your solution for creating interactive Tree diagrams in Grafana 10.0+.
Welcome to the [Interactive Tree Plugin](https://github.com/BrightGrafana/bright-tree-panel), your solution for creating interactive Tree diagrams in Grafana 10.0+.

![Plugin Demo](https://equansdatahub.azureedge.net/grafana-tree-panel/tree-usage-demo.gif)

## 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:
The Interactive Tree Panel is designed to visualize hierarchical data effortlessly. To use it effectively, the following fields need to be mapped:

- **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.
- **Node Label**: 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.

Expand All @@ -22,16 +22,23 @@ The panel starts by identifying rows with NULL in the Parent ID field; these are

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

- **Click mode**: Set the action to perform when clicking a node or leaf. Options include `set variable` and `Data link`.
- **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.
- **Support disabled nodes**: set column name that indicates if a node is disabled.
- **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.
- **Show Search**: toogle to display search bar
- **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.
- **Toggle mode**: customize toggle control allowing for `no toggle`, `toggle only on chevron`, `toggle on label and chevron`, `only expand on label`
- **Node click dashboard variable**: Define the dashboard variable to set when clicking a node or leaf.
- **Order in each level**: Sort nodes by name in ascending, descending, or as provided.
- **Toggle mode**: customize toggle control allowing for `Both chevron & label toggle`, `Chevron toggles. Label only expands`, `Only chevron toggles`, `No Toggle`.
- **Show search**: Toggle to display the search bar.
- **Selection handeling**
-- **Allow multi select using Ctrl-Click or Shift-Click**: Enable multiple node selection by holding the Ctrl or shift key.
-- **Dashboard variable name**: Define the dashboard variable to set when selecting a node or leaf.
- **Data link**
-- **Data link URL**: Define the data link URL to use when clicking a node or leaf.
-- **Open in new tab**: Toggle to open the data link in a new tab.

![Plugin Options Demo](https://equansdatahub.azureedge.net/grafana-tree-panel/equans-grafana-tree-plugin-options-demo.gif)

Expand Down
2 changes: 1 addition & 1 deletion src/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const plugin = new PanelPlugin<PanelOptions>(TreePanel).setPanelOptions((
path: 'dataLinkUrl',
name: 'Data link URL',
description:
'URL to open when a node is clicked. Use the `__data` variable to access the node data. for exaple: `${__data.fields.link:raw}${__data.fields.name:percentencode}`',
'URL to open when a node is clicked. Use the `__data` variable to access the node data. for exaple: `${__data.fields.link:raw}${__data.fields.label:percentencode}`',
category: ['Data Link'],
showIf(currentOptions) {
return currentOptions.clickMode === ClickMode.DataLink;
Expand Down

0 comments on commit c6dda45

Please sign in to comment.