link click

src/components/Panel.tsx

@@ -29,13 +29,26 @@ export function Panel({ options, data, width, height, timeZone, timeRange, onCha
     const pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions);
     pod.render();
   });
+
+  const isLinkActive = !_.isEmpty(options.gauge.link);
+  const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    console.log('click', options);
+    if (!isLinkActive) {
+      return;
+    }
+    window.open(options.gauge.link, "_self");
+  };
+
   return (
     <div
       ref={chartContainer}
       className={css`
         width: ${width}px;
         height: ${height}px;
+        cursor: ${isLinkActive ? 'pointer' : 'default'}
       `}
+      onClick={chartClickHandler}
     ></div>
   );
 }

src/module.ts

@@ -128,5 +128,11 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
       },
       showIf: (config) => config.visualizationType === Pod.GAUGE,
       editor: ThresholdsEditor as any,
+    })
+    .addTextInput({
+      path: 'gauge.link',
+      name: '',
+      category: ['Link'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
     });
 });

src/types.ts

@@ -6,14 +6,15 @@ export interface PanelOptions {
     value: ExtremumOptions;
     valueSize: number;
     reversed: boolean;
-    decimals?: number;
-    unit?: string; 
     thresholds: {
       arcBackground: string;
       defaultColor: string;
       thresholds: Threshold[];
     };
     icons: Icon[];
+    decimals?: number;
+    unit?: string;
+    link?: string;
   };
 }