From 3b65eb8230028dddfcd6f0cf2e8499d7717d0f37 Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Tue, 23 Jan 2024 08:39:49 +0100 Subject: [PATCH] feat: use existing min and max values to set plugin values remove default min and max values --- CHANGELOG.md | 6 ++++++ README.md | 2 -- src/components/SimplePanel.tsx | 19 +++++++++++++------ src/components/utils/findMinAndMaxValues.ts | 10 ++++++++++ src/module.ts | 21 +-------------------- src/plugin.json | 2 +- src/types.ts | 2 -- 7 files changed, 31 insertions(+), 31 deletions(-) create mode 100644 src/components/utils/findMinAndMaxValues.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d0c912..3a7e306 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index aa38605..f3a17a0 100644 --- a/README.md +++ b/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'). diff --git a/src/components/SimplePanel.tsx b/src/components/SimplePanel.tsx index d3d3cdd..1273529 100644 --- a/src/components/SimplePanel.tsx +++ b/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 {} const SimplePanel: React.FC = ({ 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(minValue); + const [_maxValue, setMaxValue] = useState(maxValue); const handleInput = (e: RangeChangeEvent) => { @@ -33,8 +40,8 @@ const SimplePanel: React.FC = ({ 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 = ({ 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, diff --git a/src/components/utils/findMinAndMaxValues.ts b/src/components/utils/findMinAndMaxValues.ts new file mode 100644 index 0000000..d587b67 --- /dev/null +++ b/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" }; + } +} diff --git a/src/module.ts b/src/module.ts index a07adae..66622b2 100644 --- a/src/module.ts +++ b/src/module.ts @@ -4,6 +4,7 @@ import SimplePanel from './components/SimplePanel'; import { getTemplateSrv } from '@grafana/runtime'; export const plugin = new PanelPlugin(SimplePanel).setPanelOptions((builder) => { + return builder .addSelect({ path: 'variableName', @@ -24,26 +25,6 @@ export const plugin = new PanelPlugin(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', diff --git a/src/plugin.json b/src/plugin.json index 96d4070..9c13b08 100644 --- a/src/plugin.json +++ b/src/plugin.json @@ -20,7 +20,7 @@ } ], "screenshots": [], - "version": "1.0.1", + "version": "1.1.0", "updated": "2024-01-08" }, "dependencies": { diff --git a/src/types.ts b/src/types.ts index 9ed5e0a..fbb8419 100644 --- a/src/types.ts +++ b/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;