Business Variable Panel 2.0.0
We are happy to announce the release of the Variable Panel 2.0.0. This release includes the following updates:
- Added handling of the enter key for the Text Box variable type.
- Added a clear(empty) value for the multi-value variables.
- Added support for the Grafana key-value variable format for all display modes.
- Significant performance improvements.
The plugin was updated in Grafana Catalog on October 18, 2023.
Enter the key for the Text Box type
Hitting the enter key after typing a text value in the Text box variable type will trigger the dashboard refresh. Before implementing this feature, a user had to use a mouse cursor to click outside the box for the variable to take effect.
![You can use the enter key for the variable to take effect.](/img/blog/2023-10-19-variable-panel-2.0.0/enter.png)
Improved Performance
Up to 10,000 records will work swiftly without significant performance degradation. For up to 50,000 records, you might notice a slight one- to two-second delay. We achieved that improvement by using a table virtualization approach.
The illustration below displays the performance statistics we collected in the Chrome extensions to confirm the approach is working.
![Initial load time with 50,000 items in the table view.](/img/blog/2023-10-19-variable-panel-2.0.0/performance.png)
Empty value in Multi-value Variables
This feature works for the following Minimize and Button display modes.
![Empty Value allowed for the Minimize and Button Display modes.](/img/blog/2023-10-19-variable-panel-2.0.0/empty-value.png)
In previous versions, after a user had selected an item in a Multi-value variable, there was no way to unselect all values.
![Multi-value setting for dashboard variables.](/img/blog/2023-10-19-variable-panel-2.0.0/multi-value.png)
For this feature to work, you must enable the Empty Value parameter in the Variable section.
![When Empty value is enabled, a user can unselect all variable values.](/img/blog/2023-10-19-variable-panel-2.0.0/empty-all.png)
Key-values format in Variables
We introduced this feature in version 1.7.0 and it was limited to the Table/Tree View. Starting from this release all display modes (Table/Tree View, Minimize, Button) support the key-value variable format.
A Grafana variable can be composed of a key and value to make it possible to join data sets by IDs(key) while displaying user-friendly names(value).
In the illustration below, screen 1, the city
variable is created with three key-value pairs.
Chicago:1, New York:2, Tampa:3
Screen 2 is a dashboard view where an end-user sees only city names. After the selection is made (here, New York:2), the variable carries a value equal to 2.
From there the city
variable's value can be used in the queries for other panels, screen 3.
![Example of the key-value variable format in the Variable panel.](/img/blog/2023-10-19-variable-panel-2.0.0/key-value.png)
Getting Started
The Variable panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.
For the latter, please use the following command.
grafana-cli plugins install volkovlabs-variable-panel
YouTube Tutorial
The Variable panel builds on top of the regular dashboard variables. It allows you to have dashboard filters in a separate panel which you can place anywhere on the dashboard.
The variable panel offers you single- and multi-variable layouts along with an advanced Tree View.
Release Notes
Features / Enhancements
- Update variable option label for parent items in tree view (#62)
- Add handling enter and escape keys for Text Variable (#69)
- Add table virtualization to improve performance (#64, #74)
- Clear value for the multi-choice variable (#66)
- Update to Plugin Tools 2.1.1 (#72)
- Use Grafana Access Policy to sign plugin (#72)
- Update to Grafana 10.1.5 (#73)
Bugfixes
- Fix key:value option selection for Minimize and Button views (#75)
Feedback
We're looking forward to hearing from you. You can use different ways to get in touch with us.
- Ask a question, request a new feature, and file a bug with GitHub issues.
- Subscribe to our YouTube Channel and leave your comments.
- Sponsor our open source plugins for Grafana through GitHub.