Разработка финансового дашборда «Dahibar.com»

Финансовый дашборд для стартапа по управлению финансами

2022

Дизайн

UI/UX

Frontend

Backend

Аналитика

Адрес:

dahibar.com

Перейти
на сайт

dahibar – интересный идеологически и технологически проект. Нам было интересно применить свой опыт работы с данными и их визуализации. Заказчика интересовали сроки и вовлеченность команды. Получилась ситуация win-win, когда все с удовольствием делали свою часть работы и общались.

На дашборде представлены данные по 8 основным странам/регионам
и 11+ биржевым площадкам: США: NYSE & NASDAQ, Япония: TSE, Китай: HKSE (Hong Kong), SSE & SZSE (China), Индия: NSE Mumbai, Евросоюз: EURONEXT и Frankfurt SE (Denmark), Великобритания: LSE London, Канада: TSE Toronto

А также две виртуальные площадки: Forex, Crypto (в которых объединены все криптовалюты)

Задача, поставленная
заказчиком

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

Резюме проекта

Начало работ:

август 2022

Окончание работ:

октябрь 2022

Какие задачи мы решали
в проекте «dahibar»

Придумали структуру и дизайн страницы

Проработали ui/ux

Сделали загрузку и обновление данных

Разработали приложение

Инструменты

Для дизайна – традиционная Figma.
Код - Vue.js / PHP / Node.js / Nuxt.js / Highchart / Apache.
Excel для формирования отчетности.

Figma

Excel

Vue.js

PHP

Node.js

Nuxt.js

Highchart

Apache

Придумали структуру и дизайн страницы

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

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

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

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

Вся информация размещена на одном экране: это удобно для работы.

UI

Дашборд состоит из 3 навигационных панелей и контентного блока.

Навигация

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

Боковая навигационная панель, расположенная слева, служит для переключения между биржевыми площадками/портфелями на них. Обратите внимание: логически верно располагать меню именно слева для регионов, где читают слева-направо. В дизайне использовали флаги стран регистрации биржи, для упрощения навигации пользователей по разделам.

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

Информация по портфелю акций

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

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

Подключили графики

График содержит нижнюю навигационную панель, которая позволяет выбрать период для отображения данных.

Использовали библиотеку Highcharts и их решение Stock. Обратите внимание: для использования навигационной панели нам потребовалось доработать формат данных для графика.

UХ

Наша цель при проектировании - максимально удобно показывать пользователю большой объём информации

UX

Для удобства пользователя, все сокращения и термины расшифрованы в модальных окнах, доступных при наведении на специальный значок.

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

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

Сделали загрузку и обновление данных

В рамках mvp, в качестве источника данных договорились использовать Excel. Во многом это решение подходит для постоянной работы дашборда: в табличном формате удобно агрегировать и обрабатывать информацию, отслеживать изменения и ошибки.

Согласовали с заказчиком и утвердили формат файла, на его основании сделали парсер. К нему подключили браузерную форму, которую разметили на отдельном домене и закрыли с помощью серверной авторизации Apache.

Технические особенности

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

Основная сложность возникла при установке node.js и php на одну виртуальную машину. Решили проблему с помощью контейнирезации и долгой переписки со службой поддержки хостинга.

Не рекомендуем данного поставщика.