grafana-chartwerk-panel/src/components/Panel.tsx

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) {
  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 (
    <div
      ref={chartContainer}
      className={css`
        width: ${width}px;
        height: ${height}px;
      `}
    ></div>
  );
}