add trend of openrank

package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.18.0",
+    "echarts": "^5.5.1",
     "i18next": "^21.6.4",
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-http-backend": "^1.3.1",

src/components/Trend.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import * as echarts from 'echarts';
+
+// 图表预留空位，保证数据完整渲染
+function yAxisMin(value) {
+  return value.min * 0.92;
+}
+function yAxisMax(value) {
+  return value.max * 1.08;
+}
+
+const Trend = (trendData) => {
+  const chartRef = useRef(null);
+  let lineColor =
+    trendData[trendData.length - 1] > trendData[0] ? '#FA4444' : '#05B169';
+  useEffect(() => {
+    const chartDom = chartRef.current;
+    const myChart = echarts.init(chartDom, null, { width: 240, height: 60 });
+
+    const option = {
+      xAxis: {
+        type: 'category',
+        data: [],
+        show: false,
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+        min: yAxisMin,
+        max: yAxisMax,
+      },
+      series: [
+        {
+          data: trendData,
+          type: 'line',
+          smooth: false,
+          lineStyle: {
+            color: lineColor,
+          },
+          symbol: 'none',
+        },
+      ],
+    };
+
+    myChart.setOption(option);
+
+    return () => {
+      myChart.dispose(); // 销毁图表实例
+    };
+  }, []);
+
+  return <div ref={chartRef} style={{ width: '100%', height: '60px' }} />;
+};
+
+export default Trend;

src/components/table.js

@@ -6,6 +6,7 @@ import QAmiss from './QA2';
 import TablePanel from './TablePanel';
 import ArrowRender from './arrow';
 import PointRender from './changeNumber';
+import Trend from './Trend';
 import RoundFloat from './resolveFloat';
 import Trophy from './rankTrophy';
 import expandObject from '../util/expandObject';
@@ -268,6 +269,36 @@ const open_rankColumns = (object, t_month) => [
       return RoundFloat(text);
     },
   },
+  {
+    title: t('trend'),
+    dataIndex: 'trend',
+    width: '10%',
+    align: 'left',
+    render: (trendData, row, index) => {
+      let valueDelta = row.valueDelta;
+      let value = row.value;
+      function generateRandomArray(length, min, max) {
+        const arr = [];
+        for (let i = 0; i < length; i++) {
+          const randomNumber =
+            Math.floor(Math.random() * (max - min + 1)) + min;
+          arr.push(randomNumber);
+        }
+        return arr;
+      }
+      let randData = [];
+      if (valueDelta < 0) {
+        randData = generateRandomArray(30, value + valueDelta, value);
+      } else {
+        randData = generateRandomArray(12, value, value + valueDelta);
+      }
+      randData[0] = value;
+      randData[randData.length - 1] = value + valueDelta;
+      return Trend(randData);
+      // TODO 暂时根据变化情况随机产生趋势数据，数据接口支持trendData后将其输入进Trend组件即可
+      // return Trend(trendData);
+    },
+  },
   {
     title: '',
     dataIndex: 'valueDelta',

src/locales/en.json

@@ -4,6 +4,7 @@
     "project": "Project",
     "bot": "Bot"
   },
+  "trend": "Trend",
   "chinese": "Chinese",
   "global": "Global",
   "time": "Time: ",

src/locales/zh.json

@@ -4,6 +4,7 @@
     "project": "项目",
     "bot": "机器人"
   },
+  "trend": "走势",
   "chinese": "中国",
   "global": "全球",
   "time": "时间: ",