diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index d2d106d..a287cb2 100644 --- a/src/components/Panel.tsx +++ b/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 {} export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) { - return ( - // TODO: implement chartwerk panel -
Chartwerk panel
- ); + 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
; }