import React ,{ useEffect } from 'react';
// import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import * as echarts from 'echarts';
import axios from 'axios';
import { getdata } from './data'

function Demo({url}) {
  
  useEffect(()=>{
    Init();
  },[])

  function Init() {
    let data = getdata();
    console.log(data);
    var huan_val = document.getElementById("Demo");
    var myEcharts = echarts.init(huan_val);
    let date = [];
    let array = [0];
    let array1 = [0];
    let array2 = [0];
    let option = {
      xAxis: {
        type: 'time', 
        data:date,
        boundaryGap: false,
        axisLabel:{
          month:`{M}月`
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          params = params[0];
          var date = new Date(params.name);
          return (
            date.getDate() +
            '/' +
            (date.getMonth() + 1) +
            '/' +
            date.getFullYear() +
            ' : ' +
            params.value
          );
        },
        axisPointer: {
          animation: false
        }
      },
      grid: {
        left: '5%',
        right: '1%',
        top: '8%',
      },
      legend: {
        data: ['issue', 'fork' ,'commit']
      },
      color: ['red','#36bba6',"skyblue",'#a491d7','#e840f7',"#36bba6","#7b32b2"],
      yAxis: {
        type: 'value',
        scale: true,
        boundaryGap: [0, '100%'],
        name: '',
        min:0,
        splitLine : {
          show : true,
        },
        nameLocation:'end',
        nameTextStyle:{
          fontSize:14,  
          padding:[0,70,-80,0]
        }
      },series:[
        {
          data: array,
          type: 'line',
          name:"issue",
          smooth: true
        },
        {
          data: array1,
          type: 'line',
          name:"fork",
          smooth: true
        },
        {
          data: array2,
          type: 'line',
          name:"commit",
          smooth: true
        },
      ]
    };
    myEcharts.setOption(option);

    setTimeout(()=>{
      let count = data.length>15?15:data.length;
      for(var i = 0;i<count;i++){
        date.push(data[count][0]);
        array.push(data[count][1]);
        array1.push(data[count][2]);
        array2.push(data[count][3]);
      }
      let interval = setInterval(function () {
        count ++ ;
        if(count < data.length ){
          setValue(count)
        }else{
          clearInterval(interval);
        }
      }, 2000);
    },1000);

    function setValue(count){
      for (var i = 0; i < 2; i++) {
        array.shift();
        array1.shift();
        array2.shift();
        date.shift();
        date.push(data[count][0]);
        array.push(data[count][1]);
        array1.push(data[count][2]);
        array2.push(data[count][3]);
      }
      myEcharts.setOption({
        xAxis: {
          type: 'category',
          data:date
        },
        legend: {
          data: ['issue', 'fork' ,'commit']
        },
        series: [
          {
            data: array,
            type: 'line',
            name:"issue",
            showSymbol: false,
            smooth: true
          },
          {
            data: array1,
            type: 'line',
            name:"fork",
            showSymbol: false,
            smooth: true
          },
          {
            data: array2,
            type: 'line',
            name:"commit",
            showSymbol: false,
            smooth: true
          },
        ]
      });
    }
  }

  return(
    <div id="Demo" style={{height:"400px"}}></div>
  )
}
export default Demo;