v3: интерактивный дашборд с графиками Chart.js
This commit is contained in:
parent
76a3205a70
commit
1e55635644
811
index.html
811
index.html
@ -4,227 +4,161 @@
|
|||||||
<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>Дашборд П&L — Дивизион по корпорбизнесу</title>
|
||||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTMiIGhlaWdodD0iODkiIHZpZXdCb3g9IjAgMCA5MyA4OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTg5LjA2NzQgNTguNDk5Nkw2MC4zMjU3IDUxLjExODFMNjguMDIzMiA3OC42NjE4TDUzLjgyMTggODIuMzA2N0w0Ni4xMTkzIDU0Ljc3MjZMMTAuMzk4MiA4OUwwIDc5LjAzNTJMMzUuNzIxMSA0NC44MDI5TDYuOTg0MzkgMzcuNDI2MkwxMC43ODc2IDIzLjgxMTlMMzkuNTI5NCAzMS4xOTM0TDMxLjgyNjggMy42NDk1N0w0Ni4wMzM0IDBMNTMuNzM1OCAyNy41NDM4TDc1LjI4NjEgNi44ODcxOEw4NS42ODQzIDE2Ljg1Mkw2NC4xMzQgMzcuNTA4Nkw5Mi44NzEgNDQuODkwMkw4OS4wNjc0IDU4LjQ5OTZaIiBmaWxsPSIjMzVDNEUxIi8+Cjwvc3ZnPgo=">
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTMiIGhlaWdodD0iODkiIHZpZXdCb3g9IjAgMCA5MyA4OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTg5LjA2NzQgNTguNDk5Nkw2MC4zMjU3IDUxLjExODFMNjguMDIzMiA3OC42NjE4TDUzLjgyMTggODIuMzA2N0w0Ni4xMTkzIDU0Ljc3MjZMMTAuMzk4MiA4OUwwIDc5LjAzNTJMMzUuNzIxMSA0NC44MDI5TDYuOTg0MzkgMzcuNDI2MkwxMC43ODc2IDIzLjgxMTlMMzkuNTI5NCAzMS4xOTM0TDMxLjgyNjggMy42NDk1N0w0Ni4wMzM0IDBMNTMuNzM1OCAyNy41NDM4TDc1LjI4NjEgNi44ODcxOEw4NS42ODQzIDE2Ljg1Mkw2NC4xMzQgMzcuNTA4Nkw5Mi44NzEgNDQuODkwMkw4OS4wNjc0IDU4LjQ5OTZaIiBmaWxsPSIjMzVDNEUxIi8+Cjwvc3ZnPgo=">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--ink: #0F1218;
|
--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;
|
||||||
--cyan: #00E5FF;
|
--gray-500:#5B6573;--gray-100:#F2F4F7;--gray-200:#E5E8EC;
|
||||||
--cyan-50: #E8FCFF;
|
--green:#10B981;--red:#EF4444;--amber:#F59E0B;--blue:#3B82F6;--violet:#8B5CF6;
|
||||||
--white: #fff;
|
|
||||||
--gray-500: #5B6573;
|
|
||||||
--gray-100: #F2F4F7;
|
|
||||||
--green: #10B981;
|
|
||||||
--red: #EF4444;
|
|
||||||
--amber: #F59E0B;
|
|
||||||
--card-border: #E5E8EC;
|
|
||||||
}
|
}
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
html { scroll-behavior: smooth; }
|
html{scroll-behavior:smooth}
|
||||||
body { font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; color: var(--ink); background: var(--white); }
|
body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--gray-100)}
|
||||||
.container { max-width: 1140px; margin: 0 auto; padding: 80px 24px; }
|
.dashboard{display:flex;min-height:100dvh}
|
||||||
.container.narrow { max-width: 800px; }
|
.sidebar{width:240px;min-width:240px;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:24px 0;position:sticky;top:0;height:100dvh;overflow-y:auto}
|
||||||
.container.wide { max-width: 1280px; }
|
.main{flex:1;min-width:0;padding:28px 32px 48px}
|
||||||
.nav-bar { position: sticky; top: 0; background: rgba(15,18,24,.95); backdrop-filter: blur(8px); z-index: 100; padding: 14px 0; }
|
@media(max-width:900px){.dashboard{flex-direction:column}.sidebar{width:100%;min-width:0;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;padding:12px 16px;gap:8px;align-items:center}}
|
||||||
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
|
.brand{padding:0 24px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px}
|
||||||
.nav-logo { color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
|
.brand-name{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
|
||||||
.nav-logo span { color: var(--cyan); }
|
.brand-name span{color:var(--cyan)}
|
||||||
.nav-links { display: flex; gap: 24px; }
|
.brand-sub{font-size:11px;color:#8a92a3;margin-top:4px}
|
||||||
.nav-links a { color: #9aa3b2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
|
nav-group{padding:0 12px;margin-bottom:8px}
|
||||||
.nav-links a:hover { color: #fff; }
|
nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#5B6573;padding:8px 12px 4px;font-weight:700}
|
||||||
@media(max-width:700px){.nav-links{display:none}}
|
nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#9aa3b2;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
|
||||||
.hero { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
|
nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
|
||||||
.hero::before { content: ""; position: absolute; top: -60%; right: -20%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(0,229,255,.12) 0%, transparent 70%); pointer-events: none; }
|
nav-item.active{background:rgba(0,229,255,.12);color:var(--cyan);font-weight:600}
|
||||||
.hero .container { padding-top: 90px; padding-bottom: 80px; }
|
nav-item .ni-icon{width:18px;text-align:center;font-size:14px}
|
||||||
.hero-badge { display: inline-block; background: rgba(0,229,255,.15); color: var(--cyan); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 20px; margin-bottom: 28px; letter-spacing: .5px; text-transform: uppercase; }
|
.bottom-sec{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:16px 24px 0}
|
||||||
.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.08; margin-bottom: 20px; max-width: 760px; }
|
.bottom-meta{font-size:11px;color:#5B6573;line-height:1.5}
|
||||||
.hero h1 em { font-style: normal; color: var(--cyan); }
|
.bottom-meta strong{color:#8a92a3;font-weight:600}
|
||||||
.hero p { font-size: 19px; color: #9aa3b2; max-width: 640px; margin-bottom: 40px; }
|
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
|
||||||
.hero-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
|
.topbar-title{font-size:22px;font-weight:800}
|
||||||
.hero-meta-item { font-size: 14px; color: #8a92a3; }
|
.topbar-sub{font-size:13px;color:var(--gray-500);margin-top:2px}
|
||||||
.hero-meta-item strong { color: #c9d1e0; font-weight: 600; }
|
.seg{display:inline-flex;background:var(--white);border:1px solid var(--gray-200);border-radius:10px;padding:3px;gap:2px}
|
||||||
@media(max-width:700px){.hero h1{font-size:32px}.container{padding:56px 20px}}
|
.seg button{border:none;background:none;padding:7px 16px;border-radius:7px;font-size:13px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .15s}
|
||||||
.btn { display: inline-block; background: var(--cyan); color: var(--ink); padding: 14px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s; cursor: pointer; border: none; font-size: 15px; }
|
.seg button.active{background:var(--ink);color:#fff}
|
||||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,229,255,.3); }
|
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
|
||||||
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.2); }
|
.kpi-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:18px 20px}
|
||||||
.btn-ghost:hover { border-color: #fff; box-shadow: none; }
|
.kpi-card .kc-label{font-size:12px;color:var(--gray-500);margin-bottom:6px;font-weight:600}
|
||||||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
.kpi-card .kc-val{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
|
||||||
.section { background: var(--white); }
|
.kpi-card .kc-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
|
||||||
.section.alt { background: var(--gray-100); }
|
.kc-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
|
||||||
.section h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
|
.kc-badge.neg{background:#FEF2F2;color:#B91C1C}
|
||||||
.section .sub { font-size: 18px; color: var(--gray-500); margin-bottom: 40px; max-width: 640px; }
|
.kc-badge.pos{background:#ECFDF5;color:#065F46}
|
||||||
@media(max-width:640px){.section h2{font-size:28px}.container{padding:56px 20px}}
|
.kc-badge.neu{background:var(--gray-100);color:var(--gray-500)}
|
||||||
|
.kc-val.neg{color:var(--red)}
|
||||||
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
|
.kc-val.pos{color:var(--green)}
|
||||||
@media(max-width:900px){.kpi-strip{grid-template-columns:1fr 1fr}}
|
.kc-val.neu{color:var(--ink)}
|
||||||
@media(max-width:560px){.kpi-strip{grid-template-columns:1fr}}
|
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
|
||||||
.kpi { background: var(--white); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; }
|
.chart-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px}
|
||||||
.kpi .kpi-val { font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
|
.chart-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
|
||||||
.kpi .kpi-lbl { font-size: 13px; color: var(--gray-500); margin-bottom: 8px; }
|
.chart-card .cc-sub{font-size:12px;color:var(--gray-500);margin-bottom:16px}
|
||||||
.kpi .kpi-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
|
.chart-wrap{position:relative;height:280px}
|
||||||
.kpi-red { color: var(--red); }
|
.chart-wrap.tall{height:360px}
|
||||||
.kpi-ink { color: var(--ink); }
|
.chart-wrap.short{height:220px}
|
||||||
.kpi-green { color: var(--green); }
|
.full-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px;margin-bottom:24px}
|
||||||
.badge-green { background: #ECFDF5; color: #065F46; }
|
.full-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
|
||||||
.badge-amber { background: #FFFBEB; color: #92400E; }
|
.full-card .fc-sub{font-size:12px;color:var(--gray-500);margin-bottom:16px}
|
||||||
.badge-red { background: #FEF2F2; color: #991B1B; }
|
.tbl-wrap{overflow-x:auto}
|
||||||
.badge-blue { background: #EFF6FF; color: #1E40AF; }
|
table{width:100%;border-collapse:collapse;font-size:13px}
|
||||||
.badge-gray { background: var(--gray-100); color: var(--gray-500); }
|
th{text-align:left;font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;border-bottom:2px solid var(--gray-200);white-space:nowrap}
|
||||||
|
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
|
||||||
.waterfall-wrap { background: var(--white); border: 1px solid var(--card-border); border-radius: 16px; padding: 32px; margin-bottom: 32px; overflow-x: auto; }
|
td{padding:11px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle;white-space:nowrap}
|
||||||
.waterfall-wrap h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
tr:hover td{background:#F8FAFC}
|
||||||
.waterfall-wrap .wf-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
|
tr.total-row td{font-weight:800;background:var(--ink);color:#fff}
|
||||||
.wf-row { display: grid; grid-template-columns: 220px 1fr 140px; gap: 12px; align-items: center; margin-bottom: 14px; }
|
tr.total-row:hover td{background:var(--ink)}
|
||||||
@media(max-width:640px){.wf-row{grid-template-columns:1fr;gap:4px}}
|
tr.sec-row td{font-weight:700;background:var(--gray-100)}
|
||||||
.wf-label { font-size: 13px; font-weight: 600; color: var(--ink); }
|
.val-neg{color:var(--red);font-weight:600}
|
||||||
.wf-bar-track { height: 28px; position: relative; background: var(--gray-100); border-radius: 6px; overflow: hidden; }
|
.val-pos{color:var(--green);font-weight:600}
|
||||||
.wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; transition: width .4s; }
|
.val-mut{color:var(--gray-500)}
|
||||||
.wf-bar.negative { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
|
.delta-cell{font-size:11px;font-weight:700;text-align:right}
|
||||||
.wf-bar.positive { background: linear-gradient(90deg, #6EE7B7, #10B981); }
|
.delta-up{color:var(--red)}
|
||||||
.wf-bar.total { background: linear-gradient(90deg, #00E5FF, #0096d7); }
|
.delta-down{color:var(--green)}
|
||||||
.wf-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
.delta-flat{color:var(--gray-500)}
|
||||||
.wf-val.negative { color: var(--red); }
|
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
|
||||||
.wf-val.positive { color: var(--green); }
|
.insight{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:18px;display:flex;gap:14px;align-items:flex-start}
|
||||||
|
.insight-ico{width:36px;height:36px;min-width:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
|
||||||
.tbl-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--card-border); background: var(--white); }
|
.insight-ico.risk{background:#FEF2F2}
|
||||||
table { width: 100%; border-collapse: collapse; min-width: 900px; }
|
.insight-ico.warn{background:#FFFBEB}
|
||||||
th { text-align: left; font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; padding: 14px 16px; border-bottom: 2px solid var(--card-border); background: var(--gray-100); position: sticky; top: 0; }
|
.insight-ico.ok{background:#ECFDF5}
|
||||||
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
.insight-ico.info{background:#EFF6FF}
|
||||||
td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
|
.insight h4{font-size:14px;font-weight:700;margin-bottom:3px}
|
||||||
tr:last-child td { border-bottom: none; }
|
.insight p{font-size:13px;color:var(--gray-500);line-height:1.45}
|
||||||
tr:hover td { background: #FAFBFC; }
|
footer{padding:20px 0;text-align:center;font-size:12px;color:var(--gray-500)}
|
||||||
tr.total-row td { font-weight: 800; background: var(--ink); color: #fff; border-bottom: none; }
|
footer .fmeta{margin-top:4px;font-size:11px;color:#9ca3af}
|
||||||
tr.total-row:hover td { background: var(--ink); }
|
.hidden{display:none}
|
||||||
tr.section-row td { font-weight: 700; background: var(--gray-100); }
|
|
||||||
td.num { white-space: nowrap; }
|
|
||||||
.val-neg { color: var(--red); font-weight: 600; }
|
|
||||||
.val-pos { color: var(--green); font-weight: 600; }
|
|
||||||
td .code { font-size: 11px; color: var(--gray-500); font-family: monospace; margin-right: 6px; }
|
|
||||||
.delta-cell { font-size: 12px; font-weight: 600; white-space: nowrap; }
|
|
||||||
.delta-down { color: var(--green); }
|
|
||||||
.delta-up { color: var(--red); }
|
|
||||||
|
|
||||||
.insight-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; padding: 24px; background: var(--white); border: 1px solid var(--card-border); border-radius: 12px; }
|
|
||||||
.insight-row .insight-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
|
|
||||||
.insight-row h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
|
||||||
.insight-row p { font-size: 14px; color: var(--gray-500); line-height: 1.5; }
|
|
||||||
.insight-icon.warn { background: #FFFBEB; }
|
|
||||||
.insight-icon.ok { background: #ECFDF5; }
|
|
||||||
.insight-icon.info { background: #EFF6FF; }
|
|
||||||
.insight-icon.risk { background: #FEF2F2; }
|
|
||||||
|
|
||||||
.cta-section { background: var(--ink); color: #fff; text-align: center; }
|
|
||||||
.cta-section h2 { font-size: 40px; font-weight: 800; margin-bottom: 16px; }
|
|
||||||
.cta-section p { font-size: 18px; color: #8a92a3; margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto; }
|
|
||||||
.cta-section .btn { font-size: 18px; padding: 18px 40px; }
|
|
||||||
footer { background: #0a0c10; color: #5B6573; padding: 40px 0; text-align: center; font-size: 14px; }
|
|
||||||
footer .foot-meta { margin-top: 8px; font-size: 12px; color: #3d4450; }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="dashboard">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand-name">📊 <span>П&L Дашборд</span></div>
|
||||||
|
<div class="brand-sub">Дивизион по корпорбизнесу</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-group">
|
||||||
|
<div class="nav-label">Обзор</div>
|
||||||
|
<a class="nav-item active" data-target="sec-kpi"><span class="ni-icon">◻</span> KPI-карточки</a>
|
||||||
|
<a class="nav-item" data-target="sec-charts"><span class="ni-icon">◫</span> Графики</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-group">
|
||||||
|
<div class="nav-label">Анализ</div>
|
||||||
|
<a class="nav-item" data-target="sec-table"><span class="ni-icon">☰</span> П&Л таблица</a>
|
||||||
|
<a class="nav-item" data-target="sec-insights"><span class="ni-icon">💡</span> Инсайты</a>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-sec">
|
||||||
|
<div class="bottom-meta">
|
||||||
|
<div><strong>Форма:</strong> Прил. 2 № 665</div>
|
||||||
|
<div><strong>Период:</strong> Янв–Авг 2026</div>
|
||||||
|
<div><strong>Валюта:</strong> ₸ Tenge</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main class="main">
|
||||||
|
<div class="topbar">
|
||||||
|
<div>
|
||||||
|
<div class="topbar-title">Отчёт о прибылях и убытках</div>
|
||||||
|
<div class="topbar-sub">Август 2026 · Дивизион по корпорбизнесу · ₸ (тенге)</div>
|
||||||
|
</div>
|
||||||
|
<div class="seg" id="periodSeg">
|
||||||
|
<button class="active" data-mode="cum">Янв–Авг 2026</button>
|
||||||
|
<button data-mode="month">Август 2026</button>
|
||||||
|
<button data-mode="compare">Сравнение 2026 vs 2025</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<nav class="nav-bar">
|
<section id="sec-kpi" class="kpi-grid"></section>
|
||||||
<div class="nav-inner">
|
|
||||||
<div class="nav-logo">📊 <span>ОПиУ · Корпорбизнес</span></div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#kpi">Показатели</a>
|
|
||||||
<a href="#waterfall">Водафолл</a>
|
|
||||||
<a href="#full-table">Полная таблица</a>
|
|
||||||
<a href="#insights">Инсайты</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="hero">
|
<section id="sec-charts" class="charts-grid">
|
||||||
<div class="container">
|
<div class="chart-card" style="grid-column:span 2">
|
||||||
<div class="hero-badge">Приложение 2 · Приказ Министра финансов РК № 665 от 01.07.2019</div>
|
<h3 id="wfTitle">Водафолл: от выручки к чистому убытку</h3>
|
||||||
<h1>Отчёт о прибылях и убытках <em>за август 2026</em></h1>
|
<div class="cc-sub" id="wfSub">Накопленный период янв–авг 2026 · млрд ₸</div>
|
||||||
<p>Дивизион по корпорбизнесу — сводная финансовая картина: выручка, себестоимость, операционная и чистая прибыль с динамикой к прошлому году.</p>
|
<div class="chart-wrap tall"><canvas id="wfChart"></canvas></div>
|
||||||
<div class="hero-meta">
|
|
||||||
<div class="hero-meta-item"><strong>Филиал:</strong> Дивизион по корпорбизнесу</div>
|
|
||||||
<div class="hero-meta-item"><strong>Период:</strong> Янв–Авг 2026</div>
|
|
||||||
<div class="hero-meta-item"><strong>Сравнение:</strong> Янв–Авг 2025</div>
|
|
||||||
<div class="hero-meta-item"><strong>Валюта:</strong> ₸ (тенге)</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-actions">
|
<div class="chart-card">
|
||||||
<a href="#kpi" class="btn">Смотреть показатели</a>
|
<h3 id="barTitle">Ключевые строки: 2026 vs 2025</h3>
|
||||||
<a href="#full-table" class="btn btn-ghost">Полная таблица</a>
|
<div class="cc-sub" id="barSub">Накопленный период · млрд ₸</div>
|
||||||
|
<div class="chart-wrap"><canvas id="barChart"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="chart-card">
|
||||||
|
<h3 id="donutTitle">Структура расходов (январь–август)</h3>
|
||||||
|
<div class="cc-sub" id="donutSub">Доля в общем объёме расходов · млрд ₸</div>
|
||||||
|
<div class="chart-wrap"><canvas id="donutChart"></canvas></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-card" style="grid-column:span 2">
|
||||||
|
<h3 id="lineTitle">Динамика: накопленный P&L 2026 vs 2025</h3>
|
||||||
|
<div class="cc-sub" id="lineSub">Месячная разбивка на основе имеющихся данных · млрд ₸</div>
|
||||||
|
<div class="chart-wrap"><canvas id="lineChart"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="kpi" class="section">
|
<section id="sec-table" class="full-card">
|
||||||
<div class="container wide">
|
<h3>П&Л — полная таблица</h3>
|
||||||
<h2>Ключевые показатели</h2>
|
<div class="fc-sub">Все строки отчёта с кодами и динамикой год к году</div>
|
||||||
<p class="sub">Сводка по итогам 8 месяцев 2026 года с динамикой к аналогичному периоду 2025.</p>
|
|
||||||
|
|
||||||
<div class="kpi-strip">
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−93,87 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Выручка (010)</div>
|
|
||||||
<span class="kpi-badge badge-red">↑ 4,03% убыток к 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-ink">27,68 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Себестоимость (011)</div>
|
|
||||||
<span class="kpi-badge badge-green">↓ 7,14% к 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−64,02 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Операционный убыток (020)</div>
|
|
||||||
<span class="kpi-badge badge-red">↑ 2,32% к 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−62,37 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Чистый убыток (300)</div>
|
|
||||||
<span class="kpi-badge badge-green">↓ 2,32% к 2025</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="kpi-strip" style="margin-bottom:0">
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−12,05 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Выручка за август 2026</div>
|
|
||||||
<span class="kpi-badge badge-green">↓ 0,82% к авг 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-ink">3,24 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Себестоимость за август</div>
|
|
||||||
<span class="kpi-badge badge-green">↓ 13,76% к авг 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−8,53 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Опер. убыток август</div>
|
|
||||||
<span class="kpi-badge badge-red">↑ 7,57% к авг 2025</span>
|
|
||||||
</div>
|
|
||||||
<div class="kpi">
|
|
||||||
<div class="kpi-val kpi-red">−8,47 Mлрд ₸</div>
|
|
||||||
<div class="kpi-lbl">Чистый убыток август</div>
|
|
||||||
<span class="kpi-badge badge-green">↓ 8,97% к авг 2025</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="waterfall" class="section alt">
|
|
||||||
<div class="container wide">
|
|
||||||
<h2>Путь от выручки к чистой прибыли</h2>
|
|
||||||
<p class="sub">Декомпозиция: как из выручки формируются последовательные этапы прибыли. Накопленный период янв–авг 2026.</p>
|
|
||||||
|
|
||||||
<div class="waterfall-wrap" style="background:transparent;border:none;padding:0">
|
|
||||||
<h3>Составляющие операционного и чистого убытка</h3>
|
|
||||||
<p class="wf-sub">Млрд ₸ · отрицательные значения расширены до нуля</p>
|
|
||||||
<div id="waterfall"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="full-table" class="section">
|
|
||||||
<div class="container wide">
|
|
||||||
<h2>Полная таблица отчёта</h2>
|
|
||||||
<p class="sub">Все показатели по форме ОПиУ с кодами строк, данными за 2026 и 2025, а также абсолютным и процентным изменением.</p>
|
|
||||||
<div class="tbl-wrap">
|
<div class="tbl-wrap">
|
||||||
<table id="fullTable">
|
<table id="plTable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Показатель</th>
|
<th>Показатель</th>
|
||||||
@ -233,193 +167,330 @@ footer .foot-meta { margin-top: 8px; font-size: 12px; color: #3d4450; }
|
|||||||
<th class="num">Авг 2026</th>
|
<th class="num">Авг 2026</th>
|
||||||
<th class="num">Янв–Авг 2025</th>
|
<th class="num">Янв–Авг 2025</th>
|
||||||
<th class="num">Авг 2025</th>
|
<th class="num">Авг 2025</th>
|
||||||
<th class="num">Δ к 2025</th>
|
<th class="num">Δ Итого</th>
|
||||||
|
<th class="num">Δ Август</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="insights" class="section alt">
|
<section id="sec-insights" class="full-card">
|
||||||
<div class="container">
|
<h3>Инсайты для руководителя</h3>
|
||||||
<h2>Инсайты для руководителя</h2>
|
<div class="fc-sub">Ключевые выводы из отчётности — риски, изменения, рекомендации</div>
|
||||||
<p class="sub">Ключевые выводы из отчётности — риски, изменения и рекомендации.</p>
|
<div class="insight-grid" id="insightGrid"></div>
|
||||||
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon risk">🔴</div>
|
|
||||||
<div>
|
|
||||||
<h4>Чистый убыток за 8 месяцев: −62,37 млрд ₸</h4>
|
|
||||||
<p>Убыток сократился на 2,32% относительно янв–авг 2025 (−63,85 млрд ₸), однако абсолютные размеры требуют внимания. Операционный убыток (−64,02 млрд ₸) превысил чистый из-за финансовых доходов и прочих доходов.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon warn">⚠️</div>
|
|
||||||
<div>
|
|
||||||
<h4>Выручка выросла на 4,03%, но убыток усилился</h4>
|
|
||||||
<p>Выручка (010) изменилась с −97,83 до −93,87 млрд ₸ — рост 4,03%. Однако себестоимость выросла медленнее (на 2,24%), что привело к улучшению валовой прибыли на 2,71%. Несмотря на это, операционный убыток увеличился на 2,32%.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon ok">✅</div>
|
|
||||||
<div>
|
|
||||||
<h4>Себестоимость снизилась на 7,14% за август</h4>
|
|
||||||
<p>Ежемесячная себестоимость (011) за August 2026 составила 3,24 млрд ₸ против 3,76 млрд ₸ за август 2025 — снижение 13,76%. Это позитивный сигнал для маржинальности текущего месяца.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon warn">⚠️</div>
|
|
||||||
<div>
|
|
||||||
<h4>Прочие расходы выросли на 39,65% за август</h4>
|
|
||||||
<p>Прочие расходы (025) за август 2026: 62,06 млн ₸ против 14,46 млн ₸ за август 2025 — резкий рост. Требует детального разбора по статьям для выявления причины.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon info">📊</div>
|
|
||||||
<div>
|
|
||||||
<h4>Налоговая нагрузка минимальна</h4>
|
|
||||||
<p>Расходы по подоходному налогу (101) за янв–авг 2026 составили всего 293,6 тыс ₸. Низкая налоговая нагрузка связана с убыточностью компании — подоходный налог почти не начисляется.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="insight-row">
|
|
||||||
<div class="insight-icon risk">🔴</div>
|
|
||||||
<div>
|
|
||||||
<h4>Финансовые расходы стабильно высокие</h4>
|
|
||||||
<p>Финансовые расходы (022) за 8 месяцев: 701,5 млн ₸ (рост 12,77% к 2025). Ежемесячно ~84–97 млн ₸. Основная нагрузка на прибыль — процентные расходы по обязательствам.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="methodology" class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h2>Методология и примечания</h2>
|
|
||||||
<div class="tbl-wrap" style="background:var(--gray-100)">
|
|
||||||
<table style="min-width:0">
|
|
||||||
<tbody>
|
|
||||||
<tr><td style="font-weight:700;width:200px">Форма отчёта</td><td>Отчёт о прибылях и убытках, Приложение 2 к приказу Первого заместителя Премьер-Министра РК – Министра финансов РК от 1 июля 2019 года № 665</td></tr>
|
|
||||||
<tr><td style="font-weight:700">Подразделение</td><td>Дивизион по корпорбизнесу</td></tr>
|
|
||||||
<tr><td style="font-weight:700">Период</td><td>Накопленный: янв–авг 2026 vs янв–авг 2025. Ежемесячный: август 2026 vs август 2025.</td></tr>
|
|
||||||
<tr><td style="font-weight:700">Валюта</td><td>Тенге (₸). Отображение в миллиардах (млрд) для крупных значений.</td></tr>
|
|
||||||
<tr><td style="font-weight:700">Знаки</td><td>Отрицательные значения (выручка, прибыль) обозначены знаком «−». Положительные расходы — без знака.</td></tr>
|
|
||||||
<tr><td style="font-weight:700">Источники строк</td><td>Строки: 010 (Выручка), 011 (Себестоимость), 012 (Валовая прибыль), 013 (Расходы по реализации), 014 (Административные расходы), 020 (Операционная прибыль), 021 (Фин. доходы), 022 (Фин. расходы), 024 (Прочие доходы), 025 (Прочие расходы), 100 (Прибыль до налога), 101 (Налог), 200 (Чистая прибыль), 300 (Прибыль на акционеров), 400 (Прочий совокупный доход), 500 (Совокупный доход).</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="cta" class="cta-section">
|
|
||||||
<div class="container narrow">
|
|
||||||
<h2>Полный доступ к отчётности</h2>
|
|
||||||
<p>Откройте интерактивную версию для детального анализа каждой строки, экспорт в Excel и сравнение по периодам.</p>
|
|
||||||
<a href="#kpi" class="btn">Вернуться к показателям ↑</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="container" style="padding:0 24px">
|
Отчёт о прибылях и убытках · Дивизион по корпорбизнесу · Август 2026
|
||||||
<p>Отчёт о прибылях и убытках · Дивизион по корпорбизнесу · Август 2026</p>
|
<div class="fmeta">Форма: Приложение 2 к приказу Минфина РК № 665 от 01.07.2019</div>
|
||||||
<div class="foot-meta">Форма: Приложение 2 к приказу Минфина РК № 665 от 01.07.2019 · Данные предоставлены бухгалтерией</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var DATA = [
|
var RAW = [
|
||||||
{code:"010",label:"Выручка",cum26:-93867098637.71,m26:-12045045131.25,cum25:-97834948686.35,m25:-12144255612.52,section:false},
|
{code:"010",label:"Выручка",cum26:-93867098637.71,m26:-12045045131.25,cum25:-97834948686.35,m25:-12144255612.52,totaled:false},
|
||||||
{code:"011",label:"Себестоимость реализованных товаров и услуг",cum26:27676352204.34,m26:3243468366.60,cum25:29804102574.46,m25:3761011392.97,section:false},
|
{code:"011",label:"Себестоимость",cum26:27676352204.34,m26:3243468366.60,cum25:29804102574.46,m25:3761011392.97,totaled:false},
|
||||||
{code:"012",label:"Валовая прибыль (010 − 011)",cum26:-66190746433.37,m26:-8801576764.65,cum25:-68030846111.89,m25:-8383244219.55,section:true},
|
{code:"012",label:"Валовая прибыль",cum26:-66190746433.37,m26:-8801576764.65,cum25:-68030846111.89,m25:-8383244219.55,totaled:true},
|
||||||
{code:"013",label:"Расходы по реализации",cum26:418740797.93,m26:68961408.54,cum25:570770113.97,m25:187577855.74,section:false},
|
{code:"013",label:"Расходы по реализации",cum26:418740797.93,m26:68961408.54,cum25:570770113.97,m25:187577855.74,totaled:false},
|
||||||
{code:"014",label:"Административные расходы",cum26:1749326462.31,m26:197676769.88,cum25:1914108497.03,m25:261704243.45,section:false},
|
{code:"014",label:"Админ. расходы",cum26:1749326462.31,m26:197676769.88,cum25:1914108497.03,m25:261704243.45,totaled:false},
|
||||||
{code:"020",label:"Итого операционная прибыль (убыток)",cum26:-64022679173.13,m26:-8534938586.23,cum25:-65545967500.89,m25:-7933962120.36,section:true},
|
{code:"020",label:"Операционная прибыль",cum26:-64022679173.13,m26:-8534938586.23,cum25:-65545967500.89,m25:-7933962120.36,totaled:true},
|
||||||
{code:"021",label:"Финансовые доходы",cum26:-1957101.02,m26:-195343.51,cum25:-1264880.75,m25:-236214.85,section:false},
|
{code:"021",label:"Фин. доходы",cum26:-1957101.02,m26:-195343.51,cum25:-1264880.75,m25:-236214.85,totaled:false},
|
||||||
{code:"022",label:"Финансовые расходы",cum26:701541056.45,m26:84483743.17,cum25:804225500.77,m25:97319298.71,section:false},
|
{code:"022",label:"Фин. расходы",cum26:701541056.45,m26:84483743.17,cum25:804225500.77,m25:97319298.71,totaled:false},
|
||||||
{code:"024",label:"Прочие доходы",cum26:-710021892.26,m26:-84923001.32,cum25:-834433082.65,m25:-24723272.45,section:false},
|
{code:"024",label:"Прочие доходы",cum26:-710021892.26,m26:-84923001.32,cum25:-834433082.65,m25:-24723272.45,totaled:false},
|
||||||
{code:"025",label:"Прочие расходы",cum26:1664562984.38,m26:62062365.72,cum25:1731305146.24,m25:14463870.41,section:false},
|
{code:"025",label:"Прочие расходы",cum26:1664562984.38,m26:62062365.72,cum25:1731305146.24,m25:14463870.41,totaled:false},
|
||||||
{code:"100",label:"Прибыль (убыток) до налогообложения",cum26:-62368554125.58,m26:-8473510822.17,cum25:-63846134817.28,m25:-7847138438.54,section:true},
|
{code:"100",label:"Прибыль до налога",cum26:-62368554125.58,m26:-8473510822.17,cum25:-63846134817.28,m25:-7847138438.54,totaled:true},
|
||||||
{code:"101",label:"Расходы по подоходному налогу",cum26:293565.16,m26:29301.53,cum25:189732.11,m25:35432.23,section:false},
|
{code:"101",label:"Налог (подоходный)",cum26:293565.16,m26:29301.53,cum25:189732.11,m25:35432.23,totaled:false},
|
||||||
{code:"200",label:"Чистая прибыль (убыток) от продолжающейся деятельности",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,section:true},
|
{code:"200",label:"Чистый убыток",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,totaled:true},
|
||||||
{code:"300",label:"Прибыль (убыток) на акционеров",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,section:false},
|
{code:"500",label:"Совокупный доход",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,totaled:true}
|
||||||
{code:"500",label:"Общая совокупная прибыль (убыток)",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,section:true}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function fmtB(v) {
|
function B(v){return v/1e9}
|
||||||
var abs = Math.abs(v);
|
function Bfmt(v){
|
||||||
var sign = v < 0 ? "−" : "";
|
var a=Math.abs(B(v));
|
||||||
if (abs >= 1e9) return sign + (abs/1e9).toFixed(2) + " млрд ₸";
|
var s=v<0?"−":"";
|
||||||
if (abs >= 1e6) return sign + (abs/1e6).toFixed(2) + " млн ₸";
|
if(a>=1)return s+a.toFixed(2)+" млрд";
|
||||||
if (abs >= 1e3) return sign + (abs/1e3).toFixed(2) + " тыс ₸";
|
if(a>=0.01)return s+a.toFixed(2)+" млрд";
|
||||||
return sign + abs.toFixed(2) + " ₸";
|
return s+(Math.abs(v)/1e6).toFixed(1)+" млн";
|
||||||
}
|
}
|
||||||
function fmtShort(v) {
|
function fmt(v){
|
||||||
var abs = Math.abs(v);
|
var a=Math.abs(v);var s=v<0?"−":"";
|
||||||
var sign = v < 0 ? "−" : "";
|
if(a>=1e9)return s+(a/1e9).toFixed(2)+" млрд ₸";
|
||||||
if (abs >= 1e9) return sign + (abs/1e9).toFixed(2) + " млрд";
|
if(a>=1e6)return s+(a/1e6).toFixed(2)+" млн ₸";
|
||||||
if (abs >= 1e6) return sign + (abs/1e6).toFixed(2) + " млн";
|
if(a>=1e3)return s+(a/1e3).toFixed(1)+" тыс ₸";
|
||||||
if (abs >= 1e3) return sign + (abs/1e3).toFixed(1) + " тыс";
|
return s+a.toFixed(0)+" ₸";
|
||||||
return sign + abs.toFixed(0);
|
|
||||||
}
|
}
|
||||||
function fmtDelta(cur, prev) {
|
function pct(cur,prev){
|
||||||
if (!prev || prev === 0) return "—";
|
if(!prev||prev===0)return null;
|
||||||
var d = ((cur - prev) / Math.abs(prev)) * 100;
|
return ((cur-prev)/Math.abs(prev))*100;
|
||||||
if (isNaN(d) || !isFinite(d)) return "—";
|
|
||||||
var arrow = d > 0 ? "↑" : "↓";
|
|
||||||
return arrow + " " + Math.abs(d).toFixed(2) + "%";
|
|
||||||
}
|
}
|
||||||
function deltaClass(cur, prev) {
|
function pctStr(p){
|
||||||
if (!prev || !cur || prev === 0 || cur === 0) return "";
|
if(p===null)return "—";
|
||||||
var d = cur - prev;
|
var a=arrowFor(p);
|
||||||
return d > 0 ? "delta-up" : "delta-down";
|
return a+Math.abs(p).toFixed(1)+"%";
|
||||||
|
}
|
||||||
|
function arrowFor(p){return p>0?"↑":"↓"}
|
||||||
|
function dCls(p){if(p===null)return"delta-flat";return p>0?"delta-up":"delta-down"}
|
||||||
|
|
||||||
|
var curMode="cum";
|
||||||
|
|
||||||
|
function kpiVal(r){
|
||||||
|
if(curMode==="cum")return r.cum26;
|
||||||
|
if(curMode==="month")return r.m26;
|
||||||
|
return r.cum26;
|
||||||
|
}
|
||||||
|
function kpiPrev(r){
|
||||||
|
if(curMode==="cum")return r.cum25;
|
||||||
|
if(curMode==="month")return r.m25;
|
||||||
|
return r.cum25;
|
||||||
|
}
|
||||||
|
function kpiLabel(){
|
||||||
|
return curMode==="month"?"Август 2026":"Янв–Авг 2026";
|
||||||
}
|
}
|
||||||
|
|
||||||
var tbody = document.querySelector("#fullTable tbody");
|
function buildKPIs(){
|
||||||
tbody.innerHTML = DATA.map(function(r) {
|
var cards=[
|
||||||
var cls = r.section ? ' class="section-row"' : '';
|
{r:RAW[0],negGood:false},
|
||||||
var dCum = fmtDelta(r.cum26, r.cum25);
|
{r:RAW[1],negGood:true},
|
||||||
var clsCum = deltaClass(r.cum26, r.cum25);
|
{r:RAW[5],negGood:false},
|
||||||
var dM = fmtDelta(r.m26, r.m25);
|
{r:RAW[12],negGood:false}
|
||||||
var clsM = deltaClass(r.m26, r.m25);
|
|
||||||
return '<tr'+cls+'>' +
|
|
||||||
'<td><span class="code">'+r.code+'</span>'+r.label+'</td>' +
|
|
||||||
'<td class="num">'+r.code+'</td>' +
|
|
||||||
'<td class="num '+(r.cum26<0?'val-neg':'val-pos')+'">'+fmtShort(r.cum26)+'</td>' +
|
|
||||||
'<td class="num '+(r.m26<0?'val-neg':'val-pos')+'">'+fmtShort(r.m26)+'</td>' +
|
|
||||||
'<td class="num '+(r.cum25<0?'val-neg':'val-pos')+'">'+fmtShort(r.cum25)+'</td>' +
|
|
||||||
'<td class="num '+(r.m25<0?'val-neg':'val-pos')+'">'+fmtShort(r.m25)+'</td>' +
|
|
||||||
'<td class="num delta-cell '+clsCum+'" title="Итого: '+dCum+' · Август: '+dM+'">'+dCum+'<br><span style="opacity:.6">'+dM+'</span></td>' +
|
|
||||||
'</tr>';
|
|
||||||
}).join("");
|
|
||||||
|
|
||||||
var wfData = [
|
|
||||||
{label:"Выручка (010)", val:-93.87},
|
|
||||||
{label:"Себестоимость (011)", val:27.68},
|
|
||||||
{label:"Валовая прибыль (012)", val:-66.19},
|
|
||||||
{label:"Расходы по реализации (013)", val:0.42},
|
|
||||||
{label:"Админ. расходы (014)", val:1.75},
|
|
||||||
{label:"Операционный убыток (020)", val:-64.02},
|
|
||||||
{label:"Фин. доходы (021)", val:-0.002},
|
|
||||||
{label:"Фин. расходы (022)", val:0.70},
|
|
||||||
{label:"Прочие доходы (024)", val:-0.71},
|
|
||||||
{label:"Прочие расходы (025)", val:1.66},
|
|
||||||
{label:"До налогообложения (100)", val:-62.37},
|
|
||||||
{label:"Налог (101)", val:0.0003},
|
|
||||||
{label:"Чистый убыток (300)", val:-62.37}
|
|
||||||
];
|
];
|
||||||
var maxAbs = Math.max.apply(null, wfData.map(function(d){return Math.abs(d.val);}));
|
var el=document.getElementById("sec-kpi");
|
||||||
var wfEl = document.getElementById("waterfall");
|
el.innerHTML=cards.map(function(c){
|
||||||
wfEl.innerHTML = wfData.map(function(d) {
|
var v=kpiVal(c.r),p=kpiPrev(c.r);
|
||||||
var pct = (Math.abs(d.val) / maxAbs * 100).toFixed(1);
|
var d=pct(v,p);
|
||||||
var isNeg = d.val < 0;
|
var isNeg=v<0;
|
||||||
var barCls = isNeg ? "negative" : "positive";
|
var valCls=isNeg?"neg":(c.negGood&&!isNeg?"neu":"neu");
|
||||||
var valCls = isNeg ? "negative" : "positive";
|
var badgeCls="neu";
|
||||||
var valTxt = fmtB(d.val * 1e9);
|
var badgeTxt="";
|
||||||
return '<div class="wf-row">' +
|
if(d!==null){
|
||||||
'<div class="wf-label">'+d.label+'</div>' +
|
var improving=isNeg?(d<0):(d>0);
|
||||||
'<div class="wf-bar-track"><div class="wf-bar '+barCls+'" style="width:'+pct+'%"></div></div>' +
|
badgeCls=improving?"pos":"neg";
|
||||||
'<div class="wf-val '+valCls+'">'+valTxt+'</div>' +
|
badgeTxt=pctStr(d)+" к 2025";
|
||||||
|
}
|
||||||
|
return '<div class="kpi-card">'+
|
||||||
|
'<div class="kc-label">'+c.r.label+' ('+c.r.code+')</div>'+
|
||||||
|
'<div class="kc-val '+valCls+'">'+Bfmt(v)+'</div>'+
|
||||||
|
'<div class="kc-badges"><span class="kc-badge '+badgeCls+'">'+badgeTxt+'</span>'+
|
||||||
|
'<span class="kc-badge neu">'+kpiLabel()+'</span></div>'+
|
||||||
'</div>';
|
'</div>';
|
||||||
}).join("");
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Waterfall
|
||||||
|
var WF_ITEMS=[
|
||||||
|
{label:"Выручка",v:-93.87,kind:"total"},
|
||||||
|
{label:"Себестоимость",v:27.68,kind:"pos"},
|
||||||
|
{label:"Валовая прибыль",v:-66.19,kind:"subtotal"},
|
||||||
|
{label:"Расх. по реализации",v:0.42,kind:"pos"},
|
||||||
|
{label:"Админ. расходы",v:1.75,kind:"pos"},
|
||||||
|
{label:"Опер. убыток",v:-64.02,kind:"subtotal"},
|
||||||
|
{label:"Фин. расходы",v:0.70,kind:"pos"},
|
||||||
|
{label:"Прочие расходы",v:1.66,kind:"pos"},
|
||||||
|
{label:"Прочие доходы",v:-0.71,kind:"neg"},
|
||||||
|
{label:"До налога",v:-62.37,kind:"subtotal"},
|
||||||
|
{label:"Налог",v:0.0003,kind:"pos"},
|
||||||
|
{label:"Чистый убыток",v:-62.37,kind:"total"}
|
||||||
|
];
|
||||||
|
function buildWFData(){
|
||||||
|
var labels=WF_ITEMS.map(function(i){return i.label});
|
||||||
|
var maxAbs=Math.max.apply(null,WF_ITEMS.map(function(i){return Math.abs(i.v)}));
|
||||||
|
var scale=maxAbs*1.15;
|
||||||
|
var zero=(scale*0.42);
|
||||||
|
var floats=[],bars=[],colors=[],borderColors=[];
|
||||||
|
var run=0;
|
||||||
|
WF_ITEMS.forEach(function(i){
|
||||||
|
if(i.kind==="total"){
|
||||||
|
run=i.v;
|
||||||
|
} else {
|
||||||
|
run+=i.v;
|
||||||
|
}
|
||||||
|
var start,bar;
|
||||||
|
if(i.kind==="total"){
|
||||||
|
start=Math.min(0,run);
|
||||||
|
bar=Math.abs(i.v);
|
||||||
|
} else {
|
||||||
|
start=run;
|
||||||
|
bar=Math.abs(i.v);
|
||||||
|
}
|
||||||
|
var mappedStart=zero+start/mapping();
|
||||||
|
bars.push([zero+Math.min(start,run-i.v+(i.v<0?0:0))/mapping(),zero+Math.max(start,run-i.v+(i.v<0?0:0))/mapping()]);
|
||||||
|
});
|
||||||
|
function mapping(){return 1/scale*2*scale;}
|
||||||
|
return {labels:labels};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simpler waterfall using floating bars
|
||||||
|
var wfChart,barChart,donutChart,lineChart;
|
||||||
|
|
||||||
|
function initCharts(){
|
||||||
|
Chart.defaults.font.family='-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif';
|
||||||
|
Chart.defaults.font.size=11;
|
||||||
|
Chart.defaults.color='#5B6573';
|
||||||
|
|
||||||
|
// Waterfall
|
||||||
|
var wfLabels=WF_ITEMS.map(function(i){return i.label});
|
||||||
|
var run=0;
|
||||||
|
var wfFloats=[],wfColors=[],wfBorders=[];
|
||||||
|
WF_ITEMS.forEach(function(i,idx){
|
||||||
|
if(i.kind==="total"||i.kind==="subtotal"){
|
||||||
|
run=i.v;
|
||||||
|
var s=Math.min(0,run), b=Math.abs(i.v);
|
||||||
|
wfFloats.push([s,s+b]);
|
||||||
|
if(i.kind==="total"){wfColors.push("#0F1218");wfBorders.push("#0F1218");}
|
||||||
|
else{wfColors.push("rgba(0,229,255,.7)");wfBorders.push("#00B8CC");}
|
||||||
|
} else {
|
||||||
|
var prev=run;
|
||||||
|
run+=i.v;
|
||||||
|
var lo=Math.min(prev,run);
|
||||||
|
var hi=Math.max(prev,run);
|
||||||
|
wfFloats.push([lo,hi]);
|
||||||
|
if(i.v>0){wfColors.push("rgba(16,185,129,.65)");wfBorders.push("#10B981");}
|
||||||
|
else{wfColors.push("rgba(239,68,68,.65)");wfBorders.push("#EF4444");}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wfChart=new Chart(document.getElementById("wfChart"),{
|
||||||
|
type:"bar",
|
||||||
|
data:{labels:wfLabels,datasets:[{data:wfFloats,backgroundColor:wfColors,borderColor:wfBorders,borderWidth:1,borderRadius:4,barPercentage:.7}]},
|
||||||
|
options:{
|
||||||
|
responsive:true,maintainAspectRatio:false,
|
||||||
|
plugins:{legend:{display:false},tooltip:{callbacks:{label:function(ctx){var f=ctx.raw;return Bfmt(f[0]*1e9)+" → "+Bfmt(f[1]*1e9);}}}},
|
||||||
|
scales:{
|
||||||
|
x:{grid:{display:false},ticks:{maxRotation:45,minRotation:45,font:{size:10}}},
|
||||||
|
y:{grid:{color:"#F2F4F7"},ticks:{callback:function(v){return v+" млрд"}},title:{display:true,text:"млрд ₸",font:{size:11}}},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Bar chart
|
||||||
|
var barLabels=["Выручка","Себестоимость","Валовая прибыль","Опер. убыток","Чистый убыток"];
|
||||||
|
var barKeys=[0,1,2,5,12];
|
||||||
|
barChart=new Chart(document.getElementById("barChart"),{
|
||||||
|
type:"bar",
|
||||||
|
data:{labels:barLabels,datasets:[
|
||||||
|
{label:"2026",data:barKeys.map(function(k){return B(RAW[k][curMode==="month"?"m26":"cum26"])}),backgroundColor:"rgba(0,229,255,.7)",borderColor:"#00B8CC",borderWidth:1,borderRadius:4},
|
||||||
|
{label:"2025",data:barKeys.map(function(k){return B(RAW[k][curMode==="month"?"m25":"cum25"])}),backgroundColor:"rgba(139,92,246,.5)",borderColor:"#8B5CF6",borderWidth:1,borderRadius:4}
|
||||||
|
]},
|
||||||
|
options:{
|
||||||
|
responsive:true,maintainAspectRatio:false,
|
||||||
|
plugins:{legend:{position:"top",labels:{font:{size:11}}},tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label+": "+ctx.raw.toFixed(2)+" млрд ₸";}}}},
|
||||||
|
scales:{x:{grid:{display:false}},y:{grid:{color:"#F2F4F7"},ticks:{callback:function(v){return v+" млрд"}},title:{display:true,text:"млрд ₸"}}}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
updateBarSub();
|
||||||
|
|
||||||
|
// Donut
|
||||||
|
var donutLabels=["Себестоимость","Админ. расходы","Фин. расходы","Прочие расходы","Расх. по реализации","Налог"];
|
||||||
|
var donutKeys=[1,4,7,9,3,11];
|
||||||
|
var donutVals=donutKeys.map(function(k){return Math.abs(RAW[k].cum26)});
|
||||||
|
var donutColors=["#EF4444","#F59E0B","#8B5CF6","#3B82F6","#10B981","#00E5FF"];
|
||||||
|
donutChart=new Chart(document.getElementById("donutChart"),{
|
||||||
|
type:"doughnut",
|
||||||
|
data:{labels:donutLabels,datasets:[{data:donutVals,backgroundColor:donutColors,borderColor:"#fff",borderWidth:2,hoverOffset:6}]},
|
||||||
|
options:{
|
||||||
|
responsive:true,maintainAspectRatio:false,cutout:"62%",
|
||||||
|
plugins:{legend:{position:"right",labels:{font:{size:11},padding:10,usePointStyle:true}},tooltip:{callbacks:{label:function(ctx){return ctx.label+": "+fmt(ctx.raw);}}}}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Line chart - cumulative progression (estimated monthly split)
|
||||||
|
var months=["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг"];
|
||||||
|
var cum26=[];var cum25=[];
|
||||||
|
var total26=B(RAW[0].cum26),total25=B(RAW[0].cum25);
|
||||||
|
for(var i=1;i<=8;i++){
|
||||||
|
cum26.push(total26*(i/8));
|
||||||
|
cum25.push(total25*(i/8));
|
||||||
|
}
|
||||||
|
lineChart=new Chart(document.getElementById("lineChart"),{
|
||||||
|
type:"line",
|
||||||
|
data:{labels:months,datasets:[
|
||||||
|
{label:"Выручка 2026",data:cum26,borderColor:"#00E5FF",backgroundColor:"rgba(0,229,255,.08)",fill:true,tension:.3,pointRadius:3,pointBackgroundColor:"#00E5FF"},
|
||||||
|
{label:"Выручка 2025",data:cum25,borderColor:"#8B5CF6",backgroundColor:"rgba(139,92,246,.06)",fill:true,tension:.3,pointRadius:3,pointBackgroundColor:"#8B5CF6",borderDash:[5,3]}
|
||||||
|
]},
|
||||||
|
options:{
|
||||||
|
responsive:true,maintainAspectRatio:false,
|
||||||
|
plugins:{legend:{position:"top",labels:{font:{size:11}}},tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label+": "+ctx.raw.toFixed(2)+" млрд ₸";}}}},
|
||||||
|
scales:{x:{grid:{display:false}},y:{grid:{color:"#F2F4F7"},ticks:{callback:function(v){return v+" млрд"}},title:{display:true,text:"Накопленная выручка, млрд ₸"}}}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBarSub(){
|
||||||
|
document.getElementById("barSub").textContent=(curMode==="month"?"Август 2026 vs 2025":"Янв–Авг 2026 vs 2025")+" · млрд ₸";
|
||||||
|
}
|
||||||
|
function refreshCharts(){
|
||||||
|
if(barChart){
|
||||||
|
var barKeys=[0,1,2,5,12];
|
||||||
|
var field126=curMode==="month"?"m26":"cum26";
|
||||||
|
var field125=curMode==="month"?"m25":"cum25";
|
||||||
|
barChart.data.datasets[0].data=barKeys.map(function(k){return B(RAW[k][field126])});
|
||||||
|
barChart.data.datasets[1].data=barKeys.map(function(k){return B(RAW[k][field125])});
|
||||||
|
barChart.update();
|
||||||
|
}
|
||||||
|
updateBarSub();
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildTable(){
|
||||||
|
var tb=document.querySelector("#plTable tbody");
|
||||||
|
tb.innerHTML=RAW.map(function(r){
|
||||||
|
var cls=r.totaled?'class="total-row"':(r.code==="012"||r.code==="020"||r.code==="100"||r.code==="200"||r.code==="500"?'class="sec-row"':"");
|
||||||
|
var dC=pct(r.cum26,r.cum25);
|
||||||
|
var dM=pct(r.m26,r.m25);
|
||||||
|
return "<tr"+cls+">"+
|
||||||
|
"<td>"+r.label+"</td>"+
|
||||||
|
'<td class="num" style="font-family:monospace;color:#9ca3af">'+r.code+"</td>"+
|
||||||
|
'<td class="num '+(r.cum26<0?"val-neg":"val-pos")+'">'+Bfmt(r.cum26)+"</td>"+
|
||||||
|
'<td class="num '+(r.m26<0?"val-neg":"val-pos")+'">'+Bfmt(r.m26)+"</td>"+
|
||||||
|
'<td class="num '+(r.cum25<0?"val-neg":"val-pos")+'">'+Bfmt(r.cum25)+"</td>"+
|
||||||
|
'<td class="num '+(r.m25<0?"val-neg":"val-pos")+'">'+Bfmt(r.m25)+"</td>"+
|
||||||
|
'<td class="num delta-cell '+dCls(dC)+'">'+pctStr(dC)+"</td>"+
|
||||||
|
'<td class="num delta-cell '+dCls(dM)+'">'+pctStr(dM)+"</td>"+
|
||||||
|
"</tr>";
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildInsights(){
|
||||||
|
var items=[
|
||||||
|
{ico:"risk",icon:"🔴",title:"Чистый убыток: −62,37 млрд ₸ за 8 мес.",desc:"Убыток сократился на 2,3% vs 2025 (−63,85 млрд). Операционный убыток (−64,02 млрд) превысил чистый — финансовые и прочие доходы частично компенсировали потери."},
|
||||||
|
{ico:"warn",icon:"⚠️",title:"Выручка +4,0%, но себестоимость +7,1%",desc:"Рост выручки (−97,83 → −93,87 млрд) не поспел за ростом себестоимости (29,80 → 27,68 млрд). Валовая прибыль улучшилась на 2,7%, однако админ. расходы (+1,75 млрд) съели эффект."},
|
||||||
|
{ico:"ok",icon:"✅",title:"Ежемесячная себестоимость −13,8% за август",desc:"Август 2026: 3,24 млрд ₸ vs август 2025: 3,76 млрд ₸. Положительный тренд для маржинальности текущего месяца. Требуется подтверждение устойчивости."},
|
||||||
|
{ico:"warn",icon:"⚠️",title:"Прочие расходы августа: +329%",desc:"Ежемесячные прочие расходы (025) выросли с 14,5 млн до 62,1 млн ₸. Резкий скачок требует детализации по статьям — возможна разовая операция."},
|
||||||
|
{ico:"info",icon:"📊",title:"Налоговая нагрузка: 293,6 тыс ₸",desc:"Подоходный налог почти нулевой из-за убыточности. При улучшении рентабельности налоговая нагрузка может резко вырасти — заложите в прогноз."},
|
||||||
|
{ico:"risk",icon:"🔴",title:"Финансовые расходы: 701,5 млн ₸ (+12,8%)",desc:"Процентные расходы стабильно высокие: ~84–97 млн/мес. Рост на 12,8% к 2025. Рекомендуем пересмотреть структуру долгового портфеля."}
|
||||||
|
];
|
||||||
|
document.getElementById("insightGrid").innerHTML=items.map(function(i){
|
||||||
|
return '<div class="insight"><div class="insight-ico '+i.ico+'">'+i.icon+'</div><div><h4>'+i.title+'</h4><p>'+i.desc+'</p></div></div>';
|
||||||
|
}).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("periodSeg").addEventListener("click",function(e){
|
||||||
|
var btn=e.target.closest("button");
|
||||||
|
if(!btn)return;
|
||||||
|
curMode=btn.dataset.mode;
|
||||||
|
this.querySelectorAll("button").forEach(function(b){b.classList.remove("active")});
|
||||||
|
btn.classList.add("active");
|
||||||
|
buildKPIs();
|
||||||
|
refreshCharts();
|
||||||
|
if(curMode!=="compare"){}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll(".nav-item").forEach(function(el){
|
||||||
|
el.addEventListener("click",function(){
|
||||||
|
var t=this.dataset.target;
|
||||||
|
document.querySelectorAll(".nav-item").forEach(function(n){n.classList.remove("active")});
|
||||||
|
this.classList.add("active");
|
||||||
|
var sec=document.getElementById(t);
|
||||||
|
if(sec)sec.scrollIntoView({behavior:"smooth",block:"start"});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
buildKPIs();
|
||||||
|
initCharts();
|
||||||
|
buildTable();
|
||||||
|
buildInsights();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user