diff --git a/public/locales/en/modules/media-requests-stats.json b/public/locales/en/modules/media-requests-stats.json index 3c7d10090..a06a52860 100644 --- a/public/locales/en/modules/media-requests-stats.json +++ b/public/locales/en/modules/media-requests-stats.json @@ -3,7 +3,10 @@ "name": "Media request stats", "description": "Statistics about your media requests", "settings": { - "title": "Media requests stats" + "title": "Media requests stats", + "direction": { + "label": "Direction of the layout." + } } }, "stats": { diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx index fd81d8f0a..2af61d3e3 100644 --- a/src/widgets/media-requests/MediaRequestStatsTile.tsx +++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx @@ -1,4 +1,4 @@ -import { Card, Center, Flex, Stack, Text } from '@mantine/core'; +import { Card, Flex, Stack, Text } from '@mantine/core'; import { IconChartBar } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; @@ -11,14 +11,23 @@ import { MediaRequestStatus } from './media-request-types'; const definition = defineWidget({ id: 'media-requests-stats', icon: IconChartBar, - options: {}, - component: MediaRequestStatsTile, + options: { + direction: { + type: 'select', + defaultValue: 'row' as 'row' | 'column', + data: [ + { label: 'Horizontal', value: 'row' }, + { label: 'Vertical', value: 'column' }, + ], + }, + }, gridstack: { minWidth: 1, - minHeight: 2, + minHeight: 1, maxWidth: 12, maxHeight: 12, }, + component: MediaRequestStatsTile, }); export type MediaRequestStatsWidget = IWidget<(typeof definition)['id'], typeof definition>; @@ -36,41 +45,46 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) { } return ( - - -
- - - {data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} - - - {t('stats.pending')} - - -
-
- -
- - {data.filter((x) => x.type === 'tv').length} - - {t('stats.tvRequests')} - - -
-
- -
- - {data.filter((x) => x.type === 'movie').length} - - {t('stats.movieRequests')} - - -
-
+ + x.status === MediaRequestStatus.PendingApproval).length} + label={t('stats.pending')} + /> + x.type === 'tv').length} + label={t('stats.tvRequests')} + /> + x.type === 'movie').length} + label={t('stats.movieRequests')} + /> ); } -export default definition; +interface StatCardProps { + number: number; + label: string; +} + +const StatCard = ({ number, label }: StatCardProps) => { + return ( + + + + {number} + + + {label} + + + + ); +}; + +export default definition; \ No newline at end of file