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

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

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

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

import { PanelProps } from '@grafana/data';

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, timeZone, timeRange, onChangeTimeRange }: Props) {
  console.log('options', options);
  console.log('data', data);
  const processor = new DataProcessor({});
  const seriesList = processor.getSeriesList({
    dataList: data.series,
    range: timeRange,
  });
  const chwSeriesList = updateSeriesListWithChartwerkParams(seriesList);
  console.log('seriesList', chwSeriesList);
  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, chwSeriesList, {
      maxValue: options.gauge.max.value || 0,
      minValue: options.gauge.min.value || 0,
      valueFormatter: (val) => val.toFixed(2),
      defaultColor: 'green',
      stops: [
        {
          color: 'green',
          value: 100,
        },
        {
          color: 'orange',
          value: 140,
        },
      ],
      // @ts-ignore
      icons: [{ src: 'https://cityhost.ua/upload_img/blog5ef308ea5529c_trash2-01.jpg', position: 'middle', size: 30 }],
    });
    pod.render();
  });
  return (
    <div
      ref={chartContainer}
      className={css`
        width: ${width}px;
        height: ${height}px;
      `}
    ></div>
  );
}

function updateSeriesListWithChartwerkParams(series: any[]): any[] {
  return _.map(series, (serie: any, idx: number) => {
    return {
      target: serie.alias,
      color: serie.color,
      datapoints: _.map(serie.datapoints, (row) => _.reverse(row)),
      alias: serie.label,
    };
  });
}