feat: P4 ChannelAnalytics tab; P5 FromUrlModal + URL→draft in ChannelView
This commit is contained in:
Nik (Claude)
@@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* ChannelAnalytics — вкладка аналитики в ChannelView.
|
||||
* Props: channelId, channelName
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { BarChart2, TrendingUp, Clock, RefreshCw,
|
||||
Heart, Share2, Eye, AlertCircle, Calendar } from 'lucide-react';
|
||||
|
||||
const DOW_SHORT = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'];
|
||||
const BAR_HEIGHT = 80;
|
||||
|
||||
// ── Мини-бар для гистограммы ──────────────────────────────────────────────────
|
||||
function Bar({ value, max, label, highlight }) {
|
||||
const pct = max > 0 ? (value / max) : 0;
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1 flex-1">
|
||||
<span className="text-[10px] text-text-mute">{value > 0 ? value : ''}</span>
|
||||
<div className="w-full rounded-t-sm" style={{
|
||||
height: BAR_HEIGHT,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
<div
|
||||
className={`w-full rounded-t-sm transition-all ${highlight ? 'bg-accent' : 'bg-accent/30'}`}
|
||||
style={{ height: `${Math.max(pct * BAR_HEIGHT, value > 0 ? 4 : 0)}px` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] text-text-mute">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Карточка метрики ──────────────────────────────────────────────────────────
|
||||
function MetricCard({ Icon, label, value, sub, color = 'text-accent' }) {
|
||||
return (
|
||||
<div className="card p-4 flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg bg-surface2 ${color}`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold">{value ?? '—'}</div>
|
||||
<div className="text-xs text-text-mute">{label}</div>
|
||||
{sub && <div className="text-xs text-text-mute mt-0.5">{sub}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Строка реакций ────────────────────────────────────────────────────────────
|
||||
function ReactionBar({ reactions }) {
|
||||
if (!reactions || !Object.keys(reactions).length) return null;
|
||||
const total = Object.values(reactions).reduce((s, v) => s + v, 0);
|
||||
return (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{Object.entries(reactions)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([emoji, count]) => (
|
||||
<span key={emoji} className="flex items-center gap-1 text-sm bg-surface2 px-2 py-0.5 rounded-full border border-border">
|
||||
{emoji} <span className="text-xs text-text-mute">{count}</span>
|
||||
</span>
|
||||
))}
|
||||
<span className="text-xs text-text-mute ml-auto">всего {total}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Главный компонент ─────────────────────────────────────────────────────────
|
||||
export default function ChannelAnalytics({ channelId, channelName }) {
|
||||
const [metrics, setMetrics] = useState(null);
|
||||
const [bestTime, setBestTime] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [days, setDays] = useState(30);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const [m, b] = await Promise.all([
|
||||
fetch(`/api/metrics/channel/${channelId}?days=${days}`).then(r => r.json()),
|
||||
fetch(`/api/metrics/best-time/${channelId}?days=90`).then(r => r.json()),
|
||||
]);
|
||||
if (m.error) throw new Error(m.error);
|
||||
setMetrics(m);
|
||||
setBestTime(b);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [channelId, days]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const totals = metrics?.totals || {};
|
||||
const topPosts = metrics?.top_posts || [];
|
||||
const reactionTotals = metrics?.reaction_totals || [];
|
||||
const totalReactions = reactionTotals.reduce((s, r) => s + parseInt(r.total), 0);
|
||||
|
||||
// Лучший день недели по кол-ву публикаций
|
||||
const dowData = Array.from({ length: 7 }, (_, i) => {
|
||||
const d = bestTime?.by_dow?.find(r => parseInt(r.dow) === i + 1);
|
||||
return { label: DOW_SHORT[i], value: d?.count || 0 };
|
||||
});
|
||||
const maxDow = Math.max(...dowData.map(d => d.value), 1);
|
||||
const bestDow = dowData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
|
||||
|
||||
// Лучший час
|
||||
const hourData = Array.from({ length: 24 }, (_, h) => {
|
||||
const d = bestTime?.by_hour?.find(r => parseInt(r.hour) === h);
|
||||
return { label: `${h}`, value: d?.count || 0 };
|
||||
});
|
||||
const maxHour = Math.max(...hourData.map(d => d.value), 1);
|
||||
const bestHour = hourData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* Тулбар */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<h3 className="font-semibold flex items-center gap-2">
|
||||
<BarChart2 className="w-4 h-4 text-accent" />
|
||||
Аналитика
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className="input py-1 text-sm w-32"
|
||||
value={days}
|
||||
onChange={e => setDays(parseInt(e.target.value))}
|
||||
>
|
||||
<option value={7}>7 дней</option>
|
||||
<option value={30}>30 дней</option>
|
||||
<option value={90}>90 дней</option>
|
||||
</select>
|
||||
<button onClick={load} className="btn-ghost p-1.5 rounded-lg" title="Обновить">
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="card p-3 text-sm text-red-400 flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" /> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Карточки-цифры */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<MetricCard Icon={Calendar} label={`Постов за ${days} дн.`} value={totals.total_posts || 0} />
|
||||
<MetricCard Icon={Eye} label="Опубликовано в TG" value={totals.published_to_tg || 0} />
|
||||
<MetricCard Icon={Heart} label="Реакций за период" value={totalReactions || 0} color="text-pink-400" />
|
||||
<MetricCard Icon={Share2} label="Пересылок" value={totals.total_forwards || 0} color="text-blue-400" />
|
||||
</div>
|
||||
|
||||
{/* Топ реакций */}
|
||||
{reactionTotals.length > 0 && (
|
||||
<div className="card p-4">
|
||||
<div className="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||
<Heart className="w-4 h-4 text-pink-400" /> Реакции за {days} дней
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{reactionTotals.map(r => (
|
||||
<span key={r.emoji} className="flex items-center gap-1.5 text-sm bg-surface2 px-3 py-1 rounded-full border border-border">
|
||||
{r.emoji}
|
||||
<span className="font-semibold">{r.total}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Лучший день недели */}
|
||||
<div className="card p-4">
|
||||
<div className="text-sm font-semibold mb-1 flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-accent" /> Активность по дням недели
|
||||
</div>
|
||||
{bestDow.value > 0 && (
|
||||
<p className="text-xs text-text-mute mb-3">
|
||||
Чаще всего публикуешь в <span className="text-accent font-medium">{DOW_SHORT[bestDow.i]}</span>
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-1 items-end" style={{ height: BAR_HEIGHT + 32 }}>
|
||||
{dowData.map((d, i) => (
|
||||
<Bar key={i} value={d.value} max={maxDow} label={d.label} highlight={i === bestDow.i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Лучший час */}
|
||||
<div className="card p-4">
|
||||
<div className="text-sm font-semibold mb-1 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-accent" /> Активность по часам (МСК, 90 дн.)
|
||||
</div>
|
||||
{bestHour.value > 0 && (
|
||||
<p className="text-xs text-text-mute mb-3">
|
||||
Пик публикаций в <span className="text-accent font-medium">{bestHour.i}:00</span>
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-px items-end overflow-x-auto" style={{ height: BAR_HEIGHT + 32 }}>
|
||||
{hourData.map((d, i) => (
|
||||
<Bar key={i} value={d.value} max={maxHour} label={i % 4 === 0 ? String(i) : ''} highlight={i === bestHour.i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Топ постов по реакциям */}
|
||||
{topPosts.length > 0 && (
|
||||
<div className="card p-4">
|
||||
<div className="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||
<Heart className="w-4 h-4 text-pink-400" /> Топ постов по реакциям
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{topPosts.map(p => (
|
||||
<div key={p.id} className="p-3 rounded-lg bg-surface2 border border-border">
|
||||
<div className="text-xs text-text-soft line-clamp-2 mb-2">{p.preview}</div>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<ReactionBar reactions={p.reactions} />
|
||||
{p.forwards > 0 && (
|
||||
<span className="text-xs text-text-mute flex items-center gap-1">
|
||||
<Share2 className="w-3 h-3" /> {p.forwards}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-text-mute ml-auto">
|
||||
{p.published_at ? new Date(p.published_at).toLocaleDateString('ru', { day:'numeric', month:'short' }) : ''}
|
||||
</span>
|
||||
{p.tg_message_id && (
|
||||
<a
|
||||
href={`https://t.me/${channelName?.replace('@','')}/${p.tg_message_id}`}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="text-xs text-accent hover:underline"
|
||||
>
|
||||
Открыть
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Нет данных */}
|
||||
{!loading && metrics && topPosts.length === 0 && reactionTotals.length === 0 && (
|
||||
<div className="card p-8 text-center text-text-mute">
|
||||
<BarChart2 className="w-8 h-8 mx-auto mb-3 opacity-30" />
|
||||
<p>Пока нет данных для отображения</p>
|
||||
<p className="text-xs mt-1">Реакции появятся после первых публикаций через этот канал</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user