React component - line chart config

[React Component] - Line Chart example

import React, { useState, useEffect } from "react";
import { ResponsiveLine } from "@nivo/line";
import { Box, Paper, makeStyles, Grid } from "@material-ui/core";

import tripData from "../data/trips.json";

const interval = ["07:00-12:00", "12:00-17:00", "17:00-22:00", "22:00-07:00"];
const colors = [
  "hsl(125, 70%, 50%)",
  "hsl(264, 70%, 50%)",
  "hsl(256, 70%, 50%)",
  "hsl(78, 70%, 50%)"
];

const useStyles = makeStyles(() => ({
  tooltip: {
    display: "grid",
    alignItems: "center",
    fontSize: "0.8rem"
  },
  circle: {
    width: "100%",
    height: 13,
    display: "inline-block",
    borderRadius: "3px 3px 0 0"
  }
}));

const Trips = () => {
  const [data, setData] = useState(null);
  const classes = useStyles();

  useEffect(() => {
    setData(
      tripData.map((d, i) => ({
        id: d.title,
        color: colors[i],
        data: d.data.map((data, indx) => {
          return {
            x: interval[indx],
            y: data
          };
        })
      }))
    );
  }, []);

  return (
    <Box height="500px">
      {data && (
        <ResponsiveLine
          data={data}
          margin={{ top: 50, right: 100, bottom: 100, left: 60 }}
          xScale={{ type: "point" }}
          tooltip={({
            point: {
              serieId,
              data: { xFormatted, yFormatted },
              borderColor
            }
          }) => (
            <Paper elevation={3}>
              <span
                style={{ background: borderColor }}
                className={classes.circle}
              ></span>
              <Box py={0.5} px={2} className={classes.tooltip}>
                <Box>
                  <Box />
                  Interval: <strong>{xFormatted}</strong>
                </Box>
                <Box>
                  Amount: <strong>{yFormatted}</strong>
                </Box>
              </Box>
            </Paper>
          )}
          yScale={{
            type: "linear",
            min: "auto",
            max: "auto",
            stacked: true,
            reverse: false
          }}
          axisTop={null}
          axisRight={null}
          axisBottom={{
            orient: "bottom",
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: "Intervale Orare",
            legendOffset: 36,
            legendPosition: "middle"
          }}
          axisLeft={{
            orient: "left",
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: "Number",
            legendOffset: -40,
            legendPosition: "middle"
          }}
          colors={{ scheme: "nivo" }}
          pointSize={10}
          pointColor={{ theme: "background" }}
          pointBorderWidth={2}
          pointBorderColor={{ from: "serieColor" }}
          pointLabelYOffset={-12}
          useMesh={true}
          legends={[
            {
              anchor: "bottom",
              direction: "row",
              justify: false,
              translateX: -100,
              translateY: 60,
              itemsSpacing: 20,
              itemDirection: "left-to-right",
              itemWidth: 120,
              itemHeight: 20,
              itemOpacity: 0.75,
              symbolSize: 12,
              symbolShape: "circle",
              symbolBorderColor: "rgba(0, 0, 0, .5)",
              effects: [
                {
                  on: "hover",
                  style: {
                    itemBackground: "rgba(0, 0, 0, .03)",
                    itemOpacity: 1
                  }
                }
              ]
            }
          ]}
        />
      )}
    </Box>
  );
};

export default Trips;