Inventory Tiles v0.2 «Trends»
Прототип к ТЗ design-tasks/ТЗ_Inventory-Tiles-v0.2_Trends.md · шелл — платформенные
капчи Client.Inventory.Tiles.*
Что смотреть
- Sparkline у ключевых полей — Sales и Net Profit: факт (сплошная + заливка),
прогнозный хвост (пунктир), точка последнего значения.
- Клик по любой строке метрики → модалка Expanded: полноразмерный график с осями,
сеткой, тултипом по бакету и легендой. Счётные поля (Orders & Units, Impressions,
Sessions, Returns) рисуются барами, суммы и проценты — линией/area (ТЗ §3.1).
- Панель прототипа слева внизу — тумблеры Прогноз и Сравнение:
компаре приходит оверлеем второй серией + Δ%-ярлыком у значения.
- Дропдаун-свитчер пресетов в тулбаре вместо кнопки «Presets»: выбор пресета +
действия (обновить, сохранить как новый, удалить, экспорт/импорт JSON) — ТЗ §4.2.
- Единый список полей (пункт «Metrics settings…» в меню пресета): один список
с переключателем на плитке / только в «Подробнее» + drag-reorder — ТЗ §4.1.
Расхождение с ТЗ, которое поправлено в прототипе
В ТЗ плитка описана как «одна группа метрик = одно значение + sparkline». В зарелизенной v0.1
(см. капчи) плитка — это период (Today / This Week / Last 7 Days / This month / This quarter),
а внутри 12 полей в две колонки. Поэтому в прототипе спарклайн стоит только у ключевых полей
(Sales, Net Profit), а полный график любого поля открывается кликом по строке. Это сохраняет
плотность плитки v0.1 и закрывает задачу «показать динамику внутри периода».
Палитра графиков
Из скилла dataviz, прогнана через validate_palette.js:
light — текущий период #2a78d6, сравнение #eb6834;
dark — #3987e5 / #d95926. Все шесть проверок PASS на обеих поверхностях
(вариант blue+violet в тёмной теме проваливал CVD-разделение, поэтому заменён на оранжевый).
Прогноз — тот же цвет, что факт, отличается пунктиром и прозрачностью (не отдельная сущность в легенде
по цвету, а по штриху).
Не вошло (по согласованию)
- Состояния
no-timeseries и loading-скелетон — договорились не включать
в этот прототип (ТЗ §3.5 / §4.4 остаются в силе для макета).
Пересборка: python3 scripts/build-tiles-charts-demo.py