График режима сравнения

На странице монеты есть возможность сравнить выбранный актив с любой криптовалютой.

В результате сравнения можно увидеть информацию о курсе текущей криптовалюты к сравниваемой и процентное изменение курса за период.

Описание графика в режиме сравнения

1. Имя сравниваемой пары, где первый тикер - главный актив, а второй - сравниваемый, и уровни курса в сравниваемой криптовалюте

2. Сравниваемый актив и его уровни цен в USD.

3. Главный актив и его уровни цен в USD.

4. Тултип с информацией о ценах и курсе в момент времени.

5. Кнопка режима сравнения (будет в активном состоянии пока режим сравнения активен). Для выключения режима сравнения нужно нажать на неё.

6. Таблетка главного актива - его график и точка всегда будут красными. С помощью неё можно включать и выключать отображение этого графика на общем отображении.

7. Кнопка для инвертирования сравнения

8. Таблетка сравниваемого актива - его график и точка всегда будут синими. С помощью неё можно включать и выключать отображение этого графика на общем отображении.

9. Таблетка курса - его график и точка всегда будут желтыми. С помощью неё можно включать и выключать отображение этого графика на общем отображении.

Существуют следующие состояния отображения графика сравнения

1. График при отсутствии данных для сравнения

Сравнения может не быть как из-за отсутствия данных с одной/двух сторон, так и при наличии данных, но отсутствия пересечения данных по датам. Принцип поиска пересечения описан в прицнипе сбора данных.

2. График при выключенных графиках

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

3. График если включен только график курса

Если выключить все графики кроме графика курса то будет видна только левая ось графика.

4. График если включен один из графиков цен криптовалют

Если выключить один из графиков цен криптовалют то будет видна только одна из правых осей графиков.

5. График если выключен график курса

Если выключен только график курса - место для левой оси заполнится.

Тултип сравнения

1. Дата и время

2. Данные цены в этой точке для главного актива, цвет совпадает с цветом графика

3. Данные цены в этой точке для сравниваемого актива, цвет совпадает с цветом графика

4. Данные цены в этой точке для курса, цвет совпадает с цветом графика

5. Данные о росте курса, цвет совпадает с цветом графика чтобы было понятно, что информация относится к курсу

Рост расчитывается в процентном соотношении к начальной цене курса.

Существуют следующие особенности отображения тултипа

1. Тултип при наведении вне зоны сравнения

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

2. Тултип при выключенном графике сравнения

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

Как выбрать криптовалюту для сравнения

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

Принцип сбора данных

Данные для сравнения могут быть собраны при двух условиях - данные должны быть валидными и иметь пересечение по времени.

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

Пересечение по времени означает, что в графиках найдется как минимум две точки в которые попадают в один временной диапапзон. То есть если один график начинается в точке (или после точки) в которой закончился другой график - составить сравнение не получится, и в результате пользователь будет видеть заглушку.

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

Сравнение расчитывается отдельно каждый раз при смене периода.

Механизм инверитрования монет которые сравниваются

В легенде есть кнопка для инвертирование сравнения. С помощью его можно поменять местами сравниваемые активы. Если нажать на неё, у пользователя загрузится страница сравниваемой монеты по ссылке /coins/{comparedCoin}?compare={mainCoin}, то есть сравниваемая монета будет подгружена с помощью query-параметра.

Механика с query параметром при загрузке страницы

Кроме возможности включить режим сравнения через легенду графика, есть возможность загрузить страницу в режиме сравнения с желаемой криптовалютой. Для этого нужно добавить желаемый тикер в строку query параметров под ключом compare и загрузить страницу. Если токен невалидный страница будет работать, но данных для сравнения не будет и пользователь будет видеть заглушку.

При выключении режима сравнения query-параметр будет убран из адреса.

Содержание тултипа

Содержание тултипа указано выше. Процент изменения курса - расчитывается от первого значения курса в сравнении. С помощью него можно видеть как менялся курс криптовалют в выбранном периоде.

Режим сравнения на телефоне

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