Merge branch 'pass-options-to-chartwerk' into 'main'

npm -> yarn && yarn lint comand

Closes #1

See merge request chartwerk/grafana-chartwerk-panel!2

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://travis-ci.org/chartwerk/grafana-chartwerk-app.svg?branch=master)](https://travis-ci.org/chartwerk/grafana-chartwerk-app)
 
- **Grafana Chartwerk Panel** renders metrics using ChartWerk libraries. For now, it can render as a line and a series of bars. We are working on adding new visualizations.
+**Grafana Chartwerk Panel** renders metrics using ChartWerk libraries. For now, it can render as a line and a series of bars. We are working on adding new visualizations.
 
 ![image](https://user-images.githubusercontent.com/66464000/84491085-10416280-acb5-11ea-8af0-2761ed97aecc.png)
 ![image](https://user-images.githubusercontent.com/66464000/84491069-0b7cae80-acb5-11ea-959b-ef67835c8055.png)
@@ -23,17 +23,22 @@
 - customizable grid interval.
 
 ## Installation
+
 ### Linux / Mac OS X
+
 - Navigate to either:
+
   - `<GRAFANA_PATH>/data/plugins` (when installed from tarball or source)
   - or `/var/lib/grafana/plugins` (when installed from `.deb`/`.rpm` package)
 
 - Download ChartWerk panel
+
 ```
 wget https://github.com/chartwerk/grafana-chartwerk-app/archive/0.3.3.zip
 ```
 
 - Unpack downloaded files
+
 ```
 unzip 0.3.3.zip
 ```
@@ -42,11 +47,12 @@ unzip 0.3.3.zip
   - For grafana installed via Standalone Linux Binaries:
     - Stop any running instances of grafana-server
     - Start grafana-server by:
-      ```$GRAFANA_PATH/bin/grafana-server```
+      `$GRAFANA_PATH/bin/grafana-server`
   - For grafana installed via Package Manager:
-    - type in ```systemctl restart grafana-server```
+    - type in `systemctl restart grafana-server`
 
 ### Grafana in Docker
+
 You can install ChartWerk panel to Grafana in Docker passing it as environment variable (as described in [Grafana docs](http://docs.grafana.org/installation/docker/#installing-plugins-from-other-sources))
 
 ```bash

package.json

@@ -8,12 +8,13 @@
     "dev": "grafana-toolkit plugin:dev",
     "watch": "grafana-toolkit plugin:dev --watch",
     "sign": "grafana-toolkit plugin:sign",
-    "start": "yarn watch"
+    "start": "yarn watch",
+    "lint": "yarn prettier --write ."
   },
   "author": "CorpGlory",
   "license": "GPL V3",
   "devDependencies": {
-    "@chartwerk/gauge-pod": "gitlab:chartwerk/gauge-pod#9982c0b7ca149dba807bf3b3fa1daddaf114f1a1",
+    "@chartwerk/gauge-pod": "@chartwerk/gauge-pod",
     "@grafana/data": "latest",
     "@grafana/toolkit": "latest",
     "@grafana/ui": "latest",

src/components/Panel.tsx

@@ -7,27 +7,45 @@ import { PanelProps } from '@grafana/data';
 import React, { useRef } from 'react';
 import { css } from 'emotion';
 
-
 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, [{ target: 'test', datapoints: [[5, 5], [0, 10], [30, 15], [50, 20], [17, 25]] }]);
+    const pod = new ChartwerkGaugePod(
+      (chartContainer as any).current,
+      [
+        {
+          target: 'test',
+          datapoints: [
+            [5, 5],
+            [0, 10],
+            [30, 15],
+            [50, 20],
+            [17, 25],
+          ],
+        },
+      ],
+      {
+        maxValue: options.gauge.max,
+        minValue: options.gauge.min,
+      }
+    );
     pod.render();
   });
-  return <div
+  return (
-    ref={chartContainer}
+    <div
-    className={
+      ref={chartContainer}
-      css`
+      className={css`
         width: ${width}px;
         height: ${height}px;
-      `
+      `}
-    }
+    ></div>
-  ></div>;
+  );
 }

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;
+    min?: number;
-    max: number | null;
+    useMetricForMin: boolean;
+    minMetricName: string;
+    max?: number;
+    useMetricForMax: boolean;
+    maxMetricName: string;
   };
 }