Nivo Charts with remix.run

insights.tsx

import { LoaderFunction, useLoaderData } from "remix";
import useResizeObserver from "use-resize-observer";
import MyResponsiveAreaBump from "~/components/charts/AreaBump";
import MyResponsiveBarCanvas from "~/components/charts/BarCanvas";
import MyResponsiveChordCanvas from "~/components/charts/ChordCanvas";
import MyResponsiveNetworkCanvas from "~/components/charts/NetworkCanvas";

export const loader: LoaderFunction = async ({ params }) => {
  let result = await Promise.all([
    fetch("http://localhost:3100/bar"),
    fetch("http://localhost:3100/areaBump"),
    fetch("http://localhost:3100/chord"),
    fetch("http://localhost:3100/network"),
  ]);
  let bar = await result[0].json();
  let areaBump = await result[1].json();
  let chord = await result[2].json();
  let network = await result[3].json();
  return { bar, areaBump, chord, network };
};

const ProjectsContent: React.FC = () => {
  const data = useLoaderData();
  const { ref, width, height } = useResizeObserver<HTMLDivElement>();

  return (
    <div className="grid gap-4 space-x-1 grid-cols-1 lg:grid-cols-2 w-full h-full grid-rows-4 lg:grid-rows-2">
      <div className="flex flex-col w-full h-full" ref={ref}>
        <MyResponsiveBarCanvas data={data.bar} width={width} height={height} />
      </div>
      <div className="flex flex-col w-full h-full">
        <MyResponsiveAreaBump
          data={data.areaBump}
          width={width}
          height={height}
        />
      </div>
      <div className="flex flex-col w-full h-full">
        <MyResponsiveChordCanvas
          data={data.chord}
          width={width}
          height={height}
        />
      </div>
      <div className="flex flex-col w-full h-full">
        <MyResponsiveNetworkCanvas
          data={data.network}
          width={width}
          height={height}
        />
      </div>
    </div>
  );
};

export default ProjectsContent;