# Фаза 3 — Дашборды и дата-визуализация > **Проект:** «Прототипы дизайна кабинета» (AI Factory / Командный центр) > **Дата:** 2026-05-31 > **Вход:** backbone [«Триаж-хаб PRO»](phase2-evaluation.md) · формы данных [`shared/mock-data/data.js`](../shared/mock-data/data.js) > **Живой артефакт:** [`gallery/foundations.html`](../gallery/foundations.html) — все графики отрисованы в каждой из 5 систем. > **Цель:** спроектировать дашборды/графики, которые лечат боли B3 (плоские метрики) и B4 (нет дашбордов), и сделать их одновременно **эффективными и striking**. --- ## 1. Принципы датавиза (для всех 5 систем) 1. **Инсайт, а не украшение.** Каждый график отвечает на конкретный вопрос владельца («что горит?», «успеваю ли?», «где застряло?»). Если график не меняет решение — его нет. 2. **Метрика всегда с трендом.** Голое число запрещено (это и есть боль B3). Любой KPI несёт дельту (▲/▼ за период) и/или спарклайн. 3. **Цвет — это код, а не декор.** Семантика статусов фиксирована во всех системах: `success/Готово`, `active/В работе`, `warn/Ждут вас`, `danger/Ошибка`, `muted/В очереди`. Палитра графиков `--ds-chart-1..6` упорядочена: 1 = первичная серия, 5 = ошибки/негатив. 4. **Не только цветом.** Статусы дублируются формой/иконкой/подписью (доступность; критично для Editorial/Brutalist, где контраст несёт смысл). 5. **Числа — табличные цифры.** `font-feature-settings: 'tnum'`; в датавизе моно- или display-цифры из токена `--ds-num-font`, чтобы колонки не «прыгали». 6. **Каждый график = 4 состояния:** `loading` (скелетон формы графика, не спиннер), `empty` (осмысленный текст + CTA), `error` (причина + «повторить»), `data`. 7. **Портативность.** Графики — самописный inline-SVG, читают только токены `--ds-*` и данные `DATA`. Замена дизайн-системы = смена класса; замена мока на API (Фаза 8) = замена объекта `DATA`. Никаких внешних зависимостей в прототипе обязательно не требуется (см. §6 про опц. библиотеки). --- ## 2. Где живут дашборды (карта размещения) | Зона backbone | Что показывает | Графики | |---|---|---| | **Хаб → «Ждут вас»** | приоритетная очередь действий | мини-счётчик-пилюли по срочности (без тяжёлых графиков — это список) | | **Хаб → «Здоровье портфеля»** | сводное состояние всех проектов | **Кольцо готовности** + **3 KPI-спарклайна** (Всего/Готово/Ждут вас) + **токен-гейджи** | | **Хаб → «Живая активность»** | поток событий и нагрузка | **лента активности** + мини-**спарклайн «параллельно»** | | **Раздел «Аналитика»** | глубокий разрез процесса | **Пропускная способность** (area), **Воронка завершения**, **Время-в-фазе** (bars), **Удачи vs ошибки** (grouped bars) | | **Отчёты фабрики** | агрегаты за период | те же 4 аналитических графика + сводные числа `reports.summary` + выбор периода | | **Деталь проекта → шапка** | состояние одного проекта | **прогресс-кольцо/бар**, числа Прогресс/Этап/Сессии/Время/Удачи-Ошибки | | **Деталь проекта → вкладка «Этапы»** | конвейер этапов | **мини-пайплайн** (горизонтальная цепочка статусов с прогрессом) | | **Метрик-бар (везде)** | always-on KPI | 4 счётчика с дельтами + **токен-индикатор** `13%·2ч / 32%·5дн` + LIVE | --- ## 3. Каталог графиков (спецификация) Для каждого: **тип · вопрос (что раскрывает) · данные · интерполяция/анимация · интеракция · состояния · мобайл.** ### 3.1 Кольцо готовности портфеля (Completion Ring) - **Тип:** донат-кольцо со средним прогрессом в центре. - **Раскрывает:** «насколько в среднем готов мой портфель» одним взглядом. - **Данные:** `kpis.avgProgress.value` (%); опц. сегменты `reports.statusMix` (доли Готово/В работе/Ждут вас) как многоцветное кольцо. - **Анимация:** `stroke-dashoffset` от пустого к значению, ease-out 1.1с (reduce-motion → сразу финал). - **Интеракция:** hover сегмента → тултип «Готово 13 · 54%»; клик → фильтр портфеля по статусу. - **Состояния:** empty → серое кольцо + «ещё нет проектов»; loading → пульсирующий контур. - **Мобайл:** уменьшается до 96px, центр-число остаётся читаемым. ### 3.2 KPI-спарклайны (Всего / Готово / Ждут вас) - **Тип:** мини-линия с area-заливкой и точкой на последнем значении. - **Раскрывает:** направление тренда за 7 дней, не только текущее число. - **Данные:** `kpis..spark[]` + `.value` + `.delta`. - **Кодировка:** «Ждут вас» использует `--ds-chart-5` (внимание), остальные — нейтральную серию. - **Интеракция:** hover → значение по дню; клик → переход в «Аналитику» с этой метрикой. - **Состояния:** <2 точек → показываем число без линии. - **Мобайл:** спарклайны складываются в одну колонку под числами. ### 3.3 Токен-гейджи (Token Usage) - **Тип:** два полу-радиальных гейджа (полукольцо). - **Раскрывает:** расход токенов в 5-часовом окне и за неделю — прямое требование брифа. - **Данные:** `tokens.window5h{pct,label}` и `tokens.week{pct,label}`; текстовый индикатор `tokens.display = "13%·2ч / 32%·5дн"`. - **Кодировка порога:** ≥80% → цвет переходит в `--ds-warn`, ≥95% → `--ds-danger` (как в S1 gauge по порогам 65/85). - **Интеракция:** hover → «1.3M / 10M токенов». - **Состояния:** статичный мок (по брифу), без live; но порог-логика заложена. - **Мобайл:** оба гейджа в строку, либо схлопываются в текст-индикатор `13%·2ч / 32%·5дн`. ### 3.4 Пропускная способность (Throughput · Area) - **Тип:** сглаженный area-chart с подсвеченной пиковой точкой и подписью значения. - **Раскрывает:** «сколько этапов фабрика закрывает в день» и где был пик продуктивности. - **Данные:** `reports.throughput[] {d, done, started}`. Базовая серия — `done`; опц. вторая линия `started`. - **Анимация:** прорисовка линии слева-направо (stroke-dashoffset), заливка проявляется опацитити. - **Интеракция:** hover-кроссхэйр → день + done/started; brush-выбор периода (десктоп). - **Состояния:** empty → «нет завершённых этапов за период»; loading → 3 серые горизонтальные планки. - **Мобайл:** высота 120px, подписи дней через одну. ### 3.5 Воронка завершения (Funnel) - **Тип:** горизонтальные убывающие полосы по фазам жизненного цикла. - **Раскрывает:** где проекты «утекают» — между какими фазами теряется больше всего. - **Данные:** `reports.funnel[] {stage, value}` (Идея→В работе→Дизайн готов→Деплой→На проде). - **Кодировка:** убывающая опацитити одной серии (`--ds-chart-2`); подпись значения внутри. - **Интеракция:** hover → конверсия к предыдущей фазе («-31% к "В работе"»). - **Состояния:** empty → «нет данных по фазам». - **Мобайл:** полосы на всю ширину, подпись фазы над полосой. ### 3.6 Время в фазе (Time-in-Phase · Bars) - **Тип:** вертикальные столбцы, часы по фазам. - **Раскрывает:** на каком этапе фабрика «зависает» дольше всего (узкое место). - **Данные:** `reports.timeInPhase[] {phase, hours}`. - **Анимация:** столбцы вырастают снизу со стаггером 80мс. - **Интеракция:** hover → точное время; самая длинная фаза подсвечена акцентом. - **Состояния:** empty → «ещё нет завершённых фаз». - **Мобайл:** при <360px переворачивается в горизонтальные бары. ### 3.7 Удачи vs ошибки (Wins/Errors · Grouped Bars) - **Тип:** парные столбцы по дням (удачи `--ds-chart-3`, ошибки `--ds-chart-5`). - **Раскрывает:** соотношение успешных шагов к ошибкам и дни с аномалией ошибок. - **Данные:** `reports.winsErrors[] {d, wins, errors}`. - **Интеракция:** hover → числа дня + доля ошибок; легенда-тоггл серий. - **Состояния:** empty → «нет активности за период». - **Мобайл:** оставляем парные бары, уменьшаем ширину; легенда снизу. ### 3.8 Мини-пайплайн этапов (Project Detail · Stages) - **Тип:** горизонтальная цепочка узлов-этапов со статус-цветом и прогресс-сегментом. - **Раскрывает:** где именно стоит проект и что следующий шаг. - **Данные:** `projectDetail.stages[] {name, status, progress}`. - **Интеракция:** клик по узлу → лог/детали этапа; текущий узел пульсирует. - **Состояния:** queued-узлы приглушены; error-узел красный с иконкой. - **Мобайл:** цепочка становится вертикальной (timeline). ### 3.9 Карта мозга (Knowledge Graph) - **Тип:** force-граф узлов знаний + связи; боковой список файлов. - **Раскрывает:** структуру знаний фабрики и связанность тем. - **Данные:** `brain.nodes[]`, `brain.links[]`, `brain.files[]`; цвет узла по `group`. - **Интеракция:** zoom/pan, выбор узла → подсветка соседей + файлы группы; поиск. - **Состояния:** empty → «мозг пуст»; loading → пульсация центрального узла. - **Мобайл:** граф во всю ширину сверху, список файлов под ним. --- ## 4. Сводная таблица «график → вопрос → решение» | Боль/вопрос | График | Решение для владельца | |---|---|---| | «Что в среднем готово?» | Кольцо готовности | мгновенная оценка здоровья портфеля | | «Куда движутся метрики?» | KPI-спарклайны | тренд, а не снимок (лечит B3) | | «Сколько токенов сожгли?» | Токен-гейджи | контроль лимита 2ч/5дн (бриф) | | «Успеваю ли я?» | Throughput area | ритм фабрики, пики/провалы | | «Где теряются проекты?» | Воронка | узкие места конверсии фаз | | «Где застреваю?» | Время-в-фазе | самая «дорогая» фаза | | «Стабильно ли?» | Удачи/ошибки | контроль качества по дням | | «Где стоит проект?» | Мини-пайплайн | статус + следующий шаг | --- ## 5. Состояния, доступность, форматирование - **Loading:** скелетоны повторяют форму будущего графика (кольцо, планки, бары) — не общий спиннер. Пульсация 1.4с. - **Empty:** иконка + одна фраза по-русски + первичный CTA («Создать проект», «Запустить сессию»). - **Error:** причина + кнопка «Повторить»; данные не подменяются нулями. - **Filtered-no-results:** «Под фильтр ничего не подошло» + «Сбросить фильтры». - **Доступность:** контраст текста ≥ AA; статусы не только цветом (иконка/подпись); focus-ring на интерактивных точках; `aria-label` на каждом ``; уважение `prefers-reduced-motion` (все ``/CSS-переходы отключаются). - **Числа:** `tnum`; проценты с `%`, время как `8ч 20м`, дельты со знаком и стрелкой. Большие числа — `1.3M`, `142`. --- ## 6. Техника и портативность - **База прототипов — самописный inline-SVG** (как в showcase): ноль зависимостей, мгновенный портинг, полный контроль над токенами и анимацией. Это и есть «striking, но переносимо». - **Опциональное усиление (по желанию на Фазе 5):** для тяжёлых интеракций допустимы лёгкие либы, не ломающие портативность — - `uPlot` (мизерный, для больших временных рядов), - `ECharts` или `visx` (если нужны сложные тултипы/брашинг), - `d3-force` для «Карты мозга». Любую из них инкапсулируем в компонент-обёртку, читающую `DATA` и токены, чтобы замена бэкенда (Фаза 8) не затрагивала графику. - **Контракт данных** уже зафиксирован формами в `shared/mock-data/data.js` — Фаза 8 подменяет источник, не трогая компоненты. **Итог Фазы 3:** определены 9 классов графиков и их размещение по зонам backbone; для каждого заданы тип, инсайт, данные, интеракция, 4 состояния и мобайл-поведение; зафиксированы принципы кодировки, доступности и портативности. Все графики отрисованы вживую в 5 системах — см. [`gallery/foundations.html`](../gallery/foundations.html).