# Дашборд: топ услуг B2C по регионам Веб-дашборд «Топ услуг B2C по регионам»: топ услуг Казахтелекома по количеству покупок с разбивкой по всем регионам. В шапке слева — логотип Казахтелекома: файл kt-logo.svg в корне проекта (его содержимое — в разделе «Логотип» ниже, сохрани без изменений), подключи как Казахтелеком, справа от него заголовок «Топ услуг B2C по регионам». Экран собирай ТОЛЬКО из компонентов дизайн-системы KT AI (design-system/COMPONENTS.md), своих классов, стилей и цветов не выдумывай. Шапка — .kt-ai-pagehead с логотипом и заголовком. Под ней полоса показателей .kt-ai-kpi-strip из четырёх плашек .kt-ai-kpi (в каждой .value — число, .label — подпись, .hint — уточнение): всего покупок, всего регионов, услуга-лидер (название целиком, без обрезания), регион-лидер; на широком экране четыре в один ряд, на телефоне — в две колонки. Ниже два столбчатых графика в карточках .kt-ai-card — «Топ регионов по покупкам» и «Топ услуг по количеству»: чистый SVG или div-столбцы высотой 190–220px, столбцы 20–28px с радиусом 2px, подписи значений 11px mono muted, цвет столбцов — один токен var(--kt-ai-chart-blue) (второй график — var(--kt-ai-chart-green)), без радуги; подсказка значения при наведении — атрибут data-kt-tip и скрипт ./design-system/kt-ai-chart-tip.js. Ниже таблица топ-услуг по правилам ДС: frameless в .kt-ai-table-wrap, колонки «Услуга», «Регион», «Покупок», «Сумма, ₸», числа вправо с tabular-nums, лёгкие горизонтальные разделители, поиск по услуге и фильтр по региону над таблицей. Цвета, отступы, радиусы, шрифт — только токены var(--kt-ai-…) из ДС в светлой теме (); ни одного своего hex-цвета, кроме файла логотипа. Перед публикацией проверь: в index.html не меньше десятка классов kt-ai-*. Только фронтенд — один статичный index.html с данными внутри, без серверной части (никаких package.json, server.js, node-зависимостей). Источник данных — таблица в разделе «Данные» ниже, используй её целиком и ничего не выдумывай. Все пути к CSS, скриптам, шрифтам и другим ресурсам — строго относительные (./...): сайт публикуется в подпапке, абсолютные пути с корня сломаются. Работай без уточняющих вопросов. Когда дашборд готов — опубликуй сайт. ## Основа — готовая страница Прототип уже свёрстан и проверен, его код — в этом файле между строками `<<>>`. Не перепечатывай и не переписывай его — вырежи в index.html командой: ```sh awk '/^<<>>$/{f=0} f' brief.md > index.html sed -i 's#\.\./\.\./ds/#./design-system/#g; s#\.\./\.\./kt-logo\.svg#./kt-logo.svg#g' index.html ``` Сохрани kt-logo.svg из раздела «Логотип». После этого внеси ТОЛЬКО правку владельца: Поменяй тайтл на DRB Казахтелеком B2C.. Больше ничего не меняй и опубликуй сайт. ## Логотип Сохрани этот SVG как файл kt-logo.svg в корне проекта, не меняя содержимое: ```svg ``` << Топ услуг B2C по регионам
Казахтелеком

Топ услуг B2C по регионам

Июль 2026 · покупки и выручка по регионам

—
Покупок
за июль 2026
—
Выручка
по 50 позициям
—
Регионов
в выборке
—
Услуга-лидер
по покупкам

Регионы по покупкам · нажмите, чтобы отфильтровать

Услуги по покупкам · топ-8

Позиции

услуга × регион
Услуга Регион Покупок Сумма, ₸
BASE_HTML>>> ## Объём работы Собирай ровно то, что написано в задании, и ничего сверх: без дополнительных разделов, журналов, историй, настроек и «на всякий случай» — их не просили. Свои файлы — только index.html (стили и скрипт внутри него) плюс то, что задание просит создать явно; без сборщиков и фреймворков, без комментариев в коде. Демо-данные короткие и реалистичные. Вопросов не задавай: чего в задании нет — реши сам разумно и коротко. Закончив, опубликуй сайт. ## Состояние данных Данные в приложении демонстрационные, и это видно: источника у чисел нет — вместо источника пиши «Демо-данные». Собери их по одному контракту. 1. Управление и сообщение пустого состояния не прячутся никогда: скрывать можно только сам блок результата и только его собственный элемент. Подниматься к предку (`parentElement`, `parentNode`, `closest(...)`) ЗАПРЕЩЕНО — на прогоне 13.09 вместе с графиком исчезли фильтры, переключатель и сама надпись «Недостаточно данных». 2. Фильтр обязан менять ВСЕ представления, которые задевает: таблицу, показатели, график и текст объяснения. Объяви реестр `const FILTERS = [{id, label, affects}]` со всеми видимыми фильтрами. Не меняет чего-то в демо — скажи честно: `demoOnly: true` и видимая подпись рядом с контролом `в демо не меняет график`. 3. Молчаливая подмена набора запрещена: `DATA_SET[x] || DATA_SET["7d"]` показывает выбранный период вместе с данными другого. Нет данных под выбранные фильтры — покажи пустое состояние с явной причиной («за выбранный период данных нет»), а не чужой набор. Демо-набор наполни так, чтобы под каждым значением каждого фильтра числа были РАЗНЫЕ, и один срез оставь пустым. 4. Режим данных виден постоянно: `data-kt-data-mode="demo"` на `` и один видимый чип `Демо-данные` в шапке, на любой ширине; своего класса под него не заводи. Режим `live` и чип «Данные из системы» — только если в задании названы система-источник и точка доступа к ней. 5. Объявленный запрет обязан быть запретом, а не надписью. Если строка помечена как непроходная (конфликт данных, пустой обязательный срок, незаполненное поле), действие по ней НЕ ВЫПОЛНЯЕТСЯ: ни поштучно, ни массовой кнопкой «принять всё». Кнопку в такой строке ставь `disabled`, а рядом одной фразой скажи, ЧТО именно мешает и что сделать («срок не заполнен — укажите дату»). Массовое действие пропускает непроходные строки и честно пишет, сколько пропустило.