render Gauge

src/components/Panel.tsx

@@ -1,12 +1,33 @@
-import React from 'react';
-import { PanelProps } from '@grafana/data';
 import { PanelOptions } from '../types';
 
+import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
+
+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) {
-  return (
-    // TODO: implement chartwerk panel
-    <div>Chartwerk panel</div>
-  );
+  let chartContainer = useRef(null);
+
+  // 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]] }]);
+    pod.render();
+  });
+  return <div
+    ref={chartContainer}
+    className={
+      css`
+        width: ${width}px;
+        height: ${height}px;
+      `
+    }
+  ></div>;
 }