scatter-pod/react/src/index.tsx

import { ScatterData, ScatterOptions, ChartwerkScatterPod } from '@chartwerk/scatter-pod';

import React, { useEffect, useRef, useState } from 'react';

import _ from 'lodash';


export type ChartwerkScatterPodReactProps = {
  id?: string;
  series: ScatterData[];
  options?: ScatterOptions;
  className?: string;
}

export function ChartwerkScatterPodReact(props: ChartwerkScatterPodReactProps) {

  const [pod, setPod] = useState<ChartwerkScatterPod | null>(null);
  const [hack, setHack] = useState<number | null>(null);

  const chartRef = useRef(null);
  const chart = chartRef.current;

  useEffect(() => {
    // this function will be called on component unmount
    return () => {
      if(pod === null) { return; }
      // @ts-ignore
      pod.removeEventListeners();
    }
  }, []);

  useEffect(() => {
    if(chart === null) { return; }
    if(pod === null) {
      const newPod = new ChartwerkScatterPod(
        // @ts-ignore
        chart,
        props.series,
        props.options,
      );
      setPod(newPod);
      newPod.render();
    } else {
      // TODO: actually it's wrong logic with updates
      // because it creates new pod anyway
      pod.updateData(props.series, props.options);
    }
  }, [chart, props.id, props.options]);

  // TODO: it's a hack to render the ScatterPod right after the div appears in DOM
  setTimeout(() => {
    if(hack === null) {
      setHack(1);
    }
  }, 1);

  return (
    <div id={props.id} className={props.className} ref={chartRef}></div>
  );
}

export default ChartwerkScatterPodReact;