feat: use existing min and max values to set plugin values

remove default min and max values

CHANGELOG.md

@@ -4,6 +4,12 @@ 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.1.0] - 2024-01-23
+- Allow only variables of type `textbox` to be selected
+- Remove default min and max values and use the values from the current variable value
+- Fix the bug where setting min and max values above the threshold crashed the panel
+- Add `delimiterSpace` variable to allow adding/removing space before and after the delimeter
+
 ## [1.0.1] - 2024-01-18
 - Add default prefix, delimiter and suffix if it is not defined
 - Allow select of variable from options

README.md

@@ -34,8 +34,6 @@ After installation, you can add the Range Slider Panel to any dashboard:
    - `Variable Label`: Variable label that is shown on the panel 
    - `Minimum Threshold`: Lower threshold for the variable
    - `Maximum Threshold`: Upper threshold for the variable
-   - `Default Minimum Value`: Set the default minimum value for the slider.
-   - `Default Maximum Value`: Set the default maximum value for the slider.
    - `Range Prefix`: Define a prefix for the range (e.g., '[').
    - `Range Suffix`: Define a suffix for the range (e.g., ']').
    - `Range Delimiter`: Specify a delimiter for the range (e.g., 'TO').

src/components/SimplePanel.tsx

@@ -3,6 +3,7 @@ import { PanelProps } from '@grafana/data';
 import MultiRangeSlider from 'multi-range-slider-react';
 import { locationService } from '@grafana/runtime';
 import { SimpleOptions } from '../types';
+import findMinAndMaxValues from './utils/findMinAndMaxValues';
 
 const DEFAULT_PREFIX = "["
 const DEFAUT_DELIMITER = "TO"
@@ -17,8 +18,14 @@ interface Props extends PanelProps<SimpleOptions> {}
 
 const SimplePanel: React.FC<Props> = ({ options }) => {
 
-  const [_minValue, setMinValue] = useState(0);
-  const [_maxValue, setMaxValue] = useState(0);
+  const urlParams = new URLSearchParams(window.location.search);
+
+  const selectedVariableValue = urlParams.get(`var-${options.variableName}`);
+
+  const { minValue, maxValue } = findMinAndMaxValues(selectedVariableValue);
+
+  const [_minValue, setMinValue] = useState<string>(minValue);
+  const [_maxValue, setMaxValue] = useState<string>(maxValue);
 
 
   const handleInput = (e: RangeChangeEvent) => {
@@ -33,8 +40,8 @@ const SimplePanel: React.FC<Props> = ({ options }) => {
       maxValue = options.variableMaximumThreshold;
     }
 
-    setMinValue(minValue);
-    setMaxValue(maxValue);
+    setMinValue(minValue.toString());
+    setMaxValue(maxValue.toString());
 
     if (minValue === maxValue) {
       variableValue = `${minValue}`;
@@ -55,8 +62,8 @@ const SimplePanel: React.FC<Props> = ({ options }) => {
         ruler={false}
         label={true}
         preventWheel={false}
-        minValue={_minValue || options.variableDefaultMinimumValue}
-        maxValue={_maxValue || options.variableDefaultMaximumValue}
+        minValue={_minValue}
+        maxValue={_maxValue}
         onInput={(e) => {
           handleInput({
             minValue: e.minValue,

src/components/utils/findMinAndMaxValues.ts

@@ -0,0 +1,10 @@
+export default function findMinAndMaxValues(variableValue: string | null) {
+    const regex = /^.*?(\d+).*?(\d+)[^\d]*$/;
+    const matches = variableValue?.match(regex);
+
+    if (matches && matches.length >= 3) {
+        return { minValue: matches[1].toString(), maxValue: matches[2].toString() };
+    } else {
+        return { minValue: "25", maxValue: "75" };
+    }
+}

src/module.ts

@@ -4,6 +4,7 @@ import SimplePanel from './components/SimplePanel';
 import { getTemplateSrv } from '@grafana/runtime';
 
 export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
+
   return builder
     .addSelect({
       path: 'variableName',
@@ -24,26 +25,6 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
       description: 'The user-friendly label of the variable',
       defaultValue: 'My First Variable',
     })
-    .addTextInput({
-      path: 'variableMinimumThreshold',
-      name: 'Minimum threshold',
-      defaultValue: '0',
-    })
-    .addTextInput({
-      path: 'variableMaximumThreshold',
-      name: 'Maximum threshold',
-      defaultValue: '100',
-    })
-    .addTextInput({
-      path: 'variableDefaultMinimumValue',
-      name: 'Default minimum value',
-      defaultValue: '25',
-    })
-    .addTextInput({
-      path: 'variableDefaultMaximumValue',
-      name: 'Default maximum value',
-      defaultValue: '75',
-    })
     .addTextInput({
       path: 'rangePrefix',
       name: 'Range Prefix',

src/plugin.json

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

src/types.ts

@@ -3,8 +3,6 @@ export interface SimpleOptions {
   variableLabel: string;
   variableMinimumThreshold: number;
   variableMaximumThreshold: number;
-  variableDefaultMinimumValue: number;
-  variableDefaultMaximumValue: number;
   rangePrefix: string;
   rangeSuffix: string;
   rangeDelimiter: string;