link fixes

src/components/Panel.tsx

@@ -33,11 +33,10 @@ export function Panel({ options, data, width, height, timeZone, timeRange, onCha
   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");
+    window.open(options.gauge.link, '_self');
   };
 
   return (
@@ -46,7 +45,7 @@ export function Panel({ options, data, width, height, timeZone, timeRange, onCha
       className={css`
         width: ${width}px;
         height: ${height}px;
-        cursor: ${isLinkActive ? 'pointer' : 'default'}
+        cursor: ${isLinkActive ? 'pointer' : 'default'};
       `}
       onClick={chartClickHandler}
     ></div>

src/components/editors/IconsEditor.tsx

@@ -120,11 +120,7 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
               {icons.map((icon, iconIdx) => {
                 return (
                   <div key={iconIdx} className={styles.icon}>
-                    <IconButton 
-                      name="trash-alt" 
-                      onClick={() => removeIcon(iconIdx)}
-                      tooltip="Delete Icon"
-                    ></IconButton>
+                    <IconButton name="trash-alt" onClick={() => removeIcon(iconIdx)} tooltip="Delete Icon"></IconButton>
                     <div className={styles.row}>
                       <Input
                         type="url"
@@ -150,7 +146,7 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
 
                     {icon.conditions.map((condition, conditionIdx) => {
                       return (
-                        <div className={styles.condition}>
+                        <div key={conditionIdx} className={styles.condition}>
                           <HorizontalGroup key={conditionIdx}>
                             <FieldNamePicker
                               context={context}
@@ -230,5 +226,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       margin-bottom: ${theme.spacing.sm};
     `,
   };
-
 });

src/components/editors/NotSupportedText.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export function NotSupportedText() {
-  return <div>To be supported soon...</div>
+  return <div>To be supported soon...</div>;
 }

src/components/editors/ThresholdsEditor.tsx

@@ -19,7 +19,6 @@ import React from 'react';
 import { css } from 'emotion';
 import * as _ from 'lodash';
 
-
 interface Props {
   defaultColor: string;
   arcBackground: string;

src/components/editors/UseMetricEditor.tsx

@@ -1,18 +1,12 @@
 import { FieldNamePicker } from '../../grafana/MatchersUI/FieldNamePicker';
 
 import { StandardEditorProps } from '@grafana/data';
-import {
-  HorizontalGroup,
-  InlineField,
-  InlineSwitch,
-  Input,
-} from '@grafana/ui';
+import { HorizontalGroup, InlineField, InlineSwitch, Input } from '@grafana/ui';
 
 import React from 'react';
 
 import * as _ from 'lodash';
 
-
 type UseMetricConfig = {
   useMetric: boolean;
   value?: number;
@@ -31,7 +25,7 @@ export function UseMetricEditor({ onChange, value, context }: StandardEditorProp
     config[field] = value;
 
     onChange(config);
-  }
+  };
 
   return (
     <HorizontalGroup>
@@ -59,5 +53,5 @@ export function UseMetricEditor({ onChange, value, context }: StandardEditorProp
         )}
       </InlineField>
     </HorizontalGroup>
-  )
+  );
 }

src/models/options.ts

@@ -6,14 +6,12 @@ import { getValueFormat } from '@grafana/data';
 
 import _ from 'lodash';
 
-
-
 // Convert Grafana options into Chartwerk Gauge options
 export class Options {
   private minValue: number | undefined;
   private maxValue: number | undefined;
-  private thresholds: { value: number, color: string }[] = [];
-  private icons: { src: string, position: string, size: number}[] = [];
+  private thresholds: Array<{ value: number; color: string }> = [];
+  private icons: Array<{ src: string; position: string; size: number }> = [];
 
   constructor(private grafanaSeriesList: any[], private grafanaOptions: PanelOptions) {
     this._setMin();
@@ -50,14 +48,16 @@ export class Options {
   }
 
   private _setThreshold(threshold: Threshold, idx: number): void {
-    const value = threshold.useMetric ? this.getLastValueFromMetrics(threshold.metricName, `Threshold ${idx + 1}`) : threshold.value;
+    const value = threshold.useMetric
+      ? this.getLastValueFromMetrics(threshold.metricName, `Threshold ${idx + 1}`)
+      : threshold.value;
     if (value === null || value === undefined) {
       // TODO: may be throw an error
       return;
     }
     this.thresholds.push({
       value,
-      color: threshold.color
+      color: threshold.color,
     });
   }
 
@@ -157,11 +157,7 @@ export class Options {
 
   getLastValueFromMetrics(metricName: string | undefined, optionName: string): number | null {
     // optionName -> helper in Error, mb use option path instead
-    const filteredSeries = filterMetricListByAlias(
-      this.grafanaSeriesList,
-      metricName,
-      optionName
-    );
+    const filteredSeries = filterMetricListByAlias(this.grafanaSeriesList, metricName, optionName);
     const serie = filteredSeries[0];
     // Last value for now
     return getAggregatedValueFromSerie(serie, Aggregation.LAST);

src/module.ts

@@ -9,9 +9,9 @@ import { UseMetricEditor } from './components/editors/UseMetricEditor';
 
 import { PanelPlugin } from '@grafana/data';
 
-
 export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
-  return builder
+  return (
+    builder
       .addRadio({
         path: 'visualizationType',
         name: 'Pod',
@@ -57,8 +57,8 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
         category: ['Extremum'],
         showIf: (config) => config.visualizationType === Pod.GAUGE,
         editor: UseMetricEditor as any,
-    }).
-    addCustomEditor({
+      })
+      .addCustomEditor({
         id: 'max',
         name: 'Max',
         path: 'gauge.max',
@@ -134,5 +134,6 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
         name: '',
         category: ['Link'],
         showIf: (config) => config.visualizationType === Pod.GAUGE,
-    });
+      })
+  );
 });

src/types.ts

@@ -51,7 +51,7 @@ export type Threshold = {
   value: number;
   metricName: string;
   color: string;
-}
+};
 
 export type Icon = {
   conditions: Condition[];

src/utils.ts

@@ -13,7 +13,11 @@ export function filterMetricListByAlias(list: any[], alias: string | undefined,
   return filteredSeries;
 }
 
-export function getAggregatedValueFromSerie(serie: any, aggregation = Aggregation.LAST, valueIdx: 0 | 1 = 0): number | null {
+export function getAggregatedValueFromSerie(
+  serie: any,
+  aggregation = Aggregation.LAST,
+  valueIdx: 0 | 1 = 0
+): number | null {
   // series types { datapoints: [number, number][]}
   // valueIdx === 0  for Grafana series, valueIdx === 1 for Chartwerk series
   if (serie === undefined) {