feat: 完成排行榜页面的初步开发

Signed-off-by: Bruce-Jay <[email protected]>

package.json

@@ -25,6 +25,7 @@
     "docusaurus-plugin-image-zoom": "^2.0.0",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
+    "jquery": "^3.7.1",
     "katex": "^0.16.11",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",

src/components/DevLeaderboard/Details.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import "./devLeaderboard.css";
+
+const Details = ({ graph, id, month, typeMap, platform }) => {
+  const [details, setDetails] = useState([]);
+
+  useEffect(() => {
+    if (graph && id) {
+      const data = graph.data[month];
+      const selfNode = data.nodes.find(
+        (node) => graph.meta.nodes[node[0]][0] === id
+      );
+      const detailsData = [];
+
+      if (selfNode) {
+        detailsData.push([
+          "Self",
+          graph.meta.retentionFactor,
+          selfNode[1],
+          (graph.meta.retentionFactor * selfNode[1]).toFixed(3),
+        ]);
+
+        const otherDetails = data.links
+          .filter((link) => graph.meta.nodes[link[1]][0] === id)
+          .map((link) => {
+            const sourceIndex = link[0];
+            const sourceNode = graph.meta.nodes[sourceIndex];
+            const sourceValue = data.nodes.find(
+              (node) => node[0] === sourceIndex
+            );
+            const type = typeMap.get(sourceNode[0][0]);
+            let name = sourceNode[1];
+            if (type === "pull")
+              name = "#" + sourceNode[0].slice(1) + " " + sourceNode[1];
+            else if (type === "issue")
+              name =
+                "#" +
+                (platform === "gitee"
+                  ? parseInt(sourceNode[0].slice(1)).toString(36).toUpperCase()
+                  : sourceNode[0].slice(1)) +
+                " " +
+                sourceNode[1];
+            return [
+              name,
+              parseFloat((1 - graph.meta.retentionFactor) * link[2]).toFixed(3),
+              sourceValue[2],
+              parseFloat(
+                (
+                  (1 - graph.meta.retentionFactor) *
+                  link[2] *
+                  sourceValue[2]
+                ).toFixed(3)
+              ),
+            ];
+          })
+          .sort((a, b) => b[3] - a[3]);
+
+        const repoNode = data.nodes.find((node) => node[0] === 0);
+        otherDetails.push([
+          graph.meta.repoName,
+          (1 / (data.nodes.length - 1)).toFixed(3),
+          repoNode[2],
+          ((1 / (data.nodes.length - 1)) * repoNode[2]).toFixed(3),
+        ]);
+
+        setDetails([...detailsData, ...otherDetails]);
+      }
+    }
+  }, [graph, id, month, typeMap, platform]);
+
+  return (
+    <div className="bordered" id="details">
+      <div id="title">
+        <h2>Details</h2>
+      </div>
+      <div id="details_div" className="scrollit">
+        <table id="details_table">
+          <thead>
+            <tr>
+              <th>From</th>
+              <th>Ratio</th>
+              <th>Value</th>
+              <th>OpenRank</th>
+            </tr>
+          </thead>
+          <tbody>
+            {details.map((detail, index) => (
+              <tr key={index}>
+                {detail.map((d, i) => (
+                  <td key={i}>{d}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Details;

src/components/DevLeaderboard/Graph.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import * as echarts from "echarts";
+import "./devLeaderboard.css";
+
+const Graph = ({
+  graph,
+  month,
+  repoName,
+  platform,
+  typeMap,
+  onNodeDblClick,
+}) => {
+  useEffect(() => {
+    if (graph) {
+      const container = document.getElementById("graph");
+      const chart = echarts.init(container);
+
+      const nodes = graph.data[month].nodes.map((node) => {
+        const id = graph.meta.nodes[node[0]][0];
+        const type = typeMap.get(id[0]);
+        let name = graph.meta.nodes[node[0]][1];
+        if (type === "pull") name = "#" + id.slice(1);
+        else if (type === "issue")
+          name =
+            "#" +
+            (platform === "gitee"
+              ? parseInt(id.slice(1)).toString(36).toUpperCase()
+              : id.slice(1));
+        return {
+          id,
+          initialValue: node[1],
+          value: node[2],
+          name,
+          symbolSize: Math.log(node[2] + 1) * 10,
+          category: type,
+        };
+      });
+
+      const links = graph.data[month].links.map((link) => ({
+        source: graph.meta.nodes[link[0]][0],
+        target: graph.meta.nodes[link[1]][0],
+        value: link[2],
+      }));
+
+      nodes.forEach((node) => {
+        if (node.category === "issue" || node.category === "pull") {
+          links.push({
+            source: graph.meta.nodes[0][0],
+            target: node.id,
+            value: 0.05,
+          });
+        }
+      });
+
+      const categories = Array.from(typeMap.values());
+
+      const option = {
+        title: {
+          text: `Community OpenRank for ${repoName} in ${month}`,
+          top: "bottom",
+          left: "right",
+        },
+        legend: [{ data: categories }],
+        tooltip: { trigger: "item" },
+        series: [
+          {
+            name: "Collaborative graph",
+            type: "graph",
+            layout: "force",
+            nodes,
+            links,
+            categories: categories.map((c) => ({ name: c })),
+            roam: true,
+            label: {
+              position: "right",
+              show: true,
+            },
+            force: {
+              layoutAnimation: false,
+              repulsion: 300,
+            },
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      chart.on("dblclick", (params) => onNodeDblClick(params.data.id));
+
+      return () => {
+        chart.dispose();
+      };
+    }
+  }, [graph, month, repoName, platform, typeMap, onNodeDblClick]);
+
+  return (
+    <div
+      id="graph"
+      className="bordered graph-container"
+    />
+  );
+};
+
+export default Graph;

src/components/DevLeaderboard/Leaderboard.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import * as echarts from "echarts";
+import $ from "jquery";
+import "./devLeaderboard.css";
+
+const Leaderboard = ({ graph, month }) => {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    if (graph) {
+      const sortedUsers = graph.data[month].nodes
+        .map((node) => ({
+          id: graph.meta.nodes[node[0]][0],
+          login: graph.meta.nodes[node[0]][1],
+          value: node[2],
+        }))
+        .filter((user) => user.id[0] === "u")
+        .sort((a, b) => b.value - a.value);
+
+      setUsers(sortedUsers);
+    }
+  }, [graph, month]);
+
+  return (
+    <div className="bordered" id="list">
+      <div id="title">
+        <h2>Leaderboard</h2>
+      </div>
+      <div id="leaderboard_div" className="scrollit">
+        <table id="leaderboard_table">
+          <thead>
+            <tr>
+              <th>Login</th>
+              <th>OpenRank</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user, index) => (
+              <tr key={index}>
+                <td>{user.login}</td>
+                <td>{user.value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Leaderboard;

src/components/DevLeaderboard/devLeaderboard.css

@@ -0,0 +1,68 @@
+#main {
+  display: flex;
+}
+
+#graph {
+  height: 800px;
+}
+
+.graph-container {
+  width: 800px;
+}
+
+#control {
+  width: 320px;
+  height: 800px;
+}
+
+#list {
+  width: 300px;
+  height: 300px;
+  margin: 10px;
+}
+
+#details {
+  width: 300px;
+  height: 440px;
+  margin: 10px;
+}
+
+#title {
+  text-align: center;
+  font-size: 12px;
+}
+
+#leaderboard_table {
+  width: 95%;
+  margin: 10px;
+}
+
+#details_table {
+  width: 95%;
+  margin: 10px;
+}
+
+.bordered {
+  border: 2px solid grey;
+}
+
+#leaderboard_div {
+  height: 240px;
+}
+
+#details_div {
+  height: 380px;
+}
+
+.scrollit {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+tr:nth-child(even) {
+  background-color: #D6EEEE;
+}
+
+table, th, td {
+  border: 1px solid black;
+}