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) { 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], ], }, ], { maxValue: options.gauge.max, minValue: options.gauge.min, } ); pod.render(); }); return (
); }