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

import { GaugeOptions } from '../models/options/gaugeOptions';
import { BarOptions } from '../models/options/barOptions';
import { Series } from '../models/series';
import { BarSeries } from '../models/barSeries';

import { PanelOptions, Pod } from '../types';

import { DataProcessor } from '../grafana/data_processor';

import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
import { ChartwerkBarPod } from '@chartwerk/bar-pod';

import { PanelData, TimeRange, PanelProps } from '@grafana/data';
import { VizLegend } from '@grafana/ui';
import { LegendDisplayMode } from '@grafana/schema';

import React, { useRef } from 'react';
import { css } from 'emotion';
import * as _ from 'lodash';

interface Props extends PanelProps<PanelOptions> {}

export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
  const grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
  let chartContainer = useRef(null);

  // we request animation frame here because we need an existing DOM-element at the moment we render the pod
  window.requestAnimationFrame(() => {
    console.log('pod', options.visualizationType);
    let pod;
    switch (options.visualizationType) {
      case Pod.GAUGE:
        const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries();
        const chartwerkGaugeOptions = new GaugeOptions(grafanaSeriesList, options).getChartwerkOptions();
        pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkGaugeOptions);
        break;
      case Pod.BAR:
        const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries();
        const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions();
        console.log('data', barSeries, chartwerkBarOptions);
        pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions);
        break;
      default:
        throw new Error(`Unknown visualization type: ${options.visualizationType}`);
    }
    pod.render();
  });

  const isLinkActive = !_.isEmpty(options.gauge.link);
  const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    if (!isLinkActive) {
      return;
    }
    window.open(options.gauge.link, '_self');
  };
  const legendItems = [
    { label: 'metric1', yAxis: 100, color: 'red' },
    { label: 'metric2', yAxis: 200, color: 'green' },
  ];
  return (
    <div>
      <div
        ref={chartContainer}
        className={css`
          width: ${width}px;
          height: ${height- 20}px;
          cursor: ${isLinkActive ? 'pointer' : 'default'};
        `}
        onClick={chartClickHandler}
      ></div>
      <VizLegend
        placement={'bottom'}
        items={legendItems}
        displayMode={LegendDisplayMode.List}
      />
    </div>
  );
}

function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): any[] {
  const processor = new DataProcessor({});
  return processor.getSeriesList({
    dataList: grafanaData.series,
    range: timeRange,
  });
}