feat: add select option for variables

allow default prefix, delimiter and suffix

CHANGELOG.md

@@ -4,9 +4,6 @@ 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.0] - 2024-01-08
-
-- Initial release of the Range Slider Panel plugin.
-- Dynamic range slider for selecting value ranges.
-- Customizable range delimiter, prefix, and suffix for different query languages.
-- Options for setting default minimum and maximum values of the slider.
+## [1.0.1] - 2024-01-18
+- Add default prefix, delimiter and suffix if it is not defined
+- Allow select of variable from options

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',
-    });
+    })
 });