Untitled

import React from "react";
import Papa from "papaparse";
import ReactApexChart from "react-apexcharts";

const ApexChart = ({ csv }) => {

  if (!csv) { 
    console.log("Cos poszlo nie tak")
    return null;
  }
  
  console.log(csv);

  const series = [
    {
      name: "Topsoil",
      data: csv.data.map(row => [row.Dash_x, row.Dash_y]),
    },
    {
      name: "Subgrade",
      data: csv.data.map(row => [row.Dash_x + 10, row.Dash_y + 10]),
    },
    {
      name: "Embankment",
      data: csv.data.map(row => [row.Dash_x + 25, row.Dash_y + 25]),
    },
  ];
  const options = {
    chart: {
      height: 550,
      type: "line",
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      width: [5, 7, 5],
      curve: "straight",
      dashArray: [0, 8, 5],
    },
    title: {
      text: "No.",
      align: "left",
    },
    legend: {
      tooltipHoverFormatter: function (val, opts) {
        return (
          val +
          " - " +
          opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] +
          ""
        );
      },
    },
    markers: {
      size: 0,
      hover: {
        sizeOffset: 15,
      },
    },
    xaxis: {
      type: 'numeric'
    },
    tooltip: {
      y: [
        {
          title: {
            formatter: function (val) {
              return val + " (mins)";
            },
          },
        },
        {
          title: {
            formatter: function (val) {
              return val + " per session";
            },
          },
        },
        {
          title: {
            formatter: function (val) {
              return val;
            },
          },
        },
      ],
    },
    // grid: {
    //   borderColor: "#f1f1f1",
    // },
  };

  return (
    <div id="chart">
      <ReactApexChart
        options={options}
        series={series}
        type="line"
        height={350}
      />
    </div>
  );
};

export default ApexChart;