byte-me/src/components/graph.tsx

import { ResponsiveLine } from "@nivo/line";
import { formatBytes } from "../lib/format.js";

type Frame = {
  id: string;
  data: { x: string | number; y: number }[];
};

type GraphProps = {
  data: Frame[];
};

const Graph = ({ data }: GraphProps) => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    xScale={{ type: "linear" }}
    yScale={{
      type: "linear",
      min: 0,
      max: "auto",
      stacked: false,
      reverse: false,
    }}
    theme={{
      tooltip: {
        container: {
          backgroundColor: "#2e2b45",
        },
      },
      grid: {
        line: {
          stroke: "rgb(252, 191, 212)",
          strokeWidth: 0.35,
          strokeOpacity: 0.75,
        },
      },
      crosshair: {
        line: {
          stroke: "#fdd3e2",
          strokeWidth: 1,
        },
      },
      axis: {
        legend: {},
        domain: {
          line: {
            stroke: "rgb(252, 191, 212)",
            strokeWidth: 0.5,
            strokeOpacity: 0.5,
          },
        },
      },
      text: {
        fill: "#6e6a86",
      },
    }}
    axisBottom={{ legend: "transportation", legendOffset: 36 }}
    axisLeft={{
      legend: "count",
      legendOffset: -40,
      format: (v) => formatBytes(v * 1024 * 53),
    }}
    pointSize={10}
    colors={["#3e8faf", "#c4a7e7", "#f5c276", "#EA9B96", "#EB7092", "#9CCFD8"]}
    pointBorderWidth={0}
    pointBorderColor={{ from: "seriesColor" }}
    pointLabelYOffset={-12}
    enableSlices={"x"}
    enableTouchCrosshair={true}
    useMesh={true}
    legends={[
      {
        anchor: "bottom-right",
        direction: "column",
        translateX: 100,
        itemWidth: 80,
        itemHeight: 22,
        symbolShape: "circle",
      },
    ]}
  />
);

export default Graph;