114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import {
|
|
Paper,
|
|
Stack,
|
|
Text,
|
|
Group,
|
|
ThemeIcon,
|
|
Box,
|
|
Badge,
|
|
useMantineTheme
|
|
} from '@mantine/core'
|
|
import { LineChart, BarChart } from '@mantine/charts'
|
|
import { TbTimeline, TbChartBar, TbArrowUpRight } from 'react-icons/tb'
|
|
|
|
interface ChartProps {
|
|
data?: any[]
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export function VillageActivityLineChart({ data = [], isLoading }: ChartProps) {
|
|
const theme = useMantineTheme()
|
|
|
|
return (
|
|
<Paper withBorder p="xl" radius="2xl" className="glass h-full">
|
|
<Stack gap="md" h="100%">
|
|
<Group justify="space-between">
|
|
<Group gap="sm">
|
|
<ThemeIcon variant="light" size="lg" radius="md" color="blue">
|
|
<TbTimeline size={20} />
|
|
</ThemeIcon>
|
|
<Box>
|
|
<Text fw={700} size="sm">DAILY ACTIVITY - ALL VILLAGES</Text>
|
|
<Text size="xs" c="dimmed">Trend over the last 7 days</Text>
|
|
</Box>
|
|
</Group>
|
|
<Badge variant="light" color="blue" size="sm" rightSection={<TbArrowUpRight size={12} />}>
|
|
{isLoading ? '...' : 'Live'}
|
|
</Badge>
|
|
</Group>
|
|
|
|
<Box h={300} mt="lg">
|
|
<LineChart
|
|
h={300}
|
|
data={data}
|
|
dataKey="date"
|
|
series={[{ name: 'logs', color: '#2563EB' }]}
|
|
curveType="monotone"
|
|
tickLine="none"
|
|
gridAxis="x"
|
|
withTooltip
|
|
tooltipAnimationDuration={200}
|
|
styles={{
|
|
root: {
|
|
'.recharts-line-curve': {
|
|
strokeWidth: 3,
|
|
filter: 'drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3))'
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
export function VillageComparisonBarChart({ data = [], isLoading }: ChartProps) {
|
|
const theme = useMantineTheme()
|
|
|
|
return (
|
|
<Paper withBorder p="xl" radius="2xl" className="glass h-full">
|
|
<Stack gap="md" h="100%">
|
|
<Group justify="space-between">
|
|
<Group gap="sm">
|
|
<ThemeIcon variant="light" size="lg" radius="md" color="brand-purple">
|
|
<TbChartBar size={20} />
|
|
</ThemeIcon>
|
|
<Box>
|
|
<Text fw={700} size="sm">USAGE COMPARISON BETWEEN VILLAGES</Text>
|
|
<Text size="xs" c="dimmed">Most active village deployments</Text>
|
|
</Box>
|
|
</Group>
|
|
</Group>
|
|
|
|
<Box h={300} mt="lg">
|
|
<BarChart
|
|
h={300}
|
|
data={data}
|
|
dataKey="village"
|
|
series={[{ name: 'activity', color: 'indigo.6' }]}
|
|
withTooltip
|
|
tickLine="none"
|
|
gridAxis="y"
|
|
barProps={{
|
|
radius: [8, 8, 4, 4],
|
|
}}
|
|
styles={{
|
|
bar: {
|
|
fill: 'url(#barGradient)',
|
|
}
|
|
}}
|
|
>
|
|
<defs>
|
|
<linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#2563EB" stopOpacity={1} />
|
|
<stop offset="100%" stopColor="#7C3AED" stopOpacity={0.8} />
|
|
</linearGradient>
|
|
</defs>
|
|
</BarChart>
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
)
|
|
}
|