118 lines
4.2 KiB
TypeScript
118 lines
4.2 KiB
TypeScript
import React, { ReactElement, useEffect } from "react";
|
|
import prettyBytes from "pretty-bytes";
|
|
import { isEmpty, isUndefined, map } from "lodash";
|
|
|
|
export const LibraryStatistics = (
|
|
props: ILibraryStatisticsProps,
|
|
): ReactElement => {
|
|
// const { stats } = props;
|
|
return (
|
|
<div className="mt-5">
|
|
<h4 className="title is-4">
|
|
<i className="fa-solid fa-chart-simple"></i> Your Library In Numbers
|
|
</h4>
|
|
<p className="subtitle is-7">A brief snapshot of your library.</p>
|
|
<div className="columns is-multiline">
|
|
<div className="column is-narrow is-two-quarter">
|
|
<dl className="box">
|
|
<dd className="is-size-4">
|
|
<span className="has-text-weight-bold">
|
|
{props.stats.totalDocuments}
|
|
</span>{" "}
|
|
files
|
|
</dd>
|
|
<dd className="is-size-4">
|
|
Library size
|
|
<span className="has-text-weight-bold">
|
|
{" "}
|
|
{props.stats.comicDirectorySize &&
|
|
prettyBytes(props.stats.comicDirectorySize)}
|
|
</span>
|
|
</dd>
|
|
{!isUndefined(props.stats.statistics) &&
|
|
!isEmpty(props.stats.statistics[0].issues) && (
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold">
|
|
{props.stats.statistics[0].issues.length}
|
|
</span>{" "}
|
|
tagged with ComicVine
|
|
</dd>
|
|
)}
|
|
{!isUndefined(props.stats.statistics) &&
|
|
!isEmpty(props.stats.statistics[0].issuesWithComicInfoXML) && (
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold">
|
|
{props.stats.statistics[0].issuesWithComicInfoXML.length}
|
|
</span>{" "}
|
|
with
|
|
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
|
ComicInfo.xml
|
|
</span>
|
|
</dd>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="p-3 column is-one-quarter">
|
|
<dl className="box">
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold"></span> Issues
|
|
</dd>
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold">304</span> Volumes
|
|
</dd>
|
|
<dd className="is-size-6">
|
|
{!isUndefined(props.stats.statistics) &&
|
|
!isEmpty(props.stats.statistics[0].fileTypes) &&
|
|
map(props.stats.statistics[0].fileTypes, (fileType, idx) => {
|
|
return (
|
|
<span key={idx}>
|
|
<span className="has-text-weight-bold">
|
|
{fileType.data.length}
|
|
</span>
|
|
<span className="tag is-warning has-text-weight-bold mr-2 ml-1">
|
|
{fileType._id}
|
|
</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
{/* file types */}
|
|
<div className="p-3 column is-two-fifths">
|
|
{/* publisher with most issues */}
|
|
<dl className="box">
|
|
{!isUndefined(props.stats.statistics) &&
|
|
!isEmpty(
|
|
props.stats.statistics[0].publisherWithMostComicsInLibrary[0],
|
|
) && (
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold">
|
|
{
|
|
props.stats.statistics[0]
|
|
.publisherWithMostComicsInLibrary[0]._id
|
|
}
|
|
</span>
|
|
{" has the most issues "}
|
|
<span className="has-text-weight-bold">
|
|
{
|
|
props.stats.statistics[0]
|
|
.publisherWithMostComicsInLibrary[0].count
|
|
}
|
|
</span>
|
|
</dd>
|
|
)}
|
|
<dd className="is-size-6">
|
|
<span className="has-text-weight-bold">304</span> Volumes
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LibraryStatistics;
|