@perses-dev/components 0.53.0-rc.0 → 0.53.0-rc.2

package/dist/cjs/utils/axis.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,10 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "getFormattedAxis", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get getFormattedAxis () {
         return getFormattedAxis;
+    },
+    get getFormattedMultipleYAxes () {
+        return getFormattedMultipleYAxes;
     }
 });
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
@@ -27,8 +35,25 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+// Character width multipliers (approximate for typical UI fonts)
+const CHAR_WIDTH_BASE = 6;
+const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping
+/**
+ * Estimate the pixel width needed for an axis label using Canvas API.
+ */ function estimateLabelWidth(format, maxValue) {
+    const formattedLabel = (0, _core.formatValue)(maxValue, format);
+    // Create a canvas element (reuse if possible for performance)
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+        // Fallback to estimation if canvas not available
+        return formattedLabel.length * CHAR_WIDTH_BASE;
+    }
+    context.font = '12px sans-serif';
+    const metrics = context.measureText(formattedLabel);
+    return metrics.width;
+}
 function getFormattedAxis(axis, unit) {
-    // TODO: support alternate yAxis that shows on right side
     const AXIS_DEFAULT = {
         type: 'value',
         boundaryGap: [
@@ -45,3 +70,53 @@ function getFormattedAxis(axis, unit) {
         (0, _merge.default)(AXIS_DEFAULT, axis)
     ];
 }
+function getFormattedMultipleYAxes(baseAxis, baseFormat, additionalFormats, maxValues) {
+    const axes = [];
+    // Base/default Y axis (left side)
+    const baseAxisConfig = (0, _merge.default)({
+        type: 'value',
+        position: 'left',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return (0, _core.formatValue)(value, baseFormat);
+            },
+            // Let ECharts handle width automatically
+            overflow: 'truncate'
+        }
+    }, baseAxis);
+    axes.push(baseAxisConfig);
+    // Calculate cumulative offsets based on actual formatted label widths
+    let cumulativeOffset = 0;
+    // Additional Y axes (right side) for each unique format
+    additionalFormats.forEach((format, index)=>{
+        const rightAxisConfig = {
+            type: 'value',
+            position: 'right',
+            // Dynamic offset based on cumulative width of preceding axis labels
+            offset: cumulativeOffset,
+            boundaryGap: [
+                0,
+                '10%'
+            ],
+            axisLabel: {
+                formatter: (value)=>{
+                    return (0, _core.formatValue)(value, format);
+                }
+            },
+            splitLine: {
+                show: false
+            },
+            show: baseAxis?.show
+        };
+        axes.push(rightAxisConfig);
+        // For subsequent axes, add the width of the previous axis's labels
+        if (maxValues) {
+            cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;
+        }
+    });
+    return axes;
+}

package/dist/cjs/utils/browser-storage.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/chart-actions.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/combine-sx.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/component-ids.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/data-field-interpolation.js

