From c2e3a4887d1695b7b3eed252c3e56e4bb4751847 Mon Sep 17 00:00:00 2001 From: adoin Date: Sun, 14 Jul 2024 23:08:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20svg+=E6=B8=90=E5=8F=98+=E4=B8=A4?= =?UTF-8?q?=E4=BE=A7=E5=AE=B9=E9=AB=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/respository/Info.tsx | 7 ++-- src/components/respository/SvgTrend.tsx | 51 +++++++++++++++++++++++++ src/types/repository.tsx | 4 +- 3 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 src/components/respository/SvgTrend.tsx diff --git a/src/components/respository/Info.tsx b/src/components/respository/Info.tsx index fa3a2168..c3836215 100644 --- a/src/components/respository/Info.tsx +++ b/src/components/respository/Info.tsx @@ -40,6 +40,7 @@ import CustomLink from '../links/CustomLink'; import Message from '../message'; import { Repository, RepositoryProps } from '@/types/repository'; +import SvgTrend from '@/components/respository/SvgTrend'; type URLoption = { url: string; @@ -221,7 +222,6 @@ const Info: NextPage = ({ repo }) => { ); - const chartOptions = repo.star_history && { xAxis: { type: 'category', @@ -344,11 +344,12 @@ const Info: NextPage = ({ repo }) => {
{repo.star_history ? (
- + />*/} +
{`过去 ${ repo.star_history.x.length } 天共收获 ${numFormat( diff --git a/src/components/respository/SvgTrend.tsx b/src/components/respository/SvgTrend.tsx new file mode 100644 index 00000000..4e113d43 --- /dev/null +++ b/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 ( + + + ` + + + + + + + + ); +}; +export default SvgTrend; diff --git a/src/types/repository.tsx b/src/types/repository.tsx index 38d00145..627827af 100644 --- a/src/types/repository.tsx +++ b/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 { From a38a0fbe1b04252a9ddfd543fee0f06ac5d25587 Mon Sep 17 00:00:00 2001 From: adoin Date: Sun, 14 Jul 2024 23:14:08 +0800 Subject: [PATCH 2/2] fix: fix unused eslint issue --- src/components/respository/Info.tsx | 61 +---------------------------- 1 file changed, 1 insertion(+), 60 deletions(-) diff --git a/src/components/respository/Info.tsx b/src/components/respository/Info.tsx index c3836215..5a7232e6 100644 --- a/src/components/respository/Info.tsx +++ b/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'; @@ -40,7 +40,6 @@ import CustomLink from '../links/CustomLink'; import Message from '../message'; import { Repository, RepositoryProps } from '@/types/repository'; -import SvgTrend from '@/components/respository/SvgTrend'; type URLoption = { url: string; @@ -222,59 +221,6 @@ const Info: NextPage = ({ repo }) => {
); - 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}
`; - params.forEach( - (item) => - (result += `${item.marker} Star：${numFormat(item.value, 1)}
`) - ); - 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 (
@@ -344,11 +290,6 @@ const Info: NextPage = ({ repo }) => {
{repo.star_history ? (
- {/* */}
{`过去 ${ repo.star_history.x.length