[OSS101] Task 3 ：Add Domain-Specific and Foundation Rankings

[xiaoAugenstern]

Brief Information

This pull request is in the type of (more info about types):

• build
• ci
• docs
• feat
• fix
• perf
• refactor
• test

Related issues (all available keywords):

• keyword [OSS101] Task 3: Add Domain-Specific and Foundation Rankings #113

Details

1.启动 pnpm start

2.实施特定领域的排名，包括各个技术领域的详细排名。技术领域进行了细分，包括云原生、人工智能、大数据、数据库、前端和操作系统六个领域。数据来源于2023年开源年报。

3.对基金会实施单独的排名。基金会分为chinese和global，数据来源于2023年开源年报。

4.分工
张嘉睿：前端设计
张潇晓：数据处理
汪小曼：数据处理

Checklist

• I have read the CONTRIBUTING doc

Others

[andyhuang18]

Refer to contribution. You should run npm run prettier to unify the code format after completing the task. This problem caused the workflow to fail. Please modify and commit the code in time.

[xiaoAugenstern]

Refer to contribution. You should run npm run prettier to unify the code format after completing the task. This problem caused the workflow to fail. Please modify and commit the code in time.

已经修改好了，请学长查看能否正常运行。@andyhuang18

[andyhuang18]

CI/CD still failed, please check the error and correct it.

[xiaoAugenstern]

I have updated Node.js version to 18.18.2 and fixed pnpm install issue.

[andyhuang18]

Hi~I think the problem is that the CI/CI of Openleaderboard is based on node16. Why did you change the node version to 18? Try to roll back the node version to 16.

[xiaoAugenstern]

Hi~I think the problem is that the CI/CI of Openleaderboard is based on node16. Why did you change the node version to 18? Try to roll back the node version to 16.

I have rolled back the node version to 16 , and modified the package.json file with ‘engines’:{
‘node‘:’^16’. Could you please try running it again？

[andyhuang18]

我重新生成了 pnpm-lock 并删除了 .history 文件夹。现在还需要修改的是数据部分，直接嵌入到 table.js 里是不合理的。从外部读取数据，这样利于程序的扩展和管理。

[andyhuang18]

Hi @xiaoAugenstern 在进行修改工作前，先用 git pull origin xiaoman 命令同步已有的代码。

[xiaoAugenstern]

我重新生成了 pnpm-lock 并删除了 .history 文件夹。现在还需要修改的是数据部分，直接嵌入到 table.js 里是不合理的。从外部读取数据，这样利于程序的扩展和管理。

学长您好，前面项目他们的数据都是从接口获取的，例如：

对于technology和foundation，没有类似的接口获得数据，我们尝试做类似的接口，https://github.com/xiaoAugenstern/open-leadboard-data

调用的时候会报跨域错误，

可以直接把url都写成 https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json
这种形式吗？

[andyhuang18]

由于之前的数据我们统一整理到了 OSS 中，因此采用接口形式。基金会和技术领域的数据还没有整理到 OSS 中，因此采用不同于前者的数据读取方式。

读取本地数据的方法

react 可以读取本地的 js 文件，你可以将数据整理到一个 js 文件里，比如：

// data.js
export const myData = [
  { rank: 1, name: 'Alice', value: 100, valueDelta: 10 },
  { rank: 2, name: 'Bob', value: 90, valueDelta: -5 },
  // 其他数据
];

然后在 table.js 中通过：

import { myData } from './data'; // 导入数据

在对应的组件中即可使用 myData 了。

react 也可以通过fetch请求读取本地 json 文件，比如本地有以下 json 文件：

[
  { "rank": 1, "name": "Alice", "value": 100, "valueDelta": 10 },
  { "rank": 2, "name": "Bob", "value": 90, "valueDelta": -5 }
]

然后就可以通过 fetch 方法获取本地 json 数据：

useEffect(() => {
  // 这里可以进行数据请求
  fetch('path/to/your/data.json')
    .then(response => response.json())
    .then(data => {
      setState(prevState => ({
        ...prevState,
        data: data,
        loading: false,
      }));
    })
    .catch(error => {
      console.error('Error fetching data:', error);
      setState(prevState => ({
        ...prevState,
        loading: false,
      }));
    });
}, []);

[xiaoAugenstern]

谢谢学长的详细解答，直接嵌入到 table.js 里是不合理的。我们已经将数据全部以json格式移动到这个文件夹下面。

麻烦学长再次运行一下，看是否成功，我们这边是可以的。辛苦学长~