Нужно нарисовать эти элементы для разных типов страниц. Макеты нужны под будущую html верстку.
Данные в основном просматриваться будут на ПК или ноутбуке (под мобильные устройства адаптация не обязательна).
Стилистику графиков можно взять отсюда https://ui8.net/123done/products/universal-data-visualization адаптировав под дизайн шаблона:
https://demo.goodlayers.com/financity/
Страница 1 -- дашборд с такой информацией (на дашборде будет несколько таких блоков - для Portfolio 1, 2, 3, … )
Нужно отдельно отрисовать эту табличку:
Она будет появляться при наведении курсора на один из элементов таблицы (на странице 2), т.е. стиль должен быть подобным к Странице 2.
Страница 2 -- таблица с вкладками:
Эта страница будет иметь приблизительно такой внешний вид (но вкладки должны быть вверху над заголовками).
Элемент №1 -- long/short Watchlist Portfolio
Эта таблица фиксирована, она всегда перед глазами у пользователя. Это статический элемент.
Элемент №2 -- Место для таблиц из вкладок
Это динамическая часть. В этой части пользователь будет переключаться между несколькими таблицами ( при помощи кнопок - Вкладка 1, Вкладка 2, Вкладка 3, Вкладка 4).
В этих вкладках будут такие таблицы:
Таблица из Вкладка 1
Таблица из Вкладка 2
Таблица из Вкладка 3
Снизу этой таблицы должна быть горизонтальная прокрутка вправо.
Страница 3 -- графики
На этой странице будет 8 графиков которые будут иметь приблизительно такой вид
| На странице графика должны быть кнопки или чек боксы, которые включают или выключают одну из кривых: |
|
|
| или/или |
График 1 | Цена - для (3 кривых - Long / Short / S&P_500) | значение или % |
|
|
|
График 2 | 2 кривых -- S&P_500 (цена) и Spread (коэфициент L/S) | значение или % |
|
|
|
График 3 | Beta % - для (3 кривых - Long / Short / Spread) |
|
График 4 | Correlation % - для (3 кривых - Long / Short / Spread) |
|
|
|
|
График 5 | Std Dev % - для (3 кривых - Long / Short / Spread) |
|
График 6 | Std Dev % - для (2 кривых - Spread / S&P_500) |
|
|
|
|
График 7 | Sharpe - (3 кривых - Long / Short / Spread) |
|
График 8 | Alpha % - (3 кривых - Long / Short / Spread) |
|
Цвета кривых:
Long -- зеленый
Short -- красный
Spread -- фиолетовый
S&P_500 -- оранжевый
Пишите свою стоимость, пожалуйста.
Или задавайте вопросы.
