From 56dac98984274c32891026b5bb981b01af904055 Mon Sep 17 00:00:00 2001
From: Aditya Singh <aditya.singh@anyline.com>
Date: Thu, 18 Jan 2024 09:59:55 +0100
Subject: [PATCH] feat: add select option for variables allow default prefix,
 delimiter and suffix

---
 CHANGELOG.md                   |  4 ++++
 README.md                      |  4 +++-
 src/components/SimplePanel.tsx |  7 ++++++-
 src/module.ts                  | 14 +++++++++++---
 src/plugin.json                |  2 +-
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa120b9..7d0c912 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/README.md b/README.md
index fa7345b..967f8f3 100644
--- a/README.md
+++ b/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
diff --git a/src/components/SimplePanel.tsx b/src/components/SimplePanel.tsx
index 7b6ffa3..33a0ea5 100644
--- a/src/components/SimplePanel.tsx
+++ b/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,6 +16,7 @@ type RangeChangeEvent = {
 interface Props extends PanelProps<SimpleOptions> {}
 
 const SimplePanel: React.FC<Props> = ({ options }) => {
+
   const handleInput = (e: RangeChangeEvent) => {
     const { minValue, maxValue } = e;
     let variableValue;
@@ -19,7 +24,7 @@ const SimplePanel: React.FC<Props> = ({ options }) => {
     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);
diff --git a/src/module.ts b/src/module.ts
index fc76cc2..26466f8 100644
--- a/src/module.ts
+++ b/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',
-    });
+    })
 });
diff --git a/src/plugin.json b/src/plugin.json
index 62a6499..96d4070 100644
--- a/src/plugin.json
+++ b/src/plugin.json
@@ -20,7 +20,7 @@
       }
     ],
     "screenshots": [],
-    "version": "1.0.0",
+    "version": "1.0.1",
     "updated": "2024-01-08"
   },
   "dependencies": {