tubearchivist/frontend/src/components/ApplicationStats.tsx

60 lines
1.7 KiB
TypeScript

import { Fragment } from 'react';
import StatsInfoBoxItem from './StatsInfoBoxItem';
import formatNumbers from '../functions/formatNumbers';
import { ChannelStatsType } from '../api/loader/loadStatsChannel';
import { PlaylistStatsType } from '../api/loader/loadStatsPlaylist';
import { DownloadStatsType } from '../api/loader/loadStatsDownload';
type ApplicationStatsProps = {
channelStats?: ChannelStatsType;
playlistStats?: PlaylistStatsType;
downloadStats?: DownloadStatsType;
};
const ApplicationStats = ({
channelStats,
playlistStats,
downloadStats,
}: ApplicationStatsProps) => {
if (!channelStats || !playlistStats || !downloadStats) {
return <p id="loading">Loading...</p>;
}
const cards = [
{
title: 'Channels: ',
data: {
Subscribed: formatNumbers(channelStats.subscribed_true || 0),
Active: formatNumbers(channelStats.active_true || 0),
Total: formatNumbers(channelStats.doc_count || 0),
},
},
{
title: 'Playlists: ',
data: {
Subscribed: formatNumbers(playlistStats.subscribed_true || 0),
Active: formatNumbers(playlistStats.active_true || 0),
Total: formatNumbers(playlistStats.doc_count || 0),
},
},
{
title: `Downloads Pending: ${downloadStats.pending || 0}`,
data: {
Videos: formatNumbers(downloadStats.pending_videos || 0),
Shorts: formatNumbers(downloadStats.pending_shorts || 0),
Streams: formatNumbers(downloadStats.pending_streams || 0),
},
},
];
return cards.map(card => {
return (
<Fragment key={card.title}>
<StatsInfoBoxItem title={card.title} card={card.data} />
</Fragment>
);
});
};
export default ApplicationStats;