Skip to content
Snippets Groups Projects
Unverified Commit 1b8d7032 authored by GyDi's avatar GyDi
Browse files

feat: optimize the animation of the traffic graph

parent 844ffab4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/layout/layout-traffic.tsx
+ 13
− 9
View file @ 1b8d7032
import useSWR from "swr";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useRecoilValue } from "recoil";
import { Box, Typography } from "@mui/material";
import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
......@@ -8,17 +8,18 @@ import { ApiType } from "../../services/types";
import { getInfomation } from "../../services/api";
import { getVergeConfig } from "../../services/cmds";
import { atomClashPort } from "../../services/states";
import TrafficGraph from "./traffic-graph";
import useLogSetup from "./use-log-setup";
import useTrafficGraph from "./use-traffic-graph";
import parseTraffic from "../../utils/parse-traffic";
// setup the traffic
const LayoutTraffic = () => {
const portValue = useRecoilValue(atomClashPort);
const [traffic, setTraffic] = useState({ up: 0, down: 0 });
const { canvasRef, appendData, toggleStyle } = useTrafficGraph();
const [refresh, setRefresh] = useState({});
const trafficRef = useRef<any>();
// whether hide traffic graph
const { data } = useSWR("getVergeConfig", getVergeConfig);
const trafficGraph = data?.traffic_graph ?? true;
......@@ -46,7 +47,7 @@ const LayoutTraffic = () => {
ws.addEventListener("message", (event) => {
const data = JSON.parse(event.data) as ApiType.TrafficItem;
appendData(data);
trafficRef.current?.appendData(data);
setTraffic(data);
});
});
......@@ -72,12 +73,15 @@ const LayoutTraffic = () => {
};
return (
<Box width="110px" position="relative" onClick={toggleStyle}>
<Box
width="110px"
position="relative"
onClick={trafficRef.current?.toggleStyle}
>
{trafficGraph && (
<canvas
ref={canvasRef}
style={{ width: "100%", height: 60, marginBottom: 6 }}
/>
<div style={{ width: "100%", height: 60, marginBottom: 6 }}>
<TrafficGraph instance={trafficRef} />
</div>
)}
<Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
......
src/components/layout/use-traffic-graph.ts → src/components/layout/traffic-graph.tsx
+ 207
− 0
View file @ 1b8d7032
import { useEffect, useRef } from "react";
import { useTheme } from "@mui/material";
const minPoint = 10;
const maxPoint = 36;
const maxPoint = 30;
const refLineAlpha = 1;
const refLineWidth = 2;
......@@ -13,65 +12,105 @@ const upLineWidth = 4;
const downLineAlpha = 1;
const downLineWidth = 4;
const duration = 16 / 1000;
const defaultList = Array(maxPoint + 1).fill({ up: 0, down: 0 });
type TrafficData = { up: number; down: number };
interface Props {
instance: React.MutableRefObject<{
appendData: (data: TrafficData) => void;
toggleStyle: () => void;
}>;
}
/**
* draw the traffic graph
*/
export default function useTrafficGraph() {
type TrafficData = { up: number; down: number };
const listRef = useRef<TrafficData[]>([]);
const TrafficGraph = (props: Props) => {
const { instance } = props;
const countRef = useRef(0);
const styleRef = useRef(true);
const listRef = useRef<TrafficData[]>(defaultList);
const canvasRef = useRef<HTMLCanvasElement>(null!);
const { palette } = useTheme();
const paletteRef = useRef(palette);
useEffect(() => {
paletteRef.current = palette;
}, [palette]);
let timer: any;
let cache: TrafficData | null = null;
const zero = { up: 0, down: 0 };
const handleData = () => {
const data = cache ? cache : zero;
cache = null;
const drawGraph = () => {
const list = listRef.current;
if (list.length > maxPoint + 1) list.shift();
list.push(data);
countRef.current = 0;
timer = setTimeout(handleData, 1000);
};
instance.current = {
appendData: (data: TrafficData) => {
cache = data;
},
toggleStyle: () => {
styleRef.current = !styleRef.current;
},
};
handleData();
return () => {
instance.current = null!;
if (timer) clearTimeout(timer);
};
}, []);
useEffect(() => {
let raf = 0;
const canvas = canvasRef.current!;
if (!canvas) return;
const { primary, secondary, divider } = paletteRef.current;
const context = canvas.getContext("2d")!;
if (!context) return;
const { primary, secondary, divider } = palette;
const refLineColor = divider || "rgba(0, 0, 0, 0.12)";
const upLineColor = secondary.main || "#9c27b0";
const downLineColor = primary.main || "#5b5c9d";
const context = canvas.getContext("2d")!;
const width = canvas.width;
const height = canvas.height;
const l1 = height * 0.2;
const l2 = height * 0.6;
const dl = height * 0.4;
context.clearRect(0, 0, width, height);
// Reference lines
context.beginPath();
context.globalAlpha = refLineAlpha;
context.lineWidth = refLineWidth;
context.strokeStyle = refLineColor;
context.moveTo(0, l1);
context.lineTo(width, l1);
context.moveTo(0, l2);
context.lineTo(width, l2);
context.stroke();
context.closePath();
const countY = (value: number) => {
let v = value;
if (v < 1024) v = (v / 1024) * dl;
else if (v < 1048576) v = dl + (v / 1048576) * dl;
else v = 2 * dl + (v / 10485760) * l1;
return height - v;
const dx = width / maxPoint;
const dy = height / 7;
const l1 = dy;
const l2 = dy * 4;
const countY = (v: number) => {
const h = height;
if (v == 0) return h - 1;
if (v <= 10) return h - (v / 10) * dy;
if (v <= 100) return h - (v / 100 + 1) * dy;
if (v <= 1024) return h - (v / 1024 + 2) * dy;
if (v <= 10240) return h - (v / 10240 + 3) * dy;
if (v <= 102400) return h - (v / 102400 + 4) * dy;
if (v <= 1048576) return h - (v / 1048576 + 5) * dy;
if (v <= 10485760) return h - (v / 10485760 + 6) * dy;
return 1;
};
const drawBezier = (list: number[]) => {
const len = list.length;
const size = Math.min(Math.max(len, minPoint), maxPoint);
const axis = width / size;
const count = countRef.current;
const offset = Math.min(1, count * duration);
const offsetX = dx * offset;
let lx = 0;
let ly = height;
......@@ -79,14 +118,14 @@ export default function useTrafficGraph() {
let lly = height;
list.forEach((val, index) => {
const x = (axis * index) | 0;
const x = (dx * index - offsetX) | 0;
const y = countY(val);
const s = 0.25;
if (index === 0) context.moveTo(x, y);
else {
let nx = (axis * (index + 1)) | 0;
let ny = index < len - 1 ? countY(list[index + 1]) | 0 : 0;
let nx = (dx * (index + 1)) | 0;
let ny = index < maxPoint - 1 ? countY(list[index + 1]) | 0 : 0;
const ax = (lx + (x - llx) * s) | 0;
const ay = (ly + (y - lly) * s) | 0;
const bx = (x - (nx - lx) * s) | 0;
......@@ -102,12 +141,12 @@ export default function useTrafficGraph() {
};
const drawLine = (list: number[]) => {
const len = list.length;
const size = Math.min(Math.max(len, minPoint), maxPoint);
const axis = width / size;
const count = countRef.current;
const offset = Math.min(1, count * duration);
const offsetX = dx * offset;
list.forEach((val, index) => {
const x = (axis * index) | 0;
const x = (dx * index - offsetX) | 0;
const y = countY(val);
if (index === 0) context.moveTo(x, y);
......@@ -115,42 +154,54 @@ export default function useTrafficGraph() {
});
};
const listUp = listRef.current.map((v) => v.up);
const listDown = listRef.current.map((v) => v.down);
const lineStyle = styleRef.current;
context.beginPath();
context.globalAlpha = upLineAlpha;
context.lineWidth = upLineWidth;
context.strokeStyle = upLineColor;
lineStyle ? drawLine(listUp) : drawBezier(listUp);
context.stroke();
context.closePath();
context.beginPath();
context.globalAlpha = downLineAlpha;
context.lineWidth = downLineWidth;
context.strokeStyle = downLineColor;
lineStyle ? drawLine(listDown) : drawBezier(listDown);
context.stroke();
context.closePath();
};
const appendData = (data: TrafficData) => {
const list = listRef.current;
if (list.length > maxPoint) list.shift();
list.push(data);
drawGraph();
};
const drawGraph = () => {
context.clearRect(0, 0, width, height);
// Reference lines
context.beginPath();
context.globalAlpha = refLineAlpha;
context.lineWidth = refLineWidth;
context.strokeStyle = refLineColor;
context.moveTo(0, l1);
context.lineTo(width, l1);
context.moveTo(0, l2);
context.lineTo(width, l2);
context.stroke();
context.closePath();
const listUp = listRef.current.map((v) => v.up);
const listDown = listRef.current.map((v) => v.down);
const lineStyle = styleRef.current;
context.beginPath();
context.globalAlpha = upLineAlpha;
context.lineWidth = upLineWidth;
context.strokeStyle = upLineColor;
lineStyle ? drawLine(listUp) : drawBezier(listUp);
context.stroke();
context.closePath();
context.beginPath();
context.globalAlpha = downLineAlpha;
context.lineWidth = downLineWidth;
context.strokeStyle = downLineColor;
lineStyle ? drawLine(listDown) : drawBezier(listDown);
context.stroke();
context.closePath();
countRef.current += 1;
raf = requestAnimationFrame(drawGraph);
};
const toggleStyle = () => {
styleRef.current = !styleRef.current;
drawGraph();
};
return {
canvasRef,
appendData,
toggleStyle,
};
}
return () => {
cancelAnimationFrame(raf);
};
}, [palette]);
return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
};
export default TrafficGraph;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment