mirror of
https://github.com/Xevion/byte-me.git
synced 2025-12-15 16:11:19 -06:00
9645e1b6b5
Add comprehensive bitrate data extraction and visualization capabilities: - Implement analyze_files command for file candidacy detection - Add extract_bitrate_data command using ffprobe - Create BitrateData, BitrateFrame, File, and FileCandidacy types with TS bindings - Update App to fetch and display bitrate data from dropped files - Refactor DropOverlay to use new file analysis system - Configure Graph component for packet size visualization - Simplify drag-drop flow to trigger on drop event only
82 lines
1.5 KiB
TypeScript
82 lines
1.5 KiB
TypeScript
import { ResponsiveLine } from "@nivo/line";
|
|
import { formatBytes } from "@/lib/format";
|
|
import type { Frame } from "@/types/graph";
|
|
|
|
type GraphProps = {
|
|
data: Frame[];
|
|
};
|
|
|
|
const Graph = ({ data }: GraphProps) => (
|
|
<ResponsiveLine
|
|
data={data}
|
|
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
|
|
xScale={{ type: "linear" }}
|
|
yScale={{
|
|
type: "linear",
|
|
min: 0,
|
|
max: "auto",
|
|
stacked: false,
|
|
reverse: false,
|
|
}}
|
|
theme={{
|
|
tooltip: {
|
|
container: {
|
|
backgroundColor: "#2e2b45",
|
|
},
|
|
},
|
|
grid: {
|
|
line: {
|
|
stroke: "rgb(252, 191, 212)",
|
|
strokeWidth: 0.35,
|
|
strokeOpacity: 0.75,
|
|
},
|
|
},
|
|
crosshair: {
|
|
line: {
|
|
stroke: "#fdd3e2",
|
|
strokeWidth: 1,
|
|
},
|
|
},
|
|
axis: {
|
|
legend: {},
|
|
domain: {
|
|
line: {
|
|
stroke: "rgb(252, 191, 212)",
|
|
strokeWidth: 0.5,
|
|
strokeOpacity: 0.5,
|
|
},
|
|
},
|
|
},
|
|
text: {
|
|
fill: "#6e6a86",
|
|
},
|
|
}}
|
|
axisBottom={{ legend: "Frame Number", legendOffset: 36 }}
|
|
axisLeft={{
|
|
legend: "Packet Size",
|
|
legendOffset: -40,
|
|
format: (v) => formatBytes(v),
|
|
}}
|
|
pointSize={10}
|
|
colors={["#3e8faf", "#c4a7e7", "#f5c276", "#EA9B96", "#EB7092", "#9CCFD8"]}
|
|
pointBorderWidth={0}
|
|
pointBorderColor={{ from: "seriesColor" }}
|
|
pointLabelYOffset={-12}
|
|
enableSlices={"x"}
|
|
enableTouchCrosshair={true}
|
|
useMesh={true}
|
|
legends={[
|
|
{
|
|
anchor: "bottom-right",
|
|
direction: "column",
|
|
translateX: 100,
|
|
itemWidth: 80,
|
|
itemHeight: 22,
|
|
symbolShape: "circle",
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
|
|
export default Graph;
|