feat(webui): migrate stats page to react
- move the stats route onto the React shell with Recharts-based visualizations - remove the global Chart.js include and add a local stats seed script for easier testing - keep parity coverage with route, API, and helper tests while preserving the legacy page layout
This commit is contained in:
Antti Kettunen
parent
f6c6fc8579
commit
b24152c74b
15 changed files with 3002 additions and 7 deletions
|
|
@ -8142,7 +8142,6 @@
|
|||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='vendor/socket.io.min.js', v=static_v) }}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
||||
{{ vite_assets('body')|safe }}
|
||||
<script src="{{ url_for('static', filename='setup-wizard.js', v=static_v) }}"></script>
|
||||
<!-- Split modules (was: script.js) — core.js must load first, init.js before shell-bridge.js -->
|
||||
|
|
|
|||
372
webui/package-lock.json
generated
372
webui/package-lock.json
generated
|
|
@ -14,6 +14,7 @@
|
|||
"ky": "^2.0.2",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"recharts": "^3.8.1",
|
||||
"zod": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1697,6 +1698,42 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
|
||||
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^11.0.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "11.1.8",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
|
||||
"integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm64": {
|
||||
"version": "1.0.0-rc.17",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
|
||||
|
|
@ -1983,7 +2020,12 @@
|
|||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
|
||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tanstack/devtools-event-client": {
|
||||
|
|
@ -2412,6 +2454,69 @@
|
|||
"assertion-error": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
|
||||
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
|
||||
"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/deep-eql": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
|
||||
|
|
@ -2473,6 +2578,12 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
|
||||
|
|
@ -2954,6 +3065,127 @@
|
|||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/data-urls": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
|
||||
|
|
@ -2993,6 +3225,12 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
|
|
@ -3058,6 +3296,16 @@
|
|||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.46.1",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.46.1.tgz",
|
||||
"integrity": "sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
|
|
@ -3078,6 +3326,12 @@
|
|||
"@types/estree": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
|
||||
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/expect-type": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
|
||||
|
|
@ -3228,6 +3482,16 @@
|
|||
"node": "^20.19.0 || ^22.12.0 || >=24.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/indent-string": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
||||
|
|
@ -3238,6 +3502,15 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
|
|
@ -4116,10 +4389,32 @@
|
|||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
|
|
@ -4146,6 +4441,36 @@
|
|||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
|
||||
"integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.0 || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redent": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
|
||||
|
|
@ -4160,6 +4485,21 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
|
|
@ -4423,6 +4763,12 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinybench": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
|
||||
|
|
@ -4656,6 +5002,28 @@
|
|||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "8.0.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.0.10.tgz",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"ky": "^2.0.2",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"recharts": "^3.8.1",
|
||||
"zod": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
22
webui/src/platform/shell/globals.d.ts
vendored
22
webui/src/platform/shell/globals.d.ts
vendored
|
|
@ -46,6 +46,28 @@ declare global {
|
|||
cancelSimilarArtistsLoad: () => void;
|
||||
showReactHost: (pageId: ShellPageId) => void;
|
||||
};
|
||||
navigateToArtistDetail?: (
|
||||
artistId: string | number,
|
||||
artistName: string,
|
||||
sourceOverride?: string | null,
|
||||
options?: Record<string, unknown>,
|
||||
) => void;
|
||||
playLibraryTrack?: (
|
||||
track: {
|
||||
id: string | number;
|
||||
title: string;
|
||||
file_path: string;
|
||||
bitrate?: string | number | null;
|
||||
artist_id?: string | number | null;
|
||||
album_id?: string | number | null;
|
||||
_stats_image?: string | null;
|
||||
},
|
||||
albumTitle: string,
|
||||
artistName: string,
|
||||
) => void | Promise<void>;
|
||||
startStream?: (searchResult: Record<string, unknown>) => void | Promise<void>;
|
||||
showLoadingOverlay?: (message?: string) => void;
|
||||
hideLoadingOverlay?: () => void;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const shellRouteManifest: readonly ShellRouteDefinition[] = [
|
|||
{ pageId: 'library', path: '/library', kind: 'legacy' },
|
||||
{ pageId: 'tools', path: '/tools', kind: 'legacy' },
|
||||
{ pageId: 'artist-detail', path: '/artist-detail', kind: 'legacy' },
|
||||
{ pageId: 'stats', path: '/stats', kind: 'legacy' },
|
||||
{ pageId: 'stats', path: '/stats', kind: 'react' },
|
||||
{ pageId: 'settings', path: '/settings', kind: 'legacy' },
|
||||
{ pageId: 'issues', path: '/issues', kind: 'react' },
|
||||
{ pageId: 'help', path: '/help', kind: 'legacy' },
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as SplatRouteImport } from './routes/$'
|
||||
import { Route as StatsRouteRouteImport } from './routes/stats/route'
|
||||
import { Route as IssuesRouteRouteImport } from './routes/issues/route'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as ArtistDetailSourceIdRouteImport } from './routes/artist-detail/$source/$id'
|
||||
|
|
@ -19,6 +20,11 @@ const SplatRoute = SplatRouteImport.update({
|
|||
path: '/$',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const StatsRouteRoute = StatsRouteRouteImport.update({
|
||||
id: '/stats',
|
||||
path: '/stats',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IssuesRouteRoute = IssuesRouteRouteImport.update({
|
||||
id: '/issues',
|
||||
path: '/issues',
|
||||
|
|
@ -38,12 +44,14 @@ const ArtistDetailSourceIdRoute = ArtistDetailSourceIdRouteImport.update({
|
|||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/issues': typeof IssuesRouteRoute
|
||||
'/stats': typeof StatsRouteRoute
|
||||
'/$': typeof SplatRoute
|
||||
'/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/issues': typeof IssuesRouteRoute
|
||||
'/stats': typeof StatsRouteRoute
|
||||
'/$': typeof SplatRoute
|
||||
'/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
|
||||
}
|
||||
|
|
@ -51,20 +59,28 @@ export interface FileRoutesById {
|
|||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/issues': typeof IssuesRouteRoute
|
||||
'/stats': typeof StatsRouteRoute
|
||||
'/$': typeof SplatRoute
|
||||
'/artist-detail/$source/$id': typeof ArtistDetailSourceIdRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/issues' | '/$' | '/artist-detail/$source/$id'
|
||||
fullPaths: '/' | '/issues' | '/stats' | '/$' | '/artist-detail/$source/$id'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/' | '/issues' | '/$' | '/artist-detail/$source/$id'
|
||||
id: '__root__' | '/' | '/issues' | '/$' | '/artist-detail/$source/$id'
|
||||
to: '/' | '/issues' | '/stats' | '/$' | '/artist-detail/$source/$id'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/issues'
|
||||
| '/stats'
|
||||
| '/$'
|
||||
| '/artist-detail/$source/$id'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
IssuesRouteRoute: typeof IssuesRouteRoute
|
||||
StatsRouteRoute: typeof StatsRouteRoute
|
||||
SplatRoute: typeof SplatRoute
|
||||
ArtistDetailSourceIdRoute: typeof ArtistDetailSourceIdRoute
|
||||
}
|
||||
|
|
@ -78,6 +94,13 @@ declare module '@tanstack/react-router' {
|
|||
preLoaderRoute: typeof SplatRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/stats': {
|
||||
id: '/stats'
|
||||
path: '/stats'
|
||||
fullPath: '/stats'
|
||||
preLoaderRoute: typeof StatsRouteRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/issues': {
|
||||
id: '/issues'
|
||||
path: '/issues'
|
||||
|
|
@ -105,6 +128,7 @@ declare module '@tanstack/react-router' {
|
|||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
IssuesRouteRoute: IssuesRouteRoute,
|
||||
StatsRouteRoute: StatsRouteRoute,
|
||||
SplatRoute: SplatRoute,
|
||||
ArtistDetailSourceIdRoute: ArtistDetailSourceIdRoute,
|
||||
}
|
||||
|
|
|
|||
126
webui/src/routes/stats/-route.test.tsx
Normal file
126
webui/src/routes/stats/-route.test.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { createMemoryHistory } from '@tanstack/react-router';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import type { ShellBridge, ShellPageId } from '@/platform/shell/bridge';
|
||||
|
||||
import { createAppQueryClient } from '@/app/query-client';
|
||||
import { AppRouterProvider, createAppRouter } from '@/app/router';
|
||||
|
||||
function createResponse(body: unknown, ok = true, status = 200) {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
function createShellBridge(overrides: Partial<ShellBridge> = {}): ShellBridge {
|
||||
return {
|
||||
getCurrentProfileContext: vi.fn(() => ({ profileId: 2, isAdmin: true })),
|
||||
isPageAllowed: vi.fn(() => true),
|
||||
getProfileHomePage: vi.fn<() => ShellPageId>(() => 'discover'),
|
||||
resolveLegacyPath: vi.fn<(pathname: string) => ShellPageId | null>(() => 'search'),
|
||||
setActivePageChrome: vi.fn(),
|
||||
activateLegacyPath: vi.fn(),
|
||||
showReactHost: vi.fn(),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function renderStatsRoute(initialEntries = ['/stats']) {
|
||||
const queryClient = createAppQueryClient();
|
||||
const history = createMemoryHistory({ initialEntries });
|
||||
const router = createAppRouter({ history, queryClient });
|
||||
|
||||
return {
|
||||
history,
|
||||
...render(<AppRouterProvider router={router} queryClient={queryClient} />),
|
||||
};
|
||||
}
|
||||
|
||||
describe('stats route', () => {
|
||||
beforeEach(() => {
|
||||
window.SoulSyncWebShellBridge = createShellBridge();
|
||||
window.navigateToArtistDetail = vi.fn();
|
||||
window.playLibraryTrack = vi.fn();
|
||||
window.startStream = vi.fn();
|
||||
window.showLoadingOverlay = vi.fn();
|
||||
window.hideLoadingOverlay = vi.fn();
|
||||
window.showToast = vi.fn();
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn(async (input: RequestInfo | URL) => {
|
||||
const url = input instanceof Request ? input.url : String(input);
|
||||
if (url.includes('/api/stats/cached')) {
|
||||
return createResponse({
|
||||
success: true,
|
||||
overview: {
|
||||
total_plays: 24,
|
||||
total_time_ms: 6_600_000,
|
||||
unique_artists: 3,
|
||||
unique_albums: 4,
|
||||
unique_tracks: 12,
|
||||
},
|
||||
top_artists: [{ id: 7, name: 'Artist A', play_count: 10 }],
|
||||
top_albums: [],
|
||||
top_tracks: [],
|
||||
timeline: [{ date: 'May 10', plays: 4 }],
|
||||
genres: [{ genre: 'House', play_count: 10, percentage: 80 }],
|
||||
recent: [{ title: 'Track A', artist: 'Artist A', played_at: '2026-05-14T08:00:00Z' }],
|
||||
health: { total_tracks: 12, format_breakdown: { FLAC: 12 } },
|
||||
});
|
||||
}
|
||||
if (url.includes('/api/listening-stats/status')) {
|
||||
return createResponse({ stats: { last_poll: '2026-05-14 10:00:00' } });
|
||||
}
|
||||
if (url.includes('/api/stats/db-storage')) {
|
||||
return createResponse({
|
||||
success: true,
|
||||
tables: [{ name: 'tracks', size: 2048 }],
|
||||
total_file_size: 4096,
|
||||
method: 'dbstat',
|
||||
});
|
||||
}
|
||||
if (url.includes('/api/stats/library-disk-usage')) {
|
||||
return createResponse({
|
||||
success: true,
|
||||
has_data: true,
|
||||
total_bytes: 2048,
|
||||
tracks_with_size: 12,
|
||||
tracks_without_size: 0,
|
||||
by_format: { flac: 2048 },
|
||||
});
|
||||
}
|
||||
return createResponse({ success: true });
|
||||
}) as unknown as typeof fetch,
|
||||
);
|
||||
});
|
||||
|
||||
it('renders the stats page through the app router', async () => {
|
||||
renderStatsRoute();
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('stats-page')).toBeInTheDocument());
|
||||
expect(await screen.findByText('Listening Stats')).toBeInTheDocument();
|
||||
expect(screen.getByText('24')).toBeInTheDocument();
|
||||
expect(window.SoulSyncWebShellBridge?.showReactHost).toHaveBeenCalledWith('stats');
|
||||
expect(window.SoulSyncWebShellBridge?.setActivePageChrome).toHaveBeenCalledWith('stats');
|
||||
});
|
||||
|
||||
it('stores the time range in route search state', async () => {
|
||||
const { history } = renderStatsRoute();
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: '30 Days' }));
|
||||
|
||||
await waitFor(() => expect(history.location.search).toContain('range=30d'));
|
||||
});
|
||||
|
||||
it('redirects back home when the page is not allowed', async () => {
|
||||
window.SoulSyncWebShellBridge = createShellBridge({
|
||||
isPageAllowed: vi.fn((pageId) => pageId !== 'stats'),
|
||||
});
|
||||
|
||||
const { history } = renderStatsRoute(['/stats']);
|
||||
|
||||
await waitFor(() => expect(history.location.pathname).toBe('/discover'));
|
||||
});
|
||||
});
|
||||
103
webui/src/routes/stats/-stats.api.test.ts
Normal file
103
webui/src/routes/stats/-stats.api.test.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { HttpResponse, http, server } from '@/test/msw';
|
||||
|
||||
import {
|
||||
fetchListeningStatsStatus,
|
||||
fetchStatsCached,
|
||||
fetchStatsDbStorage,
|
||||
fetchStatsLibraryDiskUsage,
|
||||
resolveStatsTrack,
|
||||
streamStatsTrack,
|
||||
triggerListeningStatsSync,
|
||||
} from './-stats.api';
|
||||
|
||||
describe('stats api', () => {
|
||||
it('fetches the cached stats payload for a range', async () => {
|
||||
server.use(
|
||||
http.get('/api/stats/cached', ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
expect(url.searchParams.get('range')).toBe('30d');
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
overview: { total_plays: 12 },
|
||||
top_artists: [],
|
||||
top_albums: [],
|
||||
top_tracks: [],
|
||||
timeline: [],
|
||||
genres: [],
|
||||
recent: [],
|
||||
health: {},
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
await expect(fetchStatsCached('30d')).resolves.toMatchObject({
|
||||
overview: { total_plays: 12 },
|
||||
});
|
||||
});
|
||||
|
||||
it('surfaces db storage and disk usage errors', async () => {
|
||||
server.use(
|
||||
http.get('/api/stats/db-storage', () =>
|
||||
HttpResponse.json({ error: 'db unavailable' }, { status: 500 }),
|
||||
),
|
||||
http.get('/api/stats/library-disk-usage', () =>
|
||||
HttpResponse.json({ error: 'disk unavailable' }, { status: 500 }),
|
||||
),
|
||||
);
|
||||
|
||||
await expect(fetchStatsDbStorage()).rejects.toThrow('db unavailable');
|
||||
await expect(fetchStatsLibraryDiskUsage()).rejects.toThrow('disk unavailable');
|
||||
});
|
||||
|
||||
it('reads listening status and triggers manual sync', async () => {
|
||||
server.use(
|
||||
http.get('/api/listening-stats/status', () =>
|
||||
HttpResponse.json({ stats: { last_poll: '2026-05-14 10:00:00' } }),
|
||||
),
|
||||
http.post('/api/listening-stats/sync', () => HttpResponse.json({ success: true })),
|
||||
);
|
||||
|
||||
await expect(fetchListeningStatsStatus()).resolves.toEqual({
|
||||
stats: { last_poll: '2026-05-14 10:00:00' },
|
||||
});
|
||||
await expect(triggerListeningStatsSync()).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
it('resolves and streams tracks through the stats playback helpers', async () => {
|
||||
server.use(
|
||||
http.post('/api/stats/resolve-track', async ({ request }) => {
|
||||
await expect(request.json()).resolves.toEqual({
|
||||
title: 'Track',
|
||||
artist: 'Artist',
|
||||
});
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
track: { id: 1, title: 'Track', file_path: '/music/track.flac' },
|
||||
});
|
||||
}),
|
||||
http.post('/api/enhanced-search/stream-track', async ({ request }) => {
|
||||
await expect(request.json()).resolves.toEqual({
|
||||
track_name: 'Track',
|
||||
artist_name: 'Artist',
|
||||
album_name: 'Album',
|
||||
duration_ms: 0,
|
||||
});
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
result: { stream_url: '/api/stream/1' },
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
await expect(resolveStatsTrack('Track', 'Artist')).resolves.toMatchObject({
|
||||
id: 1,
|
||||
title: 'Track',
|
||||
});
|
||||
await expect(streamStatsTrack('Track', 'Artist', 'Album')).resolves.toEqual({
|
||||
stream_url: '/api/stream/1',
|
||||
});
|
||||
});
|
||||
});
|
||||
124
webui/src/routes/stats/-stats.api.ts
Normal file
124
webui/src/routes/stats/-stats.api.ts
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import { queryOptions, type QueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { apiClient, readJson } from '@/app/api-client';
|
||||
|
||||
import type {
|
||||
ListeningStatsStatus,
|
||||
StatsCachedPayload,
|
||||
StatsDbStoragePayload,
|
||||
StatsLibraryDiskUsagePayload,
|
||||
StatsRange,
|
||||
StatsResolveTrackPayload,
|
||||
StatsStreamTrackPayload,
|
||||
} from './-stats.types';
|
||||
|
||||
export const STATS_QUERY_KEY = ['stats'] as const;
|
||||
|
||||
export async function fetchStatsCached(range: StatsRange): Promise<StatsCachedPayload> {
|
||||
const payload = await readJson<StatsCachedPayload>(
|
||||
apiClient.get('stats/cached', {
|
||||
searchParams: { range },
|
||||
}),
|
||||
);
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.error || 'Failed to load listening stats');
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
export async function fetchListeningStatsStatus(): Promise<ListeningStatsStatus> {
|
||||
return await readJson<ListeningStatsStatus>(apiClient.get('listening-stats/status'));
|
||||
}
|
||||
|
||||
export async function fetchStatsDbStorage(): Promise<StatsDbStoragePayload> {
|
||||
const payload = await readJson<StatsDbStoragePayload>(apiClient.get('stats/db-storage'));
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.error || 'Failed to load database storage');
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
export async function fetchStatsLibraryDiskUsage(): Promise<StatsLibraryDiskUsagePayload> {
|
||||
const payload = await readJson<StatsLibraryDiskUsagePayload>(
|
||||
apiClient.get('stats/library-disk-usage'),
|
||||
);
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.error || 'Failed to load library disk usage');
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
export async function triggerListeningStatsSync(): Promise<void> {
|
||||
const payload = await readJson<{ success: boolean; error?: string }>(
|
||||
apiClient.post('listening-stats/sync'),
|
||||
);
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.error || 'Sync failed');
|
||||
}
|
||||
}
|
||||
|
||||
export async function resolveStatsTrack(
|
||||
title: string,
|
||||
artist: string,
|
||||
): Promise<StatsResolveTrackPayload['track'] | null> {
|
||||
const payload = await readJson<StatsResolveTrackPayload>(
|
||||
apiClient.post('stats/resolve-track', {
|
||||
json: { title, artist },
|
||||
}),
|
||||
);
|
||||
if (!payload.success) return null;
|
||||
return payload.track ?? null;
|
||||
}
|
||||
|
||||
export async function streamStatsTrack(
|
||||
title: string,
|
||||
artist: string,
|
||||
album: string,
|
||||
): Promise<Record<string, unknown> | null> {
|
||||
const payload = await readJson<StatsStreamTrackPayload>(
|
||||
apiClient.post('enhanced-search/stream-track', {
|
||||
json: {
|
||||
track_name: title,
|
||||
artist_name: artist,
|
||||
album_name: album,
|
||||
duration_ms: 0,
|
||||
},
|
||||
}),
|
||||
);
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.error || 'Track not found in library or any source');
|
||||
}
|
||||
return payload.result ?? null;
|
||||
}
|
||||
|
||||
export function statsCachedQueryOptions(range: StatsRange) {
|
||||
return queryOptions({
|
||||
queryKey: [...STATS_QUERY_KEY, 'cached', range],
|
||||
queryFn: () => fetchStatsCached(range),
|
||||
});
|
||||
}
|
||||
|
||||
export function listeningStatsStatusQueryOptions() {
|
||||
return queryOptions({
|
||||
queryKey: [...STATS_QUERY_KEY, 'listening-status'],
|
||||
queryFn: fetchListeningStatsStatus,
|
||||
});
|
||||
}
|
||||
|
||||
export function statsDbStorageQueryOptions() {
|
||||
return queryOptions({
|
||||
queryKey: [...STATS_QUERY_KEY, 'db-storage'],
|
||||
queryFn: fetchStatsDbStorage,
|
||||
});
|
||||
}
|
||||
|
||||
export function statsLibraryDiskUsageQueryOptions() {
|
||||
return queryOptions({
|
||||
queryKey: [...STATS_QUERY_KEY, 'library-disk-usage'],
|
||||
queryFn: fetchStatsLibraryDiskUsage,
|
||||
});
|
||||
}
|
||||
|
||||
export function invalidateStatsQueries(queryClient: QueryClient) {
|
||||
return queryClient.invalidateQueries({ queryKey: STATS_QUERY_KEY });
|
||||
}
|
||||
67
webui/src/routes/stats/-stats.helpers.test.ts
Normal file
67
webui/src/routes/stats/-stats.helpers.test.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import {
|
||||
formatBytes,
|
||||
formatDbStorageValue,
|
||||
formatListeningTime,
|
||||
formatRelativePlayedAt,
|
||||
getTopArtistBubbles,
|
||||
groupDbStorageTables,
|
||||
hasStatsData,
|
||||
} from './-stats.helpers';
|
||||
import { statsSearchSchema } from './-stats.types';
|
||||
|
||||
describe('statsSearchSchema', () => {
|
||||
it('falls back to 7d for unknown ranges', () => {
|
||||
expect(statsSearchSchema.parse({ range: 'bad' })).toEqual({ range: '7d' });
|
||||
});
|
||||
|
||||
it('keeps known ranges', () => {
|
||||
expect(statsSearchSchema.parse({ range: '12m' })).toEqual({ range: '12m' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('stats helpers', () => {
|
||||
it('detects whether the page has listening data', () => {
|
||||
expect(hasStatsData({ total_plays: 0 })).toBe(false);
|
||||
expect(hasStatsData({ total_plays: 4 })).toBe(true);
|
||||
});
|
||||
|
||||
it('formats listening time and bytes', () => {
|
||||
expect(formatListeningTime(3_900_000)).toBe('1h 5m');
|
||||
expect(formatBytes(2_097_152)).toBe('2.00 MB');
|
||||
});
|
||||
|
||||
it('formats relative recent-play times', () => {
|
||||
const now = new Date('2026-05-14T12:00:00.000Z').getTime();
|
||||
expect(formatRelativePlayedAt('2026-05-14T11:15:00.000Z', now)).toBe('45m ago');
|
||||
expect(formatRelativePlayedAt('2026-05-14T08:00:00.000Z', now)).toBe('4h ago');
|
||||
});
|
||||
|
||||
it('groups db storage rows into Other after the top eight', () => {
|
||||
const grouped = groupDbStorageTables(
|
||||
Array.from({ length: 10 }, (_, index) => ({
|
||||
name: `table_${index + 1}`,
|
||||
size: index + 1,
|
||||
})),
|
||||
);
|
||||
|
||||
expect(grouped).toHaveLength(9);
|
||||
expect(grouped.at(-1)).toEqual({ name: 'Other', size: 19 });
|
||||
});
|
||||
|
||||
it('formats db storage by method', () => {
|
||||
expect(formatDbStorageValue(2_097_152, 'dbstat')).toBe('2.0 MB');
|
||||
expect(formatDbStorageValue(1240, 'rowcount')).toBe('1,240 rows');
|
||||
});
|
||||
|
||||
it('shapes top artist bubbles from the highest-play artist', () => {
|
||||
const bubbles = getTopArtistBubbles([
|
||||
{ name: 'A', play_count: 20 },
|
||||
{ name: 'B', play_count: 10 },
|
||||
]);
|
||||
|
||||
expect(bubbles[0]?.percent).toBe(100);
|
||||
expect(bubbles[1]?.percent).toBe(50);
|
||||
});
|
||||
});
|
||||
162
webui/src/routes/stats/-stats.helpers.ts
Normal file
162
webui/src/routes/stats/-stats.helpers.ts
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import type {
|
||||
StatsArtistRow,
|
||||
StatsCachedPayload,
|
||||
StatsDbStorageTable,
|
||||
StatsHealth,
|
||||
StatsOverview,
|
||||
StatsRange,
|
||||
} from './-stats.types';
|
||||
|
||||
export const EMPTY_STATS_OVERVIEW: StatsOverview = {
|
||||
total_plays: 0,
|
||||
total_time_ms: 0,
|
||||
unique_artists: 0,
|
||||
unique_albums: 0,
|
||||
unique_tracks: 0,
|
||||
};
|
||||
|
||||
export const EMPTY_STATS_PAYLOAD: Required<
|
||||
Pick<
|
||||
StatsCachedPayload,
|
||||
'overview' | 'top_artists' | 'top_albums' | 'top_tracks' | 'timeline' | 'genres' | 'recent'
|
||||
>
|
||||
> & { health: StatsHealth } = {
|
||||
overview: EMPTY_STATS_OVERVIEW,
|
||||
top_artists: [],
|
||||
top_albums: [],
|
||||
top_tracks: [],
|
||||
timeline: [],
|
||||
genres: [],
|
||||
recent: [],
|
||||
health: {},
|
||||
};
|
||||
|
||||
export const STATS_GENRE_COLORS = [
|
||||
'#1db954',
|
||||
'#1ed760',
|
||||
'#4ade80',
|
||||
'#7c3aed',
|
||||
'#a855f7',
|
||||
'#ec4899',
|
||||
'#f43f5e',
|
||||
'#f97316',
|
||||
'#eab308',
|
||||
'#06b6d4',
|
||||
] as const;
|
||||
|
||||
export const STATS_DB_STORAGE_COLORS = [
|
||||
'#3b82f6',
|
||||
'#f97316',
|
||||
'#a855f7',
|
||||
'#14b8a6',
|
||||
'#eab308',
|
||||
'#ec4899',
|
||||
'#6366f1',
|
||||
'#22c55e',
|
||||
'#555555',
|
||||
] as const;
|
||||
|
||||
export const STATS_ENRICHMENT_SERVICES = [
|
||||
{ key: 'spotify', label: 'Spotify', color: '#1db954' },
|
||||
{ key: 'musicbrainz', label: 'MusicBrainz', color: '#ba55d3' },
|
||||
{ key: 'deezer', label: 'Deezer', color: '#a238ff' },
|
||||
{ key: 'lastfm', label: 'Last.fm', color: '#d51007' },
|
||||
{ key: 'itunes', label: 'iTunes', color: '#fc3c44' },
|
||||
{ key: 'audiodb', label: 'AudioDB', color: '#1a9fff' },
|
||||
{ key: 'genius', label: 'Genius', color: '#ffff64' },
|
||||
{ key: 'tidal', label: 'Tidal', color: '#00ffff' },
|
||||
{ key: 'qobuz', label: 'Qobuz', color: '#4285f4' },
|
||||
] as const;
|
||||
|
||||
export function getStatsRangeLabel(range: StatsRange): string {
|
||||
switch (range) {
|
||||
case '7d':
|
||||
return '7 Days';
|
||||
case '30d':
|
||||
return '30 Days';
|
||||
case '12m':
|
||||
return '12 Months';
|
||||
case 'all':
|
||||
return 'All Time';
|
||||
}
|
||||
}
|
||||
|
||||
export function hasStatsData(overview: Partial<StatsOverview> | undefined): boolean {
|
||||
return (overview?.total_plays ?? 0) > 0;
|
||||
}
|
||||
|
||||
export function formatCompactNumber(value: number | null | undefined): string {
|
||||
if (!value) return '0';
|
||||
if (value >= 1_000_000) return `${stripTrailingZero((value / 1_000_000).toFixed(1))}M`;
|
||||
if (value >= 1_000) return `${stripTrailingZero((value / 1_000).toFixed(1))}K`;
|
||||
return value.toLocaleString();
|
||||
}
|
||||
|
||||
export function formatListeningTime(totalMs: number | null | undefined): string {
|
||||
if (!totalMs) return '0h';
|
||||
const hours = Math.floor(totalMs / 3_600_000);
|
||||
const minutes = Math.floor((totalMs % 3_600_000) / 60_000);
|
||||
return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
|
||||
}
|
||||
|
||||
export function formatTotalDuration(totalMs: number | null | undefined): string {
|
||||
if (!totalMs) return '0h';
|
||||
return `${Math.floor(totalMs / 3_600_000)}h`;
|
||||
}
|
||||
|
||||
export function formatRelativePlayedAt(
|
||||
dateStr: string | null | undefined,
|
||||
now = Date.now(),
|
||||
): string {
|
||||
if (!dateStr) return '';
|
||||
const diff = now - new Date(dateStr).getTime();
|
||||
const minutes = Math.floor(diff / 60_000);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days < 30) return `${days}d ago`;
|
||||
return `${Math.floor(days / 30)}mo ago`;
|
||||
}
|
||||
|
||||
export function formatBytes(value: number | null | undefined): string {
|
||||
if (!value || value <= 0) return '0 B';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let index = 0;
|
||||
let next = value;
|
||||
while (next >= 1024 && index < units.length - 1) {
|
||||
next /= 1024;
|
||||
index += 1;
|
||||
}
|
||||
return `${next.toFixed(next < 10 ? 2 : 1)} ${units[index]}`;
|
||||
}
|
||||
|
||||
export function groupDbStorageTables(tables: StatsDbStorageTable[]): StatsDbStorageTable[] {
|
||||
const top = tables.slice(0, 8);
|
||||
const rest = tables.slice(8);
|
||||
const restSize = rest.reduce((sum, table) => sum + table.size, 0);
|
||||
return restSize > 0 ? [...top, { name: 'Other', size: restSize }] : top;
|
||||
}
|
||||
|
||||
export function formatDbStorageValue(size: number, method: string | null | undefined): string {
|
||||
if (method === 'dbstat') {
|
||||
if (size > 1_048_576) return `${(size / 1_048_576).toFixed(1)} MB`;
|
||||
return `${Math.round(size / 1024)} KB`;
|
||||
}
|
||||
return `${size.toLocaleString()} rows`;
|
||||
}
|
||||
|
||||
export function getTopArtistBubbles(artists: StatsArtistRow[]) {
|
||||
const top = artists.slice(0, 5);
|
||||
const maxPlays = top[0]?.play_count || 1;
|
||||
|
||||
return top.map((artist, index) => ({
|
||||
artist,
|
||||
percent: Math.round((artist.play_count / maxPlays) * 100),
|
||||
size: 44 + (4 - index) * 6,
|
||||
}));
|
||||
}
|
||||
|
||||
function stripTrailingZero(value: string): string {
|
||||
return value.replace(/\.0$/, '');
|
||||
}
|
||||
148
webui/src/routes/stats/-stats.types.ts
Normal file
148
webui/src/routes/stats/-stats.types.ts
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
export const STATS_RANGE_VALUES = ['7d', '30d', '12m', 'all'] as const;
|
||||
export type StatsRange = (typeof STATS_RANGE_VALUES)[number];
|
||||
|
||||
export const statsSearchSchema = z.object({
|
||||
range: z.enum(STATS_RANGE_VALUES).default('7d').catch('7d'),
|
||||
});
|
||||
|
||||
export type StatsSearch = z.infer<typeof statsSearchSchema>;
|
||||
|
||||
export interface StatsOverview {
|
||||
total_plays: number;
|
||||
total_time_ms: number;
|
||||
unique_artists: number;
|
||||
unique_albums: number;
|
||||
unique_tracks: number;
|
||||
}
|
||||
|
||||
export interface StatsArtistRow {
|
||||
id?: string | number | null;
|
||||
name: string;
|
||||
image_url?: string | null;
|
||||
play_count: number;
|
||||
global_listeners?: number | null;
|
||||
soul_id?: string | null;
|
||||
}
|
||||
|
||||
export interface StatsAlbumRow {
|
||||
name: string;
|
||||
artist?: string | null;
|
||||
artist_id?: string | number | null;
|
||||
image_url?: string | null;
|
||||
play_count: number;
|
||||
}
|
||||
|
||||
export interface StatsTrackRow {
|
||||
name: string;
|
||||
artist?: string | null;
|
||||
artist_id?: string | number | null;
|
||||
album?: string | null;
|
||||
image_url?: string | null;
|
||||
play_count: number;
|
||||
}
|
||||
|
||||
export interface StatsTimelineRow {
|
||||
date: string;
|
||||
plays: number;
|
||||
}
|
||||
|
||||
export interface StatsGenreRow {
|
||||
genre: string;
|
||||
play_count: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
export interface StatsEnrichmentCoverage {
|
||||
spotify?: number;
|
||||
musicbrainz?: number;
|
||||
deezer?: number;
|
||||
lastfm?: number;
|
||||
itunes?: number;
|
||||
audiodb?: number;
|
||||
genius?: number;
|
||||
tidal?: number;
|
||||
qobuz?: number;
|
||||
}
|
||||
|
||||
export interface StatsHealth {
|
||||
total_tracks?: number;
|
||||
unplayed_count?: number;
|
||||
unplayed_percentage?: number;
|
||||
total_duration_ms?: number;
|
||||
format_breakdown?: Record<string, number>;
|
||||
enrichment_coverage?: StatsEnrichmentCoverage;
|
||||
}
|
||||
|
||||
export interface StatsRecentTrack {
|
||||
title: string;
|
||||
artist?: string | null;
|
||||
album?: string | null;
|
||||
played_at?: string | null;
|
||||
}
|
||||
|
||||
export interface StatsCachedPayload {
|
||||
success: boolean;
|
||||
overview?: Partial<StatsOverview>;
|
||||
top_artists?: StatsArtistRow[];
|
||||
top_albums?: StatsAlbumRow[];
|
||||
top_tracks?: StatsTrackRow[];
|
||||
timeline?: StatsTimelineRow[];
|
||||
genres?: StatsGenreRow[];
|
||||
recent?: StatsRecentTrack[];
|
||||
health?: StatsHealth;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface ListeningStatsStatus {
|
||||
stats?: {
|
||||
last_poll?: string | null;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface StatsDbStorageTable {
|
||||
name: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface StatsDbStoragePayload {
|
||||
success: boolean;
|
||||
tables?: StatsDbStorageTable[];
|
||||
total_file_size?: number;
|
||||
method?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface StatsLibraryDiskUsagePayload {
|
||||
success: boolean;
|
||||
has_data?: boolean;
|
||||
total_bytes?: number;
|
||||
tracks_with_size?: number;
|
||||
tracks_without_size?: number;
|
||||
by_format?: Record<string, number>;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface StatsResolveTrackPayload {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
track?: {
|
||||
id: string | number;
|
||||
title: string;
|
||||
file_path: string;
|
||||
bitrate?: string | number | null;
|
||||
artist_id?: string | number | null;
|
||||
album_id?: string | number | null;
|
||||
image_url?: string | null;
|
||||
album_title?: string | null;
|
||||
artist_name?: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export interface StatsStreamTrackPayload {
|
||||
success: boolean;
|
||||
error?: string;
|
||||
result?: Record<string, unknown>;
|
||||
}
|
||||
916
webui/src/routes/stats/-ui/stats-page.module.css
Normal file
916
webui/src/routes/stats/-ui/stats-page.module.css
Normal file
|
|
@ -0,0 +1,916 @@
|
|||
.statsContainer {
|
||||
margin: 20px;
|
||||
padding: 28px 24px 30px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, rgba(20, 20, 20, 0.55) 0%, rgba(12, 12, 12, 0.62) 100%);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 4px 16px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.statsHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin: -28px -24px 20px;
|
||||
padding: 20px 24px;
|
||||
min-height: 176px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(var(--accent-rgb), 0.1) 0%,
|
||||
rgba(var(--accent-rgb), 0.04) 40%,
|
||||
transparent 100%
|
||||
);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.statsHeader::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(var(--accent-rgb), 0.08) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
animation: headerSweep 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes headerSweep {
|
||||
50% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.statsHeaderTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.headerIcon {
|
||||
width: 176px;
|
||||
height: 176px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
filter 0.3s ease;
|
||||
}
|
||||
|
||||
.headerIcon:hover {
|
||||
transform: scale(1.08) rotate(-3deg);
|
||||
filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.5));
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.statsHeaderControls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.statsTimeRange {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.statsRangeButton {
|
||||
padding: 7px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.statsRangeButton:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.statsRangeButtonActive {
|
||||
background: rgb(var(--accent-rgb));
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
|
||||
}
|
||||
|
||||
.statsSyncControls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.statsLastSynced {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.statsSyncButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.statsSyncButton:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.statsSyncButtonSyncing {
|
||||
pointer-events: none;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statsSyncButtonSyncing::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(var(--accent-rgb), 0.2);
|
||||
border-top-color: rgba(var(--accent-rgb), 0.8);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.statsOverview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statsCard {
|
||||
background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.statsCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
|
||||
}
|
||||
|
||||
.statsCard:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(var(--accent-rgb), 0.2);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.statsCardValue {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.statsCardLabel {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.statsMainGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statsLeftCol,
|
||||
.statsRightCol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.statsSectionCard {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
transition: border-color 0.2s ease;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.statsSectionCard:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.statsSectionTitle {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.statsGenreChartContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.statsGenreChartWrap {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statsGenreLegend {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.statsGenreLegendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.82rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.statsGenreDot,
|
||||
.statsDbLegendDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statsGenrePct {
|
||||
margin-left: auto;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.statsTopArtistsVisual {
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.statsArtistBubbles {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.statsArtistBubble {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.statsArtistBubble:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.statsArtistBubble:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.statsBubbleImage {
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border: 2px solid rgba(var(--accent-rgb), 0.2);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statsBubbleInitial {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.statsBubbleBarContainer {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.statsBubbleBar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.4));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.statsBubbleName {
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.statsBubbleCount {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(var(--accent-rgb), 0.7);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.statsRankedList,
|
||||
.statsRecentList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
||||
}
|
||||
|
||||
.statsRankedItem,
|
||||
.statsRecentItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.statsRankedItem:hover,
|
||||
.statsRecentItem:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.statsRankedNum {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
font-weight: 700;
|
||||
width: 18px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statsRankedImage,
|
||||
.statsRankedImageFallback {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.statsRankedInfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.statsRankedName {
|
||||
font-size: 0.88rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.statsRankedMeta {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.statsRankedCount {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(var(--accent-rgb), 0.8);
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.statsArtistLink {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.statsArtistLink:hover {
|
||||
color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
.statsSoulIdBadge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.statsPlayButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(var(--accent-rgb), 0.15);
|
||||
color: rgb(var(--accent-rgb));
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.statsRankedItem:hover .statsPlayButton,
|
||||
.statsRecentItem:hover .statsPlayButton {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.statsPlayButton:hover {
|
||||
background: rgb(var(--accent-rgb));
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.statsPlayButtonSmall {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.statsRecentTitle {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.statsRecentArtist {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statsRecentTime {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
flex-shrink: 0;
|
||||
min-width: 65px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.statsHealthGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.statsHealthItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statsHealthItemWide {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.statsHealthValue {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statsHealthLabel {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.statsFormatBar {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.statsFormatSegment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.statsEnrichment {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.statsEnrichItem {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.statsEnrichName {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
min-width: 70px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.statsEnrichBar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.statsEnrichFill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.statsEnrichPct {
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.statsDiskUsageWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.statsDiskTotalRow {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.statsDiskTotalValue {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--accent-rgb));
|
||||
}
|
||||
|
||||
.statsDiskTotalMeta {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.statsDiskFormats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.statsDiskFormatRow {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 80px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.statsDiskFormatName {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.statsDiskFormatBar {
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.statsDiskFormatFill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgba(var(--accent-rgb), 0.6) 100%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.statsDiskFormatSize {
|
||||
text-align: right;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.statsDbStorageWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.statsDbChartContainer {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
flex-shrink: 0;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.statsDbTotal {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.statsDbTotalValue {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statsDbTotalLabel {
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.statsDbLegend {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.statsDbLegendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.statsDbLegendName {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.statsDbLegendSize {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.statsEmpty,
|
||||
.statsLoading {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.statsEmptyIcon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.statsEmpty h3 {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.statsEmpty p,
|
||||
.statsSubtleError,
|
||||
.emptyListState {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.emptyListState {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.statsSubtleError {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.statsContainer {
|
||||
margin: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.statsHeader {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 12px;
|
||||
margin: -12px -12px 20px;
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
}
|
||||
|
||||
.statsHeaderControls {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.statsTimeRange {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.statsRangeButton {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statsSyncControls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.headerIcon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.statsOverview {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.statsCard {
|
||||
padding: 12px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.statsCardValue {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.statsCardLabel {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.statsMainGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.statsLeftCol,
|
||||
.statsRightCol {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.statsSectionCard {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.statsGenreChartContainer,
|
||||
.statsDbStorageWrap {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.statsHealthGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
907
webui/src/routes/stats/-ui/stats-page.tsx
Normal file
907
webui/src/routes/stats/-ui/stats-page.tsx
Normal file
|
|
@ -0,0 +1,907 @@
|
|||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { type ReactNode, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Cell,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
|
||||
import { useReactPageShell } from '@/platform/shell/route-controllers';
|
||||
|
||||
import type {
|
||||
StatsAlbumRow,
|
||||
StatsArtistRow,
|
||||
StatsDbStoragePayload,
|
||||
StatsHealth,
|
||||
StatsLibraryDiskUsagePayload,
|
||||
StatsRange,
|
||||
StatsRecentTrack,
|
||||
StatsTrackRow,
|
||||
} from '../-stats.types';
|
||||
|
||||
import {
|
||||
invalidateStatsQueries,
|
||||
listeningStatsStatusQueryOptions,
|
||||
resolveStatsTrack,
|
||||
statsCachedQueryOptions,
|
||||
statsDbStorageQueryOptions,
|
||||
statsLibraryDiskUsageQueryOptions,
|
||||
streamStatsTrack,
|
||||
triggerListeningStatsSync,
|
||||
} from '../-stats.api';
|
||||
import {
|
||||
EMPTY_STATS_OVERVIEW,
|
||||
formatBytes,
|
||||
formatCompactNumber,
|
||||
formatDbStorageValue,
|
||||
formatListeningTime,
|
||||
formatRelativePlayedAt,
|
||||
formatTotalDuration,
|
||||
getStatsRangeLabel,
|
||||
getTopArtistBubbles,
|
||||
groupDbStorageTables,
|
||||
hasStatsData,
|
||||
STATS_DB_STORAGE_COLORS,
|
||||
STATS_ENRICHMENT_SERVICES,
|
||||
STATS_GENRE_COLORS,
|
||||
} from '../-stats.helpers';
|
||||
import { Route } from '../route';
|
||||
import styles from './stats-page.module.css';
|
||||
|
||||
const STATS_TOOLTIP_STYLE = {
|
||||
background: 'rgba(12, 12, 12, 0.96)',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: 10,
|
||||
color: '#fff',
|
||||
} as const;
|
||||
|
||||
const STATS_TOOLTIP_WRAPPER_STYLE = {
|
||||
zIndex: 3,
|
||||
} as const;
|
||||
|
||||
const STATS_CHART_CURSOR = {
|
||||
fill: 'rgba(var(--accent-rgb), 0.12)',
|
||||
} as const;
|
||||
|
||||
export function StatsPage() {
|
||||
useReactPageShell('stats');
|
||||
|
||||
const navigate = useNavigate({ from: Route.fullPath });
|
||||
const queryClient = useQueryClient();
|
||||
const { range } = Route.useSearch();
|
||||
const syncTimeoutRef = useRef<number | null>(null);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
|
||||
const cachedStatsQuery = useQuery({
|
||||
...statsCachedQueryOptions(range),
|
||||
});
|
||||
const listeningStatusQuery = useQuery({
|
||||
...listeningStatsStatusQueryOptions(),
|
||||
});
|
||||
const dbStorageQuery = useQuery({
|
||||
...statsDbStorageQueryOptions(),
|
||||
});
|
||||
const diskUsageQuery = useQuery({
|
||||
...statsLibraryDiskUsageQueryOptions(),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (syncTimeoutRef.current) {
|
||||
window.clearTimeout(syncTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const syncMutation = useMutation({
|
||||
mutationFn: triggerListeningStatsSync,
|
||||
onMutate: () => {
|
||||
setSyncing(true);
|
||||
},
|
||||
onSuccess: () => {
|
||||
window.showToast?.('Syncing listening data...', 'info');
|
||||
syncTimeoutRef.current = window.setTimeout(() => {
|
||||
void invalidateStatsQueries(queryClient);
|
||||
setSyncing(false);
|
||||
window.showToast?.('Listening stats updated', 'success');
|
||||
}, 5000);
|
||||
},
|
||||
onError: (error) => {
|
||||
setSyncing(false);
|
||||
window.showToast?.(error instanceof Error ? error.message : 'Sync failed', 'error');
|
||||
},
|
||||
});
|
||||
|
||||
const cachedStats = cachedStatsQuery.data;
|
||||
const overview = cachedStats?.overview ?? EMPTY_STATS_OVERVIEW;
|
||||
const hasData = hasStatsData(overview);
|
||||
const lastSynced = listeningStatusQuery.data?.stats?.last_poll ?? null;
|
||||
|
||||
const onRangeChange = (nextRange: StatsRange) => {
|
||||
void navigate({
|
||||
to: Route.fullPath,
|
||||
search: { range: nextRange },
|
||||
replace: true,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.statsContainer} data-testid="stats-page">
|
||||
<header className={styles.statsHeader}>
|
||||
<div className={styles.statsHeaderTitle}>
|
||||
<img src="/static/trans2.png" alt="Stats" className={styles.headerIcon} />
|
||||
<h1 className={styles.headerTitle}>Listening Stats</h1>
|
||||
</div>
|
||||
<div className={styles.statsHeaderControls}>
|
||||
<div className={styles.statsTimeRange} role="tablist" aria-label="Listening stats range">
|
||||
{(['7d', '30d', '12m', 'all'] as const).map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
className={`${styles.statsRangeButton} ${
|
||||
range === option ? styles.statsRangeButtonActive : ''
|
||||
}`}
|
||||
onClick={() => onRangeChange(option)}
|
||||
>
|
||||
{getStatsRangeLabel(option)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.statsSyncControls}>
|
||||
<span className={styles.statsLastSynced}>
|
||||
{lastSynced ? `Last synced: ${lastSynced}` : 'Not synced yet'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.statsSyncButton} ${syncing ? styles.statsSyncButtonSyncing : ''}`}
|
||||
onClick={() => syncMutation.mutate()}
|
||||
disabled={syncing}
|
||||
aria-label="Sync listening stats"
|
||||
title="Sync now"
|
||||
>
|
||||
<span aria-hidden="true">↻</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{cachedStatsQuery.isPending ? (
|
||||
<SectionLoadingState />
|
||||
) : cachedStatsQuery.error ? (
|
||||
<SectionErrorState message={getErrorMessage(cachedStatsQuery.error)} />
|
||||
) : hasData ? (
|
||||
<>
|
||||
<OverviewCards overview={overview} />
|
||||
<div className={styles.statsMainGrid}>
|
||||
<div className={styles.statsLeftCol}>
|
||||
<StatsSectionCard title="Listening Activity">
|
||||
<div className={styles.chartContainer}>
|
||||
<StatsActivityChart timeline={cachedStats?.timeline ?? []} />
|
||||
</div>
|
||||
</StatsSectionCard>
|
||||
<StatsSectionCard title="Genre Breakdown">
|
||||
<div className={styles.statsGenreChartContainer}>
|
||||
<div className={styles.statsGenreChartWrap}>
|
||||
<StatsGenreChart genres={cachedStats?.genres ?? []} />
|
||||
</div>
|
||||
<StatsGenreLegend genres={cachedStats?.genres ?? []} />
|
||||
</div>
|
||||
</StatsSectionCard>
|
||||
<StatsSectionCard title="Recently Played">
|
||||
<StatsRecentPlays tracks={cachedStats?.recent ?? []} onPlay={playStatsTrack} />
|
||||
</StatsSectionCard>
|
||||
</div>
|
||||
<div className={styles.statsRightCol}>
|
||||
<StatsSectionCard title="Top Artists">
|
||||
<TopArtistsVisual
|
||||
artists={cachedStats?.top_artists ?? []}
|
||||
onArtistSelect={openArtistDetail}
|
||||
/>
|
||||
<StatsRankedArtists
|
||||
artists={cachedStats?.top_artists ?? []}
|
||||
onArtistSelect={openArtistDetail}
|
||||
/>
|
||||
</StatsSectionCard>
|
||||
<StatsSectionCard title="Top Albums">
|
||||
<StatsRankedAlbums
|
||||
albums={cachedStats?.top_albums ?? []}
|
||||
onArtistSelect={openArtistDetail}
|
||||
/>
|
||||
</StatsSectionCard>
|
||||
<StatsSectionCard title="Top Tracks">
|
||||
<StatsRankedTracks
|
||||
tracks={cachedStats?.top_tracks ?? []}
|
||||
onArtistSelect={openArtistDetail}
|
||||
onPlay={playStatsTrack}
|
||||
/>
|
||||
</StatsSectionCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StatsSectionCard title="Library Health" fullWidth>
|
||||
<StatsLibraryHealth health={cachedStats?.health ?? {}} />
|
||||
</StatsSectionCard>
|
||||
|
||||
<StatsSectionCard title="Library Disk Usage" fullWidth>
|
||||
<StatsDiskUsage payload={diskUsageQuery.data} error={diskUsageQuery.error} />
|
||||
</StatsSectionCard>
|
||||
|
||||
<StatsSectionCard title="Database Storage" fullWidth>
|
||||
<StatsDbStorage payload={dbStorageQuery.data} error={dbStorageQuery.error} />
|
||||
</StatsSectionCard>
|
||||
</>
|
||||
) : (
|
||||
<StatsEmptyState />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OverviewCards({
|
||||
overview,
|
||||
}: {
|
||||
overview: Partial<{
|
||||
total_plays: number;
|
||||
total_time_ms: number;
|
||||
unique_artists: number;
|
||||
unique_albums: number;
|
||||
unique_tracks: number;
|
||||
}>;
|
||||
}) {
|
||||
const cards = [
|
||||
{ label: 'Total Plays', value: formatCompactNumber(overview.total_plays) },
|
||||
{ label: 'Listening Time', value: formatListeningTime(overview.total_time_ms) },
|
||||
{ label: 'Artists', value: formatCompactNumber(overview.unique_artists) },
|
||||
{ label: 'Albums', value: formatCompactNumber(overview.unique_albums) },
|
||||
{ label: 'Tracks', value: formatCompactNumber(overview.unique_tracks) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.statsOverview}>
|
||||
{cards.map((card) => (
|
||||
<div key={card.label} className={styles.statsCard}>
|
||||
<div className={styles.statsCardValue}>{card.value}</div>
|
||||
<div className={styles.statsCardLabel}>{card.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSectionCard({
|
||||
children,
|
||||
fullWidth = false,
|
||||
title,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
fullWidth?: boolean;
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<section className={`${styles.statsSectionCard} ${fullWidth ? styles.statsFullWidth : ''}`}>
|
||||
<div className={styles.statsSectionTitle}>{title}</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsActivityChart({ timeline }: { timeline: Array<{ date: string; plays: number }> }) {
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={timeline} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
|
||||
<CartesianGrid stroke="rgba(255,255,255,0.04)" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'rgba(255,255,255,0.3)', fontSize: 10 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'rgba(255,255,255,0.3)', fontSize: 10 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
allowDecimals={false}
|
||||
width={28}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={STATS_TOOLTIP_STYLE}
|
||||
wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE}
|
||||
cursor={STATS_CHART_CURSOR}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="plays"
|
||||
radius={[4, 4, 0, 0]}
|
||||
fill="rgba(var(--accent-rgb), 0.55)"
|
||||
stroke="rgba(var(--accent-rgb), 0.8)"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsGenreChart({
|
||||
genres,
|
||||
}: {
|
||||
genres: Array<{ genre: string; play_count: number; percentage: number }>;
|
||||
}) {
|
||||
const topGenres = genres.slice(0, 10);
|
||||
return (
|
||||
<ResponsiveContainer width={180} height={180}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={topGenres}
|
||||
dataKey="play_count"
|
||||
nameKey="genre"
|
||||
innerRadius={52}
|
||||
outerRadius={84}
|
||||
paddingAngle={2}
|
||||
stroke="transparent"
|
||||
>
|
||||
{topGenres.map((genre, index) => (
|
||||
<Cell key={genre.genre} fill={STATS_GENRE_COLORS[index % STATS_GENRE_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip contentStyle={STATS_TOOLTIP_STYLE} wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsGenreLegend({
|
||||
genres,
|
||||
}: {
|
||||
genres: Array<{ genre: string; play_count: number; percentage: number }>;
|
||||
}) {
|
||||
const topGenres = genres.slice(0, 10);
|
||||
|
||||
return (
|
||||
<div className={styles.statsGenreLegend}>
|
||||
{topGenres.map((genre, index) => (
|
||||
<div key={genre.genre} className={styles.statsGenreLegendItem}>
|
||||
<span
|
||||
className={styles.statsGenreDot}
|
||||
style={{ background: STATS_GENRE_COLORS[index % STATS_GENRE_COLORS.length] }}
|
||||
/>
|
||||
<span>{genre.genre}</span>
|
||||
<span className={styles.statsGenrePct}>{genre.percentage}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TopArtistsVisual({
|
||||
artists,
|
||||
onArtistSelect,
|
||||
}: {
|
||||
artists: StatsArtistRow[];
|
||||
onArtistSelect: (artistId: string | number, artistName: string) => void;
|
||||
}) {
|
||||
const topArtists = getTopArtistBubbles(artists);
|
||||
if (topArtists.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.statsTopArtistsVisual}>
|
||||
<div className={styles.statsArtistBubbles}>
|
||||
{topArtists.map(({ artist, percent, size }) => {
|
||||
const isClickable = artist.id !== null && artist.id !== undefined;
|
||||
return (
|
||||
<button
|
||||
key={`${artist.name}-${artist.id ?? 'unknown'}`}
|
||||
type="button"
|
||||
className={styles.statsArtistBubble}
|
||||
onClick={() => {
|
||||
if (isClickable) {
|
||||
onArtistSelect(artist.id as string | number, artist.name);
|
||||
}
|
||||
}}
|
||||
disabled={!isClickable}
|
||||
>
|
||||
<div
|
||||
className={styles.statsBubbleImage}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundImage: artist.image_url ? `url(${artist.image_url})` : undefined,
|
||||
}}
|
||||
>
|
||||
{!artist.image_url ? (
|
||||
<span className={styles.statsBubbleInitial}>{artist.name[0] ?? '?'}</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles.statsBubbleBarContainer}>
|
||||
<div className={styles.statsBubbleBar} style={{ width: `${percent}%` }} />
|
||||
</div>
|
||||
<div className={styles.statsBubbleName}>{artist.name}</div>
|
||||
<div className={styles.statsBubbleCount}>
|
||||
{formatCompactNumber(artist.play_count)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsRankedArtists({
|
||||
artists,
|
||||
onArtistSelect,
|
||||
}: {
|
||||
artists: StatsArtistRow[];
|
||||
onArtistSelect: (artistId: string | number, artistName: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.statsRankedList}>
|
||||
{artists.length === 0 ? <EmptyListState message="No data yet" /> : null}
|
||||
{artists.map((artist, index) => (
|
||||
<div key={`${artist.name}-${artist.id ?? index}`} className={styles.statsRankedItem}>
|
||||
<span className={styles.statsRankedNum}>{index + 1}</span>
|
||||
{artist.image_url ? (
|
||||
<img className={styles.statsRankedImage} src={artist.image_url} alt="" />
|
||||
) : (
|
||||
<div className={styles.statsRankedImageFallback} />
|
||||
)}
|
||||
<div className={styles.statsRankedInfo}>
|
||||
<div className={styles.statsRankedName}>
|
||||
{artist.id ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.statsArtistLink}
|
||||
onClick={() => onArtistSelect(artist.id as string | number, artist.name)}
|
||||
>
|
||||
{artist.name}
|
||||
</button>
|
||||
) : (
|
||||
artist.name
|
||||
)}
|
||||
{artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_') ? (
|
||||
<img src="/static/trans2.png" className={styles.statsSoulIdBadge} alt="SoulID" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles.statsRankedMeta}>
|
||||
{artist.global_listeners
|
||||
? `${formatCompactNumber(artist.global_listeners)} global listeners`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
<span className={styles.statsRankedCount}>
|
||||
{formatCompactNumber(artist.play_count)} plays
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsRankedAlbums({
|
||||
albums,
|
||||
onArtistSelect,
|
||||
}: {
|
||||
albums: StatsAlbumRow[];
|
||||
onArtistSelect: (artistId: string | number, artistName: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.statsRankedList}>
|
||||
{albums.length === 0 ? <EmptyListState message="No data yet" /> : null}
|
||||
{albums.map((album, index) => (
|
||||
<div key={`${album.name}-${index}`} className={styles.statsRankedItem}>
|
||||
<span className={styles.statsRankedNum}>{index + 1}</span>
|
||||
{album.image_url ? (
|
||||
<img className={styles.statsRankedImage} src={album.image_url} alt="" />
|
||||
) : (
|
||||
<div className={styles.statsRankedImageFallback} />
|
||||
)}
|
||||
<div className={styles.statsRankedInfo}>
|
||||
<div className={styles.statsRankedName}>{album.name}</div>
|
||||
<div className={styles.statsRankedMeta}>
|
||||
{album.artist_id ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.statsArtistLink}
|
||||
onClick={() =>
|
||||
onArtistSelect(album.artist_id as string | number, album.artist || '')
|
||||
}
|
||||
>
|
||||
{album.artist || ''}
|
||||
</button>
|
||||
) : (
|
||||
album.artist || ''
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className={styles.statsRankedCount}>
|
||||
{formatCompactNumber(album.play_count)} plays
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsRankedTracks({
|
||||
tracks,
|
||||
onArtistSelect,
|
||||
onPlay,
|
||||
}: {
|
||||
tracks: StatsTrackRow[];
|
||||
onArtistSelect: (artistId: string | number, artistName: string) => void;
|
||||
onPlay: (track: { title: string; artist: string; album: string }) => Promise<void>;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.statsRankedList}>
|
||||
{tracks.length === 0 ? <EmptyListState message="No data yet" /> : null}
|
||||
{tracks.map((track, index) => (
|
||||
<div key={`${track.name}-${index}`} className={styles.statsRankedItem}>
|
||||
<span className={styles.statsRankedNum}>{index + 1}</span>
|
||||
{track.image_url ? (
|
||||
<img className={styles.statsRankedImage} src={track.image_url} alt="" />
|
||||
) : (
|
||||
<div className={styles.statsRankedImageFallback} />
|
||||
)}
|
||||
<div className={styles.statsRankedInfo}>
|
||||
<div className={styles.statsRankedName}>{track.name}</div>
|
||||
<div className={styles.statsRankedMeta}>
|
||||
{track.artist_id ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.statsArtistLink}
|
||||
onClick={() =>
|
||||
onArtistSelect(track.artist_id as string | number, track.artist || '')
|
||||
}
|
||||
>
|
||||
{track.artist || ''}
|
||||
</button>
|
||||
) : (
|
||||
track.artist || ''
|
||||
)}
|
||||
{track.album ? ` · ${track.album}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.statsPlayButton} ${styles.statsPlayButtonSmall}`}
|
||||
onClick={() =>
|
||||
void onPlay({
|
||||
title: track.name,
|
||||
artist: track.artist || '',
|
||||
album: track.album || '',
|
||||
})
|
||||
}
|
||||
title="Play"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
<span className={styles.statsRankedCount}>
|
||||
{formatCompactNumber(track.play_count)} plays
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsRecentPlays({
|
||||
tracks,
|
||||
onPlay,
|
||||
}: {
|
||||
tracks: StatsRecentTrack[];
|
||||
onPlay: (track: { title: string; artist: string; album: string }) => Promise<void>;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.statsRecentList}>
|
||||
{tracks.length === 0 ? <EmptyListState message="No recent plays" /> : null}
|
||||
{tracks.map((track, index) => (
|
||||
<div key={`${track.title}-${track.played_at ?? index}`} className={styles.statsRecentItem}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.statsPlayButton} ${styles.statsPlayButtonSmall}`}
|
||||
onClick={() =>
|
||||
void onPlay({
|
||||
title: track.title,
|
||||
artist: track.artist || '',
|
||||
album: track.album || '',
|
||||
})
|
||||
}
|
||||
title="Play"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
<span className={styles.statsRecentTitle}>{track.title}</span>
|
||||
<span className={styles.statsRecentArtist}>{track.artist || ''}</span>
|
||||
<span className={styles.statsRecentTime}>{formatRelativePlayedAt(track.played_at)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsLibraryHealth({ health }: { health: StatsHealth }) {
|
||||
const totalTracks = health.total_tracks ?? 0;
|
||||
const formatEntries = Object.entries(health.format_breakdown ?? {});
|
||||
const formatTotal = formatEntries.reduce((sum, [, count]) => sum + count, 0) || 1;
|
||||
const formatColors: Record<string, string> = {
|
||||
FLAC: '#3b82f6',
|
||||
MP3: '#f97316',
|
||||
Opus: '#a855f7',
|
||||
AAC: '#14b8a6',
|
||||
OGG: '#eab308',
|
||||
WAV: '#ec4899',
|
||||
Other: '#555555',
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.statsHealthGrid}>
|
||||
<div className={`${styles.statsHealthItem} ${styles.statsHealthItemWide}`}>
|
||||
<div className={styles.statsHealthLabel}>Format Breakdown</div>
|
||||
<div className={styles.statsFormatBar}>
|
||||
{formatEntries.map(([format, count]) => {
|
||||
const percentage = ((count / formatTotal) * 100).toFixed(1);
|
||||
return (
|
||||
<div
|
||||
key={format}
|
||||
className={styles.statsFormatSegment}
|
||||
style={{
|
||||
flex: count,
|
||||
background: formatColors[format] || formatColors.Other,
|
||||
}}
|
||||
title={`${format}: ${count} tracks (${percentage}%)`}
|
||||
>
|
||||
{Number(percentage) > 8 ? format : ''}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsHealthItem}>
|
||||
<div className={styles.statsHealthValue}>
|
||||
{formatCompactNumber(health.unplayed_count)} ({health.unplayed_percentage || 0}%)
|
||||
</div>
|
||||
<div className={styles.statsHealthLabel}>Unplayed Tracks</div>
|
||||
</div>
|
||||
<div className={styles.statsHealthItem}>
|
||||
<div className={styles.statsHealthValue}>
|
||||
{formatTotalDuration(health.total_duration_ms)}
|
||||
</div>
|
||||
<div className={styles.statsHealthLabel}>Total Duration</div>
|
||||
</div>
|
||||
<div className={styles.statsHealthItem}>
|
||||
<div className={styles.statsHealthValue}>{formatCompactNumber(totalTracks)}</div>
|
||||
<div className={styles.statsHealthLabel}>Total Tracks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsEnrichment}>
|
||||
{STATS_ENRICHMENT_SERVICES.map((service) => {
|
||||
const percent = health.enrichment_coverage?.[service.key] || 0;
|
||||
return (
|
||||
<div key={service.key} className={styles.statsEnrichItem}>
|
||||
<span className={styles.statsEnrichName}>{service.label}</span>
|
||||
<div className={styles.statsEnrichBar}>
|
||||
<div
|
||||
className={styles.statsEnrichFill}
|
||||
style={{ width: `${percent}%`, background: service.color }}
|
||||
/>
|
||||
</div>
|
||||
<span className={styles.statsEnrichPct}>{percent}%</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsDiskUsage({
|
||||
error,
|
||||
payload,
|
||||
}: {
|
||||
error: unknown;
|
||||
payload: StatsLibraryDiskUsagePayload | undefined;
|
||||
}) {
|
||||
if (error) {
|
||||
return <SectionSubtleError message={getErrorMessage(error)} />;
|
||||
}
|
||||
|
||||
const hasData = payload?.has_data && !!payload.total_bytes;
|
||||
const formats = Object.entries(payload?.by_format ?? {}).sort((a, b) => b[1] - a[1]);
|
||||
const max = formats[0]?.[1] || 1;
|
||||
const tracksWithSize = payload?.tracks_with_size || 0;
|
||||
const tracksWithoutSize = payload?.tracks_without_size || 0;
|
||||
|
||||
return (
|
||||
<div className={styles.statsDiskUsageWrap}>
|
||||
<div className={styles.statsDiskTotalRow}>
|
||||
<div className={styles.statsDiskTotalValue}>
|
||||
{hasData ? formatBytes(payload?.total_bytes) : '—'}
|
||||
</div>
|
||||
<div className={styles.statsDiskTotalMeta}>
|
||||
{hasData
|
||||
? `${tracksWithSize.toLocaleString()} tracks measured${
|
||||
tracksWithoutSize > 0
|
||||
? ` (+${tracksWithoutSize.toLocaleString()} pending next Deep Scan)`
|
||||
: ''
|
||||
}`
|
||||
: tracksWithoutSize > 0
|
||||
? `Run a Deep Scan to populate (${tracksWithoutSize.toLocaleString()} tracks pending)`
|
||||
: 'No tracks in library yet'}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsDiskFormats}>
|
||||
{formats.map(([format, bytes]) => {
|
||||
const width = Math.max(2, Math.round((bytes / max) * 100));
|
||||
return (
|
||||
<div key={format} className={styles.statsDiskFormatRow}>
|
||||
<span className={styles.statsDiskFormatName}>{format.toUpperCase()}</span>
|
||||
<div className={styles.statsDiskFormatBar}>
|
||||
<div className={styles.statsDiskFormatFill} style={{ width: `${width}%` }} />
|
||||
</div>
|
||||
<span className={styles.statsDiskFormatSize}>{formatBytes(bytes)}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsDbStorage({
|
||||
error,
|
||||
payload,
|
||||
}: {
|
||||
error: unknown;
|
||||
payload: StatsDbStoragePayload | undefined;
|
||||
}) {
|
||||
if (error) {
|
||||
return <SectionSubtleError message={getErrorMessage(error)} />;
|
||||
}
|
||||
|
||||
const tables = groupDbStorageTables(payload?.tables ?? []);
|
||||
const method = payload?.method;
|
||||
|
||||
return (
|
||||
<div className={styles.statsDbStorageWrap}>
|
||||
<div className={styles.statsDbChartContainer}>
|
||||
<ResponsiveContainer width={180} height={180}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={tables}
|
||||
dataKey="size"
|
||||
nameKey="name"
|
||||
innerRadius={52}
|
||||
outerRadius={84}
|
||||
paddingAngle={2}
|
||||
stroke="transparent"
|
||||
>
|
||||
{tables.map((table, index) => (
|
||||
<Cell
|
||||
key={table.name}
|
||||
fill={STATS_DB_STORAGE_COLORS[index % STATS_DB_STORAGE_COLORS.length]}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={STATS_TOOLTIP_STYLE}
|
||||
wrapperStyle={STATS_TOOLTIP_WRAPPER_STYLE}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className={styles.statsDbTotal}>
|
||||
<div className={styles.statsDbTotalValue}>
|
||||
{formatDbStorageValue(payload?.total_file_size || 0, method)}
|
||||
</div>
|
||||
<div className={styles.statsDbTotalLabel}>Total Size</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsDbLegend}>
|
||||
{tables.map((table, index) => (
|
||||
<div key={table.name} className={styles.statsDbLegendItem}>
|
||||
<span
|
||||
className={styles.statsDbLegendDot}
|
||||
style={{
|
||||
background: STATS_DB_STORAGE_COLORS[index % STATS_DB_STORAGE_COLORS.length],
|
||||
}}
|
||||
/>
|
||||
<span className={styles.statsDbLegendName}>{table.name}</span>
|
||||
<span className={styles.statsDbLegendSize}>
|
||||
{formatDbStorageValue(table.size, method)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsEmptyState() {
|
||||
return (
|
||||
<div className={styles.statsEmpty}>
|
||||
<div className={styles.statsEmptyIcon}>📊</div>
|
||||
<h3>No Listening Data Yet</h3>
|
||||
<p>
|
||||
Enable "Listening Stats" in Settings to start tracking your listening activity
|
||||
from your media server.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLoadingState() {
|
||||
return <div className={styles.statsLoading}>Loading listening stats...</div>;
|
||||
}
|
||||
|
||||
function SectionErrorState({ message }: { message: string }) {
|
||||
return (
|
||||
<div className={styles.statsEmpty}>
|
||||
<h3>Failed to load listening stats</h3>
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionSubtleError({ message }: { message: string }) {
|
||||
return <div className={styles.statsSubtleError}>{message}</div>;
|
||||
}
|
||||
|
||||
function EmptyListState({ message }: { message: string }) {
|
||||
return <div className={styles.emptyListState}>{message}</div>;
|
||||
}
|
||||
|
||||
async function openArtistDetail(artistId: string | number, artistName: string) {
|
||||
await window.SoulSyncWebRouter?.navigateToPage('library');
|
||||
window.setTimeout(() => {
|
||||
window.navigateToArtistDetail?.(artistId, artistName);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function playStatsTrack(track: { title: string; artist: string; album: string }) {
|
||||
const resolvedTrack = await resolveStatsTrack(track.title, track.artist);
|
||||
if (resolvedTrack) {
|
||||
void window.playLibraryTrack?.(
|
||||
{
|
||||
id: resolvedTrack.id,
|
||||
title: resolvedTrack.title,
|
||||
file_path: resolvedTrack.file_path,
|
||||
bitrate: resolvedTrack.bitrate,
|
||||
artist_id: resolvedTrack.artist_id,
|
||||
album_id: resolvedTrack.album_id,
|
||||
_stats_image: resolvedTrack.image_url || null,
|
||||
},
|
||||
resolvedTrack.album_title || track.album,
|
||||
resolvedTrack.artist_name || track.artist,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
window.showLoadingOverlay?.(`Searching for ${track.title}...`);
|
||||
try {
|
||||
const streamResult = await streamStatsTrack(track.title, track.artist, track.album);
|
||||
window.hideLoadingOverlay?.();
|
||||
|
||||
if (streamResult) {
|
||||
if (typeof window.startStream === 'function') {
|
||||
await window.startStream(streamResult);
|
||||
} else {
|
||||
window.showToast?.('Streaming not available', 'error');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
window.showToast?.('Track not found in library or any source', 'error');
|
||||
} catch (error) {
|
||||
window.hideLoadingOverlay?.();
|
||||
window.showToast?.(getErrorMessage(error), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function getErrorMessage(error: unknown): string {
|
||||
return error instanceof Error ? error.message : 'Unknown error';
|
||||
}
|
||||
28
webui/src/routes/stats/route.tsx
Normal file
28
webui/src/routes/stats/route.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { createFileRoute, redirect } from '@tanstack/react-router';
|
||||
|
||||
import { getProfileHomePath } from '@/platform/shell/bridge';
|
||||
|
||||
import { listeningStatsStatusQueryOptions, statsCachedQueryOptions } from './-stats.api';
|
||||
import { statsSearchSchema } from './-stats.types';
|
||||
import { StatsPage } from './-ui/stats-page';
|
||||
|
||||
export const Route = createFileRoute('/stats')({
|
||||
validateSearch: statsSearchSchema,
|
||||
beforeLoad: ({ context }) => {
|
||||
const { bridge } = context.shell;
|
||||
|
||||
if (!bridge.isPageAllowed('stats')) {
|
||||
throw redirect({ href: getProfileHomePath(bridge), replace: true });
|
||||
}
|
||||
},
|
||||
loaderDeps: ({ search }) => ({
|
||||
range: search.range,
|
||||
}),
|
||||
loader: async ({ context, deps }) => {
|
||||
await Promise.all([
|
||||
context.queryClient.ensureQueryData(statsCachedQueryOptions(deps.range)),
|
||||
context.queryClient.ensureQueryData(listeningStatsStatusQueryOptions()),
|
||||
]);
|
||||
},
|
||||
component: StatsPage,
|
||||
});
|
||||
Loading…
Reference in a new issue