v5: дашборд с аналитикой по дням и графиками
This commit is contained in:
parent
4291390583
commit
bd640d413b
@ -2,3 +2,7 @@
|
|||||||
|
|
||||||
up to date in 393ms
|
up to date in 393ms
|
||||||
Dashboard running on port 3000
|
Dashboard running on port 3000
|
||||||
|
--- run Thu Aug 27 06:53:37 AM UTC 2026 :: npm start --silent
|
||||||
|
|
||||||
|
up to date in 333ms
|
||||||
|
Dashboard running on port 3000
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
86
|
578
|
||||||
|
|||||||
196
index.html
196
index.html
@ -3,31 +3,45 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>Дашборд заказов</title>
|
<title>Дашборд заказов - Аналитика</title>
|
||||||
<style>
|
<style>
|
||||||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--success:#10B981;--warning:#F59E0B;--danger:#EF4444}
|
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--success:#10B981;--warning:#F59E0B;--danger:#EF4444;--purple:#8B5CF6}
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f8f9fa}
|
body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f8f9fa}
|
||||||
.container{max-width:1600px;margin:0 auto;padding:24px}
|
.container{max-width:1600px;margin:0 auto;padding:24px}
|
||||||
.header{background:var(--ink);color:var(--white);padding:20px 24px;margin-bottom:24px;border-radius:12px}
|
.header{background:var(--ink);color:var(--white);padding:20px 24px;margin-bottom:24px;border-radius:12px}
|
||||||
.header h1{font-size:24px;font-weight:700}
|
.header h1{font-size:24px;font-weight:700}
|
||||||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
|
||||||
.stat-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
.stat-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
||||||
.stat-label{font-size:13px;color:var(--gray-500);margin-bottom:8px;text-transform:uppercase}
|
.stat-label{font-size:12px;color:var(--gray-500);margin-bottom:8px;text-transform:uppercase}
|
||||||
.stat-value{font-size:28px;font-weight:700;color:var(--ink)}
|
.stat-value{font-size:28px;font-weight:700;color:var(--ink)}
|
||||||
.stat-card.primary .stat-value{color:var(--cyan)}
|
.stat-card.primary .stat-value{color:var(--cyan)}
|
||||||
.stat-card.success .stat-value{color:var(--success)}
|
.stat-card.success .stat-value{color:var(--success)}
|
||||||
.stat-card.warning .stat-value{color:var(--warning)}
|
.stat-card.warning .stat-value{color:var(--warning)}
|
||||||
.stat-card.danger .stat-value{color:var(--danger)}
|
.stat-card.danger .stat-value{color:var(--danger)}
|
||||||
|
.stat-card.purple .stat-value{color:var(--purple)}
|
||||||
|
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:24px}
|
||||||
|
.chart-panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
||||||
|
.chart-panel h3{font-size:16px;font-weight:700;margin-bottom:16px}
|
||||||
|
.chart-container{height:250px;position:relative}
|
||||||
|
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:200px;padding-top:20px}
|
||||||
|
.bar{flex:1;background:var(--cyan);border-radius:4px 4px 0 0;min-width:20px;position:relative;transition:opacity 0.3s}
|
||||||
|
.bar:hover{opacity:0.7}
|
||||||
|
.bar-label{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap}
|
||||||
|
.bar-value{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600}
|
||||||
|
.pie-chart{width:200px;height:200px;border-radius:50%;margin:0 auto;position:relative}
|
||||||
|
.legend{display:grid;gap:8px;margin-top:16px}
|
||||||
|
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
|
||||||
|
.legend-color{width:16px;height:16px;border-radius:4px}
|
||||||
.main-grid{display:grid;grid-template-columns:1fr 450px;gap:24px}
|
.main-grid{display:grid;grid-template-columns:1fr 450px;gap:24px}
|
||||||
.panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
.panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
||||||
.panel h2{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
.panel h2{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
||||||
.table-container{overflow-x:auto;max-height:600px;overflow-y:auto}
|
.table-container{overflow-x:auto;max-height:500px;overflow-y:auto}
|
||||||
.table{width:100%;border-collapse:collapse;font-size:13px}
|
.table{width:100%;border-collapse:collapse;font-size:13px}
|
||||||
.table th,.table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--gray-100);white-space:nowrap}
|
.table th,.table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--gray-100);white-space:nowrap}
|
||||||
.table th{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;position:sticky;top:0;background:var(--white)}
|
.table th{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;position:sticky;top:0;background:var(--white)}
|
||||||
.table tr:hover{background:var(--cyan-50)}
|
.table tr:hover{background:var(--cyan-50)}
|
||||||
.table td:nth-child(2){max-width:300px;white-space:normal}
|
.table td:nth-child(2){max-width:250px;white-space:normal}
|
||||||
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
|
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
|
||||||
.badge-в_работе{background:#FEF3C7;color:#92400E}
|
.badge-в_работе{background:#FEF3C7;color:#92400E}
|
||||||
.badge-выполнен{background:#DCFCE7;color:#166534}
|
.badge-выполнен{background:#DCFCE7;color:#166534}
|
||||||
@ -47,7 +61,9 @@ body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
|
|||||||
.filter-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
|
.filter-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
|
||||||
.filter-row input,.filter-row select{padding:8px 12px;border:1px solid var(--gray-100);border-radius:6px;font-size:13px}
|
.filter-row input,.filter-row select{padding:8px 12px;border:1px solid var(--gray-100);border-radius:6px;font-size:13px}
|
||||||
.search-input{flex:1;min-width:200px}
|
.search-input{flex:1;min-width:200px}
|
||||||
@media(max-width:1100px){.main-grid{grid-template-columns:1fr}}
|
.date-filter{display:flex;gap:8px;align-items:center;margin-bottom:16px}
|
||||||
|
.date-filter input{padding:8px 12px;border:1px solid var(--gray-100);border-radius:6px;font-size:13px}
|
||||||
|
@media(max-width:1100px){.main-grid{grid-template-columns:1fr}.charts-grid{grid-template-columns:1fr}}
|
||||||
@media(max-width:640px){.stats{grid-template-columns:1fr}.container{padding:16px}}
|
@media(max-width:640px){.stats{grid-template-columns:1fr}.container{padding:16px}}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@ -75,6 +91,41 @@ body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
|
|||||||
<div class="stat-label">Отказы</div>
|
<div class="stat-label">Отказы</div>
|
||||||
<div class="stat-value" id="stat-rejected">0</div>
|
<div class="stat-value" id="stat-rejected">0</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="stat-card purple">
|
||||||
|
<div class="stat-label">Конверсия</div>
|
||||||
|
<div class="stat-value" id="stat-conversion">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="charts-grid">
|
||||||
|
<div class="chart-panel">
|
||||||
|
<h3>📈 Динамика по дням</h3>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="bar-chart" id="daily-chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-panel">
|
||||||
|
<h3>📊 Статусы заказов</h3>
|
||||||
|
<div class="chart-container" style="display:flex;align-items:center;justify-content:center">
|
||||||
|
<div class="pie-chart" id="status-pie" style="background:conic-gradient(var(--cyan) 0deg 0deg,#10B981 0deg 0deg,#F59E0B 0deg 0deg)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="legend" id="status-legend"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="charts-grid">
|
||||||
|
<div class="chart-panel">
|
||||||
|
<h3>📱 Каналы продаж</h3>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="bar-chart" id="channel-chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-panel">
|
||||||
|
<h3>👥 Топ операторов</h3>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="bar-chart" id="operator-chart"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-grid">
|
<div class="main-grid">
|
||||||
@ -166,19 +217,142 @@ function getStatusClass(status) {
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function extractDateFromId(id) {
|
||||||
|
const idStr = String(id);
|
||||||
|
if (idStr.length >= 6) {
|
||||||
|
const day = idStr.slice(4, 6);
|
||||||
|
const month = idStr.slice(2, 4);
|
||||||
|
const year = '20' + idStr.slice(0, 2);
|
||||||
|
return year + '-' + month + '-' + day;
|
||||||
|
}
|
||||||
|
return new Date().toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupByDate(orders) {
|
||||||
|
const groups = {};
|
||||||
|
orders.forEach(o => {
|
||||||
|
const date = extractDateFromId(o.id);
|
||||||
|
if (!groups[date]) groups[date] = 0;
|
||||||
|
groups[date]++;
|
||||||
|
});
|
||||||
|
return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupByChannel(orders) {
|
||||||
|
const groups = {};
|
||||||
|
orders.forEach(o => {
|
||||||
|
const ch = o.channel || 'Без канала';
|
||||||
|
if (!groups[ch]) groups[ch] = 0;
|
||||||
|
groups[ch]++;
|
||||||
|
});
|
||||||
|
return Object.entries(groups).sort((a, b) => b[1] - a[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupByOperator(orders) {
|
||||||
|
const groups = {};
|
||||||
|
orders.forEach(o => {
|
||||||
|
const op = o.operator || 'Без оператора';
|
||||||
|
if (!groups[op]) groups[op] = 0;
|
||||||
|
groups[op]++;
|
||||||
|
});
|
||||||
|
return Object.entries(groups).sort((a, b) => b[1] - a[1]).slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupByStatus(orders) {
|
||||||
|
const groups = {'в работе': 0, 'выполнен': 0, 'ОТКАЗ': 0};
|
||||||
|
orders.forEach(o => {
|
||||||
|
if (groups[o.status] !== undefined) groups[o.status]++;
|
||||||
|
});
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDailyChart(data) {
|
||||||
|
const container = document.getElementById("daily-chart");
|
||||||
|
if (data.length === 0) {
|
||||||
|
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const max = Math.max(...data.map(d => d[1]));
|
||||||
|
container.innerHTML = data.map(d => {
|
||||||
|
const height = (d[1] / max) * 180;
|
||||||
|
const date = d[0].slice(5) + '.' + d[0].slice(0, 4);
|
||||||
|
return '<div class="bar" style="height:' + height + 'px"><span class="bar-value">' + d[1] + '</span><span class="bar-label">' + date + '</span></div>';
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderChannelChart(data) {
|
||||||
|
const container = document.getElementById("channel-chart");
|
||||||
|
if (data.length === 0) {
|
||||||
|
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const max = Math.max(...data.map(d => d[1]));
|
||||||
|
container.innerHTML = data.map(d => {
|
||||||
|
const height = (d[1] / max) * 180;
|
||||||
|
return '<div class="bar" style="height:' + height + 'px;background:#8B5CF6"><span class="bar-value">' + d[1] + '</span><span class="bar-label" style="transform:translateX(-50%) rotate(-45deg);font-size:9px">' + d[0].slice(0, 8) + '</span></div>';
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderOperatorChart(data) {
|
||||||
|
const container = document.getElementById("operator-chart");
|
||||||
|
if (data.length === 0) {
|
||||||
|
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const max = Math.max(...data.map(d => d[1]));
|
||||||
|
container.innerHTML = data.map(d => {
|
||||||
|
const height = (d[1] / max) * 180;
|
||||||
|
return '<div class="bar" style="height:' + height + 'px;background:#F59E0B"><span class="bar-value">' + d[1] + '</span><span class="bar-label" style="transform:translateX(-50%) rotate(-45deg);font-size:9px">' + d[0].slice(0, 10) + '</span></div>';
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderStatusPie(statuses) {
|
||||||
|
const total = statuses['в работе'] + statuses['выполнен'] + statuses['ОТКАЗ'];
|
||||||
|
if (total === 0) return;
|
||||||
|
|
||||||
|
const activeDeg = (statuses['в работе'] / total) * 360;
|
||||||
|
const completedDeg = (statuses['выполнен'] / total) * 360;
|
||||||
|
const rejectedDeg = (statuses['ОТКАЗ'] / total) * 360;
|
||||||
|
|
||||||
|
const pie = document.getElementById("status-pie");
|
||||||
|
pie.style.background = 'conic-gradient(#F59E0B 0deg ' + activeDeg + 'deg, #10B981 ' + activeDeg + 'deg ' + (activeDeg + completedDeg) + 'deg, #EF4444 ' + (activeDeg + completedDeg) + 'deg 360deg)';
|
||||||
|
|
||||||
|
const legend = document.getElementById("status-legend");
|
||||||
|
legend.innerHTML = [
|
||||||
|
{label: 'В работе', count: statuses['в работе'], color: '#F59E0B'},
|
||||||
|
{label: 'Выполнен', count: statuses['выполнен'], color: '#10B981'},
|
||||||
|
{label: 'ОТКАЗ', count: statuses['ОТКАЗ'], color: '#EF4444'}
|
||||||
|
].map(item => '<div class="legend-item"><div class="legend-color" style="background:' + item.color + '"></div><span>' + item.label + ': ' + item.count + '</span></div>').join("");
|
||||||
|
}
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const res = await fetch("/api/data");
|
const res = await fetch("/api/data");
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
allOrders = data.orders || [];
|
allOrders = data.orders || [];
|
||||||
renderTable(allOrders);
|
renderTable(allOrders);
|
||||||
updateStats(allOrders);
|
updateStats(allOrders);
|
||||||
|
updateCharts(allOrders);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateStats(orders) {
|
function updateStats(orders) {
|
||||||
document.getElementById("stat-total").textContent = orders.length;
|
const total = orders.length;
|
||||||
document.getElementById("stat-active").textContent = orders.filter(o => o.status === "в работе").length;
|
const active = orders.filter(o => o.status === "в работе").length;
|
||||||
document.getElementById("stat-completed").textContent = orders.filter(o => o.status === "выполнен").length;
|
const completed = orders.filter(o => o.status === "выполнен").length;
|
||||||
document.getElementById("stat-rejected").textContent = orders.filter(o => o.status === "ОТКАЗ").length;
|
const rejected = orders.filter(o => o.status === "ОТКАЗ").length;
|
||||||
|
const conversion = total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||||
|
|
||||||
|
document.getElementById("stat-total").textContent = total;
|
||||||
|
document.getElementById("stat-active").textContent = active;
|
||||||
|
document.getElementById("stat-completed").textContent = completed;
|
||||||
|
document.getElementById("stat-rejected").textContent = rejected;
|
||||||
|
document.getElementById("stat-conversion").textContent = conversion + '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCharts(orders) {
|
||||||
|
renderDailyChart(groupByDate(orders));
|
||||||
|
renderChannelChart(groupByChannel(orders));
|
||||||
|
renderOperatorChart(groupByOperator(orders));
|
||||||
|
renderStatusPie(groupByStatus(orders));
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(orders) {
|
function renderTable(orders) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user