Чотири мініатюри осі

Що змінилося

Одразу після смуги «Форма колекції» і кнопки на вісь стоїть нова секція, «Приклад записів на таймлайні». У ній чотири картки: уся вісь, 1970–1979, 2022 і серпень 2026. Ці періоди обрав «6 в 1». На кожній картці мініатюра осі в цьому періоді, під нею назва періоду й кількість записів. Уся картка — одне посилання на той самий стан осі. На планшеті й десктопі картки стоять два на два, на телефоні — однією колонкою.

Чому намальовано, а не знято

Скріншоти старіли б із кожним пакетом даних. Серпень 2026 отримав шість записів того самого дня, коли цю задачу поставили. До того ж знімків було б шістнадцять: чотири періоди, дві мови, світла й темна тема. Оновлювати їх довелося б окремим скриптом.

Мініатюра натомість малюється під час збірки. Розкладку дають ті самі функції, що й на осі: densityView ділить період на відтинки, а packMarks розставляє позначки й згортає густі місця в кластери. Тож після кліку читач бачить ту саму картину, тільки більшу. Кольори й форми тем, штрихування порожніх відтинків і виділення найновішого року беруться зі змінних CSS. Тому мініатюра сама перемикається з темою.

Головна й далі без скрипта. Чотири мініатюри важать разом близько 2,6 КБ після стиснення, і бюджет сторінки (12 КіБ) ще має запас.

Ціна мініатюри

Подивившись на готову секцію, «6 в 1» назвав її мінус. Мініатюра менша за вісь на ноутбуці, тож packMarks згортає в кулі-кластери більше записів. Скріншот великого масштабу показав би більше окремих позначок з їхніми кольорами й лініями. Рішення — залишити так: продуктивність важливіша. Цей компроміс записано в коментарі біля секції, щоб його не відкривали вдруге як ваду.

Того самого вечора «6 в 1» замінив два періоди: 1980–1989 на 1970–1979, а 2025 на 2022. Уся вісь і серпень 2026 лишилися. Змінився лише перелік періодів на сторінці й у тестах, генератор той самий.

Спільний код, а не копія

Тіки, штрихування, розмір кластера й назву періоду вісь досі рахувала всередині компонента. Тепер це чисті функції в src/ui/density.ts: laneGuides, markSizes і periodRange. Ними користуються і вісь, і мініатюри, тож зміна на осі дійде й сюди. Поведінка осі не змінилася, і її браузерні тести це підтвердили.

Картка називає період словами панелі осі. Тому серпень підписано «Серпень 2026 р.»: саме так його назве вісь після кліку.

Давня вада смуги

Попередній прохід знайшов на головній ваду доступності й залишив її на цю задачу. Роль зображення мала вся рамка смуги, разом із посиланнями на десятиліття. Скрінрідер вважає зображення цілим, без частин, тож посилання опинялися всередині того, що частин не має. Тепер роль зображення і його опис має лише сам малюнок смуги, а посилання стоять поруч. Перевірку доступності тепер запускають на всій головній, а не на одному рядку, і вона чиста.

Що перевірено

npm run verify:code пройшов. Юніт-тест малює всі чотири мініатюри з живих даних і звіряє підпис із densityView. Ще один тест бере порожній період і перевіряє, що там лише штрихування й нуль. Браузерні тести головної й осі, яких торкнулися зміни, пройшли в Chromium. Новий тест звіряє адресу кожної картки з timelinePath. Кількість записів він рахує з дат у даних, а не функціями осі. Ще він перевіряє дві колонки на 800 px, одну на 393 px і відсутність прокрутки вбік. Повний прогін робить CI після пушу.