Раскладка дашборда
Раскладка — это позиции и размеры всех виджетов на дашборде. Управляется мышью.
Сетка
- 12 колонок по горизонтали.
- Высота — единичные строки фиксированной высоты.
- Виджет занимает прямоугольник
W × H(например, 4×2 = четыре колонки на две строки).
Перетащить
- Возьмите виджет за заголовок (полоса в верхней части карточки).
- Тащите в нужную позицию.
- Остальные виджеты автоматически «расступаются» — react-grid-layout пакует виджеты так, чтобы не было пустот сверху.
Изменить размер
- Возьмите за правый-нижний угол карточки виджета.
- Тяните до нужного размера.
- При отпускании размер снапится к ближайшему пресету.
Пресеты размеров
Доступны:
| W × H | Когда используется |
|---|---|
| 1×1 | Маленький счётчик. |
| 2×1, 2×2 | Узкий KPI или мини-таблица. |
| 3×2 | Стандартный KPI с дельтой. |
| 4×2 | KPI «Comparison» / средний график. |
| 6×2, 6×4 | Большой график на полширины. |
| 12×2 | Узкая полоса на ширину дашборда. |
| 12×4 | Большой график или таблица на всю ширину. |
Минимальный размер виджета задаётся его типом (например, KPI — минимум 2×2). Если выбранный пресет меньше минимума — виджет отклонит изменение.
Удалить / дублировать виджет
В правом верхнем углу карточки — меню ⋮:
- Дублировать — копия рядом.
- Удалить — мгновенно (без подтверждения; восстановления нет).
- Настроить — открыть конфиг виджета.
Сохранение
- Раскладка сохраняется автоматически после каждого изменения. Не надо нажимать «Сохранить».
Частые ошибки
- Тянут виджет за тело, а не за заголовок. Перетаскивание работает только за полосу заголовка.
- Не понимают, почему размер «прыгает». Это снап к ближайшему пресету. Если нужный пресет в списке есть — отпустите чуть ближе к нему.
- «Виджет исчез после перетаскивания». Скорее всего, он ушёл вниз за пределы видимой области. Прокрутите.