🌷 UI(compiler): 添加指标可视化组件

src/components/Metrics/BarScollerBar/index.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Bar } from '@ant-design/plots';
+import {request} from "@@/plugin-request/request";
+
+const DemoBar = (props) => {
+  const [data, setData] = useState([]);
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+  const {api,metrics} = props
+
+  const asyncFetch = () => {
+       request('http://127.0.0.1:5000'+'/metric/get_total_fix_intensity')
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+  const config = {
+    data,
+    yField: 'email',
+    xField: metrics,
+    width:50,
+    yAxis: {
+      label: {
+        autoRotate: false,
+      },
+    },
+    scrollbar: {
+      type: 'vertical',
+    },
+  };
+
+  return <Bar {...config} />;
+};
+
+// ReactDOM.render(<DemoBar />, document.getElementById('container'));
+export default DemoBar

src/components/NetworkGraph/BaseGraph/index.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react';
+import G6 from '@antv/g6';
+const Index = () => {
+  const containerRef = useRef()
+
+
+
+  useEffect(()=>{
+    const container = containerRef.current
+    const width = container.scrollWidth;
+    const height = container.scrollHeight || 500;
+    const graph = new G6.Graph({
+      container: container,
+      width,
+      height,
+      layout: {
+        type: 'force',
+        preventOverlap: true,
+        linkDistance: (d) => {
+          if (d.source.id === 'node0') {
+            return 100;
+          }
+          return 30;
+        },
+        nodeStrength: (d) => {
+          if (d.isLeaf) {
+            return -50;
+          }
+          return -10;
+        },
+        edgeStrength: (d) => {
+          if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
+            return 0.7;
+          }
+          return 0.1;
+        },
+      },
+      defaultNode: {
+        color: '#5B8FF9',
+      },
+      modes: {
+        default: ['drag-canvas'],
+      },
+    });
+
+    fetch('http://127.0.0.1:5000/metric/get_basic_graph')
+      .then((res) => res.json())
+      .then((data) => {
+        const nodes = data.nodes;
+        // randomize the node size
+        // nodes.forEach((node) => {
+        //   node.size = Math.random() * 30 + 5;
+        // });
+        graph.data({
+          nodes,
+          edges: data.edges.map(function (edge, i) {
+            edge.id = 'edge' + i;
+            return Object.assign({}, edge);
+          }),
+        });
+        graph.render();
+
+        graph.on('node:dragstart', function (e) {
+          graph.layout();
+          refreshDragedNodePosition(e);
+        });
+        graph.on('node:drag', function (e) {
+          refreshDragedNodePosition(e);
+        });
+        graph.on('node:dragend', function (e) {
+          e.item.get('model').fx = null;
+          e.item.get('model').fy = null;
+        });
+      });
+  },[])
+
+
+
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.changeSize(container.scrollWidth, container.scrollHeight);
+  }
+
+  function refreshDragedNodePosition(e) {
+    const model = e.item.get('model');
+    model.fx = e.x;
+    model.fy = e.y;
+  }
+
+  return (
+    <div ref={containerRef} style={{width:'100%',height:'1000px'}} />
+  );
+};
+
+export default Index;

src/components/NetworkGraph/BetweennessCentality/index.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef } from 'react';
+import G6 from '@antv/g6';
+const Index = (props) => {
+  const containerRef = useRef()
+  const {api_path} = props
+
+  useEffect(()=>{
+    const container = containerRef.current
+    const width = container.scrollWidth;
+    const height = container.scrollHeight || 500;
+    const graph = new G6.Graph({
+      container: container,
+      width,
+      height,
+      linkDistance:10,
+      clusterEdgeDistance:10,
+      layout: {
+        type: 'force',
+        preventOverlap: true,
+      },
+      modes: {
+        default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
+      },
+    });
+
+    fetch('http://127.0.0.1:5000'+'/metric/get_basic_graph')
+      .then((res) => res.json())
+      .then((data) => {
+        const nodes = data.nodes;
+        // randomize the node size
+        // nodes.forEach((node) => {
+        //   node.size = Math.random() * 30 + 5;
+        // });
+        graph.data({
+          nodes,
+          edges: data.edges.map(function (edge, i) {
+            edge.id = 'edge' + i;
+            return Object.assign({}, edge);
+          }),
+        });
+        graph.render();
+
+        graph.on('node:dragstart', function (e) {
+          graph.layout();
+          refreshDragedNodePosition(e);
+        });
+        graph.on('node:drag', function (e) {
+          const forceLayout = graph.get('layoutController').layoutMethods[0];
+          forceLayout.execute();
+          refreshDragedNodePosition(e);
+        });
+        graph.on('node:dragend', function (e) {
+          e.item.get('model').fx = null;
+          e.item.get('model').fy = null;
+        });
+      });
+  },[])
+
+
+
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.changeSize(container.scrollWidth, container.scrollHeight);
+  }
+
+  function refreshDragedNodePosition(e) {
+    const model = e.item.get('model');
+    model.fx = e.x;
+    model.fy = e.y;
+  }
+
+  return (
+    <div ref={containerRef} style={{width:'100%',height:'600px'}} />
+  );
+};
+
+export default Index;

