liuyishou
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new revision

This commit is contained in:
liuyishoua 2023-09-27 20:48:31 +08:00
parent 732e20a7eb
commit 7e9fb10b66
6 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/forge/Activity/VisualEcharts/Code.js
View File

File diff suppressed because one or more lines are too long

1
src/forge/Activity/VisualEcharts/CommitItem.js
View File

@ -9,6 +9,7 @@ class CommitItem extends Component {
const time = new Date(time_stamp)
return `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')} ${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`
}
render() {
const { projectsId ,owner } = this.props.match.params;
const { commit } = this.props;

50
src/forge/Activity/VisualEcharts/Contributor.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import echarts from 'echarts';
import '../activity.css'
import axios from 'axios'
import NoneData from '../../Nodata';
class Contributor extends Component {
constructor(props) {
@ -15,6 +16,7 @@ class Contributor extends Component {
this.topBar = React.createRef();
this.PRPlot = React.createRef()
}
topYClick = (params)=>{
let login_name = undefined
this.contributions_list.forEach(contribution=>{
@ -24,6 +26,7 @@ class Contributor extends Component {
})
window.open(`/${login_name}`, "_blank");
}
componentDidMount(){
const topChart = echarts.init(this.topBar.current);
var option;
@ -77,6 +80,7 @@ class Contributor extends Component {
const PRPlot = echarts.init(this.PRPlot.current);
var option;
// 由于未提供 PR 信息，暂使用模拟数据替代
let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
@ -101,9 +105,6 @@ class Contributor extends Component {
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
@ -161,6 +162,7 @@ class Contributor extends Component {
PRPlot.setOption(option);
this.PRPlotEchart = PRPlot
}
dataUpdate = (contributions_list, pulls_list)=>{
this.contributions_list = contributions_list
this.pulls_list = pulls_list
@ -175,12 +177,27 @@ class Contributor extends Component {
}
top_source.push([contribution.contributions, contribution.contributions, name])
})
const bar_x_max = parseInt(top_source[top_source.length-1][0] * 1.1)
const bar_x_min = parseInt(top_source[1][0] * 0.9)
const bar_x_max = parseInt(top_source[top_source.length-1][0] * 1.1)
const bar_x_min = parseInt(top_source[0][0] * 0.9)
if (this.topBar.current){
let myChart = this.topBarEchart
let title = undefined
if (top_source.length >= 10){
title = "贡献 Top 10 排行榜 (总数: "+ top_source.length +")"
}else{
title = "贡献值排行榜"
}
myChart.setOption(
{
title: {
left: 'center',
text: title,
textStyle: {
fontSize: 13
},
top: '5%'
},
dataset: [
{
dimensions: ['score', 'amount', 'product'],
@ -198,7 +215,7 @@ class Contributor extends Component {
return `${params.data[2]}贡献: ${params.data[0]}`
}
},
xAxis: { name: '贡献数', max: bar_x_max },
xAxis: { name: '贡献数', max: bar_x_max, minInterval: 1,},
visualMap: {
orient: 'horizontal',
left: 'center',
@ -212,6 +229,10 @@ class Contributor extends Component {
bottom: "5%"
},
})
if(top_source.length == 0){
myChart = <NoneData _html="暂时还没有相关数据!" />
}
}
}
render() {
@ -224,15 +245,14 @@ class Contributor extends Component {
return (
<div style={{width: '100%', overflow: 'hidden'}}>
<div ref={this.topBar} style={{
height: 400,
width: "50%",
float: 'left'}}></div>
<div ref={this.PRPlot} style={{
height: 400,
width: "50%",
float: 'left'
}}></div>
height: 400,
width: "50%",
float: 'left'}}></div>
<div ref={this.PRPlot} style={{
height: 400,
width: "50%",
float: 'left'
}}></div>
</div>
)
}

6
src/forge/Activity/VisualEcharts/Echarts.js
View File

@ -7,6 +7,7 @@ import Contributor from './Contributor'
import GitHistory from './GitHistory'
import ForkList from './ForkList'
// 负责数据获取业务,并安排四个子模块的位置
class Echarts extends Component {
constructor(props) {
super(props)
@ -23,6 +24,7 @@ class Echarts extends Component {
}
this.eChartsRef = React.createRef();
}
// /api/v1/:owner/:repo/commits.json?owner=&repo=&page=&limit=
getInfoCommits = ()=>{
const { projectsId , owner } = this.props.match.params;
@ -58,6 +60,7 @@ class Echarts extends Component {
}
})
}
// GET /api/:owner/:repo/contributors.json
getInfoContributors = ()=>{
const { projectsId , owner } = this.props.match.params;
@ -77,6 +80,7 @@ class Echarts extends Component {
}
})
}
// PR数据接口：/api/v1/:owner/:repo/pulls.json?owner=&repo=
getInfoPR = () => {
const { projectsId , owner } = this.props.match.params;
@ -99,11 +103,13 @@ class Echarts extends Component {
}
})
}
componentDidMount(){
this.getInfoContributors()
this.getInfoPR()
this.getInfoCommits()
}
render() {
const {
contributions_list,

27
src/forge/Activity/VisualEcharts/ForkList.js
View File

@ -22,6 +22,7 @@ class ForkList extends Component {
this.myChart = undefined;
this.dataZoomFunction = this.dataZoomFunction.bind(this)
}
componentDidMount(){
const myChart = echarts.init(this.eChartsRef.current);
this.myChart = myChart
@ -40,9 +41,7 @@ class ForkList extends Component {
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
@ -58,31 +57,31 @@ class ForkList extends Component {
{
type: 'inside',
start: 0,
end: 20
end: 1000000
},
{
start: 0,
end: 20
end: 1000000
}
],
series: [
{
type: 'bar',
// smooth: true,
symbol: 'none',
areaStyle: {},
data: undefined
},
],
barCategoryGap: '0%'
barCategoryGap: '80%'
};
myChart.setOption(option);
myChart.on('dataZoom', "mouseup", this.dataZoomFunction);
myChart.getZr().on('click', this.dataBarFunction)
// 延时两秒，初始化commit列表
setTimeout(this.layoutTime, 3000);
setTimeout(this.layoutTime, 5000);
}
layoutTime = ()=>{
if(this.commits){
let commits = this.commits
@ -92,10 +91,12 @@ class ForkList extends Component {
})
}
}
timeTransfer = (time_stamp)=>{
const time = new Date(time_stamp)
return `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')}`
}
dataBarFunction = (params)=>{
let pointInPixel = [params.offsetX, params.offsetY]
let xIndex = undefined
@ -115,6 +116,7 @@ class ForkList extends Component {
seCommitsList
})
}
dataZoomFunction = (params)=>{
let start = undefined
let end = undefined
@ -127,8 +129,9 @@ class ForkList extends Component {
start = params.start
end = params.end
}
start = new Date(+this.time.minDate + parseInt((start/100) * this.time.during_time_stamp))
end = new Date(+this.time.minDate + parseInt((end/100) * this.time.during_time_stamp))
let boundary = 3600 * 24 * 1000
start = new Date(+this.time.minDate + (start/100) * this.time.during_time_stamp - boundary)
end = new Date(+this.time.minDate + (end/100) * this.time.during_time_stamp + boundary)
if(this.commits){
this.commits.forEach(commit=>{
@ -178,10 +181,10 @@ class ForkList extends Component {
return `${time.getFullYear()}年${time.getMonth() + 1}月${time.getDate()}日</br> 提交次数：${params[0].data[1]}`
}
},
// 数据为仿真数据，后端未提供 fork 信息数据接口
series: [
{
type: 'bar',
// smooth: true,
symbol: 'none',
areaStyle: {},
data: data
@ -192,8 +195,8 @@ class ForkList extends Component {
}
}
render() {
// 渲染的地方不能放this.setState,轻则产生抖动，重则形成死循环
const {commits, commits_count} = this.props
const {dataZoomStart, dataZoomEnd, seCommitsList} = this.state
if(commits_count && commits &&(commits.length == commits_count)){

26
src/forge/Activity/VisualEcharts/GitHistory.js
View File

@ -22,6 +22,7 @@ class GitHistory extends Component {
this.eChartsRef = React.createRef();
this.dataZoomFunction = this.dataZoomFunction.bind(this)
}
componentDidMount(){
const myChart = echarts.init(this.eChartsRef.current);
this.myChart = myChart
@ -40,15 +41,13 @@ class GitHistory extends Component {
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
// boundaryGap: false
},
yAxis: {
type: 'value',
@ -58,11 +57,11 @@ class GitHistory extends Component {
{
type: 'inside',
start: 0,
end: 20
end: 1000000
},
{
start: 0,
end: 20
end: 1000000
}
],
series: [
@ -74,15 +73,16 @@ class GitHistory extends Component {
data: undefined
},
],
barCategoryGap: '0%'
barCategoryGap: '80%'
};
myChart.setOption(option);
myChart.on('dataZoom', "mouseup", this.dataZoomFunction);
myChart.getZr().on('click', this.dataBarFunction)
// 延时两秒，初始化commit列表
setTimeout(this.layoutTime, 3000);
setTimeout(this.layoutTime, 5000);
}
layoutTime = ()=>{
if(this.commits){
let commits = this.commits
@ -92,10 +92,12 @@ class GitHistory extends Component {
})
}
}
timeTransfer = (time_stamp)=>{
const time = new Date(time_stamp)
return `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')}`
}
dataBarFunction = (params)=>{
let pointInPixel = [params.offsetX, params.offsetY]
let xIndex = undefined
@ -115,6 +117,7 @@ class GitHistory extends Component {
seCommitsList
})
}
dataZoomFunction = (params)=>{
let start = undefined
let end = undefined
@ -127,8 +130,9 @@ class GitHistory extends Component {
start = params.start
end = params.end
}
start = new Date(+this.time.minDate + parseInt((start/100) * this.time.during_time_stamp))
end = new Date(+this.time.minDate + parseInt((end/100) * this.time.during_time_stamp))
let boundary = 3600 * 24 * 1000
start = new Date(+this.time.minDate + (start/100) * this.time.during_time_stamp - boundary)
end = new Date(+this.time.minDate + (end/100) * this.time.during_time_stamp + boundary)
if(this.commits){
this.commits.forEach(commit=>{
@ -192,8 +196,8 @@ class GitHistory extends Component {
}
}
render() {
// 渲染的地方不能放this.setState,轻则产生抖动，重则形成死循环
const {commits, commits_count} = this.props
const {dataZoomStart, dataZoomEnd, seCommitsList} = this.state
if(commits_count && commits &&(commits.length == commits_count)){