Кейсы
Разработка финансового дашборда «Dahibar.com»
Финансовый дашборд для стартапа по управлению финансами
2022
Задача, поставленная
заказчиком
Разработать финансовый дашборд, обеспечить вывод сложного набора данных в простой форме
Резюме проекта
Начало работ:
август 2022
Окончание работ:
октябрь 2022
Какие задачи мы решали
в проекте «dahibar»
Инструменты
Для дизайна – традиционная Figma.
Код - Vue.js / PHP / Node.js / Nuxt.js / Highchart / Apache.
Excel для формирования отчетности.
Код - Vue.js / PHP / Node.js / Nuxt.js / Highchart / Apache.
Excel для формирования отчетности.
Figma
Excel
Vue.js
PHP
Node.js
Nuxt.js
Highchart
Apache
Придумали структуру и дизайн страницы
Основная задача сервиса - показывать работу финансистов с финансовыми инструментами, торгующимися на разных биржах, и портфелями финансовых инструментов.
Мы выбрали нейтральные светлые цвета, а также привычную пользователям систему цветовой индикации.
Для каждой биржи представлен уникальный портфель ценных бумаг, показатели его доходности и их изменения: исторические, либо в зависимости от параметров портфеля бумаг и выбранной стратегии реинвестирования.
Показатели эффективности отображаются в графика с историческими данными, который также представлены в виде таблиц.
Вся информация размещена на одном экране: это удобно для работы.
UI
Навигация
Верхняя навигационная панель содержит информационный блок и навигационное меню по статичным текстовым страницам.
Боковая навигационная панель, расположенная слева, служит для переключения между биржевыми площадками/портфелями на них. Обратите внимание: логически верно располагать меню именно слева для регионов, где читают слева-направо. В дизайне использовали флаги стран регистрации биржи, для упрощения навигации пользователей по разделам.
Нижняя навигационная панель служит для навигации по статичным текстовым страницам и текстовое описание источника представленных на дашборде данных.
UI
Информация по портфелю акций
Информация по каждой бирже представлена в виде
4-х блоков. Табличные данные оформлены отдельными блоками, в которых доступна фильтрация.
4-х блоков. Табличные данные оформлены отдельными блоками, в которых доступна фильтрация.
Левая таблица содержит данные по последним изменениям портфеля. Правая – исторические данные по каждой позиции портфеля: даты покупки / продажи, стоимость входа в позицию и выхода из нее, а также доходность по каждой отдельной позиции на момент закрытия.
UI
Подключили графики
График содержит нижнюю навигационную панель, которая позволяет выбрать период для отображения данных.
Использовали библиотеку Highcharts и их решение Stock. Обратите внимание: для использования навигационной панели нам потребовалось доработать формат данных для графика.
UX
UX
Для удобства пользователя, все сокращения и термины расшифрованы в модальных окнах, доступных при наведении на специальный значок.
На дашборде доступны гибкие настройки для портфеля акций и возможность просмотреть эффективность стратегии в зависимости от размера портфеля, размера кредитного плеча и стратегии реинвестирования прибыли.
Левая таблица содержит данные по последним изменениям портфеля. Правая – исторические данные по каждой позиции портфеля: даты покупки / продажи, стоимость входа в позицию и выхода из нее, а также доходность по каждой отдельной позиции на момент закрытия.
Для каждой биржи, справочно, выводим актуальное время, которое зависит от часового пояса и время работы биржи.
UX
Сделали загрузку и обновление данных
В рамках mvp, в качестве источника данных договорились использовать Excel. Во многом это решение подходит для постоянной работы дашборда: в табличном формате удобно агрегировать и обрабатывать информацию, отслеживать изменения и ошибки.
Согласовали с заказчиком и утвердили формат файла, на его основании сделали парсер. К нему подключили браузерную форму, которую разметили на отдельном домене и закрыли с помощью серверной авторизации Apache.
Технические особенности
Подрядчик выбрал очень странный хостинг, который имеет ограниченный набор настроек, из-за чего DevOps для проекта представлял их себя сложный танец с ритуальными музыкальными инструментами – Bluehost.
Основная сложность возникла при установке node.js и php на одну виртуальную машину. Решили проблему с помощью контейнирезации и долгой переписки со службой поддержки хостинга.
Не рекомендуем данного поставщика.
Заказать проект
У вас есть похожая задача? Напишите нам и мы поделимся опытом и поможем с реализацией!
Написать
Cмотрите
похожие кейсы
похожие кейсы
Светлица
Сайт для небольшой строительной компании, которая занимается строительством деревянных домов.
2021
Cleansman
Клининговые услуги - конкурентная сфера, и работать с ними было по-настоящему увлекательно.
2018
Mascotte Consulting
Разработали страницу для продажи крайне специфических консалтинговых услуг с английской локализацией и рекламой на двух языках.
2019
Овертайм
Сделали современный сайт для рекламы баскетбольного лагеря для детей и подростков, помогли команде с маркетингом и позиционированием
2023
ОнМастер
Проект ОнМастер - это попытка привнести современный подход на крайне традиционный и не сервисный рынок коммунальных услуг.
2018
АНО ДПО РИПКиПМР
Создали интернет-магазин учебных программ для медицинских работников и рекламную кампанию на федеральном уровне.
2018
«ПНР»
Компания «Парус - Национальные Реформы» продает учебные курсы для государственных служащих и медицинских работников, занимается IT-консалтингом и внедряет решения на базе продуктов «Корпорации Парус».
2017
Sinus Group
Перед нами стояла сложная задача: создать промо-сайт за 2 дня и запустить его в эксплуатацию.
2021
Показать еще
