/* ============================================================
Screen 10 — Trendlar (Trends & Forecasting)
============================================================ */
function ScreenTrends() {
const [period, setPeriod] = useState('24h');
const [forecastTopic, setForecastTopic] = useState('onion');
// Trending keywords — multi-period
const KEYWORD_PERIODS = useMemo(() => {
return {
'24h': KEYWORDS.slice(),
'7d': KEYWORDS.map(k => ({ ...k, count: Math.round(k.count * 6.3), prev: Math.round(k.prev * 6.1) })),
'30d': KEYWORDS.map(k => ({ ...k, count: Math.round(k.count * 24), prev: Math.round(k.prev * 22) })),
};
}, []);
const sortedKw = useMemo(() => {
return [...KEYWORD_PERIODS[period]].map(k => ({ ...k, growth: ((k.count - k.prev) / Math.max(1, k.prev)) * 100 }))
.sort((a, b) => b.growth - a.growth);
}, [period]);
// Topic forecast
const FORECAST = useMemo(() => {
const out = {};
TOPICS.forEach(t => {
const hist = BY_DAY.slice(-30).map(d => d.byTopic[t.id]);
// simple forecast: last week avg + slope + noise
const lastWeek = hist.slice(-7).reduce((a, b) => a + b, 0) / 7;
const prevWeek = hist.slice(-14, -7).reduce((a, b) => a + b, 0) / 7;
const slope = (lastWeek - prevWeek) / 7;
const fc = [];
for (let i = 1; i <= 7; i++) {
const base = lastWeek + slope * i;
const noise = base * 0.08;
fc.push({
mean: Math.max(0, Math.round(base)),
lower: Math.max(0, Math.round(base - noise * 2)),
upper: Math.round(base + noise * 2),
});
}
out[t.id] = { hist, forecast: fc };
});
return out;
}, []);
// Anomaly log
const ANOMALIES = [
{ id: 'AN-2026-014', when: '14.05 · 13:42', topic: 'onion', region: 'sam', mag: 4.2, val: '−38% narx', cause: 'Saudiya import siyosati o\'zgardi', status: 'investigating' },
{ id: 'AN-2026-013', when: '14.05 · 11:18', topic: 'logistic', region: 'qsh', mag: 3.1, val: '+47% murojaat', cause: 'M39 yoʻlining qisman yopilishi', status: 'investigating' },
{ id: 'AN-2026-012', when: '13.05 · 22:04', topic: 'beef', region: 'fer', mag: 2.8, val: '+12% narx', cause: 'Veterinariya cheklovi (Andijon)', status: 'resolved' },
{ id: 'AN-2026-011', when: '12.05 · 09:30', topic: 'flour', region: null, mag: 2.4, val: '+28% salbiy sentiment', cause: 'Davlat zaxirasi tarqatish kechikishi', status: 'investigating' },
{ id: 'AN-2026-010', when: '10.05 · 16:55', topic: 'rice', region: 'xor', mag: 3.5, val: '+52% eksport so\'rov', cause: 'Yangi Qozogʻiston shartnomasi', status: 'resolved' },
{ id: 'AN-2026-009', when: '07.05 · 08:12', topic: 'oil', region: null, mag: 2.1, val: '−15% narx', cause: 'Paxta hosili kutilgandan yaxshi', status: 'resolved' },
{ id: 'AN-2026-008', when: '03.05 · 14:20', topic: 'poultry', region: 'tas', mag: 2.6, val: '−18% narx', cause: 'Brendlar oʻrtasidagi raqobat', status: 'monitoring' },
{ id: 'AN-2026-007', when: '28.04 · 11:00', topic: 'potato', region: 'jiz', mag: 3.0, val: 'kasallik tarqalishi', cause: 'Late blight (Phytophthora) hisoblari', status: 'resolved' },
];
// Seasonal pattern: year-over-year for selected topic
const SEASONAL = useMemo(() => {
const arr = [];
for (let i = 0; i < 52; i++) {
const seasonal = 1 + Math.sin((i / 52) * Math.PI * 2 + 1) * 0.35;
const baseT = 120 * seasonal;
arr.push({
week: i + 1,
thisYear: Math.round(baseT * (1.1 + (rand() - 0.5) * 0.2)),
lastYear: Math.round(baseT * (0.95 + (rand() - 0.5) * 0.2)),
prevYear: Math.round(baseT * (0.85 + (rand() - 0.5) * 0.2)),
});
}
return arr;
}, [forecastTopic]);
return (
Asosiy/Trendlar
Trendlar va prognozlarТренды и прогнозирование
{/* KPI summary */}
t.id === 'logistic').uz} hint="eng katta o'zgarish" mono={false} />
{/* Trending keywords */}
}
>
{sortedKw.slice(0, 20).map((kw, i) => {
const t = TOPIC_BY_ID[kw.topic];
return (
{String(i + 1).padStart(2, '0')}
{kw.w}
0 ? 'var(--jade)' : 'var(--rose)'} fill strokeWidth={1.2} />
{kw.count}
30 ? 'var(--jade)' : kw.growth > 0 ? 'var(--ink-2)' : 'var(--rose)',
}}>
{kw.growth > 0 ? '↑' : '↓'} {Math.abs(kw.growth).toFixed(0)}%
oldingi: {kw.prev}
);
})}
{/* 12-week history small multiples */}
{/* Anomaly log + Seasonal */}
| ID |
Vaqt |
Mavzu / hudud |
Anomaliya |
Magnituda |
Taxminiy sabab |
Holat |
{ANOMALIES.map(a => {
const t = TOPIC_BY_ID[a.topic];
return (
| {a.id} |
{a.when} |
{t.uz}
{a.region && · {REGION_BY_ID[a.region].code}}
|
{a.val} |
3 ? 'var(--rose)' : 'var(--amber)'} height={6} />
σ{a.mag.toFixed(1)}
|
{a.cause} |
{a.status === 'investigating' ? 'tekshiruv' : a.status === 'resolved' ? 'hal etilgan' : 'kuzatuv'}
|
);
})}
2026
2025
2024
52 hafta
{/* Topic momentum slope */}
);
}
// ============================================================
// Forecast chart with confidence band
// ============================================================
function ForecastChart({ history, forecast, color }) {
const [ref, size] = useSize();
const w = size.w || 700;
const h = 280;
const padL = 40, padR = 24, padT = 14, padB = 30;
const innerW = w - padL - padR;
const innerH = h - padT - padB;
const total = history.length + forecast.length;
const all = [...history, ...forecast.map(f => f.upper)];
const max = Math.max(...all) * 1.1;
const xs = (i) => padL + (i / (total - 1)) * innerW;
const y = (v) => padT + innerH - (v / max) * innerH;
const histPath = history.map((v, i) => (i === 0 ? `M ${xs(i)} ${y(v)}` : `L ${xs(i)} ${y(v)}`)).join(' ');
const histArea = histPath + ` L ${xs(history.length - 1)} ${y(0)} L ${xs(0)} ${y(0)} Z`;
const fcStart = history.length - 1;
// confidence band
const upperPath = [`M ${xs(fcStart)} ${y(history[history.length - 1])}`, ...forecast.map((f, i) => `L ${xs(fcStart + 1 + i)} ${y(f.upper)}`)].join(' ');
const lowerPath = forecast.slice().reverse().map((f, i) => `L ${xs(total - 1 - i)} ${y(f.lower)}`).join(' ');
const bandPath = `${upperPath} ${lowerPath} L ${xs(fcStart)} ${y(history[history.length - 1])} Z`;
const fcLinePath = [`M ${xs(fcStart)} ${y(history[history.length - 1])}`, ...forecast.map((f, i) => `L ${xs(fcStart + 1 + i)} ${y(f.mean)}`)].join(' ');
return (
{size.w > 0 && (
)}
{size.w > 0 && (
)}
{size.w > 0 && (
)}
);
}
function TopicHistoryGrid() {
const { data: api } = useApi('/api/stats/by-day?days=84', { pollMs: 60000 });
// Bucket API rows (topic_id, day, n) into 12-week buckets per topic
const cells = useMemo(() => {
const items = api?.items || [];
const today = new Date();
// 12 weeks × 7 days = 84 days; weeks[0] = oldest, weeks[11] = current
const weekKeys = []; // for each week, list of day-string keys
for (let w = 0; w < 12; w++) {
const wk = [];
for (let d = 0; d < 7; d++) {
const idx = (11 - w) * 7 + (6 - d); // days back from today
const dt = new Date(today.getTime() - idx * 86400000);
wk.push(dt.toISOString().slice(0, 10));
}
weekKeys.push(wk);
}
// Bucket: topic -> { day -> n }
const byTopicDay = {};
items.forEach((r) => {
if (!byTopicDay[r.topic_id]) byTopicDay[r.topic_id] = {};
byTopicDay[r.topic_id][r.day] = r.n;
});
return TOPICS.map((t) => {
const dayMap = byTopicDay[t.id] || {};
const weekly = weekKeys.map((days) => days.reduce((a, k) => a + (dayMap[k] || 0), 0));
const curr = weekly[weekly.length - 1];
const prev = weekly[weekly.length - 2] || 0;
const growth = prev > 0 ? ((curr - prev) / prev) * 100 : curr > 0 ? 100 : 0;
const max = Math.max(...weekly);
const peakIdx = weekly.indexOf(max);
const peakWeeksAgo = max === 0 ? -1 : (11 - peakIdx);
return { id: t.id, label: t.uz, color: t.color, weekly, curr, growth, peakWeeksAgo };
});
}, [api]);
return (
{cells.map(c => {
const up = c.growth >= 0;
return (
{c.label}
Bu hafta
{formatNum(c.curr)}
{up ? '↑' : '↓'} {Math.abs(c.growth).toFixed(0)}%
pik: {c.peakWeeksAgo < 0 ? '—' : c.peakWeeksAgo === 0 ? 'bu hafta' : `${c.peakWeeksAgo} hafta oldin`}
);
})}
№
Mavzu
O‘tgan
O‘zgarish
Bu hafta
Δ
{data.map((d, i) => {
const up = d.growth >= 0;
const trackColor = up ? 'oklch(0.55 0.10 155)' : 'oklch(0.55 0.14 25)';
const trackBg = up ? 'oklch(0.96 0.018 155)' : 'oklch(0.97 0.018 25)';
const xPrev = (d.prev / max) * 100;
const xCurr = (d.curr / max) * 100;
const lineLeft = Math.min(xPrev, xCurr);
const lineRight = Math.max(xPrev, xCurr);
return (
{String(i + 1).padStart(2, '0')}
{d.label}
{formatNum(d.prev)}
{/* Arrow indicating direction at midpoint */}
{up ? '→' : '←'}
{formatNum(d.curr)}
{up ? '↑' : '↓'} {Math.abs(d.growth).toFixed(1)}%
);
})}
);
}
window.ScreenTrends = ScreenTrends;