frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

📛 Added missing files to lib stats on Dashboard

Browse Source
This commit is contained in:
Rishi Ghan
2026-03-09 21:54:21 -04:00
parent d506cf8ba8
commit 867935be39
4 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/Dashboard/LibraryStatistics.tsx
View File

@@ -4,6 +4,7 @@ import { GetLibraryStatisticsQuery, DirectorySize } from "../../graphql/generate
type Stats = Omit<GetLibraryStatisticsQuery["getLibraryStatistics"], "comicDirectorySize"> & { type Stats = Omit<GetLibraryStatisticsQuery["getLibraryStatistics"], "comicDirectorySize"> & {
comicDirectorySize: DirectorySize; comicDirectorySize: DirectorySize;
comicsMissingFiles: number;
}; };
/** Props for {@link LibraryStatistics}. */ /** Props for {@link LibraryStatistics}. */
@@ -23,7 +24,7 @@ export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactEleme
const facet = stats.statistics?.[0]; const facet = stats.statistics?.[0];
if (!facet) return null; if (!facet) return null;
const { issues, issuesWithComicInfoXML, fileTypes, publisherWithMostComicsInLibrary, fileLessComics } = facet; const { issues, issuesWithComicInfoXML, fileTypes, publisherWithMostComicsInLibrary } = facet;
const topPublisher = publisherWithMostComicsInLibrary?.[0]; const topPublisher = publisherWithMostComicsInLibrary?.[0];
return ( return (
@@ -36,28 +37,26 @@ export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactEleme
<div className="mt-3 flex flex-row gap-5"> <div className="mt-3 flex flex-row gap-5">
{/* Total records in database */} {/* Total records in database */}
<div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center"> <div className="flex flex-col rounded-lg bg-card-info px-4 py-6 text-center">
<dt className="text-lg font-medium text-gray-500">In database</dt> <dt className="text-lg font-medium text-gray-500">In database</dt>
<dd className="text-3xl text-green-600 md:text-5xl"> <dd className="text-3xl text-gray-700 md:text-5xl">
{stats.totalDocuments} comics {stats.totalDocuments} comics
</dd> </dd>
</div> </div>
{/* Missing files */} {/* Missing files */}
{fileLessComics && fileLessComics.length > 0 && ( <div className="flex flex-col rounded-lg bg-card-missing px-4 py-6 text-center">
<div className="flex flex-col rounded-lg bg-red-100 dark:bg-red-200 px-4 py-6 text-center"> <dt className="text-lg font-medium text-gray-500">Missing files</dt>
<dt className="text-lg font-medium text-gray-500">Missing files</dt> <dd className="text-3xl text-red-600 md:text-5xl">
<dd className="text-3xl text-red-600 md:text-5xl"> {stats.comicsMissingFiles}
{fileLessComics.length} </dd>
</dd> </div>
</div>
)}
{/* Disk space consumed */} {/* Disk space consumed */}
{stats.comicDirectorySize.totalSizeInGB != null && ( {stats.comicDirectorySize.totalSizeInGB != null && (
<div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center"> <div className="flex flex-col rounded-lg bg-card-info px-4 py-6 text-center">
<dt className="text-lg font-medium text-gray-500">Size on disk</dt> <dt className="text-lg font-medium text-gray-500">Size on disk</dt>
<dd className="text-3xl text-green-600 md:text-5xl"> <dd className="text-3xl text-gray-700 md:text-5xl">
{stats.comicDirectorySize.totalSizeInGB.toFixed(2)} GB {stats.comicDirectorySize.totalSizeInGB.toFixed(2)} GB
</dd> </dd>
</div> </div>
@@ -66,14 +65,14 @@ export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactEleme
{/* Tagging coverage */} {/* Tagging coverage */}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{issues && issues.length > 0 && ( {issues && issues.length > 0 && (
<div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"> <div className="flex flex-col h-fit rounded-lg bg-card-info px-4 py-3 text-center">
<span className="text-xl">{issues.length}</span> <span className="text-xl text-gray-700">{issues.length}</span>
tagged with ComicVine tagged with ComicVine
</div> </div>
)} )}
{issuesWithComicInfoXML && issuesWithComicInfoXML.length > 0 && ( {issuesWithComicInfoXML && issuesWithComicInfoXML.length > 0 && (
<div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"> <div className="flex flex-col h-fit rounded-lg bg-card-info px-4 py-3 text-center">
<span className="text-xl">{issuesWithComicInfoXML.length}</span> <span className="text-xl text-gray-700">{issuesWithComicInfoXML.length}</span>
with ComicInfo.xml with ComicInfo.xml
</div> </div>
)} )}
@@ -85,7 +84,7 @@ export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactEleme
{fileTypes.map((ft) => ( {fileTypes.map((ft) => (
<span <span
key={ft.id} key={ft.id}
className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center" className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-card-info px-4 py-3 text-center text-gray-700"
> >
{ft.data.length} {ft.id} {ft.data.length} {ft.id}
</span> </span>
@@ -95,7 +94,7 @@ export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactEleme
{/* Publisher with most issues */} {/* Publisher with most issues */}
{topPublisher && ( {topPublisher && (
<div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3"> <div className="flex flex-col h-fit text-lg rounded-lg bg-card-info px-4 py-3 text-gray-700">
<span>{topPublisher.id}</span> <span>{topPublisher.id}</span>
{" has the most issues "} {" has the most issues "}
<span>{topPublisher.count}</span> <span>{topPublisher.count}</span>

4
src/client/graphql/generated.ts
View File

@@ -526,6 +526,7 @@ export type LocgMetadataInput = {
export type LibraryStatistics = { export type LibraryStatistics = {
__typename?: 'LibraryStatistics'; __typename?: 'LibraryStatistics';
comicDirectorySize: DirectorySize; comicDirectorySize: DirectorySize;
comicsMissingFiles: Scalars['Int']['output'];
statistics: Array<StatisticsFacet>; statistics: Array<StatisticsFacet>;
totalDocuments: Scalars['Int']['output']; totalDocuments: Scalars['Int']['output'];
}; };
@@ -1302,7 +1303,7 @@ export type GetVolumeGroupsQuery = { __typename?: 'Query', getComicBookGroups: A
export type GetLibraryStatisticsQueryVariables = Exact<{ [key: string]: never; }>; export type GetLibraryStatisticsQueryVariables = Exact<{ [key: string]: never; }>;
export type GetLibraryStatisticsQuery = { __typename?: 'Query', getLibraryStatistics: { __typename?: 'LibraryStatistics', totalDocuments: number, comicDirectorySize: { __typename?: 'DirectorySize', fileCount: number, totalSizeInGB: number }, statistics: Array<{ __typename?: 'StatisticsFacet', fileTypes?: Array<{ __typename?: 'FileTypeStats', id: string, data: Array<string> }> | null, issues?: Array<{ __typename?: 'IssueStats', data: Array<string>, id?: { __typename?: 'VolumeInfo', id?: number | null, name?: string | null } | null }> | null, fileLessComics?: Array<{ __typename?: 'Comic', id: string }> | null, issuesWithComicInfoXML?: Array<{ __typename?: 'Comic', id: string }> | null, publisherWithMostComicsInLibrary?: Array<{ __typename?: 'PublisherStats', id: string, count: number }> | null }> } }; export type GetLibraryStatisticsQuery = { __typename?: 'Query', getLibraryStatistics: { __typename?: 'LibraryStatistics', totalDocuments: number, comicsMissingFiles: number, comicDirectorySize: { __typename?: 'DirectorySize', fileCount: number, totalSizeInGB: number }, statistics: Array<{ __typename?: 'StatisticsFacet', fileTypes?: Array<{ __typename?: 'FileTypeStats', id: string, data: Array<string> }> | null, issues?: Array<{ __typename?: 'IssueStats', data: Array<string>, id?: { __typename?: 'VolumeInfo', id?: number | null, name?: string | null } | null }> | null, fileLessComics?: Array<{ __typename?: 'Comic', id: string }> | null, issuesWithComicInfoXML?: Array<{ __typename?: 'Comic', id: string }> | null, publisherWithMostComicsInLibrary?: Array<{ __typename?: 'PublisherStats', id: string, count: number }> | null }> } };
export type GetWeeklyPullListQueryVariables = Exact<{ export type GetWeeklyPullListQueryVariables = Exact<{
input: WeeklyPullListInput; input: WeeklyPullListInput;
@@ -1943,6 +1944,7 @@ export const GetLibraryStatisticsDocument = `
query GetLibraryStatistics { query GetLibraryStatistics {
getLibraryStatistics { getLibraryStatistics {
totalDocuments totalDocuments
comicsMissingFiles
comicDirectorySize { comicDirectorySize {
fileCount fileCount
totalSizeInGB totalSizeInGB

1
src/client/graphql/queries/dashboard.graphql
View File

@@ -179,6 +179,7 @@ query GetVolumeGroups {
query GetLibraryStatistics { query GetLibraryStatistics {
getLibraryStatistics { getLibraryStatistics {
totalDocuments totalDocuments
comicsMissingFiles
comicDirectorySize { comicDirectorySize {
fileCount fileCount
totalSizeInGB totalSizeInGB

1
tailwind.config.ts
View File

@@ -14,6 +14,7 @@ module.exports = {
uncompressed: "#FFF3E0", uncompressed: "#FFF3E0",
imported: "#d8dab0", imported: "#d8dab0",
missing: "#fee2e2", missing: "#fee2e2",
info: "#cdd9eb",
}, },
}, },
}, },