Налаштування графіків у Dashboard

Інструкція описує, як обрати вигляд графіка у віджеті та як задати оформлення прямо у відповіді звітного HTTP-сервісу — у форматі бібліотеки billboard.js, якою Dashboard малює графіки. Як підключити джерело й вибірку, описано в інструкції підключення графіків.

1. Де налаштовується вигляд

Відкрийте дашборд і натисніть «Редагувати».
Наведіть на віджет і натисніть олівець «Редагувати» (або «Додати віджет» для нового).
У полі «Відображення» оберіть вид, за потреби вкажіть одиниці, максимум шкали чи лінію тренду, і збережіть.

2. Види відображення

Вид	Коли підходить
Як у джерелі	Вид, кольори й межі беруться з відповіді сервісу (розділ 4). Якщо джерело виду не передало — число для одного запису й лінійний графік для кількох.
Число	Останнє значення показника великим числом, наприклад залишок коштів.
Лінійний графік	Динаміка за місяцями чи днями.
Графік з областю	Динаміка з акцентом на обсязі.
Стовпчики	Порівняння періодів, менеджерів, складів.
Таблиця	Точні значення записів.
Кругова й кільцева діаграма	Частини цілого: структура продажів, витрат. Показуються додатні значення; понад вісім частин — сім найбільших та «Інше».
Шкала	Останнє значення відносно максимуму, наприклад виконання плану.
Текст (Markdown)	Пояснення, підказки й посилання на дашборді без даних.

3. Додаткові параметри віджета

Одиниці виміру — показуються біля назви віджета й у підказках, наприклад «грн» чи «шт.».
Максимум шкали — для шкали й виду «Як у джерелі», наприклад план продажу; він головніший за максимум із відповіді.
Лінія тренду — для лінійного графіка, області й стовпчиків: пунктирна пряма за основним показником показує загальний напрям.
Текст — для виду «Текст»: # заголовок, **жирний**, *курсив*, списки з -, посилання [назва](https://…), таблиці. HTML не підтримується.

4. Оформлення з відповіді сервісу

Звітний HTTP-сервіс повертає конфігурацію графіка у форматі billboard.js (сумісна з C3.js). Dashboard бере з неї дані й частину оформлення; осі, легенди, формати й функції не виконуються. Тип і вид окремих показників діють у віджеті з видом «Як у джерелі», а кольори, межі й пороги шкали — за будь-якого виду.

Лінія, область, стовпчики

Показники — у data.columns (перший елемент рядка — назва), категорії осі — в axis.x.categories. Загальний вид — data.type: line, area, bar (spline і step показуються лінією, area-spline і area-step — областю). Вид окремого показника — data.types, кольори — data.colors:

{"data": {
  "columns": [["Продажі", 120, 135, 128], ["План", 125, 125, 130]],
  "type": "bar",
  "types": {"План": "line"},
  "colors": {"Продажі": "#0d6efd", "План": "#dc3545"}
},
"axis": {"x": {"categories": ["Січень", "Лютий", "Березень"]}}}

Для дат замість категорій передайте колонку дат у data.x і "axis": {"x": {"type": "timeseries"}}: дати ДД.ММ.РРРР та ISO розпізнаються автоматично.

Кругова й кільцева діаграма

{"data": {
  "columns": [["Київ", 40], ["Львів", 25], ["Одеса", 35]],
  "type": "donut"
},
"color": {"pattern": ["#0d6efd", "#20c997", "#ffc107"]}}

Кольори без data.colors беруться з color.pattern по колу.

Шкала з порогами кольору

{"data": {"columns": [["Виконання плану", 76]], "type": "gauge"},
"gauge": {"min": 0, "max": 100},
"color": {
  "pattern": ["#dc3545", "#ffc107", "#198754"],
  "threshold": {"values": [50, 80, 100]}
}}

Значення до 50 — червоне, до 80 — жовте, вище — зелене. Пороги — за зростанням, кольорів не менше, ніж порогів; "unit": "value" порівнює саме значення, інакше — відсоток від max.

Що не застосовується

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

5. Вивантаження, друк і вбудовування

У діях віджета — «Завантажити дані»: CSV, Excel або зображення PNG графіка.
На панелі дашборда — «Друк або збереження в PDF»: друк дашборда без меню й кнопок; у вікні друку оберіть «Зберегти як PDF».
У розділі «Доступ» → «Посилання» для відкритого посилання є «Код для вбудовування»: дашборд можна вставити на сайт, у CRM чи ERP.