tore/dashbord-top-uslug-b2c-po-re-10
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DRB Казахтелеком B2C: дашборд топ услуг

Browse Source
This commit is contained in:
tore 2026-09-14 05:25:37 +00:00
parent 7216186422
commit ecf71b880d
1 changed files with 62 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
index.html
View File

@ -2,123 +2,80 @@
<html lang="ru" data-theme="light"> <html lang="ru" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light">
<title>Топ услуг B2C по регионам</title> <title>DRB Казахтелеком B2C</title>
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<script>(function(){var t=null;try{t=localStorage.getItem("demo.theme");}catch(e){}if(t==="dark"||t==="light"){document.documentElement.setAttribute("data-theme",t);}})();</script> <link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="./design-system/kt-ai-tokens.css"> <link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="./design-system/kt-ai-components.css"> <link rel="stylesheet" href="./design-system/kt-ai-components.css">
<link rel="stylesheet" href="./design-system/kt-ai-page.css">
<style> <style>
/* Дашборд «Топ услуг B2C по регионам» — архетип dashboard дизайн-системы KT AI. *,*::before,*::after{box-sizing:border-box}
Свой стиль — только сетка и отступы; цвета, радиусы, шрифты — токены ДС. */ [hidden]{display:none!important}
*, *::before, *::after { box-sizing: border-box; } html,body{margin:0;background:var(--kt-ai-bg);color:var(--kt-ai-fg);font-family:var(--kt-ai-font-sans)}
[hidden] { display: none !important; } .wrap{max-width:var(--kt-ai-content-wide,1280px);margin:0 auto;padding:0 var(--kt-ai-space-5) var(--kt-ai-space-10)}
html, body { margin: 0; background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); } .top{position:sticky;top:0;z-index:var(--kt-ai-z-sticky,20);background:var(--kt-ai-bg);border-bottom:1px solid var(--kt-ai-border)}
body { -webkit-text-size-adjust: 100%; } .top-in{display:flex;align-items:center;gap:var(--kt-ai-space-4);min-height:56px;padding:var(--kt-ai-space-2) 0}
.wrap { max-width: var(--kt-ai-content-wide, 1280px); margin: 0 auto; padding: 0 var(--kt-ai-space-5) var(--kt-ai-space-10); } .top img{width:36px;height:36px;flex-shrink:0}
.top .head{min-width:0;flex:1}
/* Шапка: компактная, без hero */ .top h1{margin:0;font-size:var(--kt-ai-text-lg);font-weight:var(--kt-ai-weight-semibold);line-height:var(--kt-ai-leading-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top { position: sticky; top: 0; z-index: var(--kt-ai-z-sticky, 20); background: var(--kt-ai-bg); border-bottom: 1px solid var(--kt-ai-border); } .top .sub{margin:2px 0 0;font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-in { display: flex; align-items: center; gap: var(--kt-ai-space-4); min-height: 56px; padding: var(--kt-ai-space-2) 0; } .top .tools{display:flex;align-items:center;gap:var(--kt-ai-space-3);flex-shrink:0}
.top img { width: 28px; height: 28px; flex-shrink: 0; } .iconbtn{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:var(--kt-ai-radius-full);border:1px solid var(--kt-ai-border);background:var(--kt-ai-bg-elevated);color:var(--kt-ai-fg);cursor:pointer;padding:0}
.top .head { min-width: 0; flex: 1; } .iconbtn:hover{background:var(--kt-ai-bg-hover)}
.top h1 { margin: 0; font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); line-height: var(--kt-ai-leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iconbtn svg{width:16px;height:16px}
.top .sub { margin: 2px 0 0; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="light"] .ic-sun,[data-theme="dark"] .ic-moon{display:none}
.top .tools { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-shrink: 0; } .section{margin-top:var(--kt-ai-space-6)}
.iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--kt-ai-radius-full); border: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg); cursor: pointer; padding: 0; } .section-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kt-ai-space-4);margin:0 0 var(--kt-ai-space-3)}
.iconbtn:hover { background: var(--kt-ai-bg-hover); } .section-h h2{margin:0;font-size:var(--kt-ai-text-md);font-weight:var(--kt-ai-weight-semibold)}
.iconbtn svg { width: 16px; height: 16px; } .section-h .muted{font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted)}
[data-theme="light"] .ic-sun, [data-theme="dark"] .ic-moon { display: none; } .charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kt-ai-stack-block,16px)}
.chart-card h3{margin:0 0 var(--kt-ai-space-4);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-semibold);display:flex;justify-content:space-between;align-items:baseline;gap:var(--kt-ai-space-3);flex-wrap:wrap}
/* Секции */ .chart-card h3 .ttl{white-space:nowrap}
.section { margin-top: var(--kt-ai-space-6); } .chart-card h3 .muted{font-weight:var(--kt-ai-weight-regular);color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-xs)}
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kt-ai-space-4); margin: 0 0 var(--kt-ai-space-3); } .bars{display:flex;flex-direction:column;gap:6px}
.section-h h2 { margin: 0; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); } .brow{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr) auto;align-items:center;gap:var(--kt-ai-space-3);min-height:24px;padding:2px 6px;margin:0 -6px;border-radius:var(--kt-ai-radius-sm);background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:default}
.section-h .muted { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } .brow[data-pick="true"]{cursor:pointer}
.brow[data-pick="true"]:hover{background:var(--kt-ai-bg-hover)}
/* KPI: карточки-сетка ДС; длинное значение — меньше кеглем и в одну строку */ .brow[data-active="true"]{background:var(--kt-ai-bg-active)}
.kt-ai-kpi .value[data-long="true"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brow .lbl{font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .track{display:block;height:10px;border-radius:2px;background:var(--kt-ai-bg-sunken);overflow:hidden}
/* Чарты: два в ряд на широком экране, столбиком на телефоне */ .brow .fill{display:block;height:100%;border-radius:2px;background:var(--kt-ai-chart-blue);transition:width var(--kt-ai-dur-base) var(--kt-ai-ease-standard)}
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--kt-ai-stack-block, 16px); } .chart-card[data-tone="green"] .fill{background:var(--kt-ai-chart-green)}
.chart-card h3 { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); display: flex; justify-content: space-between; align-items: baseline; gap: var(--kt-ai-space-3); flex-wrap: wrap; } .brow .val{font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-card h3 .ttl { white-space: nowrap; } .tb{display:flex;align-items:center;gap:var(--kt-ai-space-3);flex-wrap:wrap;min-height:40px;margin-bottom:var(--kt-ai-space-3)}
.chart-card h3 .muted { font-weight: var(--kt-ai-weight-regular); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); } .tb .grow{flex:1 1 220px;min-width:0}
.bars { display: flex; flex-direction: column; gap: 6px; } .tb .kt-ai-select-wrap{flex:0 1 220px}
.brow { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) auto; align-items: center; gap: var(--kt-ai-space-3); min-height: 24px; padding: 2px 6px; margin: 0 -6px; border-radius: var(--kt-ai-radius-sm); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: default; } .tb .count{font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted);white-space:nowrap;margin-left:auto}
.brow[data-pick="true"] { cursor: pointer; } .chips{display:flex;gap:var(--kt-ai-space-2);flex-wrap:wrap;margin-bottom:var(--kt-ai-space-3)}
.brow[data-pick="true"]:hover { background: var(--kt-ai-bg-hover); } .chips:empty{display:none}
.brow[data-active="true"] { background: var(--kt-ai-bg-active); } .tfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--kt-ai-space-3);flex-wrap:wrap;padding:var(--kt-ai-space-3) 0;font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted)}
.brow .lbl { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media(max-width:639.98px){
.brow .track { display: block; height: 10px; border-radius: 2px; background: var(--kt-ai-bg-sunken); overflow: hidden; } .wrap{padding-left:var(--kt-ai-space-4);padding-right:var(--kt-ai-space-4)}
.brow .fill { display: block; height: 100%; border-radius: 2px; background: var(--kt-ai-chart-blue); transition: width var(--kt-ai-dur-base) var(--kt-ai-ease-standard); } .top .sub{display:none}
.chart-card[data-tone="green"] .fill { background: var(--kt-ai-chart-green); } .kt-ai-kpi-strip[data-cards="true"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kt-ai-space-3)}
.brow .val { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi:last-child{grid-column:1/-1}
.kt-ai-kpi-strip[data-cards="true"] .value{font-size:var(--kt-ai-text-lg)}
/* Таблица: тулбар над ней, фильтры-чипы под ним, скролл внутри контейнера */ .chart-card h3 .muted{flex:1 1 100%}
.tb { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; min-height: 40px; margin-bottom: var(--kt-ai-space-3); } .tb .kt-ai-search-field,.tb .kt-ai-search{display:block}
.tb .grow { flex: 1 1 220px; min-width: 0; } .tb .kt-ai-select-wrap{flex-basis:100%}
.tb .kt-ai-select-wrap { flex: 0 1 220px; } .tb .count{margin-left:0;width:100%}
.tb .count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; margin-left: auto; } .brow{grid-template-columns:minmax(80px,40%) minmax(0,1fr) auto}
.chips { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-3); } }
.chips:empty { display: none; } @media(prefers-reduced-motion:reduce){.brow .fill{transition:none}}
.kt-ai-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-elevated); }
table.kt-ai-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.kt-ai-table th, .kt-ai-table td { padding: 0 var(--kt-ai-space-4); height: var(--kt-ai-table-row, 40px); border-bottom: 1px solid var(--kt-ai-divider, var(--kt-ai-border)); text-align: left; vertical-align: middle; }
.kt-ai-table th { position: sticky; top: 0; z-index: 1; background: var(--kt-ai-bg-elevated); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg-muted); white-space: nowrap; user-select: none; }
.kt-ai-table th[data-sort] { cursor: pointer; }
.kt-ai-table th[data-sort]:hover { color: var(--kt-ai-fg); }
.kt-ai-table th[data-dir]::after { content: " ↓"; } .kt-ai-table th[data-dir="asc"]::after { content: " ↑"; }
.kt-ai-table tbody tr:hover { background: var(--kt-ai-bg-hover); }
.kt-ai-table tbody tr:last-child td { border-bottom: 0; }
.kt-ai-table td { font-size: var(--kt-ai-text-sm); }
.kt-ai-table .num { text-align: right; white-space: nowrap; }
.kt-ai-table .num .v { font-family: var(--kt-ai-font-mono); font-variant-numeric: tabular-nums; }
.kt-ai-table td.svc { max-width: 420px; }
.kt-ai-table .svc .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-ai-table .svc .m { display: none; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
.kt-ai-table mark { background: var(--kt-ai-selection, var(--kt-ai-primary-subtle)); color: inherit; border-radius: 2px; }
.kt-ai-table tfoot td { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); background: var(--kt-ai-bg-soft); }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-3); flex-wrap: wrap; padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
.kt-ai-empty { padding: var(--kt-ai-space-10) var(--kt-ai-space-5); text-align: center; color: var(--kt-ai-fg-muted); }
.kt-ai-empty .title { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); margin-bottom: var(--kt-ai-space-2); }
/* Телефон: ДС разворачивает таблицу в карточки строк с подписями полей (data-label);
услуга — заголовок карточки, поиск ДС на телефоне прячет — возвращаем в тулбаре */
@media (max-width: 639.98px) {
.wrap { padding-left: var(--kt-ai-space-4); padding-right: var(--kt-ai-space-4); }
.top .sub { display: none; }
.kt-ai-kpi-strip[data-cards="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kt-ai-space-3); }
.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi:last-child { grid-column: 1 / -1; }
.kt-ai-kpi-strip[data-cards="true"] .value { font-size: var(--kt-ai-text-lg); }
.chart-card h3 .muted { flex: 1 1 100%; }
.tb .kt-ai-search-field, .tb .kt-ai-search { display: block; }
.tb .kt-ai-select-wrap { flex-basis: 100%; }
.tb .count { margin-left: 0; width: 100%; }
.kt-ai-table-wrap { border: 0; background: none; overflow: visible; }
table.kt-ai-table { min-width: 0; }
.kt-ai-table td, .kt-ai-table th { padding: var(--kt-ai-space-2) 0; height: auto; border-bottom: 0; }
.kt-ai-table td:first-child { display: block; padding: 0 0 var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-2); border-bottom: 1px solid var(--kt-ai-divider, var(--kt-ai-border)); font-weight: var(--kt-ai-weight-semibold); }
.kt-ai-table td.svc { max-width: none; }
.kt-ai-table .svc .t { white-space: normal; }
.kt-ai-table .svc .m { display: none; }
.kt-ai-table td:nth-child(2) { display: flex; padding: var(--kt-ai-space-2) 0; margin: 0; border-bottom: 0; font-weight: var(--kt-ai-weight-regular); text-align: right; }
.kt-ai-table td:nth-child(2)::before { display: block; }
.brow { grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .brow .fill { transition: none; } }
</style> </style>
</head> </head>
<body class="kt-ai-app"> <body class="kt-ai-app" data-kt-data-mode="demo">
<header class="top"> <header class="top">
<div class="wrap top-in"> <div class="wrap top-in">
<img src="./kt-logo.svg" alt="Казахтелеком"> <img src="./kt-logo.svg" alt="Казахтелеком">
<div class="head"> <div class="head">
<h1>Топ услуг B2C по регионам</h1> <h1>DRB Казахтелеком B2C</h1>
<p class="sub" id="sub">Июль 2026 · покупки и выручка по регионам</p> <p class="sub" id="sub">Июль 2026 · покупки и выручка по регионам</p>
</div> </div>
<div class="tools"> <div class="tools">
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
<div class="kt-ai-segmented" role="tablist" aria-label="Метрика"> <div class="kt-ai-segmented" role="tablist" aria-label="Метрика">
<button class="seg" type="button" role="tab" data-metric="qty" data-active="true">Покупки</button> <button class="seg" type="button" role="tab" data-metric="qty" data-active="true">Покупки</button>
<button class="seg" type="button" role="tab" data-metric="sum">Выручка</button> <button class="seg" type="button" role="tab" data-metric="sum">Выручка</button>
@ -180,6 +137,7 @@
</main> </main>
<script> <script>
const FILTERS=[{id:"region",label:"Регион",affects:["table","chart","kpi"]},{id:"q",label:"Поиск по услуге",affects:["table"]}];
const DATA = [ const DATA = [
{"region": "Астана", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 37372, "sum": 238463786.09}, {"region": "Астана", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 37372, "sum": 238463786.09},
{"region": "г.Алматы", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 39671, "sum": 237005698.16}, {"region": "г.Алматы", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 39671, "sum": 237005698.16},
@ -240,14 +198,12 @@ const esc = s => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(
const PAGE = 25; const PAGE = 25;
const state = { metric: "qty", region: "", q: "", sort: "qty", dir: "desc", shown: PAGE }; const state = { metric: "qty", region: "", q: "", sort: "qty", dir: "desc", shown: PAGE };
// тема
$("theme").onclick = () => { $("theme").onclick = () => {
const t = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"; const t = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", t); document.documentElement.setAttribute("data-theme", t);
try { localStorage.setItem("demo.theme", t); } catch (e) {} try { localStorage.setItem("demo.theme", t); } catch (e) {}
}; };
// KPI
const totalQty = DATA.reduce((s, r) => s + r.qty, 0), totalSum = DATA.reduce((s, r) => s + r.sum, 0); const totalQty = DATA.reduce((s, r) => s + r.qty, 0), totalSum = DATA.reduce((s, r) => s + r.sum, 0);
const regions = [...new Set(DATA.map(r => r.region))].sort((a, b) => a.localeCompare(b, "ru")); const regions = [...new Set(DATA.map(r => r.region))].sort((a, b) => a.localeCompare(b, "ru"));
$("k-qty").textContent = fmt(totalQty); $("k-qty").textContent = fmt(totalQty);
@ -286,7 +242,6 @@ document.querySelectorAll(".kt-ai-segmented .seg").forEach(b => b.onclick = () =
renderTop(); renderTable(); renderTop(); renderTable();
}); });
// таблица
function setRegion(r) { state.region = r; $("region").value = r; state.shown = PAGE; renderTop(); renderTable(); } function setRegion(r) { state.region = r; $("region").value = r; state.shown = PAGE; renderTop(); renderTable(); }
$("region").onchange = () => setRegion($("region").value); $("region").onchange = () => setRegion($("region").value);
$("q").oninput = () => { state.q = $("q").value.trim().toLowerCase(); state.shown = PAGE; renderTable(); }; $("q").oninput = () => { state.q = $("q").value.trim().toLowerCase(); state.shown = PAGE; renderTable(); };