REDCODE
d3124c55bd
Adds Chart.js visualizations for the stats distributions alongside the existing tables: - Vendors Chart.js (4.4.7) into wwwroot/lib/js/ and adds a small statsCharts.js interop wrapper with byte formatting for the storage chart's y-axis and tooltips. - New StatChart shared component (canvas + IJSRuntime lifecycle, following the existing ProfileCropper interop pattern). - Stats page charts: storage by type (bar), file formats (doughnut), resolution distribution (bar), monthly growth (line). Refs #177
39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="dark" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<base href="/"/>
|
|
<link href="css/MilkyShot.css" rel="stylesheet"/>
|
|
<link href="css/app.css" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="MilkStream.Client.styles.css"/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="icon" type="image/svg+xml" href="img/MilkyShotLogoWhite.svg"/>
|
|
<link rel="alternate icon" type="image/png" href="favicon.png?v=2"/>
|
|
<title>Milkstream</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="d-flex align-items-center flex-column m-5">
|
|
<div class="spinner-border text-info m-2"></div>
|
|
<div class="m-2">
|
|
<strong class="text-info-emphasis">Loading...</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="lib/js/bootstrap.bundle.min.js"></script>
|
|
<script src="lib/js/chart.umd.min.js"></script>
|
|
<script src="_framework/blazor.webassembly.js"></script>
|
|
<script src="js/masonryObserver.js"></script>
|
|
<script src="js/profileCropper.js"></script>
|
|
<script src="js/statsCharts.js"></script>
|
|
</body>
|
|
|
|
</html>
|