From 7c0b9cd5b9100b1607dc31fce62a7dcd27e6889d Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Wed, 27 Apr 2022 18:23:19 +0300
Subject: [PATCH] use options in chartwerk

---
 src/components/Panel.tsx | 30 +++++++++++++++++++-----------
 src/module.ts            | 30 ++++++++++++++++++++++++++++--
 src/types.ts             |  8 ++++++--
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 68c964b..95e4eb1 100644
--- a/src/components/Panel.tsx
+++ b/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 (
diff --git a/src/module.ts b/src/module.ts
index c2c26ae..3cefdac 100644
--- a/src/module.ts
+++ b/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,
     });
 });
diff --git a/src/types.ts b/src/types.ts
index 4473524..0950057 100644
--- a/src/types.ts
+++ b/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;
   };
 }