78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import { Group, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
|
|
import { IconDevices, IconNetwork, IconUsers, IconVideo } from "@tabler/icons-react";
|
|
|
|
import type { TracearrDashboardData } from "@homarr/integrations/types";
|
|
import { useI18n } from "@homarr/translation/client";
|
|
|
|
export function StatsBar({
|
|
stats,
|
|
summary,
|
|
width,
|
|
transparent = false,
|
|
}: {
|
|
stats: TracearrDashboardData["stats"];
|
|
summary: TracearrDashboardData["streams"]["summary"];
|
|
width: number;
|
|
transparent?: boolean;
|
|
}) {
|
|
const t = useI18n("widget.tracearr");
|
|
const cols = width > 400 ? 4 : width > 250 ? 2 : 1;
|
|
|
|
return (
|
|
<SimpleGrid cols={cols} spacing="xs">
|
|
<StatCard
|
|
icon={<IconVideo size="var(--mantine-font-size-md)" />}
|
|
label={t("stats.activeStreams")}
|
|
value={stats.activeStreams}
|
|
transparent={transparent}
|
|
/>
|
|
<StatCard
|
|
icon={<IconUsers size="var(--mantine-font-size-md)" />}
|
|
label={t("stats.totalUsers")}
|
|
value={stats.totalUsers}
|
|
transparent={transparent}
|
|
/>
|
|
<StatCard
|
|
icon={<IconDevices size="var(--mantine-font-size-md)" />}
|
|
label={t("stats.transcodes")}
|
|
value={`${summary.transcodes}/${summary.total}`}
|
|
transparent={transparent}
|
|
/>
|
|
<StatCard
|
|
icon={<IconNetwork size="var(--mantine-font-size-md)" />}
|
|
label={t("stats.bandwidth")}
|
|
value={summary.totalBitrate}
|
|
transparent={transparent}
|
|
/>
|
|
</SimpleGrid>
|
|
);
|
|
}
|
|
|
|
function StatCard({
|
|
icon,
|
|
label,
|
|
value,
|
|
transparent,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string | number;
|
|
transparent: boolean;
|
|
}) {
|
|
return (
|
|
<Paper p="xs" radius="lg" bg={transparent ? "transparent" : undefined}>
|
|
<Group gap={4} wrap="nowrap">
|
|
{icon}
|
|
<Stack gap={0} style={{ overflow: "hidden" }}>
|
|
<Text size="xs" c="dimmed" lineClamp={1}>
|
|
{label}
|
|
</Text>
|
|
<Text size="sm" fw={600}>
|
|
{value}
|
|
</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Paper>
|
|
);
|
|
}
|