sozday-sayt-prezentatsiyu-na/index.html

425 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- no-design-system -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Отчёт о прибылях и убытках — Дивизион по корпорбизнесу</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTMiIGhlaWdodD0iODkiIHZpZXdCb3g9IjAgMCA5MyA4OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTg5LjA2NzQgNTguNDk5Nkw2MC4zMjU3IDUxLjExODFMNjguMDIzMiA3OC42NjE4TDUzLjgyMTggODIuMzA2N0w0Ni4xMTkzIDU0Ljc3MjZMMTAuMzk4MiA4OUwwIDc5LjAzNTJMMzUuNzIxMSA0NC44MDI5TDYuOTg0MzkgMzcuNDI2MkwxMC43ODc2IDIzLjgxMTlMMzkuNTI5NCAzMS4xOTM0TDMxLjgyNjggMy42NDk1N0w0Ni4wMzM0IDBMNTMuNzM1OCAyNy41NDM4TDc1LjI4NjEgNi44ODcxOEw4NS42ODQzIDE2Ljg1Mkw2NC4xMzQgMzcuNTA4Nkw5Mi44NzEgNDQuODkwMkw4OS4wNjc0IDU4LjQ5OTZaIiBmaWxsPSIjMzVDNEUxIi8+Cjwvc3ZnPgo=">
<style>
:root {
--ink: #0F1218;
--cyan: #00E5FF;
--cyan-50: #E8FCFF;
--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; }
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); }
.container { max-width: 1140px; margin: 0 auto; padding: 80px 24px; }
.container.narrow { max-width: 800px; }
.container.wide { max-width: 1280px; }
.nav-bar { position: sticky; top: 0; background: rgba(15,18,24,.95); backdrop-filter: blur(8px); z-index: 100; padding: 14px 0; }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.nav-logo span { color: var(--cyan); }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: #9aa3b2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: #fff; }
@media(max-width:700px){.nav-links{display:none}}
.hero { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.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; }
.hero .container { padding-top: 90px; padding-bottom: 80px; }
.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; }
.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.08; margin-bottom: 20px; max-width: 760px; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero p { font-size: 19px; color: #9aa3b2; max-width: 640px; margin-bottom: 40px; }
.hero-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-meta-item { font-size: 14px; color: #8a92a3; }
.hero-meta-item strong { color: #c9d1e0; font-weight: 600; }
@media(max-width:700px){.hero h1{font-size:32px}.container{padding:56px 20px}}
.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; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,229,255,.3); }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color: #fff; box-shadow: none; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.section { background: var(--white); }
.section.alt { background: var(--gray-100); }
.section h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
.section .sub { font-size: 18px; color: var(--gray-500); margin-bottom: 40px; max-width: 640px; }
@media(max-width:640px){.section h2{font-size:28px}.container{padding:56px 20px}}
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media(max-width:900px){.kpi-strip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kpi-strip{grid-template-columns:1fr}}
.kpi { background: var(--white); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; }
.kpi .kpi-val { font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi .kpi-lbl { font-size: 13px; color: var(--gray-500); margin-bottom: 8px; }
.kpi .kpi-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
.kpi-red { color: var(--red); }
.kpi-ink { color: var(--ink); }
.kpi-green { color: var(--green); }
.badge-green { background: #ECFDF5; color: #065F46; }
.badge-amber { background: #FFFBEB; color: #92400E; }
.badge-red { background: #FEF2F2; color: #991B1B; }
.badge-blue { background: #EFF6FF; color: #1E40AF; }
.badge-gray { background: var(--gray-100); color: var(--gray-500); }
.waterfall-wrap { background: var(--white); border: 1px solid var(--card-border); border-radius: 16px; padding: 32px; margin-bottom: 32px; overflow-x: auto; }
.waterfall-wrap h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.waterfall-wrap .wf-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
.wf-row { display: grid; grid-template-columns: 220px 1fr 140px; gap: 12px; align-items: center; margin-bottom: 14px; }
@media(max-width:640px){.wf-row{grid-template-columns:1fr;gap:4px}}
.wf-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.wf-bar-track { height: 28px; position: relative; background: var(--gray-100); border-radius: 6px; overflow: hidden; }
.wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; transition: width .4s; }
.wf-bar.negative { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.wf-bar.positive { background: linear-gradient(90deg, #6EE7B7, #10B981); }
.wf-bar.total { background: linear-gradient(90deg, #00E5FF, #0096d7); }
.wf-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-val.negative { color: var(--red); }
.wf-val.positive { color: var(--green); }
.tbl-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--card-border); background: var(--white); }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
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; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFBFC; }
tr.total-row td { font-weight: 800; background: var(--ink); color: #fff; border-bottom: none; }
tr.total-row:hover td { background: var(--ink); }
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>
</head>
<body>
<nav class="nav-bar">
<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">
<div class="container">
<div class="hero-badge">Приложение 2 · Приказ Министра финансов РК № 665 от 01.07.2019</div>
<h1>Отчёт о прибылях и убытках <em>за август 2026</em></h1>
<p>Дивизион по корпорбизнесу — сводная финансовая картина: выручка, себестоимость, операционная и чистая прибыль с динамикой к прошлому году.</p>
<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 class="hero-actions">
<a href="#kpi" class="btn">Смотреть показатели</a>
<a href="#full-table" class="btn btn-ghost">Полная таблица</a>
</div>
</div>
</section>
<section id="kpi" class="section">
<div class="container wide">
<h2>Ключевые показатели</h2>
<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">
<table id="fullTable">
<thead>
<tr>
<th>Показатель</th>
<th class="num">Код</th>
<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>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</section>
<section id="insights" class="section alt">
<div class="container">
<h2>Инсайты для руководителя</h2>
<p class="sub">Ключевые выводы из отчётности — риски, изменения и рекомендации.</p>
<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>
<footer>
<div class="container" style="padding:0 24px">
<p>Отчёт о прибылях и убытках · Дивизион по корпорбизнесу · Август 2026</p>
<div class="foot-meta">Форма: Приложение 2 к приказу Минфина РК № 665 от 01.07.2019 · Данные предоставлены бухгалтерией</div>
</div>
</footer>
<script>
var DATA = [
{code:"010",label:"Выручка",cum26:-93867098637.71,m26:-12045045131.25,cum25:-97834948686.35,m25:-12144255612.52,section:false},
{code:"011",label:"Себестоимость реализованных товаров и услуг",cum26:27676352204.34,m26:3243468366.60,cum25:29804102574.46,m25:3761011392.97,section:false},
{code:"012",label:"Валовая прибыль (010 − 011)",cum26:-66190746433.37,m26:-8801576764.65,cum25:-68030846111.89,m25:-8383244219.55,section:true},
{code:"013",label:"Расходы по реализации",cum26:418740797.93,m26:68961408.54,cum25:570770113.97,m25:187577855.74,section:false},
{code:"014",label:"Административные расходы",cum26:1749326462.31,m26:197676769.88,cum25:1914108497.03,m25:261704243.45,section:false},
{code:"020",label:"Итого операционная прибыль (убыток)",cum26:-64022679173.13,m26:-8534938586.23,cum25:-65545967500.89,m25:-7933962120.36,section:true},
{code:"021",label:"Финансовые доходы",cum26:-1957101.02,m26:-195343.51,cum25:-1264880.75,m25:-236214.85,section:false},
{code:"022",label:"Финансовые расходы",cum26:701541056.45,m26:84483743.17,cum25:804225500.77,m25:97319298.71,section:false},
{code:"024",label:"Прочие доходы",cum26:-710021892.26,m26:-84923001.32,cum25:-834433082.65,m25:-24723272.45,section:false},
{code:"025",label:"Прочие расходы",cum26:1664562984.38,m26:62062365.72,cum25:1731305146.24,m25:14463870.41,section:false},
{code:"100",label:"Прибыль (убыток) до налогообложения",cum26:-62368554125.58,m26:-8473510822.17,cum25:-63846134817.28,m25:-7847138438.54,section:true},
{code:"101",label:"Расходы по подоходному налогу",cum26:293565.16,m26:29301.53,cum25:189732.11,m25:35432.23,section:false},
{code:"200",label:"Чистая прибыль (убыток) от продолжающейся деятельности",cum26:-62368260560.42,m26:-8473481520.64,cum25:-63845945085.17,m25:-7847103006.31,section: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,section:true}
];
function fmtB(v) {
var abs = Math.abs(v);
var sign = v < 0 ? "−" : "";
if (abs >= 1e9) return sign + (abs/1e9).toFixed(2) + " млрд ₸";
if (abs >= 1e6) return sign + (abs/1e6).toFixed(2) + " млн ₸";
if (abs >= 1e3) return sign + (abs/1e3).toFixed(2) + " тыс ₸";
return sign + abs.toFixed(2) + " ₸";
}
function fmtShort(v) {
var abs = Math.abs(v);
var sign = v < 0 ? "−" : "";
if (abs >= 1e9) return sign + (abs/1e9).toFixed(2) + " млрд";
if (abs >= 1e6) return sign + (abs/1e6).toFixed(2) + " млн";
if (abs >= 1e3) return sign + (abs/1e3).toFixed(1) + " тыс";
return sign + abs.toFixed(0);
}
function fmtDelta(cur, prev) {
if (!prev || prev === 0) return "—";
var d = ((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) {
if (!prev || !cur || prev === 0 || cur === 0) return "";
var d = cur - prev;
return d > 0 ? "delta-up" : "delta-down";
}
var tbody = document.querySelector("#fullTable tbody");
tbody.innerHTML = DATA.map(function(r) {
var cls = r.section ? ' class="section-row"' : '';
var dCum = fmtDelta(r.cum26, r.cum25);
var clsCum = deltaClass(r.cum26, r.cum25);
var dM = fmtDelta(r.m26, r.m25);
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 wfEl = document.getElementById("waterfall");
wfEl.innerHTML = wfData.map(function(d) {
var pct = (Math.abs(d.val) / maxAbs * 100).toFixed(1);
var isNeg = d.val < 0;
var barCls = isNeg ? "negative" : "positive";
var valCls = isNeg ? "negative" : "positive";
var valTxt = fmtB(d.val * 1e9);
return '<div class="wf-row">' +
'<div class="wf-label">'+d.label+'</div>' +
'<div class="wf-bar-track"><div class="wf-bar '+barCls+'" style="width:'+pct+'%"></div></div>' +
'<div class="wf-val '+valCls+'">'+valTxt+'</div>' +
'</div>';
}).join("");
</script>
</body>
</html>