use options in chartwerk

src/components/Panel.tsx

@@ -11,24 +11,32 @@ interface Props extends PanelProps<PanelOptions> {}
 
 export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) {
   let chartContainer = useRef(null);
+  // TODO: use models to parse options and series
 
   // we request animation frame here because at the moment we need an existing DOM-element at the moment we render the pod
   window.requestAnimationFrame(() => {
     // TODO: pass datapoints
     // TODO: pass options
     // TODO: switch / case pod type
-    const pod = new ChartwerkGaugePod((chartContainer as any).current, [
+    const pod = new ChartwerkGaugePod(
+      (chartContainer as any).current,
+      [
+        {
+          target: 'test',
+          datapoints: [
+            [5, 5],
+            [0, 10],
+            [30, 15],
+            [50, 20],
+            [17, 25],
+          ],
+        },
+      ],
       {
-        target: 'test',
-        datapoints: [
-          [5, 5],
-          [0, 10],
-          [30, 15],
-          [50, 20],
-          [17, 25],
-        ],
-      },
-    ]);
+        maxValue: options.gauge.max,
+        minValue: options.gauge.min,
+      }
+    );
     pod.render();
   });
   return (

src/module.ts

@@ -32,13 +32,39 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
     .addNumberInput({
       path: 'gauge.min',
       name: 'Min',
-      category: ['Gauge'],
+      category: ['Extremum'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.useMetricForMin,
+    })
+    .addFieldNamePicker({
+      name: 'Min',
+      path: 'gauge.minMetricName',
+      category: ['Extremum'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.useMetricForMin,
+    })
+    .addBooleanSwitch({
+      path: 'gauge.useMetricForMin',
+      name: 'Use metric',
+      defaultValue: false,
+      category: ['Extremum'],
       showIf: (config) => config.visualizationType === Pod.GAUGE,
     })
     .addNumberInput({
       path: 'gauge.max',
       name: 'Max',
-      category: ['Gauge'],
+      category: ['Extremum'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.useMetricForMax,
+    })
+    .addFieldNamePicker({
+      name: 'Max',
+      path: 'gauge.maxMetricName',
+      category: ['Extremum'],
+      showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.useMetricForMax,
+    })
+    .addBooleanSwitch({
+      path: 'gauge.useMetricForMax',
+      name: 'Use metric',
+      defaultValue: false,
+      category: ['Extremum'],
       showIf: (config) => config.visualizationType === Pod.GAUGE,
     });
 });

src/types.ts

@@ -1,8 +1,12 @@
 export interface PanelOptions {
   visualizationType: Pod;
   gauge: {
-    min: number | null;
-    max: number | null;
+    min?: number;
+    useMetricForMin: boolean;
+    minMetricName: string;
+    max?: number;
+    useMetricForMax: boolean;
+    maxMetricName: string;
   };
 }