forked from Gitlink/forgeplus-react
113 lines
2.5 KiB
JavaScript
113 lines
2.5 KiB
JavaScript
import React ,{ useEffect, useState } from 'react';
|
|
import * as echarts from 'echarts';
|
|
import moment from 'moment';
|
|
import Axios from 'axios';
|
|
|
|
function Calendar({ userLogin , time , chooseTime }) {
|
|
const [ endT, setEndT ] = useState("");
|
|
const [ baginT, setBaginT ] = useState("");
|
|
|
|
useEffect(()=>{
|
|
if(time){
|
|
let e = `${time}-12-31`;
|
|
let b = `${time}-01-01`;
|
|
setEndT(e);
|
|
setBaginT(b);
|
|
}else if(time === ""){
|
|
let y = moment().get('year');
|
|
let m = moment().get('month');
|
|
let d = moment().get('date');
|
|
let e = `${y}-${m+1}-${d}`;
|
|
let b = `${y-1}-${m+1}-${d}`;
|
|
setEndT(e);
|
|
setBaginT(b);
|
|
}
|
|
},[time])
|
|
|
|
useEffect(()=>{
|
|
if(baginT && endT){
|
|
getData();
|
|
}
|
|
},[baginT,endT])
|
|
|
|
function getData() {
|
|
const url = `/users/${userLogin}/headmaps.json`;
|
|
Axios.get(url).then(result=>{
|
|
if(result && result.data){
|
|
let m = result.data.headmaps;
|
|
m.sort(compare('contributions'));
|
|
let max = m[m.length -1].contributions;
|
|
Init(m,max);
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
|
|
function compare(property){
|
|
return function(a,b){
|
|
var value1 = a[property];
|
|
var value2 = b[property];
|
|
return value1 - value2;
|
|
}
|
|
}
|
|
|
|
function getVirtulData(data) {
|
|
var array = [];
|
|
for(var i=0;i<data.length;i++){
|
|
array.push([data[i].date,data[i].contributions]);
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function Init(data,max) {
|
|
var huan_val = document.getElementById("Calendar");
|
|
var myEcharts = echarts.init(huan_val);
|
|
let option = {
|
|
title: {
|
|
show:false
|
|
},
|
|
tooltip: {},
|
|
visualMap: {
|
|
min: 0,
|
|
max: max,
|
|
type: 'piecewise',
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
bottom: 40,
|
|
inRange:{
|
|
color:['#C7DBFF', '#5291FF']
|
|
}
|
|
},
|
|
calendar: {
|
|
top: 60,
|
|
left: 30,
|
|
right: 0,
|
|
cellSize: ['auto', 13],
|
|
range: [baginT, endT],
|
|
itemStyle: {
|
|
borderWidth: 0.5
|
|
},
|
|
yearLabel: {show: false},
|
|
monthLabel:{
|
|
nameMap:"cn"
|
|
},
|
|
dayLabel:{
|
|
nameMap:"cn"
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: getVirtulData(data)
|
|
}
|
|
};
|
|
myEcharts.setOption(option);
|
|
myEcharts.on('click', function (params) {
|
|
chooseTime(params.data);
|
|
});
|
|
}
|
|
|
|
return(
|
|
<div id="Calendar" style={{height:"230px"}}></div>
|
|
)
|
|
}
|
|
export default Calendar; |