refactor: share rate chart history helpers

Author: XGHeaven

web/src/components/case-runner.tsx

@@ -3,15 +3,9 @@ import { Button } from '@blueprintjs/core'
 import { ChannelsContext, ConfigContext, I18nContext } from '../context'
 import { css } from '@emotion/react'
 import { SpeedIndicator } from './speed-indicator'
-import { RateCurve } from './rate-curve'
+import { appendRatePoint, RateCurve } from './rate-curve'
 import { Subscription, zip } from 'rxjs'
 
-const MAX_RATE_POINTS = 60
-
-function appendRate(rates: number[], rate: number) {
-  return [...rates.slice(-(MAX_RATE_POINTS - 1)), rate]
-}
-
 export function CaseRunner(props: { name: 'upload' | 'download'; title: string }) {
   const createChannels = useContext(ChannelsContext)
   const t = useContext(I18nContext)
@@ -64,7 +58,7 @@ export function CaseRunner(props: { name: 'upload' | 'download'; title: string }
         }
         const nextRate = rate.reduce((a, b) => a + b, 0)
         setRate(nextRate)
-        setRates((prevRates) => appendRate(prevRates, nextRate))
+        setRates((prevRates) => appendRatePoint(prevRates, nextRate))
       },
       error(e) {
         console.error(e)

web/src/components/rate-curve.tsx

@@ -7,7 +7,11 @@ const WIDTH = 320
 const HEIGHT = 116
 const PADDING_X = 12
 const PADDING_Y = 14
-const MAX_POINTS = 60
+export const MAX_RATE_POINTS = 60
+
+export function appendRatePoint(rates: number[], rate: number) {
+  return [...rates.slice(-(MAX_RATE_POINTS - 1)), rate]
+}
 
 export const RateCurve = memo(function RateCurve({
   rates,
@@ -22,7 +26,7 @@ export const RateCurve = memo(function RateCurve({
   const { unit } = useContext(ConfigContext)
   const t = useContext(I18nContext)
   const formatter = formatValue ?? rateFormatters[unit]
-  const points = rates.slice(-MAX_POINTS)
+  const points = rates.slice(-MAX_RATE_POINTS)
   const maxRate = Math.max(...points, 0)
   const { linePath, areaPath } = useMemo(() => {
     if (points.length < 2 || maxRate <= 0) {
@@ -69,7 +73,7 @@ export const RateCurve = memo(function RateCurve({
         css={css`
           display: block;
           width: 100%;
-          height: 116px;
+          height: ${HEIGHT}px;
           color: currentColor;
         `}
       >

web/src/components/run-case-once.tsx

@@ -1,5 +1,5 @@
 import { SpeedIndicator } from './speed-indicator'
-import { RateCurve } from './rate-curve'
+import { appendRatePoint, RateCurve } from './rate-curve'
 import styled from '@emotion/styled'
 import { useState, useContext, useEffect, useRef } from 'react'
 import { useRates } from '../hooks'
@@ -40,11 +40,6 @@ type ChartItem = {
 }
 
 const chartKeys: ChartKey[] = ['ping', 'download', 'upload']
-const MAX_RATE_POINTS = 60
-
-function appendRate(rates: number[], rate: number) {
-  return [...rates.slice(-(MAX_RATE_POINTS - 1)), rate]
-}
 
 enum RunningStep {
   NONE = 1,
@@ -130,7 +125,7 @@ export function RunCaseOnce() {
       ),
       (v) => {
         pushTTL(v)
-        setPingRates((prevRates) => appendRate(prevRates, v))
+        setPingRates((prevRates) => appendRatePoint(prevRates, v))
       },
       runId,
     )
@@ -158,7 +153,7 @@ export function RunCaseOnce() {
       (v) => {
         const nextRate = v.reduce((a, b) => a + b, 0)
         setDlRate(nextRate)
-        setDlRates((prevRates) => appendRate(prevRates, nextRate))
+        setDlRates((prevRates) => appendRatePoint(prevRates, nextRate))
       },
       runId,
     )
@@ -183,7 +178,7 @@ export function RunCaseOnce() {
       (v) => {
         const nextRate = v.reduce((a, b) => a + b, 0)
         setUlRate(nextRate)
-        setUlRates((prevRates) => appendRate(prevRates, nextRate))
+        setUlRates((prevRates) => appendRatePoint(prevRates, nextRate))
       },
       runId,
     )