src/components/NetworkGraph/PageRank/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import G6 from '@antv/g6';
+const Index = () => {
+  const containerRef = useRef()
+
+
+
+  useEffect(()=>{
+    const container = containerRef.current
+    const width = container.scrollWidth;
+    const height = container.scrollHeight || 500;
+    const graph = new G6.Graph({
+      container: container,
+      width,
+      height,
+      modes: {
+        default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
+      },
+      layout: {
+        type: 'circular',
+      },
+      animate: true,
+      defaultNode: {
+        size: 20,
+      },
+    });
+
+    fetch('http://127.0.0.1:5000/metric/get_page_rank_top_10')
+      .then((res) => res.json())
+      .then((data) => {
+
+        graph.data(data);
+        graph.render();
+
+
+      });
+  },[])
+
+
+
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.changeSize(container.scrollWidth, container.scrollHeight);
+  }
+
+
+
+  return (
+    <div ref={containerRef} style={{width:'100%',height:'600px'}} />
+  );
+};
+
+export default Index;

src/components/Tables/CentralityScore/index.js

@@ -0,0 +1,56 @@
+import {Table} from "antd";
+import React,{useState,useEffect} from 'react';
+import {request} from "@@/plugin-request/request";
+
+
+const Index = (props) => {
+  // row['repo'], row['page_rank'], row['betweenness_centrality'], row['closeness_centrality'], row['total_score']
+  const {api_path} = props
+
+  const [dataSource,setData] = useState([]);
+  useEffect(()=>{
+    request('http://127.0.0.1:5000'+'/metric/get_centrality_score').then(
+      (json)=>{
+        setData(json)
+      }
+    )
+  },[])
+  const columns = [
+    {
+      title: 'repo',
+      dataIndex: 'repo',
+      key: 'repo',
+    },
+    {
+      title: 'page_rank',
+      dataIndex: 'page_rank',
+      key: 'page_rank',
+    },
+    {
+      title: 'betweenness_centrality',
+      dataIndex: 'betweenness_centrality',
+      key: 'betweenness_centrality',
+    },
+    {
+      title: 'closeness_centrality',
+      dataIndex: 'closeness_centrality',
+      key: 'closeness_centrality',
+    },
+    {
+      title: 'total_score',
+      dataIndex: 'total_score',
+      key: 'total_score',
+    },
+  ];
+
+  return (
+    <div>
+      <Table dataSource={dataSource} columns={columns} />;
+    </div>
+  );
+};
+
+export default Index;
+
+
+

src/components/Tables/MaximumIntensity/index.js

@@ -0,0 +1,54 @@
+import {Table} from "antd";
+import React,{useState,useEffect} from 'react';
+import {request} from "@@/plugin-request/request";
+
+
+const Index = (props) => {
+  // row['repo'], row['page_rank'], row['betweenness_centrality'], row['closeness_centrality'], row['total_score']
+  const {api_path} = props
+
+  const [dataSource,setData] = useState([]);
+  useEffect(()=>{
+    request('http://127.0.0.1:5000'+'/metric/get_person_metrics').then(
+      (json)=>{
+        setData(json)
+      }
+    )
+  },[])
+  const columns = [
+    {
+      title: 'email',
+      dataIndex: 'email',
+      key: 'email',
+      // render:(text)=>{
+      //   <a onClick={}></a>
+      // }
+    },
+    {
+      title: 'total_fix_commit_count',
+      dataIndex: 'total_fix_commit_count',
+      key: 'total_fix_commit_count',
+    },
+    {
+      title: 'maximum_fix_commit_count',
+      dataIndex: 'maximum_fix_commit_count',
+      key: 'maximum_fix_commit_count',
+    },
+    {
+      title: 'fist_year_joined_repo_count',
+      dataIndex: 'fist_year_joined_repo_count',
+      key: 'fist_year_joined_repo_count',
+    }
+  ];
+
+  return (
+    <div>
+      <Table dataSource={dataSource} columns={columns} />;
+    </div>
+  );
+};
+
+export default Index;
+
+
+