Live data

import { useEffect, useMemo, useState } from 'react';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';
import {
  createSpec,
  type Data,
  geom,
  pipe,
  scale,
} from '@graphysdk/viz-engine';

function RollingLine({ source }: { source: EventSource }) {
  // Built once. Building it inside the render would make every push a full compile.
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'second', y: 'reading' }),
        geom.line(),
        scale.x.continuous({ nice: false }),
        scale.y.continuous()
      ),
    []
  );
  const [data, setData] = useState<Data>({
    columns: [{ key: 'second' }, { key: 'reading' }],
    rows: [{ second: 0, reading: 50 }],
  });

  useEffect(() => {
    source.onmessage = (event) => setData(JSON.parse(event.data));
  }, [source]);

  return (
    <GraphProvider spec={spec} data={data}>
      <GraphRenderer animation={{ transitions: false }} />
    </GraphProvider>
  );
}