feat: add select option for variables

allow default prefix, delimiter and suffix

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to the "Range Slider Panel" plugin will be documented in thi
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2024-01-18
+- Add default prefix, delimiter and suffix if it is not defined
+- Allow select of variable from options
+
 ## [1.0.0] - 2024-01-08
 
 - Initial release of the Range Slider Panel plugin.

README.md

@@ -1,5 +1,7 @@
 # Range Slider Panel Plugin for Grafana
 
+<img width="1105" alt="Screenshot 2024-01-22 at 10 26 40" src="https://github.com/Anyline/anyline-rangeslider-panel/assets/156062632/206268af-7a4c-4ebf-bf75-a607e0949db7">
+
 ## Description
 
 The Range Slider Panel Plugin is an interactive slider component for Grafana that allows users to dynamically select a range of values to filter dashboard data. It's especially useful for creating more interactive and user-friendly dashboards. This plugin can be adapted to various data sources and supports customizing range formats, making it ideal for use with both SQL and NoSQL databases.
@@ -43,4 +45,4 @@ This plugin is released under the [Apache 2.0 License](https://github.com/Anylin
 
 ## Author
 
-Aditya Singh
+Anyline GmbH

src/components/SimplePanel.tsx

@@ -4,6 +4,10 @@ import MultiRangeSlider from 'multi-range-slider-react';
 import { locationService } from '@grafana/runtime';
 import { SimpleOptions } from '../types';
 
+const DEFAULT_PREFIX = "["
+const DEFAUT_DELIMITER = "TO"
+const DEFAULT_SUFFIX = "]"
+
 type RangeChangeEvent = {
   minValue: number;
   maxValue: number;
@@ -12,14 +16,15 @@ type RangeChangeEvent = {
 interface Props extends PanelProps<SimpleOptions> {}
 
 const SimplePanel: React.FC<Props> = ({ options }) => {
+
   const handleInput = (e: RangeChangeEvent) => {
     const { minValue, maxValue } = e;
     let variableValue;
 
     if (minValue === maxValue) {
       variableValue = `${minValue}`;
     } else {
-      variableValue = `${options.rangePrefix}${minValue} ${options.rangeDelimiter} ${maxValue}${options.rangeSuffix}`;
+      variableValue = `${options.rangePrefix || DEFAULT_PREFIX}${minValue} ${options.rangeDelimiter || DEFAUT_DELIMITER} ${maxValue}${options.rangeSuffix || DEFAULT_SUFFIX}`;
     }
 
     locationService.partial({ [`var-${options.variableName}`]: variableValue }, true);

src/module.ts

@@ -1,14 +1,22 @@
 import { PanelPlugin } from '@grafana/data';
 import { SimpleOptions } from './types';
 import SimplePanel from './components/SimplePanel';
+import { getTemplateSrv } from '@grafana/runtime';
 
 export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
   return builder
-    .addTextInput({
+    .addSelect({
       path: 'variableName',
       name: 'Variable Name',
       description: 'The name of the variable to update',
-      defaultValue: 'myFirstVariable',
+      settings: {
+        options: getTemplateSrv().getVariables().map(e => {
+          return {
+            label: e.name,
+            value: e.name
+          }
+        }),
+      },
     })
     .addTextInput({
       path: 'variableLabel',
@@ -53,5 +61,5 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
       name: 'Range Delimiter',
       description: 'Delimiter for the range (e.g., "TO" for lucene queries)',
       defaultValue: 'TO',
-    });
+    })
 });

src/plugin.json

@@ -20,7 +20,7 @@
       }
     ],
     "screenshots": [],
-    "version": "1.0.0",
+    "version": "1.0.1",
     "updated": "2024-01-08"
   },
   "dependencies": {