diff --git a/.history/package_20240725151341.json b/.history/package_20240725151341.json
deleted file mode 100644
index ee4e31c..0000000
--- a/.history/package_20240725151341.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
- "name": "open-insight-front",
- "version": "0.1.0",
- "private": true,
- "engines": {
- "node": "^16"
- },
- "dependencies": {
- "@ant-design/icons": "^5.0.1",
- "@testing-library/jest-dom": "^5.16.1",
- "@testing-library/react": "^12.1.2",
- "@testing-library/user-event": "^13.5.0",
- "antd": "^4.18.0",
- "i18next": "^21.6.4",
- "i18next-browser-languagedetector": "^6.1.2",
- "i18next-http-backend": "^1.3.1",
- "moment": "^2.29.4",
- "prettier": "^2.8.4",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-i18next": "^11.15.2",
- "react-router-dom": "^6.2.1",
- "react-scripts": "5.0.0",
- "web-vitals": "^2.1.2"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
- "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
- "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss}\""
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
-}
diff --git a/.history/package_20240728145142.json b/.history/package_20240728145142.json
deleted file mode 100644
index 6e07233..0000000
--- a/.history/package_20240728145142.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
- "name": "open-insight-front",
- "version": "0.1.0",
- "private": true,
- "engines": {
- "node": "^16"
- },
- "dependencies": {
- "@ant-design/icons": "^5.0.1",
- "@testing-library/jest-dom": "^5.16.1",
- "@testing-library/react": "^12.1.2",
- "@testing-library/user-event": "^13.5.0",
- "antd": "^4.18.0",
- "i18next": "^21.6.4",
- "i18next-browser-languagedetector": "^6.1.2",
- "i18next-http-backend": "^1.3.1",
- "moment": "^2.29.4",
- "prettier": "^2.8.4",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-i18next": "^11.15.2",
- "react-router-dom": "^6.2.1",
- "react-scripts": "5.0.0",
- "web-vitals": "^2.1.2"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
- "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
- "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss}\""
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ],
- "rules":{
- "no-undef": "off"
- }
- }
-}
diff --git a/.history/package_20240728195511.json b/.history/package_20240728195511.json
deleted file mode 100644
index ee4e31c..0000000
--- a/.history/package_20240728195511.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
- "name": "open-insight-front",
- "version": "0.1.0",
- "private": true,
- "engines": {
- "node": "^16"
- },
- "dependencies": {
- "@ant-design/icons": "^5.0.1",
- "@testing-library/jest-dom": "^5.16.1",
- "@testing-library/react": "^12.1.2",
- "@testing-library/user-event": "^13.5.0",
- "antd": "^4.18.0",
- "i18next": "^21.6.4",
- "i18next-browser-languagedetector": "^6.1.2",
- "i18next-http-backend": "^1.3.1",
- "moment": "^2.29.4",
- "prettier": "^2.8.4",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-i18next": "^11.15.2",
- "react-router-dom": "^6.2.1",
- "react-scripts": "5.0.0",
- "web-vitals": "^2.1.2"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
- "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
- "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss}\""
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
-}
diff --git a/.history/public/tech-foundation/foundationchinese_20240728172909.json b/.history/public/tech-foundation/foundationchinese_20240728172909.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/foundationchinese_20240728172930.json b/.history/public/tech-foundation/foundationchinese_20240728172930.json
deleted file mode 100644
index ce7dab2..0000000
--- a/.history/public/tech-foundation/foundationchinese_20240728172930.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 3,
- "valueDelta": -100
- },
- {
- "rank": "5",
- "name": "apache/flink",
- "value": "1816.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "apache/shardingsphere",
- "value": "1662.8",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/ozone",
- "value": "1281.57",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/iotdb",
- "value": "1265.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/pulsar",
- "value": "1227.93",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
- }
\ No newline at end of file
diff --git a/.history/public/tech-foundation/foundationglobal_20240728172918.json b/.history/public/tech-foundation/foundationglobal_20240728172918.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/foundationglobal_20240728173949.json b/.history/public/tech-foundation/foundationglobal_20240728173949.json
deleted file mode 100644
index 6355a41..0000000
--- a/.history/public/tech-foundation/foundationglobal_20240728173949.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "type": "Foundation_Global",
- "time": "2024",
- "data":
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/foundationglobal_20240728182812.json b/.history/public/tech-foundation/foundationglobal_20240728182812.json
deleted file mode 100644
index 833d3ab..0000000
--- a/.history/public/tech-foundation/foundationglobal_20240728182812.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_Global",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 2,
- "valueDelta": 3
- },
- {
- "rank": "3",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/arrow",
- "value": "2219.95",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "apache/beam",
- "value": "2188.52",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/hudi",
- "value": "2124.67",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/foundationglobal_20240728182818.json b/.history/public/tech-foundation/foundationglobal_20240728182818.json
deleted file mode 100644
index 1b2502b..0000000
--- a/.history/public/tech-foundation/foundationglobal_20240728182818.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_Global",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 2,
- "valueDelta": 3
- },
- {
- "rank": "3",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/arrow",
- "value": "2219.95",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "apache/beam",
- "value": "2188.52",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/hudi",
- "value": "2124.67",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/foundationglobal_20240728195837.json b/.history/public/tech-foundation/foundationglobal_20240728195837.json
deleted file mode 100644
index 1b2502b..0000000
--- a/.history/public/tech-foundation/foundationglobal_20240728195837.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_Global",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 2,
- "valueDelta": 3
- },
- {
- "rank": "3",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/arrow",
- "value": "2219.95",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "apache/beam",
- "value": "2188.52",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/hudi",
- "value": "2124.67",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyai_20240728172713.json b/.history/public/tech-foundation/technologyai_20240728172713.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologyai_20240728173532.json b/.history/public/tech-foundation/technologyai_20240728173532.json
deleted file mode 100644
index 497d76f..0000000
--- a/.history/public/tech-foundation/technologyai_20240728173532.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "pytorch/pytorch",
- "value": "10182.45",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "langchain-ai/langchain",
- "value": "6080.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "PaddlePaddle/Paddle",
- "value": "5408.62",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "huggingface/transformers",
- "value": "4422.84",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "AUTOMATIC1111/stable-diffusion-webui",
- "value": "3881.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openvinotoolkit/openvino",
- "value": "3857.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "microsoft/onnxruntime",
- "value": "3006.75",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "tensorflow/tensorflow",
- "value": "2723.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "Significant-Gravitas/AutoGPT",
- "value": "2664.85",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "ggerganov/llama.cpp",
- "value": "2339.8",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyai_20240728173534.json b/.history/public/tech-foundation/technologyai_20240728173534.json
deleted file mode 100644
index 72f1387..0000000
--- a/.history/public/tech-foundation/technologyai_20240728173534.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "pytorch/pytorch",
- "value": "10182.45",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "langchain-ai/langchain",
- "value": "6080.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "PaddlePaddle/Paddle",
- "value": "5408.62",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "huggingface/transformers",
- "value": "4422.84",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "AUTOMATIC1111/stable-diffusion-webui",
- "value": "3881.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openvinotoolkit/openvino",
- "value": "3857.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "microsoft/onnxruntime",
- "value": "3006.75",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "tensorflow/tensorflow",
- "value": "2723.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "Significant-Gravitas/AutoGPT",
- "value": "2664.85",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "ggerganov/llama.cpp",
- "value": "2339.8",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyai_20240728173542.json b/.history/public/tech-foundation/technologyai_20240728173542.json
deleted file mode 100644
index d1d2a6d..0000000
--- a/.history/public/tech-foundation/technologyai_20240728173542.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "pytorch/pytorch",
- "value": "10182.45",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "langchain-ai/langchain",
- "value": "6080.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "PaddlePaddle/Paddle",
- "value": "5408.62",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "huggingface/transformers",
- "value": "4422.84",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "AUTOMATIC1111/stable-diffusion-webui",
- "value": "3881.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openvinotoolkit/openvino",
- "value": "3857.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "microsoft/onnxruntime",
- "value": "3006.75",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "tensorflow/tensorflow",
- "value": "2723.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "Significant-Gravitas/AutoGPT",
- "value": "2664.85",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "ggerganov/llama.cpp",
- "value": "2339.8",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyai_20240728173926.json b/.history/public/tech-foundation/technologyai_20240728173926.json
deleted file mode 100644
index 5b5d101..0000000
--- a/.history/public/tech-foundation/technologyai_20240728173926.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_ai",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "pytorch/pytorch",
- "value": "10182.45",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "langchain-ai/langchain",
- "value": "6080.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "PaddlePaddle/Paddle",
- "value": "5408.62",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "huggingface/transformers",
- "value": "4422.84",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "AUTOMATIC1111/stable-diffusion-webui",
- "value": "3881.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openvinotoolkit/openvino",
- "value": "3857.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "microsoft/onnxruntime",
- "value": "3006.75",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "tensorflow/tensorflow",
- "value": "2723.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "Significant-Gravitas/AutoGPT",
- "value": "2664.85",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "ggerganov/llama.cpp",
- "value": "2339.8",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologybig-data_20240728172727.json b/.history/public/tech-foundation/technologybig-data_20240728172727.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologybig-data_20240728173618.json b/.history/public/tech-foundation/technologybig-data_20240728173618.json
deleted file mode 100644
index 4da1df0..0000000
--- a/.history/public/tech-foundation/technologybig-data_20240728173618.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "elastic/kibana",
- "value": "7601.04",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "airbytehq/airbyte",
- "value": "4658.86",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologybig-data_20240728173633.json b/.history/public/tech-foundation/technologybig-data_20240728173633.json
deleted file mode 100644
index a694155..0000000
--- a/.history/public/tech-foundation/technologybig-data_20240728173633.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "elastic/kibana",
- "value": "7601.04",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "airbytehq/airbyte",
- "value": "4658.86",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologybig-data_20240728195750.json b/.history/public/tech-foundation/technologybig-data_20240728195750.json
deleted file mode 100644
index 08dd4a7..0000000
--- a/.history/public/tech-foundation/technologybig-data_20240728195750.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_big-data",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "elastic/kibana",
- "value": "7601.04",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "airbytehq/airbyte",
- "value": "4658.86",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologycloud-native_20240728172857.json b/.history/public/tech-foundation/technologycloud-native_20240728172857.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologycloud-native_20240728173058.json b/.history/public/tech-foundation/technologycloud-native_20240728173058.json
deleted file mode 100644
index fccc6d9..0000000
--- a/.history/public/tech-foundation/technologycloud-native_20240728173058.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "llvm/llvm-project",
- "value": "7049.62",
- "rankDelta": -2,
- "valueDelta": -220
- },
- {
- "rank": "3",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 3,
- "valueDelta": 300
- },
- {
- "rank": "4",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": -4,
- "valueDelta": 400
- },
- {
- "rank": "5",
- "name": "cilium/cilium",
- "value": "3215.42",
- "rankDelta": 5,
- "valueDelta": -500
- },
- {
- "rank": "6",
- "name": "ceph/ceph",
- "value": "3172.49",
- "rankDelta": -6,
- "valueDelta": 600
- },
- {
- "rank": "7",
- "name": "keycloak/keycloak",
- "value": "3095.56",
- "rankDelta": 7,
- "valueDelta": 700
- },
- {
- "rank": "8",
- "name": "gravitational/teleport",
- "value": "3082.18",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "envoyproxy/envoy",
- "value": "2929.08",
- "rankDelta": 9,
- "valueDelta": -900
- },
- {
- "rank": "10",
- "name": "backstage/backstage",
- "value": "2903.39",
- "rankDelta": 10,
- "valueDelta": 100
- }
- ]
- }
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologycloud-native_20240728173847.json b/.history/public/tech-foundation/technologycloud-native_20240728173847.json
deleted file mode 100644
index c6d4351..0000000
--- a/.history/public/tech-foundation/technologycloud-native_20240728173847.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_cloud-native",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "llvm/llvm-project",
- "value": "7049.62",
- "rankDelta": -2,
- "valueDelta": -220
- },
- {
- "rank": "3",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 3,
- "valueDelta": 300
- },
- {
- "rank": "4",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": -4,
- "valueDelta": 400
- },
- {
- "rank": "5",
- "name": "cilium/cilium",
- "value": "3215.42",
- "rankDelta": 5,
- "valueDelta": -500
- },
- {
- "rank": "6",
- "name": "ceph/ceph",
- "value": "3172.49",
- "rankDelta": -6,
- "valueDelta": 600
- },
- {
- "rank": "7",
- "name": "keycloak/keycloak",
- "value": "3095.56",
- "rankDelta": 7,
- "valueDelta": 700
- },
- {
- "rank": "8",
- "name": "gravitational/teleport",
- "value": "3082.18",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "envoyproxy/envoy",
- "value": "2929.08",
- "rankDelta": 9,
- "valueDelta": -900
- },
- {
- "rank": "10",
- "name": "backstage/backstage",
- "value": "2903.39",
- "rankDelta": 10,
- "valueDelta": 100
- }
- ]
- }
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologydatabase_20240728172821.json b/.history/public/tech-foundation/technologydatabase_20240728172821.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologydatabase_20240728173704.json b/.history/public/tech-foundation/technologydatabase_20240728173704.json
deleted file mode 100644
index 01acd8b..0000000
--- a/.history/public/tech-foundation/technologydatabase_20240728173704.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "cockroachdb/cockroach",
- "value": "3443.7",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "pingcap/tidb",
- "value": "2200.38",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "yugabyte/yugabyte-db",
- "value": "1940.75",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologydatabase_20240728173710.json b/.history/public/tech-foundation/technologydatabase_20240728173710.json
deleted file mode 100644
index 0674215..0000000
--- a/.history/public/tech-foundation/technologydatabase_20240728173710.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "cockroachdb/cockroach",
- "value": "3443.7",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "pingcap/tidb",
- "value": "2200.38",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "yugabyte/yugabyte-db",
- "value": "1940.75",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologydatabase_20240728195805.json b/.history/public/tech-foundation/technologydatabase_20240728195805.json
deleted file mode 100644
index 2d6a2a7..0000000
--- a/.history/public/tech-foundation/technologydatabase_20240728195805.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_database",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "cockroachdb/cockroach",
- "value": "3443.7",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "pingcap/tidb",
- "value": "2200.38",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "yugabyte/yugabyte-db",
- "value": "1940.75",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyfront-end_20240728172808.json b/.history/public/tech-foundation/technologyfront-end_20240728172808.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologyfront-end_20240728173446.json b/.history/public/tech-foundation/technologyfront-end_20240728173446.json
deleted file mode 100644
index 46296d7..0000000
--- a/.history/public/tech-foundation/technologyfront-end_20240728173446.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
-
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyfront-end_20240728173736.json b/.history/public/tech-foundation/technologyfront-end_20240728173736.json
deleted file mode 100644
index d182bfb..0000000
--- a/.history/public/tech-foundation/technologyfront-end_20240728173736.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "flutter/flutter",
- "value": "9361.81",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "vercel/next.js",
- "value": "6638.65",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "appsmithorg/appsmith",
- "value": "3474.07",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "nuxt/nuxt",
- "value": "3387.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "facebook/react-native",
- "value": "3260.55",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "ant-design/ant-design",
- "value": "3053.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "angular/angular",
- "value": "2273.82",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "electron/electron",
- "value": "1773.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "denoland/deno",
- "value": "1654.01",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyfront-end_20240728173741.json b/.history/public/tech-foundation/technologyfront-end_20240728173741.json
deleted file mode 100644
index b3eee58..0000000
--- a/.history/public/tech-foundation/technologyfront-end_20240728173741.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "flutter/flutter",
- "value": "9361.81",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "vercel/next.js",
- "value": "6638.65",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "appsmithorg/appsmith",
- "value": "3474.07",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "nuxt/nuxt",
- "value": "3387.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "facebook/react-native",
- "value": "3260.55",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "ant-design/ant-design",
- "value": "3053.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "angular/angular",
- "value": "2273.82",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "electron/electron",
- "value": "1773.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "denoland/deno",
- "value": "1654.01",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyfront-end_20240728195817.json b/.history/public/tech-foundation/technologyfront-end_20240728195817.json
deleted file mode 100644
index 88e549f..0000000
--- a/.history/public/tech-foundation/technologyfront-end_20240728195817.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_front-end",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "flutter/flutter",
- "value": "9361.81",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "vercel/next.js",
- "value": "6638.65",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "appsmithorg/appsmith",
- "value": "3474.07",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "nuxt/nuxt",
- "value": "3387.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "facebook/react-native",
- "value": "3260.55",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "ant-design/ant-design",
- "value": "3053.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "angular/angular",
- "value": "2273.82",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "electron/electron",
- "value": "1773.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "denoland/deno",
- "value": "1654.01",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyos_20240728172838.json b/.history/public/tech-foundation/technologyos_20240728172838.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/tech-foundation/technologyos_20240728173806.json b/.history/public/tech-foundation/technologyos_20240728173806.json
deleted file mode 100644
index 3b5d996..0000000
--- a/.history/public/tech-foundation/technologyos_20240728173806.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data":[
- {
- "rank": "1",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "SerenityOS/serenity",
- "value": "2257.68",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openeuler/docs",
- "value": "1206.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openharmony/xts_acts",
- "value": "1186.06",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "openharmony/arkcompiler_ets_runtime",
- "value": "961.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "openharmony/interface_sdk-js",
- "value": "910.91",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "reactos/reactos",
- "value": "745.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "armbian/build",
- "value": "679.1",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyos_20240728173810.json b/.history/public/tech-foundation/technologyos_20240728173810.json
deleted file mode 100644
index 9659408..0000000
--- a/.history/public/tech-foundation/technologyos_20240728173810.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "SerenityOS/serenity",
- "value": "2257.68",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openeuler/docs",
- "value": "1206.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openharmony/xts_acts",
- "value": "1186.06",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "openharmony/arkcompiler_ets_runtime",
- "value": "961.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "openharmony/interface_sdk-js",
- "value": "910.91",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "reactos/reactos",
- "value": "745.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "armbian/build",
- "value": "679.1",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/tech-foundation/technologyos_20240728195829.json b/.history/public/tech-foundation/technologyos_20240728195829.json
deleted file mode 100644
index 93a8e86..0000000
--- a/.history/public/tech-foundation/technologyos_20240728195829.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Technology_os",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "SerenityOS/serenity",
- "value": "2257.68",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openeuler/docs",
- "value": "1206.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openharmony/xts_acts",
- "value": "1186.06",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "openharmony/arkcompiler_ets_runtime",
- "value": "961.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "openharmony/interface_sdk-js",
- "value": "910.91",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "reactos/reactos",
- "value": "745.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "armbian/build",
- "value": "679.1",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
diff --git a/.history/public/technologycloud-native_20240728153801.json b/.history/public/technologycloud-native_20240728153801.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/public/technologycloud-native_20240728154040.json b/.history/public/technologycloud-native_20240728154040.json
deleted file mode 100644
index fccc6d9..0000000
--- a/.history/public/technologycloud-native_20240728154040.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "llvm/llvm-project",
- "value": "7049.62",
- "rankDelta": -2,
- "valueDelta": -220
- },
- {
- "rank": "3",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 3,
- "valueDelta": 300
- },
- {
- "rank": "4",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": -4,
- "valueDelta": 400
- },
- {
- "rank": "5",
- "name": "cilium/cilium",
- "value": "3215.42",
- "rankDelta": 5,
- "valueDelta": -500
- },
- {
- "rank": "6",
- "name": "ceph/ceph",
- "value": "3172.49",
- "rankDelta": -6,
- "valueDelta": 600
- },
- {
- "rank": "7",
- "name": "keycloak/keycloak",
- "value": "3095.56",
- "rankDelta": 7,
- "valueDelta": 700
- },
- {
- "rank": "8",
- "name": "gravitational/teleport",
- "value": "3082.18",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "envoyproxy/envoy",
- "value": "2929.08",
- "rankDelta": 9,
- "valueDelta": -900
- },
- {
- "rank": "10",
- "name": "backstage/backstage",
- "value": "2903.39",
- "rankDelta": 10,
- "valueDelta": 100
- }
- ]
- }
\ No newline at end of file
diff --git a/.history/public/technologycloud-native_20240728154042.json b/.history/public/technologycloud-native_20240728154042.json
deleted file mode 100644
index fccc6d9..0000000
--- a/.history/public/technologycloud-native_20240728154042.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "llvm/llvm-project",
- "value": "7049.62",
- "rankDelta": -2,
- "valueDelta": -220
- },
- {
- "rank": "3",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 3,
- "valueDelta": 300
- },
- {
- "rank": "4",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": -4,
- "valueDelta": 400
- },
- {
- "rank": "5",
- "name": "cilium/cilium",
- "value": "3215.42",
- "rankDelta": 5,
- "valueDelta": -500
- },
- {
- "rank": "6",
- "name": "ceph/ceph",
- "value": "3172.49",
- "rankDelta": -6,
- "valueDelta": 600
- },
- {
- "rank": "7",
- "name": "keycloak/keycloak",
- "value": "3095.56",
- "rankDelta": 7,
- "valueDelta": 700
- },
- {
- "rank": "8",
- "name": "gravitational/teleport",
- "value": "3082.18",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "envoyproxy/envoy",
- "value": "2929.08",
- "rankDelta": 9,
- "valueDelta": -900
- },
- {
- "rank": "10",
- "name": "backstage/backstage",
- "value": "2903.39",
- "rankDelta": 10,
- "valueDelta": 100
- }
- ]
- }
\ No newline at end of file
diff --git a/.history/src/components/data_20240728143018.js b/.history/src/components/data_20240728143018.js
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/src/components/data_20240728171418.js b/.history/src/components/data_20240728171418.js
deleted file mode 100644
index 99d263b..0000000
--- a/.history/src/components/data_20240728171418.js
+++ /dev/null
@@ -1,218 +0,0 @@
-export const foundationChineseData = [
- {
- rank: '1',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 1,
- valueDelta: +100,
- },
- {
- rank: '2',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: -1,
- valueDelta: -3,
- },
- {
- rank: '4',
- name: 'milvus-io/milvus',
- value: '2001.11',
- rankDelta: 3,
- valueDelta: -100,
- },
- {
- rank: '5',
- name: 'apache/flink',
- value: '1816.72',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'apache/shardingsphere',
- value: '1662.8',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/ozone',
- value: '1281.57',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'apache/iotdb',
- value: '1265.72',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'openharmony/graphic_graphic_2d',
- value: '1239.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/pulsar',
- value: '1227.93',
- rankDelta: 0,
- valueDelta: 0,
- },
- ]
-
- export const foundationGlobalData = [
- {
- rank: '1',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 2,
- valueDelta: 3,
- },
- {
- rank: '3',
- name: 'apache/airflow',
- value: '3642.9',
- rankDelta: -1,
- valueDelta: -3,
- },
- {
- rank: '4',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'nodejs/node',
- value: '2736.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'apache/arrow',
- value: '2219.95',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'apache/beam',
- value: '2188.52',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/hudi',
- value: '2124.67',
- rankDelta: 0,
- valueDelta: 0,
- },
- ]
-
- export const cloudNative = [
- {
- rank: '1',
- name: 'grafana/grafana',
- value: '7134.37',
- rankDelta: 1,
- valueDelta: 100,
- },
- {
- rank: '2',
- name: 'llvm/llvm-project',
- value: '7049.62',
- rankDelta: -2,
- valueDelta: -220,
- },
- {
- rank: '3',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 3,
- valueDelta: 300,
- },
- {
- rank: '4',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: -4,
- valueDelta: 400,
- },
- {
- rank: '5',
- name: 'cilium/cilium',
- value: '3215.42',
- rankDelta: 5,
- valueDelta: -500,
- },
- {
- rank: '6',
- name: 'ceph/ceph',
- value: '3172.49',
- rankDelta: -6,
- valueDelta: 600,
- },
- {
- rank: '7',
- name: 'keycloak/keycloak',
- value: '3095.56',
- rankDelta: 7,
- valueDelta: 700,
- },
- {
- rank: '8',
- name: 'gravitational/teleport',
- value: '3082.18',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'envoyproxy/envoy',
- value: '2929.08',
- rankDelta: 9,
- valueDelta: -900,
- },
- {
- rank: '10',
- name: 'backstage/backstage',
- value: '2903.39',
- rankDelta: 10,
- valueDelta: 100,
- },
- ]
\ No newline at end of file
diff --git a/.history/src/components/table_20240727221129.js b/.history/src/components/table_20240727221129.js
deleted file mode 100644
index 2c4f26f..0000000
--- a/.history/src/components/table_20240727221129.js
+++ /dev/null
@@ -1,1319 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- let data = new Array();
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- // 预处理数据，对新上榜单数据进行特殊标记处理
-
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'foundation' && region == 'global') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 2,
- valueDelta: 3,
- },
- {
- rank: '3',
- name: 'apache/airflow',
- value: '3642.9',
- rankDelta: -1,
- valueDelta: -3,
- },
- {
- rank: '4',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'nodejs/node',
- value: '2736.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'apache/arrow',
- value: '2219.95',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'apache/beam',
- value: '2188.52',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/hudi',
- value: '2124.67',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'cloud-native') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'grafana/grafana',
- value: '7134.37',
- rankDelta: 1,
- valueDelta: 100,
- },
- {
- rank: '2',
- name: 'llvm/llvm-project',
- value: '7049.62',
- rankDelta: -2,
- valueDelta: -220,
- },
- {
- rank: '3',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 3,
- valueDelta: 300,
- },
- {
- rank: '4',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: -4,
- valueDelta: 400,
- },
- {
- rank: '5',
- name: 'cilium/cilium',
- value: '3215.42',
- rankDelta: 5,
- valueDelta: -500,
- },
- {
- rank: '6',
- name: 'ceph/ceph',
- value: '3172.49',
- rankDelta: -6,
- valueDelta: 600,
- },
- {
- rank: '7',
- name: 'keycloak/keycloak',
- value: '3095.56',
- rankDelta: 7,
- valueDelta: 700,
- },
- {
- rank: '8',
- name: 'gravitational/teleport',
- value: '3082.18',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'envoyproxy/envoy',
- value: '2929.08',
- rankDelta: 9,
- valueDelta: -900,
- },
- {
- rank: '10',
- name: 'backstage/backstage',
- value: '2903.39',
- rankDelta: 10,
- valueDelta: 100,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'ai') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'pytorch/pytorch',
- value: '10182.45',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'langchain-ai/langchain',
- value: '6080.25',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'PaddlePaddle/Paddle',
- value: '5408.62',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'huggingface/transformers',
- value: '4422.84',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'AUTOMATIC1111/stable-diffusion-webui',
- value: '3881.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'openvinotoolkit/openvino',
- value: '3857.31',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'microsoft/onnxruntime',
- value: '3006.75',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'tensorflow/tensorflow',
- value: '2723.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'Significant-Gravitas/AutoGPT',
- value: '2664.85',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'ggerganov/llama.cpp',
- value: '2339.8',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'big-data') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'elastic/kibana',
- value: '7601.04',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'grafana/grafana',
- value: '7134.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'airbytehq/airbyte',
- value: '4658.86',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'elastic/elasticsearch',
- value: '3729.39',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/airflow',
- value: '3642.9',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'StarRocks/starrocks',
- value: '3194.56',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'trinodb/trino',
- value: '2703.4',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'database') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'elastic/elasticsearch',
- value: '3729.39',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'cockroachdb/cockroach',
- value: '3443.7',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'StarRocks/starrocks',
- value: '3194.56',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'trinodb/trino',
- value: '2703.4',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'pingcap/tidb',
- value: '2200.38',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'milvus-io/milvus',
- value: '2001.11',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'yugabyte/yugabyte-db',
- value: '1940.75',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'front-end') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'flutter/flutter',
- value: '9361.81',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'vercel/next.js',
- value: '6638.65',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'appsmithorg/appsmith',
- value: '3474.07',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'nuxt/nuxt',
- value: '3387.23',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'facebook/react-native',
- value: '3260.55',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'ant-design/ant-design',
- value: '3053.25',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'nodejs/node',
- value: '2736.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'angular/angular',
- value: '2273.82',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'electron/electron',
- value: '1773.31',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'denoland/deno',
- value: '1654.01',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'os') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'SerenityOS/serenity',
- value: '2257.68',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'openharmony/graphic_graphic_2d',
- value: '1239.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'openeuler/docs',
- value: '1206.9',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'openharmony/xts_acts',
- value: '1186.06',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'openharmony/arkcompiler_ets_runtime',
- value: '961.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'openharmony/interface_sdk-js',
- value: '910.91',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'reactos/reactos',
- value: '745.23',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'armbian/build',
- value: '679.1',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else {
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727221246.js b/.history/src/components/table_20240727221246.js
deleted file mode 100644
index 6728cfe..0000000
--- a/.history/src/components/table_20240727221246.js
+++ /dev/null
@@ -1,1297 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- let data = new Array();
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- // 预处理数据，对新上榜单数据进行特殊标记处理
-
- } else if (object == 'foundation' && region == 'global') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 2,
- valueDelta: 3,
- },
- {
- rank: '3',
- name: 'apache/airflow',
- value: '3642.9',
- rankDelta: -1,
- valueDelta: -3,
- },
- {
- rank: '4',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'nodejs/node',
- value: '2736.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'apache/arrow',
- value: '2219.95',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'apache/beam',
- value: '2188.52',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/hudi',
- value: '2124.67',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'cloud-native') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'grafana/grafana',
- value: '7134.37',
- rankDelta: 1,
- valueDelta: 100,
- },
- {
- rank: '2',
- name: 'llvm/llvm-project',
- value: '7049.62',
- rankDelta: -2,
- valueDelta: -220,
- },
- {
- rank: '3',
- name: 'kubernetes/kubernetes',
- value: '5374.14',
- rankDelta: 3,
- valueDelta: 300,
- },
- {
- rank: '4',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: -4,
- valueDelta: 400,
- },
- {
- rank: '5',
- name: 'cilium/cilium',
- value: '3215.42',
- rankDelta: 5,
- valueDelta: -500,
- },
- {
- rank: '6',
- name: 'ceph/ceph',
- value: '3172.49',
- rankDelta: -6,
- valueDelta: 600,
- },
- {
- rank: '7',
- name: 'keycloak/keycloak',
- value: '3095.56',
- rankDelta: 7,
- valueDelta: 700,
- },
- {
- rank: '8',
- name: 'gravitational/teleport',
- value: '3082.18',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'envoyproxy/envoy',
- value: '2929.08',
- rankDelta: 9,
- valueDelta: -900,
- },
- {
- rank: '10',
- name: 'backstage/backstage',
- value: '2903.39',
- rankDelta: 10,
- valueDelta: 100,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'ai') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'pytorch/pytorch',
- value: '10182.45',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'langchain-ai/langchain',
- value: '6080.25',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'PaddlePaddle/Paddle',
- value: '5408.62',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'huggingface/transformers',
- value: '4422.84',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'AUTOMATIC1111/stable-diffusion-webui',
- value: '3881.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'openvinotoolkit/openvino',
- value: '3857.31',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'microsoft/onnxruntime',
- value: '3006.75',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'tensorflow/tensorflow',
- value: '2723.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'Significant-Gravitas/AutoGPT',
- value: '2664.85',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'ggerganov/llama.cpp',
- value: '2339.8',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'big-data') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'elastic/kibana',
- value: '7601.04',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'grafana/grafana',
- value: '7134.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'airbytehq/airbyte',
- value: '4658.86',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'elastic/elasticsearch',
- value: '3729.39',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/airflow',
- value: '3642.9',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'StarRocks/starrocks',
- value: '3194.56',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'trinodb/trino',
- value: '2703.4',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'database') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'ClickHouse/ClickHouse',
- value: '4941.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'elastic/elasticsearch',
- value: '3729.39',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'cockroachdb/cockroach',
- value: '3443.7',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'StarRocks/starrocks',
- value: '3194.56',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'trinodb/trino',
- value: '2703.4',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/spark',
- value: '2654.02',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'pingcap/tidb',
- value: '2200.38',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'milvus-io/milvus',
- value: '2001.11',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'yugabyte/yugabyte-db',
- value: '1940.75',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'front-end') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'flutter/flutter',
- value: '9361.81',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'vercel/next.js',
- value: '6638.65',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'appsmithorg/appsmith',
- value: '3474.07',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'nuxt/nuxt',
- value: '3387.23',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'facebook/react-native',
- value: '3260.55',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'ant-design/ant-design',
- value: '3053.25',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'nodejs/node',
- value: '2736.37',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'angular/angular',
- value: '2273.82',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'electron/electron',
- value: '1773.31',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'denoland/deno',
- value: '1654.01',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- } else if (object == 'technology' && category == 'os') {
- let data = new Array();
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data = {
- type: 'Foundation_China',
- time: '2024',
- data: [
- {
- rank: '1',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '2',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'SerenityOS/serenity',
- value: '2257.68',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '4',
- name: 'openharmony/graphic_graphic_2d',
- value: '1239.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '5',
- name: 'openeuler/docs',
- value: '1206.9',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'openharmony/xts_acts',
- value: '1186.06',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'openharmony/arkcompiler_ets_runtime',
- value: '961.99',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'openharmony/interface_sdk-js',
- value: '910.91',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'reactos/reactos',
- value: '745.23',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'armbian/build',
- value: '679.1',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- };
- data = data.data;
- let dataSource = [];
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727224142.js b/.history/src/components/table_20240727224142.js
deleted file mode 100644
index df163be..0000000
--- a/.history/src/components/table_20240727224142.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'post', // 如果是get方式的话，只能把参数拼接在url里传过去，get方式不能有body
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- headers: {
- 'Content-Type': 'application/json'
- },})
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727224145.js b/.history/src/components/table_20240727224145.js
deleted file mode 100644
index df163be..0000000
--- a/.history/src/components/table_20240727224145.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'post', // 如果是get方式的话，只能把参数拼接在url里传过去，get方式不能有body
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- headers: {
- 'Content-Type': 'application/json'
- },})
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727224820.js b/.history/src/components/table_20240727224820.js
deleted file mode 100644
index 57eb0fa..0000000
--- a/.history/src/components/table_20240727224820.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- mode: 'cors',
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727225058.js b/.history/src/components/table_20240727225058.js
deleted file mode 100644
index bbc6406..0000000
--- a/.history/src/components/table_20240727225058.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- mode: "no-cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727225519.js b/.history/src/components/table_20240727225519.js
deleted file mode 100644
index ec95856..0000000
--- a/.history/src/components/table_20240727225519.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727230659.js b/.history/src/components/table_20240727230659.js
deleted file mode 100644
index 74e7f63..0000000
--- a/.history/src/components/table_20240727230659.js
+++ /dev/null
@@ -1,652 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727230905.js b/.history/src/components/table_20240727230905.js
deleted file mode 100644
index aac4c4d..0000000
--- a/.history/src/components/table_20240727230905.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- "Access-Control-Allow-Methods":"POST, GET, OPTIONS, DELETE, HEAD",
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727230907.js b/.history/src/components/table_20240727230907.js
deleted file mode 100644
index aac4c4d..0000000
--- a/.history/src/components/table_20240727230907.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- "Access-Control-Allow-Methods":"POST, GET, OPTIONS, DELETE, HEAD",
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727230943.js b/.history/src/components/table_20240727230943.js
deleted file mode 100644
index 2914bd4..0000000
--- a/.history/src/components/table_20240727230943.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- "Access-Control-Allow-Methods":"POST, GET, OPTIONS, DELETE, HEAD",
- mode: "no-cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231007.js b/.history/src/components/table_20240727231007.js
deleted file mode 100644
index aac4c4d..0000000
--- a/.history/src/components/table_20240727231007.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://github.com/xiaoAugenstern/open-leadboard-data/blob/main/foundation.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- "Access-Control-Allow-Methods":"POST, GET, OPTIONS, DELETE, HEAD",
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231113.js b/.history/src/components/table_20240727231113.js
deleted file mode 100644
index 17eb9f8..0000000
--- a/.history/src/components/table_20240727231113.js
+++ /dev/null
@@ -1,653 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- fetch(url, {
- method: 'GET',
- "Access-Control-Allow-Origin" : "*",
- "Access-Control-Allow-Credentials" : true,
- "Access-Control-Allow-Methods":"POST, GET, OPTIONS, DELETE, HEAD",
- mode: "cors",
- })
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231156.js b/.history/src/components/table_20240727231156.js
deleted file mode 100644
index ee8e5c0..0000000
--- a/.history/src/components/table_20240727231156.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231303.js b/.history/src/components/table_20240727231303.js
deleted file mode 100644
index 1762022..0000000
--- a/.history/src/components/table_20240727231303.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231305.js b/.history/src/components/table_20240727231305.js
deleted file mode 100644
index 1762022..0000000
--- a/.history/src/components/table_20240727231305.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231408.js b/.history/src/components/table_20240727231408.js
deleted file mode 100644
index 29bc824..0000000
--- a/.history/src/components/table_20240727231408.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' || category != null) {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231449.js b/.history/src/components/table_20240727231449.js
deleted file mode 100644
index 3e535ee..0000000
--- a/.history/src/components/table_20240727231449.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' || category != '') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240727231623.js b/.history/src/components/table_20240727231623.js
deleted file mode 100644
index ed7a8b5..0000000
--- a/.history/src/components/table_20240727231623.js
+++ /dev/null
@@ -1,589 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' || object == 'technology') {
- url = 'https://oss.x-lab.info/open_leaderboard/open_rank/repo/chinese/20246.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144201.js b/.history/src/components/table_20240728144201.js
deleted file mode 100644
index f38476e..0000000
--- a/.history/src/components/table_20240728144201.js
+++ /dev/null
@@ -1,601 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' || region == 'chinese') {
- dataSource = foundationChineseData;
-
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144210.js b/.history/src/components/table_20240728144210.js
deleted file mode 100644
index f69ea81..0000000
--- a/.history/src/components/table_20240728144210.js
+++ /dev/null
@@ -1,601 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- dataSource = foundationChineseData;
-
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144254.js b/.history/src/components/table_20240728144254.js
deleted file mode 100644
index f69ea81..0000000
--- a/.history/src/components/table_20240728144254.js
+++ /dev/null
@@ -1,601 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == 'foundation' && region == 'chinese') {
- dataSource = foundationChineseData;
-
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144348.js b/.history/src/components/table_20240728144348.js
deleted file mode 100644
index d1449bc..0000000
--- a/.history/src/components/table_20240728144348.js
+++ /dev/null
@@ -1,601 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- dataSource = foundationChineseData;
-
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144514.js b/.history/src/components/table_20240728144514.js
deleted file mode 100644
index 9933683..0000000
--- a/.history/src/components/table_20240728144514.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- data = foundationChineseData;
-
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144641.js b/.history/src/components/table_20240728144641.js
deleted file mode 100644
index 7fdb8c7..0000000
--- a/.history/src/components/table_20240728144641.js
+++ /dev/null
@@ -1,615 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- dataSource = foundationChineseData;
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728144736.js b/.history/src/components/table_20240728144736.js
deleted file mode 100644
index 0c81980..0000000
--- a/.history/src/components/table_20240728144736.js
+++ /dev/null
@@ -1,601 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- dataSource = foundationChineseData;
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728150221.js b/.history/src/components/table_20240728150221.js
deleted file mode 100644
index 260dad2..0000000
--- a/.history/src/components/table_20240728150221.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- useEffect(() => {
- // 这里可以进行数据请求
- fetch('../lacales/foundationChinese.json')
- .then(response => response.json())
- .then(data => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
- }, []);
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728150719.js b/.history/src/components/table_20240728150719.js
deleted file mode 100644
index 3b0d213..0000000
--- a/.history/src/components/table_20240728150719.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + onth) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../lacales/foundationChinese.json')
- .then(response => response.json())
- .then(data => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728150811.js b/.history/src/components/table_20240728150811.js
deleted file mode 100644
index 5014bce..0000000
--- a/.history/src/components/table_20240728150811.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../lacales/foundationChinese.json')
- .then(response => response.json())
- .then(data => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728150851.js b/.history/src/components/table_20240728150851.js
deleted file mode 100644
index e63e7a0..0000000
--- a/.history/src/components/table_20240728150851.js
+++ /dev/null
@@ -1,627 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- .then(response => response.json())
- .then(data => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728151211.js b/.history/src/components/table_20240728151211.js
deleted file mode 100644
index 8dd2f0a..0000000
--- a/.history/src/components/table_20240728151211.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- ..then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728151214.js b/.history/src/components/table_20240728151214.js
deleted file mode 100644
index 08497b8..0000000
--- a/.history/src/components/table_20240728151214.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728151323.js b/.history/src/components/table_20240728151323.js
deleted file mode 100644
index 9b4ad7d..0000000
--- a/.history/src/components/table_20240728151323.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- .then((res) => {
- console.log(res);
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728151410.js b/.history/src/components/table_20240728151410.js
deleted file mode 100644
index 2e5f393..0000000
--- a/.history/src/components/table_20240728151410.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- .then((res) => {
- console.log(res.json);
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728151537.js b/.history/src/components/table_20240728151537.js
deleted file mode 100644
index ddbedfb..0000000
--- a/.history/src/components/table_20240728151537.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../locales/foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152336.js b/.history/src/components/table_20240728152336.js
deleted file mode 100644
index 7e65223..0000000
--- a/.history/src/components/table_20240728152336.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('../foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152433.js b/.history/src/components/table_20240728152433.js
deleted file mode 100644
index 1d1294c..0000000
--- a/.history/src/components/table_20240728152433.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('./foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152504.js b/.history/src/components/table_20240728152504.js
deleted file mode 100644
index 7e7825c..0000000
--- a/.history/src/components/table_20240728152504.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('/foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152539.js b/.history/src/components/table_20240728152539.js
deleted file mode 100644
index 1d1294c..0000000
--- a/.history/src/components/table_20240728152539.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('./foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152542.js b/.history/src/components/table_20240728152542.js
deleted file mode 100644
index 1d1294c..0000000
--- a/.history/src/components/table_20240728152542.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('./foundationChinese.json')
- .then(response => {response.json()
- console.log(response.json);
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728152647.js b/.history/src/components/table_20240728152647.js
deleted file mode 100644
index defa9c4..0000000
--- a/.history/src/components/table_20240728152647.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
-
- // 这里可以进行数据请求
- fetch('./foundationChinese.json')
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728153148.js b/.history/src/components/table_20240728153148.js
deleted file mode 100644
index fb4a8fa..0000000
--- a/.history/src/components/table_20240728153148.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- url = './'+ object + region +'.json'
- // 这里可以进行数据请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728153150.js b/.history/src/components/table_20240728153150.js
deleted file mode 100644
index fb4a8fa..0000000
--- a/.history/src/components/table_20240728153150.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation" && region == 'chinese') {
- url = './'+ object + region +'.json'
- // 这里可以进行数据请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
- }
- // fetch 异步请求
- else{fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
- }
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728153730.js b/.history/src/components/table_20240728153730.js
deleted file mode 100644
index 690efe4..0000000
--- a/.history/src/components/table_20240728153730.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './'+ object + category +'.json'
- }
-
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728171435.js b/.history/src/components/table_20240728171435.js
deleted file mode 100644
index 690efe4..0000000
--- a/.history/src/components/table_20240728171435.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './'+ object + category +'.json'
- }
-
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728173002.js b/.history/src/components/table_20240728173002.js
deleted file mode 100644
index 0ee7e71..0000000
--- a/.history/src/components/table_20240728173002.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './'+ object + category +'.json'
- }
-
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728173032.js b/.history/src/components/table_20240728173032.js
deleted file mode 100644
index 07e2ae2..0000000
--- a/.history/src/components/table_20240728173032.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './'+ object + category +'.json'
- }
-
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728173107.js b/.history/src/components/table_20240728173107.js
deleted file mode 100644
index 84ae65c..0000000
--- a/.history/src/components/table_20240728173107.js
+++ /dev/null
@@ -1,594 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
-
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728173113.js b/.history/src/components/table_20240728173113.js
deleted file mode 100644
index 24f1e5d..0000000
--- a/.history/src/components/table_20240728173113.js
+++ /dev/null
@@ -1,593 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728195002.js b/.history/src/components/table_20240728195002.js
deleted file mode 100644
index 24f1e5d..0000000
--- a/.history/src/components/table_20240728195002.js
+++ /dev/null
@@ -1,593 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728195126.js b/.history/src/components/table_20240728195126.js
deleted file mode 100644
index 24f1e5d..0000000
--- a/.history/src/components/table_20240728195126.js
+++ /dev/null
@@ -1,593 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-import { foundationChineseData } from './data';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/components/table_20240728195614.js b/.history/src/components/table_20240728195614.js
deleted file mode 100644
index a4b0fc6..0000000
--- a/.history/src/components/table_20240728195614.js
+++ /dev/null
@@ -1,592 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Col, message, Row, Table, Card } from 'antd';
-import MyAvatar from './avatar';
-import 'antd/dist/antd.css';
-import QAmiss from './QA2';
-import TablePanel from './TablePanel';
-import ArrowRender from './arrow';
-import PointRender from './changeNumber';
-import RoundFloat from './resolveFloat';
-import Trophy from './rankTrophy';
-import expandObject from '../util/expandObject';
-import { t } from 'i18next';
-import './table.css';
-
-const activityColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '20%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'right',
- width: '20%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
-];
-const activityDetailColumns = (object, t_month) => [
- {
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- align: 'center',
- render: Trophy,
- fixed: 'left',
- },
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- {
- title: t(object),
- dataIndex: 'name',
- align: 'center',
- width: '5%',
- render: function (text, row, index) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- {
- title: t('activity'),
- dataIndex: 'value',
- align: 'center',
- width: '10%',
- },
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: PointRender,
- },
- {
- title: t('issue_comments'),
- dataIndex: 'issue_comment',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_issues'),
- dataIndex: 'open_issue',
- width: '10%',
- align: 'center',
- },
- {
- title: t('open_pulls'),
- dataIndex: 'open_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('merge_pulls'),
- dataIndex: 'merged_pull',
- width: '10%',
- align: 'center',
- },
- {
- title: t('pr_reviews'),
- dataIndex: 'review_comment',
- width: '10%',
- align: 'center',
- },
-];
-const open_rankColumns = (object, t_month) => [
- {
- // 第一列：排名
- title: t('rank'),
- dataIndex: 'rank',
- width: '5%',
- render: Trophy,
- align: 'center',
- fixed: 'left',
- },
- // 如果 object 是 'actor'，则添加头像列
- ...(object == 'actor'
- ? [
- {
- title: t('avatar'),
- dataIndex: 'id',
- width: '5%',
- align: 'center',
- render: MyAvatar,
- fixed: 'left',
- },
- ]
- : []),
- // 第二列：排名变化
- {
- title: '',
- dataIndex: 'rankDelta',
- render: ArrowRender,
- align: 'left',
- width: '5%',
- fixed: 'left',
- },
- // 第三列：对象名称（可能是 actor, repo 或 company）
- {
- title: t(object),
- dataIndex: 'name',
- width: '20%',
- align: 'center',
- render: function (text) {
- if (object !== 'company') {
- return (
-
- {text}
-
- );
- } else {
- return text;
- }
- },
- },
- // 如果 object 是 'repo'，则添加 insight_board 列
- ...(object == 'repo'
- ? [
- {
- title: t('insight_board'),
- dataIndex: 'name',
- align: 'center',
- width: '10%',
- render: function (text, row, index) {
- return dashboard(text, index, t_month);
- },
- },
- ]
- : []),
- // 第四列：影响力
- {
- title: t('influence'),
- dataIndex: 'value',
- width: '20%',
- align: 'right',
- render: (text, row, index) => {
- return RoundFloat(text);
- },
- },
- // 第五列：影响力变化
- {
- title: '',
- dataIndex: 'valueDelta',
- width: '10%',
- align: 'left',
- render: (text, row, index) => {
- text = RoundFloat(text);
- return PointRender(text, row, index);
- },
- },
-];
-
-const solveDate = (year, month) => {
- if (year === null && month === null) {
- return 'not found';
- }
- if (month === null) {
- return year + '年';
- }
- return year + '年' + (month + 1) + '月';
-};
-
-function dashboard(text, index, t_month) {
- if (index < 300) {
- let [org_name, repo_name] = text.split('/');
- const t_month_copy = t_month + ' ' + '00:00:00';
- let params = {
- org_name,
- repo_name,
- t_month_copy,
- t_month,
- };
- return (
-
-
- );
- }
-}
-
-function DateTitle(props) {
- return {solveDate(props.year, props.month)}
;
-}
-
-function MyTable(props) {
- const [state, setState] = useState({
- object: 'technology',
- index: 'open_rank',
- region: 'global',
- showDetail: false,
- hasDetail: true,
- data: [],
- showSize: 25,
- loading: true,
- url: '', // base + index + object + region + yearmonth + .json
- base: 'https://oss.x-lab.info/open_leaderboard/',
- year: null, // 字符串格式
- month: null, // 整数格式，0表示1月，1表示2月..., null for year type time
- type: 'month',
- search: null,
- category: 'cloud-native',
- });
-
- // 请求一次数据更新表格。如果还没读取好配置文件则不请求数据。
- useEffect(() => {
- if (props.year == null && props.month == null) {
- console.log('the first loading');
- return;
- }
- updateDate({
- year: String(props.year),
- month: props.month,
- });
- }, [props]);
-
- const expandData = () => {
- setState({
- ...state,
- showSize: state.showSize + 25,
- });
- };
- const updateDate = (newstate) => {
- console.log('table update', newstate);
- // 先获取原先的表格属性
- let {
- base,
- object,
- index,
- region,
- month,
- year,
- columns,
- showDetail,
- hasDetail,
- type,
- search,
- category,
- } = state;
- // 然后把表格改为加载中的状态
- setState({ ...state, ...newstate, loading: true });
- // 如果 newstate 有对应的属性，则进行更新
- if (newstate.hasOwnProperty('object')) object = newstate.object;
- if (newstate.hasOwnProperty('index')) index = newstate.index;
- if (newstate.hasOwnProperty('region')) region = newstate.region;
- if (newstate.hasOwnProperty('month')) month = newstate.month;
- if (newstate.hasOwnProperty('year')) year = newstate.year;
- if (newstate.hasOwnProperty('showDetail')) showDetail = newstate.showDetail;
- if (newstate.hasOwnProperty('type')) type = newstate.type;
- if (newstate.hasOwnProperty('search')) search = newstate.search;
- if (newstate.hasOwnProperty('category')) category = newstate.category;
-
- //获取数据大屏的‘t_month’参数
- let myyear = newstate.year == null ? state.year : newstate.year;
- let mymonth = newstate.month == null ? state.month : newstate.month;
-
- mymonth = ('' + (1 + mymonth)).padStart(2, '0');
- let t_month = `${myyear}-${mymonth}-01`;
-
- // 根据 index 和 showDetail 改变表格的 columns 格式
- if (index == 'activity') {
- columns = activityColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'activity' && showDetail == true) {
- columns = activityDetailColumns(object, t_month);
- hasDetail = true;
- }
- if (index == 'open_rank') {
- columns = open_rankColumns(object, t_month);
- hasDetail = false;
- showDetail = false;
- }
- // 如果是年份数据，则把 month 置为 null。
- // TODO：待验证，如果从年份数据切换到月份数据，似乎会自动回到原来 month 值？
- if (type == 'year') {
- month = null;
- }
- // 以当前的属性构造请求 url
- let url = base + index + '/' + object + '/' + region + '/';
- if (month === null) {
- url += year + '.json';
- } else {
- url += year + (1 + month) + '.json';
- }
- console.log(url);
- console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
- }
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
- // fetch 异步请求
- fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
- }
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
-
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
- }
-
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
- });
-
-
- };
-
- const {
- object,
- index,
- region,
- data,
- columns,
- loading,
- showSize,
- showDetail,
- hasDetail,
- month,
- year,
- type,
- category,
- } = state;
- return (
-
-
-
-
- record.rank}
- dataSource={data.slice(0, Math.min(showSize, data.length))}
- pagination={false}
- loading={loading}
- scroll={{ x: 'max-content' }}
- />
-
-
-
-
- {showSize < data.length ? (
-
- {t('showMore') + '>>'}
-
- ) : (
-
- {t('noMore')}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyTable;
diff --git a/.history/src/locales/foundationChinese_20240728145456.json b/.history/src/locales/foundationChinese_20240728145456.json
deleted file mode 100644
index e69de29..0000000
diff --git a/.history/src/locales/foundationChinese_20240728145600.json b/.history/src/locales/foundationChinese_20240728145600.json
deleted file mode 100644
index 8156e09..0000000
--- a/.history/src/locales/foundationChinese_20240728145600.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": 'Foundation_China',
- "time": '2024',
- "data": [
- {
- rank: '1',
- name: 'apache/doris',
- value: '4307.26',
- rankDelta: 1,
- valueDelta: +100,
- },
- {
- rank: '2',
- name: 'openharmony/docs',
- value: '3277.69',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '3',
- name: 'openharmony/arkui_ace_engine',
- value: '2818.09',
- rankDelta: -1,
- valueDelta: -3,
- },
- {
- rank: '4',
- name: 'milvus-io/milvus',
- value: '2001.11',
- rankDelta: 3,
- valueDelta: -100,
- },
- {
- rank: '5',
- name: 'apache/flink',
- value: '1816.72',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '6',
- name: 'apache/shardingsphere',
- value: '1662.8',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '7',
- name: 'apache/ozone',
- value: '1281.57',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '8',
- name: 'apache/iotdb',
- value: '1265.72',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '9',
- name: 'openharmony/graphic_graphic_2d',
- value: '1239.6',
- rankDelta: 0,
- valueDelta: 0,
- },
- {
- rank: '10',
- name: 'apache/pulsar',
- value: '1227.93',
- rankDelta: 0,
- valueDelta: 0,
- },
- ],
- }
\ No newline at end of file
diff --git a/.history/src/locales/foundationChinese_20240728145848.json b/.history/src/locales/foundationChinese_20240728145848.json
deleted file mode 100644
index ce7dab2..0000000
--- a/.history/src/locales/foundationChinese_20240728145848.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 3,
- "valueDelta": -100
- },
- {
- "rank": "5",
- "name": "apache/flink",
- "value": "1816.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "apache/shardingsphere",
- "value": "1662.8",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/ozone",
- "value": "1281.57",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/iotdb",
- "value": "1265.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/pulsar",
- "value": "1227.93",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
- }
\ No newline at end of file
diff --git a/public/tech-foundation/foundationchinese.json b/public/tech-foundation/foundationchinese.json
index ce7dab2..0a6050c 100644
--- a/public/tech-foundation/foundationchinese.json
+++ b/public/tech-foundation/foundationchinese.json
@@ -1,76 +1,76 @@
{
- "type": "Foundation_China",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 3,
- "valueDelta": -100
- },
- {
- "rank": "5",
- "name": "apache/flink",
- "value": "1816.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "apache/shardingsphere",
- "value": "1662.8",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/ozone",
- "value": "1281.57",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/iotdb",
- "value": "1265.72",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/pulsar",
- "value": "1227.93",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
- }
\ No newline at end of file
+ "type": "Foundation_China",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "apache/doris",
+ "value": "4307.26",
+ "rankDelta": 1,
+ "valueDelta": 100
+ },
+ {
+ "rank": "2",
+ "name": "openharmony/docs",
+ "value": "3277.69",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "openharmony/arkui_ace_engine",
+ "value": "2818.09",
+ "rankDelta": -1,
+ "valueDelta": -3
+ },
+ {
+ "rank": "4",
+ "name": "milvus-io/milvus",
+ "value": "2001.11",
+ "rankDelta": 3,
+ "valueDelta": -100
+ },
+ {
+ "rank": "5",
+ "name": "apache/flink",
+ "value": "1816.72",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "apache/shardingsphere",
+ "value": "1662.8",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "apache/ozone",
+ "value": "1281.57",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "apache/iotdb",
+ "value": "1265.72",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "openharmony/graphic_graphic_2d",
+ "value": "1239.6",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "apache/pulsar",
+ "value": "1227.93",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/foundationglobal.json b/public/tech-foundation/foundationglobal.json
index 1b2502b..c990341 100644
--- a/public/tech-foundation/foundationglobal.json
+++ b/public/tech-foundation/foundationglobal.json
@@ -1,76 +1,76 @@
{
- "type": "Foundation_Global",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 2,
- "valueDelta": 3
- },
- {
- "rank": "3",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": -1,
- "valueDelta": -3
- },
- {
- "rank": "4",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "apache/arrow",
- "value": "2219.95",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "apache/beam",
- "value": "2188.52",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/hudi",
- "value": "2124.67",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Foundation_Global",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "kubernetes/kubernetes",
+ "value": "5374.14",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "apache/doris",
+ "value": "4307.26",
+ "rankDelta": 2,
+ "valueDelta": 3
+ },
+ {
+ "rank": "3",
+ "name": "apache/airflow",
+ "value": "3642.9",
+ "rankDelta": -1,
+ "valueDelta": -3
+ },
+ {
+ "rank": "4",
+ "name": "openharmony/docs",
+ "value": "3277.69",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "openharmony/arkui_ace_engine",
+ "value": "2818.09",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "nodejs/node",
+ "value": "2736.37",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "apache/spark",
+ "value": "2654.02",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "apache/arrow",
+ "value": "2219.95",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "apache/beam",
+ "value": "2188.52",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "apache/hudi",
+ "value": "2124.67",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologyai.json b/public/tech-foundation/technologyai.json
index 5b5d101..34a6ab7 100644
--- a/public/tech-foundation/technologyai.json
+++ b/public/tech-foundation/technologyai.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_ai",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "pytorch/pytorch",
- "value": "10182.45",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "langchain-ai/langchain",
- "value": "6080.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "PaddlePaddle/Paddle",
- "value": "5408.62",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "huggingface/transformers",
- "value": "4422.84",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "AUTOMATIC1111/stable-diffusion-webui",
- "value": "3881.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openvinotoolkit/openvino",
- "value": "3857.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "microsoft/onnxruntime",
- "value": "3006.75",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "tensorflow/tensorflow",
- "value": "2723.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "Significant-Gravitas/AutoGPT",
- "value": "2664.85",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "ggerganov/llama.cpp",
- "value": "2339.8",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Technology_ai",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "pytorch/pytorch",
+ "value": "10182.45",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "langchain-ai/langchain",
+ "value": "6080.25",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "PaddlePaddle/Paddle",
+ "value": "5408.62",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "4",
+ "name": "huggingface/transformers",
+ "value": "4422.84",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "AUTOMATIC1111/stable-diffusion-webui",
+ "value": "3881.6",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "openvinotoolkit/openvino",
+ "value": "3857.31",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "microsoft/onnxruntime",
+ "value": "3006.75",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "tensorflow/tensorflow",
+ "value": "2723.26",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "Significant-Gravitas/AutoGPT",
+ "value": "2664.85",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "ggerganov/llama.cpp",
+ "value": "2339.8",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologybig-data.json b/public/tech-foundation/technologybig-data.json
index 08dd4a7..8dcb772 100644
--- a/public/tech-foundation/technologybig-data.json
+++ b/public/tech-foundation/technologybig-data.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_big-data",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "elastic/kibana",
- "value": "7601.04",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "airbytehq/airbyte",
- "value": "4658.86",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/airflow",
- "value": "3642.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Technology_big-data",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "elastic/kibana",
+ "value": "7601.04",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "grafana/grafana",
+ "value": "7134.37",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "ClickHouse/ClickHouse",
+ "value": "4941.99",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "4",
+ "name": "airbytehq/airbyte",
+ "value": "4658.86",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "apache/doris",
+ "value": "4307.26",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "elastic/elasticsearch",
+ "value": "3729.39",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "apache/airflow",
+ "value": "3642.9",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "StarRocks/starrocks",
+ "value": "3194.56",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "trinodb/trino",
+ "value": "2703.4",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "apache/spark",
+ "value": "2654.02",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologycloud-native.json b/public/tech-foundation/technologycloud-native.json
index c6d4351..4d90cb7 100644
--- a/public/tech-foundation/technologycloud-native.json
+++ b/public/tech-foundation/technologycloud-native.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_cloud-native",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "grafana/grafana",
- "value": "7134.37",
- "rankDelta": 1,
- "valueDelta": 100
- },
- {
- "rank": "2",
- "name": "llvm/llvm-project",
- "value": "7049.62",
- "rankDelta": -2,
- "valueDelta": -220
- },
- {
- "rank": "3",
- "name": "kubernetes/kubernetes",
- "value": "5374.14",
- "rankDelta": 3,
- "valueDelta": 300
- },
- {
- "rank": "4",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": -4,
- "valueDelta": 400
- },
- {
- "rank": "5",
- "name": "cilium/cilium",
- "value": "3215.42",
- "rankDelta": 5,
- "valueDelta": -500
- },
- {
- "rank": "6",
- "name": "ceph/ceph",
- "value": "3172.49",
- "rankDelta": -6,
- "valueDelta": 600
- },
- {
- "rank": "7",
- "name": "keycloak/keycloak",
- "value": "3095.56",
- "rankDelta": 7,
- "valueDelta": 700
- },
- {
- "rank": "8",
- "name": "gravitational/teleport",
- "value": "3082.18",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "envoyproxy/envoy",
- "value": "2929.08",
- "rankDelta": 9,
- "valueDelta": -900
- },
- {
- "rank": "10",
- "name": "backstage/backstage",
- "value": "2903.39",
- "rankDelta": 10,
- "valueDelta": 100
- }
- ]
- }
\ No newline at end of file
+ "type": "Technology_cloud-native",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "grafana/grafana",
+ "value": "7134.37",
+ "rankDelta": 1,
+ "valueDelta": 100
+ },
+ {
+ "rank": "2",
+ "name": "llvm/llvm-project",
+ "value": "7049.62",
+ "rankDelta": -2,
+ "valueDelta": -220
+ },
+ {
+ "rank": "3",
+ "name": "kubernetes/kubernetes",
+ "value": "5374.14",
+ "rankDelta": 3,
+ "valueDelta": 300
+ },
+ {
+ "rank": "4",
+ "name": "ClickHouse/ClickHouse",
+ "value": "4941.99",
+ "rankDelta": -4,
+ "valueDelta": 400
+ },
+ {
+ "rank": "5",
+ "name": "cilium/cilium",
+ "value": "3215.42",
+ "rankDelta": 5,
+ "valueDelta": -500
+ },
+ {
+ "rank": "6",
+ "name": "ceph/ceph",
+ "value": "3172.49",
+ "rankDelta": -6,
+ "valueDelta": 600
+ },
+ {
+ "rank": "7",
+ "name": "keycloak/keycloak",
+ "value": "3095.56",
+ "rankDelta": 7,
+ "valueDelta": 700
+ },
+ {
+ "rank": "8",
+ "name": "gravitational/teleport",
+ "value": "3082.18",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "envoyproxy/envoy",
+ "value": "2929.08",
+ "rankDelta": 9,
+ "valueDelta": -900
+ },
+ {
+ "rank": "10",
+ "name": "backstage/backstage",
+ "value": "2903.39",
+ "rankDelta": 10,
+ "valueDelta": 100
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologydatabase.json b/public/tech-foundation/technologydatabase.json
index 2d6a2a7..5a9c3c7 100644
--- a/public/tech-foundation/technologydatabase.json
+++ b/public/tech-foundation/technologydatabase.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_database",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "ClickHouse/ClickHouse",
- "value": "4941.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "apache/doris",
- "value": "4307.26",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "elastic/elasticsearch",
- "value": "3729.39",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "cockroachdb/cockroach",
- "value": "3443.7",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "StarRocks/starrocks",
- "value": "3194.56",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "trinodb/trino",
- "value": "2703.4",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "apache/spark",
- "value": "2654.02",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "pingcap/tidb",
- "value": "2200.38",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "milvus-io/milvus",
- "value": "2001.11",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "yugabyte/yugabyte-db",
- "value": "1940.75",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Technology_database",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "ClickHouse/ClickHouse",
+ "value": "4941.99",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "apache/doris",
+ "value": "4307.26",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "elastic/elasticsearch",
+ "value": "3729.39",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "4",
+ "name": "cockroachdb/cockroach",
+ "value": "3443.7",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "StarRocks/starrocks",
+ "value": "3194.56",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "trinodb/trino",
+ "value": "2703.4",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "apache/spark",
+ "value": "2654.02",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "pingcap/tidb",
+ "value": "2200.38",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "milvus-io/milvus",
+ "value": "2001.11",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "yugabyte/yugabyte-db",
+ "value": "1940.75",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologyfront-end.json b/public/tech-foundation/technologyfront-end.json
index 88e549f..154f8bf 100644
--- a/public/tech-foundation/technologyfront-end.json
+++ b/public/tech-foundation/technologyfront-end.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_front-end",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "flutter/flutter",
- "value": "9361.81",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "vercel/next.js",
- "value": "6638.65",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "appsmithorg/appsmith",
- "value": "3474.07",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "nuxt/nuxt",
- "value": "3387.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "facebook/react-native",
- "value": "3260.55",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "ant-design/ant-design",
- "value": "3053.25",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "nodejs/node",
- "value": "2736.37",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "angular/angular",
- "value": "2273.82",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "electron/electron",
- "value": "1773.31",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "denoland/deno",
- "value": "1654.01",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Technology_front-end",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "flutter/flutter",
+ "value": "9361.81",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "vercel/next.js",
+ "value": "6638.65",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "appsmithorg/appsmith",
+ "value": "3474.07",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "4",
+ "name": "nuxt/nuxt",
+ "value": "3387.23",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "facebook/react-native",
+ "value": "3260.55",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "ant-design/ant-design",
+ "value": "3053.25",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "nodejs/node",
+ "value": "2736.37",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "angular/angular",
+ "value": "2273.82",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "electron/electron",
+ "value": "1773.31",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "denoland/deno",
+ "value": "1654.01",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/public/tech-foundation/technologyos.json b/public/tech-foundation/technologyos.json
index 93a8e86..ef2f49c 100644
--- a/public/tech-foundation/technologyos.json
+++ b/public/tech-foundation/technologyos.json
@@ -1,76 +1,76 @@
{
- "type": "Technology_os",
- "time": "2024",
- "data": [
- {
- "rank": "1",
- "name": "openharmony/docs",
- "value": "3277.69",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "2",
- "name": "openharmony/arkui_ace_engine",
- "value": "2818.09",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "3",
- "name": "SerenityOS/serenity",
- "value": "2257.68",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "4",
- "name": "openharmony/graphic_graphic_2d",
- "value": "1239.6",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "5",
- "name": "openeuler/docs",
- "value": "1206.9",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "6",
- "name": "openharmony/xts_acts",
- "value": "1186.06",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "7",
- "name": "openharmony/arkcompiler_ets_runtime",
- "value": "961.99",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "8",
- "name": "openharmony/interface_sdk-js",
- "value": "910.91",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "9",
- "name": "reactos/reactos",
- "value": "745.23",
- "rankDelta": 0,
- "valueDelta": 0
- },
- {
- "rank": "10",
- "name": "armbian/build",
- "value": "679.1",
- "rankDelta": 0,
- "valueDelta": 0
- }
- ]
-}
\ No newline at end of file
+ "type": "Technology_os",
+ "time": "2024",
+ "data": [
+ {
+ "rank": "1",
+ "name": "openharmony/docs",
+ "value": "3277.69",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "2",
+ "name": "openharmony/arkui_ace_engine",
+ "value": "2818.09",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "3",
+ "name": "SerenityOS/serenity",
+ "value": "2257.68",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "4",
+ "name": "openharmony/graphic_graphic_2d",
+ "value": "1239.6",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "5",
+ "name": "openeuler/docs",
+ "value": "1206.9",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "6",
+ "name": "openharmony/xts_acts",
+ "value": "1186.06",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "7",
+ "name": "openharmony/arkcompiler_ets_runtime",
+ "value": "961.99",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "8",
+ "name": "openharmony/interface_sdk-js",
+ "value": "910.91",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "9",
+ "name": "reactos/reactos",
+ "value": "745.23",
+ "rankDelta": 0,
+ "valueDelta": 0
+ },
+ {
+ "rank": "10",
+ "name": "armbian/build",
+ "value": "679.1",
+ "rankDelta": 0,
+ "valueDelta": 0
+ }
+ ]
+}
diff --git a/src/components/table.js b/src/components/table.js
index a4b0fc6..9cf2019 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -432,73 +432,70 @@ function MyTable(props) {
}
console.log(url);
console.log(region);
- if (object == "foundation") {
- url = './tech-foundation/'+ object + region +'.json'
+ if (object == 'foundation') {
+ url = './tech-foundation/' + object + region + '.json';
+ } else if (object == 'technology') {
+ url = './tech-foundation/' + object + category + '.json';
}
- else if (object == "technology") {
- url = './tech-foundation/'+ object + category +'.json'
- }
- // fetch 异步请求
+ // fetch 异步请求
fetch(url)
- .then((res) => {
- // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
- if (res.status == 404) {
- message.warning(t('no_result'));
- return '';
+ .then((res) => {
+ // Todo：最好的情况是在日期选择器中，只显示可以查询的日期，
+ if (res.status == 404) {
+ message.warning(t('no_result'));
+ return '';
+ }
+ return res.json();
+ })
+ .then((data) => {
+ data = data.data;
+ let dataSource = [];
+ // 预处理数据，对新上榜单数据进行特殊标记处理
+ data.map((obj) => {
+ obj = expandObject(obj);
+ if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
+ obj.rankDelta = -10000000;
+ obj.valueDelta = 0;
}
- return res.json();
- })
- .then((data) => {
- data = data.data;
- let dataSource = [];
- // 预处理数据，对新上榜单数据进行特殊标记处理
- data.map((obj) => {
- obj = expandObject(obj);
- if (obj.rankDelta == 0 && obj.value == obj.valueDelta) {
- obj.rankDelta = -10000000;
- obj.valueDelta = 0;
- }
- dataSource.push(obj);
- });
- console.log(dataSource);
+ dataSource.push(obj);
+ });
+ console.log(dataSource);
- //搜索特定数据
- let queryData;
- if (search) {
- queryData = dataSource.filter((dataSource) => {
- let reg = new RegExp(search.trim(), 'i');
- return reg.test(dataSource.name);
- });
- if (queryData.length == 0) {
- message.warning(t('no_result'));
- } else {
- dataSource = queryData;
- }
+ //搜索特定数据
+ let queryData;
+ if (search) {
+ queryData = dataSource.filter((dataSource) => {
+ let reg = new RegExp(search.trim(), 'i');
+ return reg.test(dataSource.name);
+ });
+ if (queryData.length == 0) {
+ message.warning(t('no_result'));
+ } else {
+ dataSource = queryData;
}
+ }
- // 更新属性和表格数据
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- showDetail: showDetail,
- hasDetail: hasDetail,
- data: dataSource,
- });
- })
- .catch((err) => {
- console.log('hi!' + err);
- setState({
- ...state,
- ...newstate,
- loading: false,
- columns: columns,
- data: [],
- });
+ // 更新属性和表格数据
+ setState({
+ ...state,
+ ...newstate,
+ loading: false,
+ columns: columns,
+ showDetail: showDetail,
+ hasDetail: hasDetail,
+ data: dataSource,
+ });
+ })
+ .catch((err) => {
+ console.log('hi!' + err);
+ setState({
+ ...state,
+ ...newstate,
+ loading: false,
+ columns: columns,
+ data: [],
});
-
-
+ });
};
const {