Skip to content

График монеты

На графике монеты по умолчанию будем видеть график монеты страницы. Для взаимодействия с графиком есть разные элементы.

График монеты

1. Название монеты

2. Переключатель периодов

3. Время соответсвующее точке на графике в тултипе

4. Цена соответсвующая точке на графике в тултипе

5. Кнопка которая включает режим сравнения

6. Кнопка включения/выключения графика которому соотвествует текст на таблетке. По умолчанию она активна и недоступна к взаимодействию.

Существуют следующие особенности состояний

1. Цвет графика

В зависимости от того, вырос или упал график относительно первой цены графика в выбранном периоде, график будет соответственно зеленого или красного цвета, как и точка графика в таблетке легенды. Вид графика в зеленом варианте:

График в зеленом варианте

2. Отображение при отсутствии данных

Если данных для отображения графика нет или недостаточно в этом периоде то пользователь будет видеть заглушку которая сообщает о нехватке данных.

График при отсутствии данных

Источник данных

Все графики монет берутся с бекенда.

Период графика

Доступные периоды

У каждой монеты на сайте могут быть доступны 6 графиков с разным масштабом и частотой точек - , 24ч, , , , Макс.

Частота точек на каждом графике для отдельных монет может отличаться, но примерный масштаб таков:

ПериодДистанция
~5 минут
24ч~5-10 минут
~1 час
~1 час
~1 день
Макс~2-5 дней

Могут быть - означает, что графики сущетсвуют, но в них может быть недостачно данных для отображения, в таком случае будет видеть на графике заглушку.

Выбранный период

На то, какой период будет выбран у пользователя при загрузке графика, влияет наличие query параметра в адресе - period={period}. Query параметры в соответсвии с выбранным периодом такие:

ПериодПараметр
hour
24чday
week
month
year
Максmax

При загрзуке страницы монеты в зависимости от query параметра может быть два сценария.

1. Без валидных query параметров

В этом кейсе после загрузки старницы весь компонент графика не будет отображаться пока не найдется график с достаточными данными. В фоновом режиме будет происходить поочередная загрузка каждого графика в таком порядке - 24ч -> -> -> -> Макс -> . Если подходящий график будет найден, блок станет виден пользователю с соотвествующим периодом, также будет установлен query параметр этого периода в адресе.

Если во всех графиках недостачно данных для отображения - блок графика отоббразится с выбранным периодом в 1ч и заглушку, а в адрес будет дописан query параметр периода.

2. С валидным query-параметром

Наличие валидного параметра значит что будет сразу отображен блок и загружен тот график, который этому парметру соотвествует, даже если в нем недостачно данных для отображения.

Переключение периода

При переключении периода с бекенда запрашиваются данные о графике, и каждый раз график собирается заново.

Также в адресе меняется query параметр на соответствующий выбранному периоду.