import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';

const HeatMap: React.FC = () => {

  const getVirtualData = (year: string) => {
    const date = +echarts.time.parse(`${year}-01-01`);
    const end = +echarts.time.parse(`${+year + 1}-01-01`);
    const dayTime = 3600 * 24 * 1000;
    const data: [string, number][] = [];
    for (let time = date; time < end; time += dayTime) {
      data.push([echarts.time.format(time, '{yyyy}-{MM}-{dd}', false), Math.floor(Math.random() * 500)]);
    }
    return data;
  };


  const options = {
    title: {
      top: 30,
      left: 'center',
      text: '应用修改记录'
    },
    tooltip: {},
    visualMap: {
      min: 0,
      max: 500,
      type: 'piecewise',
      orient: 'horizontal',
      left: 'center',
      top: 65
    },
    gradientColor: ['#bedaff', '#6ba1ff', '#1241d2'],
    calendar: {
      top: 120,
      left: 30,
      right: 30,
      cellSize: ['auto', 20],
      range: '2024',
      itemStyle: {
        borderWidth: 0.5,
        borderColor: '#86909c'
      },
      dayLabel: { nameMap: 'ZH' },
      monthLabel: { nameMap: 'ZH' },
      yearLabel: { show: false }
    },
    series: {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: getVirtualData('2024')
    }
  };

  return <ReactECharts option={options} />;
};

export default HeatMap;