src/components/Panel.tsx

@@ -14,13 +14,13 @@ import { PanelData, TimeRange, PanelProps } from '@grafana/data';
 import { VizLegend } from '@grafana/ui';
 import { LegendDisplayMode } from '@grafana/schema';
 
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { css } from 'emotion';
 import * as _ from 'lodash';
 
 interface Props extends PanelProps<PanelOptions> {}
 
-export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
+export function Panel({ options, data, width, height, timeRange, onChangeTimeRange, replaceVariables }: Props) {
   const grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
   let chartContainer = useRef(null);
 
@@ -45,13 +45,14 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
   });
 
   const isLinkActive = !_.isEmpty(options.gauge.link);
-  const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+  const chartClickHandler = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
     if (!isLinkActive) {
       return;
     }
-    window.open(options.gauge.link, '_self');
+    const link = replaceVariables(options.gauge.link as string);
-  };
+    window.open(link, '_self');
+  }, [options.gauge.link]);
   const legendItems = _.map(grafanaSeriesList, (serie) => {
     return {
       label: serie.alias,