xevion/byte-me
1
0
Fork 0
mirror of https://github.com/Xevion/byte-me.git synced 2025-12-10 20:06:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix prettier ignore, reformat everything

Browse Source
This commit is contained in:
Xevion
2025-07-14 16:44:28 -05:00
parent 88658fc6f5
commit c172fe4e31
19 changed files with 2013 additions and 1244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/App.tsx
View File

@@ -1,6 +1,6 @@
type Frame = {
id: string;
data: { x: string | number; y: number }[];
id: string;
data: { x: string | number; y: number }[];
};
import { getCurrentWebview } from "@tauri-apps/api/webview";
@@ -9,43 +9,43 @@ import Graph from "./components/graph.js";
import DropOverlay from "./components/drop-overlay.js";
function App() {
const data: Frame[] = [];
const data: Frame[] = [];
const [paths, setPaths] = useState<string[]>([]);
useEffect(() => {
const unlistenPromise = getCurrentWebview().onDragDropEvent(
async ({ payload }) => {
if (payload.type === "enter") {
setPaths(payload.paths);
console.log("User hovering", payload);
} else if (payload.type === "leave" || payload.type === "drop") {
setPaths([]);
console.log("User left", payload);
}
}
);
const [paths, setPaths] = useState<string[]>([]);
useEffect(() => {
const unlistenPromise = getCurrentWebview().onDragDropEvent(
async ({ payload }) => {
if (payload.type === "enter") {
setPaths(payload.paths);
console.log("User hovering", payload);
} else if (payload.type === "leave" || payload.type === "drop") {
setPaths([]);
console.log("User left", payload);
}
},
);
// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
return () => {
unlistenPromise.then((unlisten) => {
unlisten();
console.log("Unlistened");
});
};
}, []);
// you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
return () => {
unlistenPromise.then((unlisten) => {
unlisten();
console.log("Unlistened");
});
};
}, []);
const graph = <Graph data={data} />;
const graph = <Graph data={data} />;
return (
<div
id="App"
className="min-h-screen min-w-screen overflow-hidden"
style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
>
<DropOverlay paths={paths} />
{graph}
</div>
);
return (
<div
id="App"
className="min-h-screen min-w-screen overflow-hidden"
style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
>
<DropOverlay paths={paths} />
{graph}
</div>
);
}
export default App;

2
src/components/drop-overlay.tsx
View File

@@ -116,7 +116,7 @@ const DropOverlay = ({ paths }: DropOverlayProps) => {
<span className="inline-block w-32 h-5 bg-neutral-300/10 rounded animate-pulse" />
}
/>
))
)),
)
.with({ status: "ready" }, (r) => {
return r.files

144
src/components/graph.tsx
View File

@@ -2,84 +2,84 @@ import { ResponsiveLine } from "@nivo/line";
import { formatBytes } from "../lib/format.js";
type Frame = {
id: string;
data: { x: string | number; y: number }[];
id: string;
data: { x: string | number; y: number }[];
};
type GraphProps = {
data: Frame[];
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: "transportation", legendOffset: 36 }}
axisLeft={{
legend: "count",
legendOffset: -40,
format: (v) => formatBytes(v * 1024 * 53),
}}
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",
},
]}
/>
<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: "transportation", legendOffset: 36 }}
axisLeft={{
legend: "count",
legendOffset: -40,
format: (v) => formatBytes(v * 1024 * 53),
}}
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;

26
src/global.css
View File

@@ -1,22 +1,22 @@
@import "tailwindcss";
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #e0def4;
background-color: #232136;
color: #e0def4;
background-color: #232136;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
#app {
height: 100vh;
text-align: center;
height: 100vh;
text-align: center;
}

22
src/lib/format.test.ts
View File

@@ -2,27 +2,27 @@ import { formatBytes } from "./format.js";
import { test, expect } from "vitest";
test("formats bytes less than 1024", () => {
expect(formatBytes(512)).toBe("512 B");
expect(formatBytes(512)).toBe("512 B");
});
test("formats KiB correctly", () => {
expect(formatBytes(2048)).toBe("2 KiB");
expect(formatBytes(1536)).toBe("1.5 KiB");
expect(formatBytes(1024)).toBe("1 KiB");
expect(formatBytes(2048)).toBe("2 KiB");
expect(formatBytes(1536)).toBe("1.5 KiB");
expect(formatBytes(1024)).toBe("1 KiB");
});
test("formats MiB correctly", () => {
expect(formatBytes(1048576)).toBe("1 MiB");
expect(formatBytes(1572864)).toBe("1.5 MiB");
expect(formatBytes(2097152)).toBe("2 MiB");
expect(formatBytes(1048576)).toBe("1 MiB");
expect(formatBytes(1572864)).toBe("1.5 MiB");
expect(formatBytes(2097152)).toBe("2 MiB");
});
test("formats GiB correctly", () => {
expect(formatBytes(1073741824)).toBe("1 GiB");
expect(formatBytes(1610612736)).toBe("1.5 GiB");
expect(formatBytes(2147483648)).toBe("2 GiB");
expect(formatBytes(1073741824)).toBe("1 GiB");
expect(formatBytes(1610612736)).toBe("1.5 GiB");
expect(formatBytes(2147483648)).toBe("2 GiB");
});
test("formats large values with no decimal if intValue >= 1000", () => {
expect(formatBytes(1024 * 1024 * 1000)).toBe("1000 MiB");
expect(formatBytes(1024 * 1024 * 1000)).toBe("1000 MiB");
});

40
src/lib/format.ts
View File

@@ -11,28 +11,28 @@
* @returns The formatted string with the appropriate unit.
*/
export function formatBytes(v: number): string {
if (v < 1024) return `${v} B`;
if (v < 1024) return `${v} B`;
const units = ["KiB", "MiB", "GiB", "TiB"];
let unitIndex = -1;
let value = v;
const units = ["KiB", "MiB", "GiB", "TiB"];
let unitIndex = -1;
let value = v;
while (value >= 1024 && unitIndex < units.length - 1) {
value /= 1024;
unitIndex++;
}
while (value >= 1024 && unitIndex < units.length - 1) {
value /= 1024;
unitIndex++;
}
const intValue = Math.floor(value);
const decimal = value - intValue;
const intValue = Math.floor(value);
const decimal = value - intValue;
if (intValue >= 1000) {
// More than 3 digits, no decimal
return `${intValue} ${units[unitIndex]}`;
} else if (decimal >= 0.1) {
// Show 1 decimal if decimal >= 0.1
return `${value.toFixed(1)} ${units[unitIndex]}`;
} else {
// No decimal
return `${intValue} ${units[unitIndex]}`;
}
if (intValue >= 1000) {
// More than 3 digits, no decimal
return `${intValue} ${units[unitIndex]}`;
} else if (decimal >= 0.1) {
// Show 1 decimal if decimal >= 0.1
return `${value.toFixed(1)} ${units[unitIndex]}`;
} else {
// No decimal
return `${intValue} ${units[unitIndex]}`;
}
}

6
src/main.tsx
View File

@@ -4,7 +4,7 @@ import App from "./App";
import "./global.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>,
);