/* ============================================================
Screen 3 — Mavzular (Topic Deep Dives)
============================================================ */
function ScreenTopics() {
const [selected, setSelected] = useState(null);
return (
Asosiy/Mavzular
{selected && <>/{TOPIC_BY_ID[selected]?.uz}}
{selected ? TOPIC_BY_ID[selected]?.uz : 'Mavzular'}
{selected ? TOPIC_BY_ID[selected]?.ru : 'Темы · 12 категорий'}
{selected && }
{selected ?
:
}
);
}
// ============================================================
// Topic grid — 12 cards
// ============================================================
function TopicGrid({ onSelect }) {
const ranking = useApi('/api/stats/topic-ranking?days=30', { pollMs: 30000 });
const sentByT = useApi('/api/stats/sentiment-by-topic', { pollMs: 30000 });
const byDay = useApi('/api/stats/by-day?days=7', { pollMs: 30000 });
const overview = useApi('/api/stats/overview', { pollMs: 30000 });
// Map per-topic stats together
const stats = useMemo(() => {
const out = {};
(ranking.data?.items || []).forEach(t => {
out[t.id] = { ...out[t.id], total: t.total, this_week: t.this_week, prev_week: t.prev_week, uz: t.uz, color: t.color };
});
(sentByT.data?.items || []).forEach(t => {
out[t.id] = { ...out[t.id], pos: t.pos || 0, neu: t.neu || 0, neg: t.neg || 0 };
});
return out;
}, [ranking.data, sentByT.data]);
// Per-topic 7-day sparkline arrays
const sparkByTopic = useMemo(() => {
const items = byDay.data?.items || [];
const today = new Date();
const keys = Array.from({ length: 7 }, (_, i) => {
const d = new Date(today.getTime() - (6 - i) * 86400000);
return d.toISOString().slice(0, 10);
});
const bucket = {};
items.forEach(r => {
if (!bucket[r.topic_id]) bucket[r.topic_id] = {};
bucket[r.topic_id][r.day] = r.n;
});
const out = {};
Object.keys(bucket).forEach(tid => { out[tid] = keys.map(k => bucket[tid][k] || 0); });
return out;
}, [byDay.data]);
const totalAll = overview.data?.total || 0;
return (
<>
{TOPICS.map(t => {
const b = stats[t.id] || {};
const total = b.total || 0;
const tw = b.this_week || 0;
const pw = b.prev_week || 0;
const trend = pw > 0 ? ((tw - pw) / pw) * 100 : tw > 0 ? 100 : 0;
const trendUp = trend >= 0;
const sentTotal = (b.pos || 0) + (b.neu || 0) + (b.neg || 0);
const sentScore = sentTotal > 0 ? ((b.pos - b.neg) / sentTotal) : 0;
const share = totalAll > 0 ? (total / totalAll) * 100 : 0;
const spark = sparkByTopic[t.id] || [];
return (
onSelect(t.id)}
>
{trendUp ? '↑' : '↓'} {Math.abs(trend).toFixed(1)}%
{share.toFixed(1)}%
ulush
{spark.length > 0 && (
)}
0.1 ? 'var(--jade)' : sentScore < -0.1 ? 'var(--rose)' : 'var(--ink-4)' }} />
{sentScore > 0.1 ? 'Ijobiy' : sentScore < -0.1 ? 'Salbiy' : 'Neytral'}
{sentTotal} sent.
);
})}
({ id: t.id, label: t.uz, value: stats[t.id]?.total || 0, color: t.color }))}
label={`${totalAll}`}
sub="jami"
/>
);
}
// ============================================================
// Topic detail
// ============================================================
function TopicDetail({ topicId }) {
const { data, loading } = useApi(`/api/topics/${topicId}`, { pollMs: 20000 });
const t = TOPIC_BY_ID[topicId];
// Build a 60-day series from daily{ day, n } even before data lands
const series = useMemo(() => {
const daily = data?.daily || [];
const today = new Date();
const keys = Array.from({ length: 60 }, (_, i) => {
const d = new Date(today.getTime() - (59 - i) * 86400000);
return d.toISOString().slice(0, 10);
});
const byDay = Object.fromEntries(daily.map(d => [d.day, d.n]));
return keys.map(k => byDay[k] || 0);
}, [data]);
// Anomaly detection over 60-day series
const anomalies = useMemo(() => {
const out = [];
for (let i = 6; i < series.length; i++) {
const window = series.slice(Math.max(0, i - 7), i);
const avg = window.reduce((a, b) => a + b, 0) / window.length;
if (series[i] > avg * 1.55 && series[i] > 2) out.push(i);
}
return out.slice(0, 5);
}, [series]);
const xLabels = useMemo(() => {
const today = new Date();
return [0, 1, 2, 3, 4].map(i => {
const idx = Math.round((i / 4) * 59);
const d = new Date(today.getTime() - (59 - idx) * 86400000);
return `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}`;
});
}, []);
if (!data) {
return {loading ? 'Yuklanmoqda…' : 'Maʼlumot yoʻq.'}
;
}
const stats = data.stats || {};
const total = stats.total || 0;
const tw = stats.this_week || 0;
const pw = stats.prev_week || 0;
const trend = pw > 0 ? ((tw - pw) / pw) * 100 : tw > 0 ? 100 : 0;
// Sub-topic breakdown from API
const subBreakdown = (data.sub_topics || []).map(s => ({
label: s.name, value: s.n, color: t.color,
}));
// Fallback: if backend has no sub_topic data, use topic.subs as labels with zero values
const subData = subBreakdown.length > 0
? subBreakdown
: t.subs.map(s => ({ label: s, value: 0, color: t.color }));
// Regional values
const regionalValues = useMemo(() => {
const out = {};
(data.by_region || []).forEach(r => { out[r.id] = r.n; });
return out;
}, [data]);
// Top farmers
const topFarmers = data.top_farmers || [];
return (
<>
{/* Hero */}
{t.uz}
{t.ru} · {t.en}
{t.subs.map(s => {s})}
= 0 ? '+' : ''}${trend.toFixed(1)}%`} color={trend >= 0 ? 'var(--jade)' : 'var(--rose)'} />
{/* Row 1: time series + sub-topics */}
{anomalies.length > 0 && (
Anomaliyalar:
{anomalies.slice(0, 3).map((a, i) => {
const today = new Date();
const d = new Date(today.getTime() - (59 - a) * 86400000);
return (
⚠ {String(d.getDate()).padStart(2, '0')}.{String(d.getMonth() + 1).padStart(2, '0')} · {series[a]} ta
);
})}
)}
{/* Row 2: map */}
Net sentiment
0 && stats.pos > stats.neg ? 'var(--jade)' : total > 0 && stats.neg > stats.pos ? 'var(--rose)' : 'var(--ink)' }}>
{total > 0 ? (((stats.pos - stats.neg) / total) * 100).toFixed(1) : '0'}%
Shoshilinch
{stats.urgent || 0}
{/* Row 3: top farmers */}
{topFarmers.length === 0 ? (
Hali fermer yoʻq.
) : (
| # |
Fermer |
Murojaat |
{topFarmers.map((tf, i) => {
const max = topFarmers[0]?.n || 1;
return (
| {String(i + 1).padStart(2, '0')} |
|
|
);
})}
)}
);
}
function KpiCell({ label, value, color }) {
return (
);
}
function SentRow({ color, label, value, max }) {
const pct = max > 0 ? (value / max) * 100 : 0;
return (
{label}
{value} · {pct.toFixed(0)}%
);
}
window.ScreenTopics = ScreenTopics;