FEAT: Download stats chart

packages/p2p-media-loader-demo/package.json

@@ -44,12 +44,15 @@
     "clean-with-modules": "rimraf node_modules && pnpm clean"
   },
   "dependencies": {
+    "d3": "^7.9.0",
+    "hls.js": "^1.5.7",
     "p2p-media-loader-core": "workspace:*",
     "p2p-media-loader-hlsjs": "workspace:*",
-    "hls.js": "^1.5.7",
+    "rickshaw": "^1.7.1",
     "vis-network": "^9.1.9"
   },
   "devDependencies": {
+    "@types/d3": "^7.4.3",
     "@types/dplayer": "^1.25.5",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",

packages/p2p-media-loader-demo/src/components/Demo.tsx

@@ -4,24 +4,57 @@ import { PLAYERS } from "../constants";
 import { useQueryParams } from "../hooks/useQueryParams";
 import { HlsjsPlayer } from "./players/Hlsjs";
 import { GraphNetwork } from "./GraphNetwork";
+import { useCallback, useRef, useState } from "react";
+import { DownloadStatsChart } from "./chart/DownloadStatsChart";
 import "./demo.css";
-import { useCallback, useState } from "react";
-
 declare global {
   interface Window {
     Hls: typeof Hls;
     videoPlayer?: { destroy?: () => void };
   }
 }
 
+export type DownloadStats = {
+  httpDownloaded: number;
+  p2pDownloaded: number;
+  p2pUploaded: number;
+};
+
 export type Player = (typeof PLAYERS)[number];
 
 export const Demo = () => {
+  const data = useRef<DownloadStats>({
+    httpDownloaded: 0,
+    p2pDownloaded: 0,
+    p2pUploaded: 0,
+  });
+
   const { queryParams, setURLQueryParams } = useQueryParams<
     "player" | "streamUrl"
   >();
+
   const [peers, setPeers] = useState<string[]>([]);
 
+  const onChunkDownloaded = useCallback(
+    (bytesLength: number, downloadSource: string) => {
+      switch (downloadSource) {
+        case "http":
+          data.current.httpDownloaded += bytesLength;
+          break;
+        case "p2p":
+          data.current.p2pDownloaded += bytesLength;
+          break;
+        default:
+          break;
+      }
+    },
+    [],
+  );
+
+  const onChunkUploaded = useCallback((bytesLength: number) => {
+    data.current.p2pUploaded += bytesLength;
+  }, []);
+
   const onPeerConnect = useCallback((peerId: string) => {
     setPeers((peers) => {
       return [...peers, peerId];
@@ -47,6 +80,8 @@ export const Demo = () => {
             streamUrl={queryParams.streamUrl}
             onPeerConnect={onPeerConnect}
             onPeerDisconnect={onPeerDisconnect}
+            onChunkDownloaded={onChunkDownloaded}
+            onChunkUploaded={onChunkUploaded}
           />
         );
       default:
@@ -65,6 +100,7 @@ export const Demo = () => {
         />
       </div>
       <GraphNetwork peers={peers} />
+      <DownloadStatsChart downloadStatsRef={data} />
     </>
   );
 };

packages/p2p-media-loader-demo/src/components/GraphNetwork.tsx

@@ -43,9 +43,5 @@ export const GraphNetwork = ({ peers }: GraphNetworkProps) => {
     network.setData(graphData);
   }, [network, peers]);
 
-  return (
-    <>
-      <div className="graph-container" ref={containerRef} />
-    </>
-  );
+  return <div className="graph-container" ref={containerRef} />;
 };

packages/p2p-media-loader-demo/src/components/chart/ChartLegend.tsx

@@ -0,0 +1,21 @@
+type LegendItem = {
+  color: string;
+  content: string | JSX.Element;
+};
+
+type ChartLegendProps = {
+  legendItems: LegendItem[];
+};
+
+export const ChartLegend = ({ legendItems }: ChartLegendProps) => {
+  return (
+    <div className="chart-legend">
+      {legendItems.map((item, index) => (
+        <div key={index} className="line">
+          <div className="swatch" style={{ backgroundColor: item.color }} />
+          <p>{item.content}</p>
+        </div>
+      ))}
+    </div>
+  );
+};

packages/p2p-media-loader-demo/src/components/chart/DownloadStatsChart.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef, useState } from "react";
+import { DownloadStats } from "../Demo";
+import { COLORS } from "../../constants";
+import "./chart.css";
+import { ChartLegend } from "./ChartLegend";
+import { drawChart } from "./drawChart";
+
+const generateInitialStackedData = () => {
+  const nowInSeconds = Math.floor(performance.now() / 1000);
+  return Array.from({ length: 120 }, (_, i) => ({
+    seconds: nowInSeconds - (120 - i),
+    httpDownloaded: 0,
+    p2pDownloaded: 0,
+    p2pUploaded: 0,
+  }));
+};
+
+const convertToMiB = (bytes: number) => bytes / 1024 / 1024;
+const convertToMbit = (bytes: number) => (bytes * 8) / 1_000_000;
+
+const calculatePercentage = (part: number, total: number) => {
+  if (total === 0) {
+    return 0;
+  }
+  return ((part / total) * 100).toFixed(2);
+};
+
+type StatsChartProps = {
+  downloadStatsRef: React.RefObject<DownloadStats>;
+};
+
+export type ChartsData = {
+  seconds: number;
+} & DownloadStats;
+
+type StoredData = {
+  totalDownloaded: number;
+} & DownloadStats;
+
+export const DownloadStatsChart = ({ downloadStatsRef }: StatsChartProps) => {
+  const [data, setData] = useState<ChartsData[]>(generateInitialStackedData());
+  const [storedData, setStoredData] = useState<StoredData>({
+    totalDownloaded: 0,
+    httpDownloaded: 0,
+    p2pDownloaded: 0,
+    p2pUploaded: 0,
+  });
+  const svgRef = useRef(null);
+
+  useEffect(() => {
+    const intervalID = setInterval(() => {
+      if (!downloadStatsRef.current) return;
+
+      const { httpDownloaded, p2pDownloaded, p2pUploaded } =
+        downloadStatsRef.current;
+
+      setData((prevData: ChartsData[]) => {
+        const newData: ChartsData = {
+          seconds: Math.floor(performance.now() / 1000),
+          httpDownloaded: convertToMbit(httpDownloaded),
+          p2pDownloaded: convertToMbit(p2pDownloaded),
+          p2pUploaded: convertToMbit(p2pUploaded * -1),
+        };
+        return [...prevData.slice(1), newData];
+      });
+
+      setStoredData((prevData) => ({
+        totalDownloaded:
+          prevData.totalDownloaded +
+          convertToMiB(httpDownloaded + p2pDownloaded),
+        httpDownloaded: prevData.httpDownloaded + convertToMiB(httpDownloaded),
+        p2pDownloaded: prevData.p2pDownloaded + convertToMiB(p2pDownloaded),
+        p2pUploaded: prevData.p2pUploaded + convertToMiB(p2pUploaded),
+      }));
+
+      downloadStatsRef.current.httpDownloaded = 0;
+      downloadStatsRef.current.p2pDownloaded = 0;
+      downloadStatsRef.current.p2pUploaded = 0;
+    }, 1000);
+
+    return () => clearInterval(intervalID);
+  }, [downloadStatsRef]);
+
+  useEffect(() => {
+    if (!svgRef.current) return;
+
+    const svg = drawChart(svgRef, data);
+
+    return () => {
+      svg.selectAll("*").remove();
+    };
+  }, [data]);
+
+  return (
+    <div className="chart-container">
+      <div className="legend-container">
+        <ChartLegend
+          legendItems={[
+            {
+              color: COLORS.torchRed,
+              content: `Download - ${storedData.totalDownloaded.toFixed(2)} MiB `,
+            },
+            {
+              color: COLORS.yellow,
+              content: `- HTTP - ${storedData.httpDownloaded.toFixed(2)} MiB - ${calculatePercentage(storedData.httpDownloaded, storedData.totalDownloaded)}%`,
+            },
+            {
+              color: COLORS.lightOrange,
+              content: `- P2P - ${storedData.p2pDownloaded.toFixed(2)} MiB - ${calculatePercentage(storedData.p2pDownloaded, storedData.totalDownloaded)}%`,
+            },
+            {
+              color: COLORS.lightBlue,
+              content: `Upload P2P - ${storedData.p2pUploaded.toFixed(2)} MiB`,
+            },
+          ]}
+        />
+        <ChartLegend
+          legendItems={[
+            {
+              color: COLORS.torchRed,
+              content: `Download - ${data[data.length - 1].httpDownloaded.toFixed(2)} Mbit/s`,
+            },
+            {
+              color: COLORS.yellow,
+              content: `- HTTP - ${data[data.length - 1].httpDownloaded.toFixed(2)} Mbit/s`,
+            },
+            {
+              color: COLORS.lightOrange,
+              content: `- P2P - ${data[data.length - 1].p2pDownloaded.toFixed(2)} Mbit/s`,
+            },
+            {
+              color: COLORS.lightBlue,
+              content: `Upload P2P - ${(data[data.length - 1].p2pUploaded * -1).toFixed(2)} Mbit/s`,
+            },
+          ]}
+        />
+      </div>
+      <svg ref={svgRef} width={710} height={310} />
+    </div>
+  );
+};

packages/p2p-media-loader-demo/src/components/chart/chart.css

@@ -0,0 +1,55 @@
+.legend-container {
+  margin-top: 10px;
+  position: absolute;
+}
+
+.chart-legend {
+  position: relative;
+  margin-top: 30px;
+  margin-left: 40px;
+  height: 70px;
+  font-family: Arial;
+  font-size: 12px;
+  color: #fff;
+  background: #404040;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 5px;
+  border-radius: 2px;
+  opacity: 0.8;
+}
+
+.chart-legend p {
+  margin: 0;
+  color: #fff;
+}
+
+.chart-legend p::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+}
+
+.chart-legend .line {
+  margin-right: 3px;
+  margin-left: 4px;
+  border-radius: 2px;
+  clear: both;
+  line-height: 140%;
+  padding-right: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.chart-legend .swatch {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.chart-legend .line .swatch {
+  display: inline-block;
+  margin-right: 3px;
+  border-radius: 2px;
+}