@@ -0,0 +1,230 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get extractFieldNames () {
+        return extractFieldNames;
+    },
+    get hasBatchPatterns () {
+        return hasBatchPatterns;
+    },
+    get hasDataFieldPatterns () {
+        return hasDataFieldPatterns;
+    },
+    get hasIndexedPatterns () {
+        return hasIndexedPatterns;
+    },
+    get parseFormat () {
+        return parseFormat;
+    },
+    get replaceDataFields () {
+        return replaceDataFields;
+    },
+    get replaceDataFieldsBatch () {
+        return replaceDataFieldsBatch;
+    }
+});
+const _variableinterpolation = require("./variable-interpolation");
+// Regex patterns for data field interpolation
+// Matches: ${__data.fields["fieldName"]} or ${__data.fields['fieldName']} or ${__data.fields.fieldName} with optional format ${__data.fields["fieldName"]:format}
+const SINGLE_FIELD_REGEX = /\$\{__data\.fields(?:\[(?:"|')([^"']+)(?:"|')\]|\.([a-zA-Z_][a-zA-Z0-9_]*))(?::([a-z]+))?\}/g;
+// Matches: ${__data[0].fields["fieldName"]} or ${__data[0].fields['fieldName']} for indexed access
+const INDEXED_FIELD_REGEX = /\$\{__data\[(\d+)\]\.fields\[(?:"|')([^"']+)(?:"|')\]\}/g;
+// Matches: ${__data.index}
+const DATA_INDEX_REGEX = /\$\{__data\.index\}/g;
+// Matches: ${__data.count}
+const DATA_COUNT_REGEX = /\$\{__data\.count\}/g;
+// Matches: ${__data} or ${__data:format} or '${__data:format}' or "${__data:format}"
+const FULL_DATA_REGEX = /("|')?\$\{__data(?::([a-z]+))?\}("|')?/g;
+/**
+ * Get field value from a data item, converting to string.
+ * Supports nested field access using dot notation in field names (e.g., "foo.bar" accesses item.foo.bar).
+ * For backward compatibility, first checks if the exact key exists before attempting nested access.
+ */ function getFieldValue(item, fieldName) {
+    // First, try direct property access (for backward compatibility with literal dot keys)
+    if (Object.prototype.hasOwnProperty.call(item, fieldName)) {
+        const value = item[fieldName];
+        if (value === undefined || value === null) {
+            return '';
+        }
+        if (typeof value === 'object') {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    }
+    // If not found and contains dots, try nested access
+    if (fieldName.includes('.')) {
+        const parts = fieldName.split('.');
+        let current = item;
+        for (const part of parts){
+            if (current === null || current === undefined) {
+                return '';
+            }
+            if (typeof current !== 'object') {
+                return '';
+            }
+            current = current[part];
+        }
+        if (current === undefined || current === null) {
+            return '';
+        }
+        if (typeof current === 'object') {
+            return JSON.stringify(current);
+        }
+        return String(current);
+    }
+    // Field not found
+    return '';
+}
+function parseFormat(format) {
+    if (!format) return undefined;
+    const lowerFormat = format.toLowerCase();
+    return Object.values(_variableinterpolation.InterpolationFormat).find((f)=>f === lowerFormat);
+}
+function replaceDataFields(template, item, options = {}) {
+    const { urlEncode = true, index, count } = options;
+    let result = template;
+    const errors = [];
+    // Replace ${__data.index} if provided
+    if (index !== undefined) {
+        result = result.replaceAll(DATA_INDEX_REGEX, String(index));
+    }
+    // Replace ${__data.count} if provided
+    if (count !== undefined) {
+        result = result.replaceAll(DATA_COUNT_REGEX, String(count));
+    }
+    // Replace full data placeholder with optional format: ${__data} or ${__data:format}
+    result = result.replaceAll(FULL_DATA_REGEX, (_match, _leadingQuote, format, _trailingQuote)=>{
+        const interpolationFormat = parseFormat(format) ?? _variableinterpolation.InterpolationFormat.RAW;
+        let interpolationResult = '';
+        if (interpolationFormat === _variableinterpolation.InterpolationFormat.JSON) {
+            interpolationResult = JSON.stringify(item);
+        } else {
+            interpolationResult = (0, _variableinterpolation.interpolate)(Object.values(item).map((v)=>JSON.stringify(v)), '', interpolationFormat);
+        }
+        return interpolationResult;
+    });
+    // Reset regex lastIndex
+    SINGLE_FIELD_REGEX.lastIndex = 0;
+    // Replace __data.fields["fieldName"] or __data.fields.fieldName patterns
+    result = result.replaceAll(SINGLE_FIELD_REGEX, (_match, bracketField, dotField, format)=>{
+        const fieldName = bracketField ?? dotField ?? '';
+        const value = getFieldValue(item, fieldName);
+        if (value === '' && item[fieldName] === undefined) {
+            errors.push(`Field "${fieldName}" not found in data`);
+        }
+        const interpolationFormat = parseFormat(format);
+        if (interpolationFormat) {
+            return (0, _variableinterpolation.interpolate)([
+                value
+            ], fieldName, interpolationFormat);
+        }
+        if (urlEncode) {
+            // override: disable urlEncode for RAW format
+            if (interpolationFormat === _variableinterpolation.InterpolationFormat.RAW) {
+                return value;
+            }
+            // avoid double encoding for queryparam and percentencode formats
+            if (interpolationFormat !== _variableinterpolation.InterpolationFormat.QUERYPARAM && interpolationFormat !== _variableinterpolation.InterpolationFormat.PERCENTENCODE) {
+                return encodeURIComponent(value);
+            }
+        }
+        return value;
+    });
+    return {
+        text: result,
+        errors: errors.length > 0 ? errors : undefined
+    };
+}
+function replaceDataFieldsBatch(template, items, options = {}) {
+    const { urlEncode = true } = options;
+    let result = template;
+    const errors = [];
+    // Replace __data.count with items length
+    result = result.replaceAll(DATA_COUNT_REGEX, String(items.length));
+    // Reset regex lastIndex
+    INDEXED_FIELD_REGEX.lastIndex = 0;
+    SINGLE_FIELD_REGEX.lastIndex = 0;
+    // Replace full data placeholder with optional format
+    result = result.replaceAll(FULL_DATA_REGEX, (_match, leadingQuote, format, trailingQuote)=>{
+        const interpolationFormat = parseFormat(format) ?? _variableinterpolation.InterpolationFormat.RAW;
+        const interpolationResult = (0, _variableinterpolation.interpolate)(Object.values(items).map((e)=>JSON.stringify(e)), '', interpolationFormat);
+        if (!leadingQuote || !trailingQuote) {
+            // preserve quotes as they were not surrounding the full_data pattern
+            return `${leadingQuote ?? ''}${interpolationResult}${trailingQuote ?? ''}`;
+        }
+        return interpolationResult;
+    });
+    // Replace indexed access: ${__data[0].fields["fieldName"]} or ${__data[0].fields['fieldName']}
+    result = result.replaceAll(INDEXED_FIELD_REGEX, (match, indexStr, fieldName)=>{
+        const idx = parseInt(indexStr, 10);
+        if (idx < 0 || idx >= items.length) {
+            errors.push(`Index ${idx} out of bounds (0-${items.length - 1})`);
+            return match;
+        }
+        const value = getFieldValue(items[idx], fieldName);
+        if (value === '' && items[idx][fieldName] === undefined) {
+            errors.push(`Field "${fieldName}" not found in data at index ${idx}`);
+        }
+        return urlEncode ? encodeURIComponent(value) : value;
+    });
+    // Replace aggregated access with format: ${__data.fields["fieldName"]:csv} or ${__data.fields.fieldName:csv}
+    result = result.replaceAll(SINGLE_FIELD_REGEX, (_match, bracketField, dotField, format)=>{
+        const fieldName = bracketField ?? dotField ?? '';
+        const values = items.map((item)=>getFieldValue(item, fieldName));
+        const interpolationFormat = parseFormat(format) || _variableinterpolation.InterpolationFormat.CSV;
+        return (0, _variableinterpolation.interpolate)(values, fieldName, interpolationFormat);
+    });
+    return {
+        text: result,
+        errors: errors.length > 0 ? errors : undefined
+    };
+}
+function hasBatchPatterns(template) {
+    // Reset regex lastIndex
+    INDEXED_FIELD_REGEX.lastIndex = 0;
+    return INDEXED_FIELD_REGEX.test(template) || /\$\{__data\.fields(?:\[["'][^"']+["']\]|\.[a-zA-Z_][a-zA-Z0-9_]*):[a-z]+\}/.test(template);
+}
+function hasIndexedPatterns(template) {
+    INDEXED_FIELD_REGEX.lastIndex = 0;
+    return INDEXED_FIELD_REGEX.test(template);
+}
+function hasDataFieldPatterns(template) {
+    SINGLE_FIELD_REGEX.lastIndex = 0;
+    INDEXED_FIELD_REGEX.lastIndex = 0;
+    return SINGLE_FIELD_REGEX.test(template) || INDEXED_FIELD_REGEX.test(template);
+}
+function extractFieldNames(template) {
+    const fields = new Set();
+    // Reset regex lastIndex
+    SINGLE_FIELD_REGEX.lastIndex = 0;
+    INDEXED_FIELD_REGEX.lastIndex = 0;
+    let match;
+    while((match = SINGLE_FIELD_REGEX.exec(template)) !== null){
+        // Group 1 is bracket notation, group 2 is dot notation
+        fields.add(match[1] ?? match[2]);
+    }
+    while((match = INDEXED_FIELD_REGEX.exec(template)) !== null){
+        fields.add(match[2]);
+    }
+    return Array.from(fields);
+}

package/dist/cjs/utils/format.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -19,9 +19,12 @@ _export_star(require("./browser-storage"), exports);
 _export_star(require("./chart-actions"), exports);
 _export_star(require("./combine-sx"), exports);
 _export_star(require("./component-ids"), exports);
+_export_star(require("./data-field-interpolation"), exports);
 _export_star(require("./format"), exports);
-_export_star(require("./theme-gen"), exports);
 _export_star(require("./memo"), exports);
+_export_star(require("./selection-interpolation"), exports);
+_export_star(require("./theme-gen"), exports);
+_export_star(require("./variable-interpolation"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/utils/mathjs.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/memo.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/selection-interpolation.js

@@ -0,0 +1,69 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get interpolateSelectionBatch () {
+        return interpolateSelectionBatch;
+    },
+    get interpolateSelectionIndividual () {
+        return interpolateSelectionIndividual;
+    }
+});
+const _datafieldinterpolation = require("./data-field-interpolation");
+const _variableinterpolation = require("./variable-interpolation");
+function interpolateSelectionIndividual(template, item, index, count, variableState) {
+    // Replace __data patterns using shared utility (includes __data.index and __data.count)
+    const dataFieldResult = (0, _datafieldinterpolation.replaceDataFields)(template, item, {
+        index,
+        count
+    });
+    let result = dataFieldResult.text;
+    const errors = [];
+    if (dataFieldResult.errors) {
+        errors.push(...dataFieldResult.errors.map((e)=>e.replace('in data', 'in selection data')));
+    }
+    // Apply dashboard variable interpolation if provided
+    if (variableState) {
+        result = (0, _variableinterpolation.replaceVariables)(result, variableState);
+    }
+    return {
+        text: result,
+        errors: errors.length > 0 ? errors : undefined
+    };
+}
+function interpolateSelectionBatch(template, items, variableState) {
+    // Replace __data patterns using shared utility (includes __data.count)
+    const dataFieldResult = (0, _datafieldinterpolation.replaceDataFieldsBatch)(template, items);
+    let result = dataFieldResult.text;
+    const errors = [];
+    if (dataFieldResult.errors) {
+        errors.push(...dataFieldResult.errors.map((e)=>e.replace('in data', 'in selection data')));
+    }
+    // Apply dashboard variable interpolation if provided
+    if (variableState) {
+        result = (0, _variableinterpolation.replaceVariables)(result, variableState);
+    }
+    return {
+        text: result,
+        errors: errors.length > 0 ? errors : undefined
+    };
+}

package/dist/cjs/utils/theme-gen.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/variable-interpolation.js

@@ -0,0 +1,192 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get InterpolationFormat () {
+        return InterpolationFormat;
+    },
+    get interpolate () {
+        return interpolate;
+    },
+    get parseVariables () {
+        return parseVariables;
+    },
+    get parseVariablesAndFormat () {
+        return parseVariablesAndFormat;
+    },
+    get replaceVariable () {
+        return replaceVariable;
+    },
+    get replaceVariables () {
+        return replaceVariables;
+    }
+});
+var InterpolationFormat = /*#__PURE__*/ function(InterpolationFormat) {
+    InterpolationFormat["CSV"] = "csv";
+    InterpolationFormat["DISTRIBUTED"] = "distributed";
+    InterpolationFormat["DOUBLEQUOTE"] = "doublequote";
+    InterpolationFormat["GLOB"] = "glob";
+    InterpolationFormat["JSON"] = "json";
+    InterpolationFormat["LUCENE"] = "lucene";
+    InterpolationFormat["PERCENTENCODE"] = "percentencode";
+    InterpolationFormat["PIPE"] = "pipe";
+    InterpolationFormat["PROMETHEUS"] = "prometheus";
+    InterpolationFormat["RAW"] = "raw";
+    InterpolationFormat["REGEX"] = "regex";
+    InterpolationFormat["SINGLEQUOTE"] = "singlequote";
+    InterpolationFormat["SQLSTRING"] = "sqlstring";
+    InterpolationFormat["TEXT"] = "text";
+    InterpolationFormat["QUERYPARAM"] = "queryparam";
+    return InterpolationFormat;
+}({});
+function stringToFormat(val) {
+    if (!val) return undefined;
+    const lowerVal = val.toLowerCase();
+    return Object.values(InterpolationFormat).find((format)=>format === lowerVal) || undefined;
+}
+function interpolate(values, name, format) {
+    switch(format){
+        case "csv":
+        case "raw":
+            return values.join(',');
+        case "distributed":
+            {
+                const [first, ...rest] = values;
+                return `${[
+                    first,
+                    ...rest.map((v)=>`${name}=${v}`)
+                ].join(',')}`;
+            }
+        case "doublequote":
+            return values.map((v)=>`"${v}"`).join(',');
+        case "glob":
+            return `{${values.join(',')}}`;
+        case "json":
+            {
+                // values might contain stringified JSON objects so we need to parse them first
+                // and then return a JSON stringified array to return valid JSON
+                const parsedValues = values.map((v)=>{
+                    try {
+                        return JSON.parse(v);
+                    } catch  {
+                        return v;
+                    }
+                });
+                return JSON.stringify(parsedValues);
+            }
+        case "lucene":
+            return `(${values.map((v)=>`"${v}"`).join(' OR ')})`;
+        case "percentencode":
+            return encodeURIComponent(values.join(','));
+        case "pipe":
+            return values.join('|');
+        case "regex":
+            {
+                const escapedRegex = values.map((v)=>v.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'));
+                return `(${escapedRegex.join('|')})`;
+            }
+        case "singlequote":
+            return values.map((v)=>`'${v}'`).join(',');
+        case "sqlstring":
+            return values.map((v)=>`'${v.replace(/'/g, "''")}'`).join(',');
+        case "text":
+            return values.join(' + ');
+        case "queryparam":
+            return values.map((v)=>`${name}=${encodeURIComponent(v)}`).join('&');
+        case "prometheus":
+        default:
+            return `(${values.join('|')})`;
+    }
+}
+function replaceVariable(text, varName, variableValue, varFormat) {
+    const variableSyntax = '$' + varName;
+    const alternativeVariableSyntax = '${' + varName + (varFormat ? ':' + varFormat : '') + '}';
+    let replaceString = '';
+    if (Array.isArray(variableValue)) {
+        replaceString = interpolate(variableValue, varName, varFormat || "prometheus");
+    }
+    if (typeof variableValue === 'string') {
+        replaceString = interpolate([
+            variableValue
+        ], varName, varFormat || "raw");
+    }
+    text = text.replaceAll(variableSyntax, replaceString);
+    return text.replaceAll(alternativeVariableSyntax, replaceString);
+}
+// This regular expression is designed to identify variable references in a string.
+// It supports two formats for referencing variables:
+// 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\w+ matches one or more word characters).
+// 2. ${variableName} - This is a more complex format and the regular expression captures the variable name (\w+ matches one or more word characters) in the curly braces.
+// 3. ${variableName:format} - This is a more complex format that allows specifying a format interpolation.
+const VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^}]+))?(?::([^}]+))?}/gm;
+function parseVariables(text) {
+    const matches = new Set();
+    let match;
+    while((match = VARIABLE_REGEX.exec(text)) !== null){
+        if (match) {
+            if (match[1]) {
+                // \$(\w+)\
+                matches.add(match[1]);
+            } else if (match[2]) {
+                // \${(\w+)}\
+                matches.add(match[2]);
+            }
+        }
+    }
+    // return unique matches
+    return Array.from(matches.values());
+}
+function parseVariablesAndFormat(text) {
+    const matches = new Map();
+    let match;
+    while((match = VARIABLE_REGEX.exec(text)) !== null){
+        if (match) {
+            let format = undefined;
+            if (match[4]) {
+                format = match[4];
+            }
+            if (match[1]) {
+                // \$(\w+)\
+                matches.set(match[1], stringToFormat(format));
+            } else if (match[2]) {
+                // \${(\w+)}\
+                matches.set(match[2], stringToFormat(format));
+            }
+        }
+    }
+    return matches;
+}
+function replaceVariables(text, variableState) {
+    const variablesMap = parseVariablesAndFormat(text);
+    const variables = Array.from(variablesMap.keys());
+    let finalText = text;
+    variables// Sorting variables by their length.
+    // In order to not have a variable name have contained in another variable name.
+    // i.e.: $__range replacing $__range_ms => '3600_ms' instead of '3600000'
+    .sort((a, b)=>b.length - a.length).forEach((v)=>{
+        const variable = variableState[v];
+        if (variable && variable.value !== undefined) {
+            finalText = replaceVariable(finalText, v, variable?.value, variablesMap.get(v));
+        }
+    });
+    return finalText;
+}