52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import {useViolationAnalyticStatistic, UseViolationStatistic} from '@/app/hooks/react-query/useViolationAnalyticStatistic';
|
|
|
|
interface DomainListProps {
|
|
data: UseViolationStatistic;
|
|
}
|
|
|
|
export default function AnalyticsCardGeography() {
|
|
const t = useTranslations('Global');
|
|
const { data: violationGeography, isLoading, isError, error } = useViolationAnalyticStatistic('tld');
|
|
|
|
const DomainList = ({ data }: DomainListProps) => {
|
|
const topDomains = Object.entries(data)
|
|
.map(([domain, count]) => ({ domain, count }))
|
|
.sort((a, b) => b.count - a.count)
|
|
.slice(0, 6);
|
|
|
|
return (
|
|
<div className="storage-timeline">
|
|
{topDomains.map((item, index) => (
|
|
<div
|
|
className="timeline-item"
|
|
key={item.domain}
|
|
>
|
|
<span className="timeline-month">
|
|
{item.domain}
|
|
</span>
|
|
<span className="method-count">
|
|
{item.count}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="analytics-card">
|
|
<div className="analytics-header">
|
|
<div className="analytics-icon"></div>
|
|
<h3 className="analytics-title">
|
|
{t('geography-of-violations')}
|
|
</h3>
|
|
</div>
|
|
{violationGeography && (
|
|
<DomainList data={violationGeography} />
|
|
)}
|
|
</div>
|
|
)
|
|
} |