From 28d3b5bedd0e37826fb2b8cf03e94813f5b7f210 Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Mon, 31 May 2021 17:44:30 +0800
Subject: [PATCH] git cherry-pick 1432afebfd1e2e8fc5df3cb9e0d2b808995b6a4a

---
 src/forge/users/Statistics/Index.jsx  | 103 ++++++++++++--------------
 src/forge/users/Statistics/Index.scss |   2 +-
 2 files changed, 47 insertions(+), 58 deletions(-)

diff --git a/src/forge/users/Statistics/Index.jsx b/src/forge/users/Statistics/Index.jsx
index aca25eb11..6375ac613 100644
--- a/src/forge/users/Statistics/Index.jsx
+++ b/src/forge/users/Statistics/Index.jsx
@@ -74,21 +74,19 @@ function Index(props) {
       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));
+        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()});
+          arr.push({name:item,p:percent[item]*100,color:getColor()});
         })
         setPercentData(arr);
       }
@@ -128,7 +126,7 @@ function Index(props) {
   return(
     <div>
       <div className="boxes">
-        <FlexAJ style={{marginBottom:"15px"}}>
+        <FlexAJ>
           <span className="font-18">开发能力</span>
           <RangePicker 
             disabledDate={disabledDate} 
@@ -136,47 +134,44 @@ function Index(props) {
             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]}/>
-              { topThree[1] && <Round num={topThree[1][1]} color="#99dfff" name={topThree[1][0]}/> }
-              { topThree[2] && <Round num={topThree[2][1]} color="#ff9e48" name={topThree[2][0]}/> }
+        <Radar data={radarData}/>
+        {
+          topThree &&
+          <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>
-          }
-          {
-            percentData &&
-            <div className="pBox">
-              <div className="progress">
-                {
-                  percentData.map((i,k)=>{
-                    return(
-                      <span key={i.name} style={{width: `${i.p}%`, backgroundColor:`${i.color}`}}></span>
-                    )
-                  })
-                }
-              </div>
-              <div className="progresstip">
-                {
-                  percentData.map((i,k)=>{
-                    return(
-                      <span key={i.name}>
-                        <i className="zero" style={{backgroundColor: `${i.color}`}}></i><span>{i.name}</span>
-                        <span>{`${i.p}%`}</span>
-                      </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"}}>
+        <FlexAJ>
           <span className="font-18">角色定位</span>
           <RangePicker 
             disabledDate={disabledDate} 
@@ -184,13 +179,10 @@ function Index(props) {
             format={dateFormat}
           />
         </FlexAJ>
-        <div className="echartBox">
-          <p>根据你在项目开发过程中的工作，对你在项目中扮演的角色进行定位，包括：创建者、管理者、开发者、测试者、文档工作者等。</p>
-          <Pie data={pieData}/>
-        </div>
+        <Pie data={pieData}/>
       </div>
       <div className="boxes">
-        <FlexAJ style={{marginBottom:"15px"}}>
+        <FlexAJ>
           <span className="font-18">专业定位</span>
           <RangePicker 
             disabledDate={disabledDate} 
@@ -198,10 +190,7 @@ function Index(props) {
             format={dateFormat}
           />
         </FlexAJ>
-        <div className="echartBox">
-          <p>展示你擅长、关注、感兴趣的专业范围，通过你参与项目、收藏项目、关注项目、复刻项目等数据来统计。</p>
-          <Cloud data={cloudData}/>
-        </div>
+        <Cloud data={cloudData}/>
       </div>
     </div>
   )
diff --git a/src/forge/users/Statistics/Index.scss b/src/forge/users/Statistics/Index.scss
index 4ea048bfa..a2f944b90 100644
--- a/src/forge/users/Statistics/Index.scss
+++ b/src/forge/users/Statistics/Index.scss
@@ -1,5 +1,5 @@
 .boxes{
-  padding:15px 0px;
+  padding:20px 30px;
   .roundBox{
     margin:20px auto;
     display: flex;