feat: 项目画像雷达图

src/forge/Component/Radar.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import echarts from 'echarts/lib/echarts'
+import 'echarts/lib/chart/radar';
+import { Popover } from 'antd';
+import axios from 'axios';
+
+
+const radarChartOption = {
+  color: ["#f8e367", "#99dfff"],
+  title: {
+    show: true
+  },
+  legend: {
+    show: false
+  },
+  tooltip: {
+    trigger: 'item',
+  },
+  radar: {
+    indicator: [
+      { name: '影响力', max: 100 },
+      { name: '活跃度', max: 100 },
+      { name: '开发度', max: 100 },
+      { name: '健康度', max: 100 },
+      { name: '流行度', max: 100 },
+    ],
+    center: ["50%", "55%"]
+  },
+  series: [{
+    name: '',
+    type: 'radar'
+  }]
+};
+
+function Radar({ fullName }) {
+  const [score, setScore] = useState(undefined);
+  useEffect(() => {
+    let url = `/${fullName}/score.json`;
+    axios.get(url).then(response => {
+      if ('updated_at' in response.data) {
+        setScore(response.data);
+        const properties = ['influence', 'community', 'vitality', 'health', 'trend'];
+        const scoreList = properties.map(property => Number((response.data[`${property}_norm_score`] * 100).toFixed(2)));
+        var radarContainer = document.getElementById("radar");
+        var myEcharts = echarts.init(radarContainer);
+        radarChartOption.series[0].data = [{
+          value: scoreList,
+          name: '项目得分'
+        }];
+        myEcharts.setOption(radarChartOption);
+      }
+    });
+  }, [])
+
+  return (
+
+    <div className="halfs" style={{ width: '100%', overflow: 'hidden' }}>
+      <style>
+        {
+          `
+          .ant-popover-title{
+            padding:12px 16px 0px 16px;
+            font-size: 16px;
+            font-weight: bold;
+            border-bottom: none;
+          }
+          `
+        }
+      </style>
+      <div className="font-16 color-ooo f-wrap-between">
+        <span>项目画像</span>
+
+        {score &&
+          <Popover content={<div>
+            <ul className="mb15">
+              <li><span className="font-bd mr8">影响力 :</span>
+                与star、fork等社交指标相关</li>
+              <li><span className="font-bd mr8">活跃度 :</span>
+                与issue、pr响应率相关</li>
+              <li><span className="font-bd mr8">流行度 :</span>
+                与近期讨论度相关</li>
+              <li><span className="font-bd mr8">开发度 :</span>
+                与近期代码提交数相关</li>
+              <li><span className="font-bd mr8">健康度 :</span>
+                与贡献者人数相关</li>
+            </ul>
+            <span className="font-8 color-grey-8 ">更新于 {score['updated_at']}</span>
+          </div>} title="维度说明" trigger="hover" placement="bottomRight" overlayStyle={{ width: '270px' }}>
+            <i className="iconfont icon-xiaowenhao color-grey-8"></i>
+          </Popover>
+        }
+
+      </div>
+
+      {score ? <div id="radar" style={{ height: "200px", width: "100%" }}></div> : <div>预计将于一周后更新数据 </div>}
+    </div>
+
+  )
+}
+export default Radar;

src/forge/Main/CoderDepot.jsx

@@ -15,6 +15,7 @@ import ReadMe from './CoderDepotReadme';
 import CoderRootFileDetail from './CoderRootFileDetail';
 import './Index.scss';
 import Releases from '../Component/Releases';
+import Radar from '../Component/Radar';
 import Contributors from '../Component/Contributors';
 import LanguagePower from '../Component/LanguagePower';
 import DrawerPanel from '../Component/DrawerPanel';
@@ -646,6 +647,8 @@ function CoderDepot(props){
                         />
                       </React.Fragment>
                     }
+                    {/* 项目画像 */}
+                    {!projectDetail.private && <Radar fullName={projectDetail.full_name} />}
                     {/* 贡献者 */}
                     {mirror_status ===0 && <Contributors owner={owner} projectsId={projectsId} /> }
                     {/* 语言 */}