Дашборд із виписки за вечір

Коли HTML-дашборд кращий за звіт

Статичний звіт підходить, коли треба зафіксувати одну картину: PDF, Word або картинку для щотижневого дайджесту. Інтерактивний HTML-дашборд потрібен там, де керівник ставить наступні питання вже після перегляду: по кому борг росте, де перевитрата проти плану, який сегмент тягне показник вниз.

Сенс не в «красивій візуалізації», а в тому, що користувач сам змінює ракурс: фільтрує, перемикає період, сортує таблицю, відкриває деталізацію. Дані залишаються ті самі, новий звіт під кожне питання не потрібен.

Базове формулювання для задачі: Побудуй self-contained HTML-дашборд з цього CSV/Excel. KPI зверху: [метрики]. У центрі: [графік]. Нижче: [таблиця]. Додай [фільтри/перемикачі/сортування]. Дані брати лише з файлу, нічого не вигадувати. Чистий JS, без зовнішніх бібліотек.

Ще два робочі сценарії: CRM і бюджет

Для CRM-воронки дашборд можна будувати не навколо виписки, а навколо продажів. У першоджерелі це другий приклад після cash-flow: воронка продажів / CRM на даних БЕТА-СЕРВІС. Тут корисні не лише підсумкові KPI, а й можливість провалитись у сегмент: клік на елемент графіка відкриває рядки саме цього етапу або категорії.

Промпт для такої задачі: Побудуй self-contained HTML-дашборд за CRM-файлом. Зверху покажи KPI по воронці продажів. У центрі зроби графік по етапах. Нижче додай таблицю угод. Зроби клік на стовпчик графіка: під ним відкривається таблиця рядків саме цього сегмента. Дані брати лише з файлу.

Третій сценарій з джерела — бюджет план/факт. Тут головний прийом не пошук, а контроль відхилень. Попросіть таблицю план/факт, графік по періодах або категоріях і умовне форматування: Підсвічуй відхилення: зелений ≤5%, жовтий 5–15%, червоний >15%. Такий дашборд не приймає рішення, але швидко показує, де людині треба перевірити причину.

Як нарощувати інтерактивність без переробки з нуля

Першу версію краще робити простою: KPI, один графік, таблиця. Потім відкрийте файл у браузері й додавайте інтерактивність короткими командами. Один HTML-файл може рости поступово: пошук, фільтр, перемикач періоду, вкладки, сортування, світлофор, tooltip при наведенні.

• Додай dropdown-фільтр за категорією і чекбокси за статусом — таблиця й KPI оновлюються вмить.
• Додай перемикач періоду місяць/квартал — усі метрики й графік перераховуються.
• Зроби таблицю сортованою за кліком на будь-який заголовок, у обидва боки.
• Додай поле пошуку над таблицею — фільтрує рядки по будь-якій колонці.
• Винеси у вкладки: Огляд / Деталі / Аномалії — перемикання без перезавантаження.
• При наведенні на стовпчик показуй точну суму і кількість операцій у підказці.

Вибір прийому залежить від питання. Для дослідження потрібні фільтри й drill-down. Для контролю — світлофор і сортування. Для зручного перегляду кількох панелей в одному файлі — вкладки. Якщо додати десять фільтрів без реальної потреби, дашборд стане важчим, але не кориснішим.

Де дашборд помиляється і що перевірити

Обмеження просте: дашборд показує те, що є у файлі, і те, що ви попросили порахувати. Якщо файл брудний, колонки названі неоднозначно або метрики описані розмито, красивий екран лише швидше покаже помилку. Формулювання «зроби красиво» майже гарантує випадковий результат.

• Назвіть конкретні KPI, графік, таблицю й інтерактивні прийоми.
• Попросіть self-contained HTML, чистий JS, без зовнішніх бібліотек, щоб файл відкривався офлайн і на чужому компʼютері.
• Окремо зафіксуйте: Дані брати лише з файлу, нічого не вигадувати.
• Перед показом керівнику звірте хоча б одну KPI-цифру з джерелом вручну.
• Перевірте, що фільтри змінюють не лише таблицю, а й KPI та графік, якщо саме це було в ТЗ.
• Не трактуйте колір як рішення: червоне відхилення лише показує місце для людської перевірки.

Якщо дашборд потрібен для «відправити і зафіксувати», краще залишити статичний звіт. Якщо керівник сам досліджує витрати, продажі або бюджетні відхилення, HTML-файл з фільтрами й деталізацією економить час на повторних запитах до фінансиста, бухгалтера чи аналітика.