Merge pull request #138 from HelloGitHub-Team/i112-star_历史图形化展示

I112 star 历史图形化展示

src/components/respository/Info.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
-import ReactECharts from 'echarts-for-react';
 import { NextPage } from 'next';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
@@ -19,6 +18,7 @@ import { GoComment, GoLinkExternal, GoVerified } from 'react-icons/go';
 import { useLoginContext } from '@/hooks/useLoginContext';
 
 import Score from '@/components/respository/Score';
+import SvgTrend from '@/components/respository/SvgTrend';
 
 import { getFavoriteOptions } from '@/services/favorite';
 import { redirectRecord } from '@/services/home';
@@ -222,60 +222,6 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
     </div>
   );
 
-  const chartOptions = repo.star_history && {
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: repo.star_history.x,
-      axisTick: { show: false },
-      axisLine: { show: false },
-      axisLabel: { show: false },
-    },
-    yAxis: {
-      type: 'value',
-      min: repo.star_history.min,
-      max:
-        repo.star_history.increment > 10
-          ? repo.star_history.max
-          : repo.star_history.min + 10,
-      splitLine: { show: false },
-      axisLabel: { show: false },
-      axisTick: { show: false },
-      axisLine: { show: false },
-    },
-    series: [
-      {
-        data: repo.star_history.y,
-        type: 'line',
-        areaStyle: { color: 'rgba(59, 130, 246, 0.2)' },
-        showSymbol: false,
-        smooth: true,
-      },
-    ],
-    tooltip: {
-      trigger: 'axis',
-      formatter(params: any[]) {
-        let result = `${params[0].name}<br>`;
-        params.forEach(
-          (item) =>
-            (result += `${item.marker} Star：${numFormat(item.value, 1)}<br>`)
-        );
-        return result;
-      },
-      backgroundColor: 'rgba(32, 33, 36,.7)',
-      borderColor: 'rgba(32, 33, 36,0.20)',
-      borderWidth: 1,
-      axisPointer: { type: 'none' },
-      textStyle: { color: '#fff', fontSize: '12' },
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      top: '20%',
-      bottom: '10%',
-    },
-  };
-
   return (
     <div className='p-1'>
       <div className='flex flex-col gap-y-3'>
@@ -344,11 +290,7 @@ const Info: NextPage<RepositoryProps> = ({ repo }) => {
           <div className='hidden md:flex'>
             {repo.star_history ? (
               <div className='flex flex-col items-center'>
-                <ReactECharts
-                  option={chartOptions}
-                  style={{ height: 54, width: 320 }}
-                  opts={{ renderer: 'svg' }}
-                />
+                <SvgTrend {...repo.star_history} />
                 <div className='text-xs text-gray-500'>{`过去 ${
                   repo.star_history.x.length
                 } 天共收获 ${numFormat(

src/components/respository/SvgTrend.tsx

@@ -0,0 +1,51 @@
+import { StarHistory } from '@/types/repository';
+
+const SvgTrend = (props: StarHistory) => {
+  const height = 54;
+  const width = 320;
+  const { max, min, x, y } = props;
+  const scale = 0.8; // 缩放比例 避免贴边
+  const indent = (height * (1 - scale)) / 2; //多出的空间给最小值和最大值
+  const fillColor =
+    max >= 100000
+      ? '#f16d6d'
+      : max >= 10000
+      ? '#ecc052'
+      : max >= 1000
+      ? '#409eff'
+      : '#67c23a';
+  const xRange = 320 / (x.length > 1 ? x.length - 1 : 1);
+  // 根据最大值和最小值差计算每个1的高度，后续最小值的y设置为0，最大值的y设置为height
+  const heightRange = (scale * height) / (max - min);
+  const points = y.map((stars, index) => {
+    const x = index * xRange;
+    // y轴摆正
+    const y = height - (stars - min) * heightRange - indent;
+    return `${x},${y}`;
+  });
+  // 画折线和折线加xy轴的多边形
+  return (
+    <svg width={width} height={height} key='render-svg'>
+      <linearGradient id='my-filter'>
+        `
+        <stop offset='0%' stopColor={fillColor + '33'} />
+        <stop offset='50%' stopColor={fillColor + '66'} />
+        <stop offset='100%' stopColor={fillColor} />
+      </linearGradient>
+      <polyline
+        points={points.join(' ')}
+        fill='transparent'
+        stroke={fillColor}
+        strokeWidth='2'
+      ></polyline>
+      <polygon
+        points={`${points.join(' ')} ${xRange * (x.length - 1)},${height} ${
+          xRange * (x.length - 1)
+        },${height} 0,${height}`}
+        fill='url(#my-filter) transparent'
+        stroke='none'
+      ></polygon>
+    </svg>
+  );
+};
+export default SvgTrend;

src/types/repository.tsx

@@ -14,8 +14,8 @@ export interface StarHistory {
   increment: number;
   max: number;
   min: number;
-  y: [];
-  x: [];
+  y: number[];
+  x: string[];
 }
 
 export interface Repository extends RepoType {