Reactjs 多用户反应表中的雷达图
我试图为团队成员构建雷达图，以检查他们如何为项目做出贡献，因此对于成员，我想创建一个雷达图，显示各个领域。这个想法是在一个表中构造对应于每个团队成员的数据——但我总是得到空的图表。 相同的数据类似于：Reactjs 多用户反应表中的雷达图,reactjs,Reactjs,我试图为团队成员构建雷达图，以检查他们如何为项目做出贡献，因此对于成员，我想创建一个雷达图，显示各个领域。这个想法是在一个表中构造对应于每个团队成员的数据——但我总是得到空的图表。 相同的数据类似于： Data:[ {name: 'ABC', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'}, {name: 'XYZ', gitCommit: '200', gitPull:
Data:[
{name: 'ABC', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
{name: 'XYZ', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'}
]
<table id='projects' className="zebra" data-sortable="">
<tbody>
<tr>{this.renderChartHeader()}</tr>
{this.renderChart()}
</tbody>
</table>
{this.renderCharthReader（）}
{this.renderChart（）}
renderChart(){
return this.state.Data.map((Data, index) => {
return(
<tr key={Data.name}>
<td>{Data.name}</td>
<td>
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={Data}>
<PolarGrid gridType='circle'/>
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis angle={30} domain={[0, 10]} />
<Radar name="Sara" dataKey="jira" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
</td>
</tr>
)
})
}
renderChart（）{
返回此.state.Data.map（（数据，索引）=>{
返回(
{Data.name}
)
})
}
import React from 'react';
import uomHeader from '../header/uomheader.js';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
import { storeGet } from '../_helpers/helper-funcs.js';
import BarChart from 'react-bar-chart';
import {
Radar, RadarChart, PolarGrid, Legend,
PolarAngleAxis, PolarRadiusAxis,
} from 'recharts';
// import Paper from '@material-ui/core/Paper';
// import {
// Chart,
// BarSeries,
// Title,
// ArgumentAxis,
// ValueAxis,
// } from '@devexpress/dx-react-chart-material-ui';
// import { Animation } from '@devexpress/dx-react-chart';
const team = 1;
const teamName = "SWEN90013-2020-SP";
const margin = {top: 20, right: 20, bottom: 30, left: 40};
class IndividualContributionPage extends React.Component{
constructor(props){
super(props);
this.state = {
projectName: '',
submitted: false,
total: [
{student_id:'', fullname:''}
],
// The Array to store the data
Data:[
{name: 'ABC', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
{name: 'XYZ', gitCommit: '200', gitPull: '3', jira: '4', slack: '5', confluence: '6'},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
// {name: '', gitCommit: '', gitPull: '', jira: '', slack: '', confluence: ''},
],
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit(e) {
e.preventDefault();
const { projectName} = this.state;
this.props.getTeamList(team);
this.setState({ submitted: true });
if(storeGet("teamList")!=null){
for(var i in storeGet("teamList")){
// Get the member's configuration
this.props.getMemberConfiguration(projectName,storeGet("teamList")[i].student_id);
console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");
console.log(storeGet("memberConfig"));
// Get the full name
this.state.Data[i].name = storeGet("teamList")[i].fullname;
console.log(this.state.Data[i].name);
//Get SLACK - need User ID
this.props.getSlackUser(team, storeGet("teamList")[i].student_id);
//Get JIRA data - need User ID
this.props.getJiraUser(teamName, storeGet("teamList")[i].student_id);
// TODO
// Get Git Data - need Git Username, currently hardcoded
this.props.codeCommitsPerMember(projectName, "zhanglihuan");
// TODO
//Get Conflunece Data - need Username, currently hardcoded
this.props.numPagesPerMember("yujuzhang");
if(storeGet("commitsPerMember")!=null){
this.state.Data[i].gitCommit = storeGet("commitsPerMember").total;
// TODO: No pull request in the return value, so using the file_changed in temporary
this.state.Data[i].gitPull = storeGet("commitsPerMember").file_changed;
}
// console.log(this.state.Data[i].gitCommit);
// console.log(this.state.Data[i].gitPull);
if(storeGet("slackUser")!=null){
this.state.Data[i].slack = storeGet("slackUser")['total_number'];
}
// if(storeGet("jiraUser")!=null){
// this.props.Data[i].jira = storeGet("jiraUser")['count_issues_done'];
// }
// console.log(storeGet("numPagesPerMember"));
// if(storeGet("numPagesPerMember")!=null){
// this.props.Data[i].confluence = storeGet("numPagesPerMember");
// }
}
}
}
render() {
const {submitted} = this.state;
return (
<div className="uomcontent">
{uomHeader("Individual Contribution Page")}
<div role="main">
<div className="page-inner">
<form name="form">
<div>
<a className="button cta" onClick={this.handleSubmit} >Fetch</a>
</div>
{submitted &&
<table id='projects' className="zebra" data-sortable="">
<tbody>
<tr>{this.renderChartHeader()}</tr>
{this.renderChart()}
</tbody>
</table>
}
</form>
</div>
</div>
</div>
)
}
renderChartHeader() {
let header = ['Student Name', 'Radar Chart'];
return header.map((key, index) => {
return <th key={index}>{key.toUpperCase()}</th>
})
}
renderChart(){
return this.state.Data.map((Data, index) => {
return(
<tr key={Data.name}>
<td>{Data.name}</td>
<td>
<RadarChart cx={300} cy={250} outerRadius={150} width={500} height={500} data={Data}>
<PolarGrid gridType='circle'/>
<PolarAngleAxis dataKey="name" />
<PolarRadiusAxis angle={30} domain={[0, 10]} />
<Radar name="ABC" dataKey="jira" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
</td>
</tr>
)
})
}
}
function mapState(state) {
const { projectName } = state;
return { projectName };
}
const actionCreators = {
loginGit: userActions.loginGit,
totalCodeCommits: userActions.totalCodeCommits,
codeCommitsPerMember: userActions.codeCommitsPerMember,
AllPagesOnConfluence: userActions.AllPagesOnConfluence,
getTeamList: userActions.getTeamList,
getMemberConfiguration: userActions.getMemberConfiguration,
getSlackUser: userActions.getSlackUser,
getJiraUser: userActions.getJiraUser,
numPagesPerMember: userActions.numPagesPerMember,
};
const Product = connect(mapState, actionCreators)(IndividualContributionPage);
export { Product as IndividualContributionPage };
从“React”导入React；
从“../header/uomHeader.js”导入uomHeader；
从'react redux'导入{connect}；
从“../\u actions”导入{userActions}；
从“../\u helpers/helper funcs.js”导入{storeGet}；
从“反应条形图”导入条形图；
进口{
雷达，雷达艺术，北极星，传奇，
极光，极光，
}来自‘雷查特’；
//从“@material ui/core/Paper”导入纸张；
//进口{
//图表，
//酒吧系列，
//头衔，
//论证轴，
//ValueAxis，
//}来自“@devexpress/dx react chart material ui”；
//从“@devexpress/dx react chart”导入{Animation}；
施工队=1；
const teamName=“SWEN90013-2020-SP”；
常量边距={顶部：20，右侧：20，底部：30，左侧：40}；
类IndividualContributionPage扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目名称：“”，
提交：假，
总数：[
{学生id:''，全名：'}
],
//存储数据的数组
数据：[
{name:'ABC'，gitCommit:'200'，gitPull:'3'，jira:'4'，slack:'5'，converge:'6'}，
{name:'XYZ'，gitCommit:'200'，gitPull:'3'，jira:'4'，slack:'5'，converge:'6'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
//{名称：''，gitCommit:''，gitPull:''，jira:''，slack:''，汇流：'}，
],
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
常量{name，value}=e.target；
this.setState（{[name]：value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
const{projectName}=this.state；
this.props.getTeamList（团队）；
this.setState（{submitted:true}）；
如果（storeGet（“团队列表”）！=null）{
对于（storeGet中的var i（“团队列表”））{
//获取成员的配置
this.props.getMemberConfiguration（projectName，storeGet（“teamList”）[i].student\u id）；
console.log（“%%%%%%%%%%%%”）；
log（storeGet（“memberConfig”）；
//获取全名
this.state.Data[i].name=storeGet（“团队列表”）[i].fullname；
console.log（this.state.Data[i].name）；
//获取SLACK-需要用户ID
this.props.getSlackUser（team，storeGet（“teamList”）[i].student\u id）；
//获取JIRA数据-需要用户ID
this.props.getJiraUser（teamName，storeGet（“teamList”）[i].student\u id）；
//待办事项
//获取Git数据-需要Git用户名，当前为硬编码
this.props.codeCommitsPerMember（项目名称，“zhanglihuan”）；
//待办事项
//获取冲突数据-需要用户名，当前为硬编码
这个.props.numPagesPerMember（“yujuzhang”）；
if（storeGet（“commitsPerMember”）！=null）{
this.state.Data[i].gitCommit=storeGet（“commitsPerMember”）.total；
//TODO:返回值中没有拉取请求，因此使用临时更改的文件
this.state.Data[i].gitPull=store