forgeplus-react/src/forge/users/Statistics/Index.jsx

import React , {useEffect, useState} from 'react';
import './Index.scss';
import  'echarts/lib/component/tooltip';
import  'echarts/lib/component/title';
import  'echarts/lib/component/legend'
import  'echarts/lib/component/markPoint';

import Pie from '../Echart/Pie';
import Cloud from '../Echart/Cloud';
import Radar from '../Echart/Radar';
import Round from '../Echart/Round';
import { DatePicker } from 'antd';
import moment from 'moment';

import { FlexAJ } from '../../Component/layout';
import Axios from 'axios';

const { RangePicker } = DatePicker;
  const dateFormat = 'YYYY-MM-DD';
function Index(props) {
  const username = props.match.params.username;
  const [ dates, setDates] = useState(undefined);
  const [ pieData, setPieData ] = useState([]);
  const [ rDates, setRDates ] = useState(undefined);
  const [ radarData, setRadarData ] = useState([]);

  const [ topThree , setTopThree] = useState(undefined);
  const [ percentData , setPercentData ] = useState(undefined);

  const [ cData, setCData ] = useState(undefined);
  const [ cloudData, setCloudData ] = useState(undefined);

  const disabledDate = current => {
    return current && current > moment().endOf('day');
  };

  // 获取角色定位接口数据
  useEffect(()=>{
    getRoleSta();
  },[dates])

  function getRoleSta() {
    const url = `/users/${username}/statistics/role.json`;
    Axios.get(url,{
      params:{
        start_time:dates && dates[0],
        end_time:dates && dates[1]
      }
    }).then(result=>{
      if(result && result.data){
        setPieData(result.data.role);
      }
    }).catch(error=>{})
  }


  // 获取开发能力接口数据
  useEffect(()=>{
    getRadarSta();
  },[rDates])

  function getRadarSta() {
    const url = `/users/${username}/statistics/develop.json`;
    Axios.get(url,{
      params:{
        start_time:rDates && rDates[0],
        end_time:rDates && rDates[1]
      }
    }).then(result=>{
      if(result && result.data){
        setRadarData(result.data);
        let score = result.data.user && result.data.user.each_language_score;
        if(score){
          var sortData = [];
          for (var item in score) {
            sortData.push([item, score[item]])
          }
          sortData.sort(function(a, b) {
            return b[1] - a[1];
          });
          setTopThree(sortData.slice(0,3));
        }

        let percent = result.data.user && result.data.user.languages_percent;
        let arr = [];
        Object.keys(percent).map((item,key)=>{
          arr.push({name:item,p:parseFloat(percent[item]*100).toFixed(1),color:getColor()});
        })
        setPercentData(arr);
      }
    }).catch(error=>{})
  }
  function getColor(){
    let str = "#";
    let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
    for(var i=0;i<6;i++){
      let num = parseInt(Math.random() * 16,0);
      str+=arr[num];
    }
    return str;
  }

  //用户专业定位
  useEffect(()=>{
    getCloudSta();
  },[cData])

  function getCloudSta() {
    const url = `/users/${username}/statistics/major.json`;
    Axios.get(url,{
      params:{
        start_time:cData && cData[0],
        end_time:cData && cData[1]
      }
    }).then(result=>{
      if(result && result.data){
        setCloudData(result.data);
      }
    }).catch(error=>{})
  }

  return(
    <div>
      <div className="boxes">
        <FlexAJ style={{marginBottom:"15px"}}>
          <span className="font-18">开发能力</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setRDates(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <div className="echartBox">
          <p>从五个维度刻画你的开发能力：语言能力、影响力、贡献度、活跃度、项目经验，同时可以查看社区平均数据。</p>
          <Radar data={radarData}/>
          {
            topThree && topThree.length > 0 && 
            <div className="roundBox">
              <Round num={topThree[0][1]} color="#FF7F69" name={topThree[0][0]}/>
              <Round num={topThree[1][1]} color="#99dfff" name={topThree[1][0]}/>
              <Round num={topThree[2][1]} color="#ff9e48" name={topThree[2][0]}/>
            </div>
          }
          {
            percentData &&
            <div className="pBox">
              <div class="progress">
                {
                  percentData.map((i,k)=>{
                    return(
                      <span style={{width: `${i.p}%`, backgroundColor:`${i.color}`}}></span>
                    )
                  })
                }
              </div>
              <div className="progresstip">
                {
                  percentData.map((i,k)=>{
                    return(
                      <span>
                        <i class="zero" style={{backgroundColor: `${i.color}`}}></i><span>{i.name}</span>
                        <span>{`${i.p}%`}</span>
                      </span>
                    )
                  })
                }
              </div>
            </div>
          }
        </div>
      </div>
      <div className="boxes">
        <FlexAJ style={{marginBottom:"15px"}}>
          <span className="font-18">角色定位</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setDates(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <div className="echartBox">
          <p>根据你在项目开发过程中的工作，对你在项目中扮演的角色进行定位，包括：创建者、管理者、开发者、测试者、文档工作者等。</p>
          <Pie data={pieData}/>
        </div>
      </div>
      <div className="boxes">
        <FlexAJ style={{marginBottom:"15px"}}>
          <span className="font-18">专业定位</span>
          <RangePicker 
            disabledDate={disabledDate} 
            onChange={(val,dateString) => {setCData(dateString)}}
            format={dateFormat}
          />
        </FlexAJ>
        <div className="echartBox">
          <p>展示你擅长、关注、感兴趣的专业范围，通过你参与项目、收藏项目、关注项目、复刻项目等数据来统计。</p>
          <Cloud data={cloudData}/>
        </div>
      </div>
    </div>
  )
}
export default Index;