import { useState } from "react";
import ReactApexChart from "react-apexcharts";

    const TrafficChart = () => {
        const [state, setState] = useState({
          
            series: [
              {
                // name: "High - 2013",
                name: 'Professional Website',
                data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
              },
              {
                // name: "Low - 2013",
                name: 'Personal Website',
                data: [12, 11, 14, 18, 17, 13, 13, 14, 18, 17, 13, 13]
              },
              {
                // name: "Low - 2013",
                name: 'Personal Forum',
                data: [10, 11, 14, 19, 18, 23, 17, 14, 10, 17, 23, 10]
              },
              {
                // name: "High - 2013",
                name: 'Professional Forum',
                data: [20, 19, 30, 36, 30, 35, 33, 33, 36, 32, 32, 30]
              }
            ],
            options: {
              chart: {
                height: 350,
                type: 'line',
                dropShadow: {
                  enabled: true,
                  color: '#000',
                  top: 18,
                  left: 7,
                  blur: 10,
                  opacity: 0.5
                },
                zoom: {
                  enabled: false
                },
                toolbar: {
                  show: false
                }
              },
              colors: ['#77B6EA', '#545454', '#F50898','#213ece'],
              dataLabels: {
                enabled: true,
              },
              stroke: {
                curve: 'smooth'
              },
              title: {
                text: 'Recent Sites Traffic',
                align: 'left'
              },
              grid: {
                borderColor: '#e7e7e7',
                row: {
                  colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                  opacity: 0.5
                },
              },
              markers: {
                size: 1
              },
              xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                title: {
                  text: 'Month'
                }
              },
              yaxis: {
                title: {
                  text: 'Visits'
                },
                min: 5,
                max: 40
              },
              legend: {
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
              }
            },
          
          
        });

        

        return (
          <div>
            <div id="chart">
                <ReactApexChart options={state.options} series={state.series} type="line" height={450} />
              </div>
            <div id="html-dist"></div>
          </div>
        );
      }



      export default TrafficChart