Cases
Development of financial dashboard «Dahibar.com»
Financial dashboard for a financial management startup
2022
Address:
dahibar.comthe site
Task assigned
by the customer
Develop a financial dashboard, provide the output of a complex set of data in a simple form
Project Summary
Starting work:
August 2022
Complete work:
October 2022
What problems did we solve
in the «dahibar» project
Tools
For design – traditional Figma.
Code - Vue.js / PHP / Node.js / Nuxt.js / Highchart / Apache.
Excel for reporting.
Code - Vue.js / PHP / Node.js / Nuxt.js / Highchart / Apache.
Excel for reporting.
Figma
Excel
Vue.js
PHP
Node.js
Nuxt.js
Highchart
Apache
We came up with the structure and design of the page
The main task of the service is to show the work of financiers with financial instruments traded on different exchanges, and portfolios of financial instruments.
We chose neutral light colors, as well as a color indication system familiar to users.
For each exchange a unique securities portfolio, its profitability indicators and their changes: historical, or depending on the parameters of the securities portfolio and the chosen reinvestment strategy.
Performance indicators are displayed in graphics with historical data, which is also presented in the form of tables.
All information is placed on one screen: it is convenient for work.
UI
Navigation
The top navigation bar contains an information block and a navigation menu for static text pages.
The side navigation panel, located on the left, is used to switch between exchange platforms/portfolios on them. Please note: it is logical to place the menu on the left for regions where people read from left to right The design used flags of the countries of registration of the exchange to simplify user navigation through sections.
The bottom navigation panel is used for navigation through static text pages and text description of the source of the data presented on the dashboard.
UI
Information on the stock portfolio
Information on each exchange is presented in the form of
4 blocks. Tabular data is presented in separate blocks in which filtering is available.
4 blocks. Tabular data is presented in separate blocks in which filtering is available.
The left table contains data on the latest changes in the portfolio. The right table contains historical data for each position in the portfolio: dates of purchase / sale, cost of entry into and exit from the position, as well as profitability for each individual position at the time of closing.
UI
Graphics connected
The graph contains a bottom navigation bar that allows you to select the period to display the data.
We used the Highcharts library and their Stock solution. Please note: to use the navigation bar we needed to modify the data format for the chart.
UX
UX
For user convenience, all abbreviations and terms are deciphered in modal windows, accessible by hovering over a special icon.
The dashboard offers flexible settings for the stock portfolio and the ability to view the effectiveness of the strategy depending on the size of the portfolio, the size of the leverage and the profit reinvestment strategy.
Left table contains data on the latest changes in the portfolio. Right – historical data for each portfolio position: dates of purchase / sale, cost of entry into and exit from the position it, as well as the profitability for each individual position at the time of closing.
For each exchange, for reference, we display the current time, which depends on the time zone and the operating time of the exchange.
UX
Done loading and updating data
As part of mvp, we agreed to use Excel as a data source. In many ways, this solution is suitable for permanent operation of a dashboard: in a tabular format it is convenient to aggregate and process information, track changes and errors.
We agreed with the customer and approved the file format, based on it we made a parser. A browser form was connected to it, which was marked on a separate domain and closed using Apache server authorization.
UX
Technical features
The contractor chose a very strange hosting, which has a limited set of settings, which is why DevOps for the project imagined themselves as a complex dance with ritual musical instruments - Bluehost.
The main difficulty arose when installing node.js and php on one virtual machine. We solved the problem using containerization and long correspondence with the hosting support service.
We do not recommend this supplier.
Order a project
Contact us and we will share our experience and help with the implementation!
Write
See
similar cases
similar cases
Marketing support of the cleaning company «Reconi»
Promo website of the company and everything necessary for the work of the sales department
2022
Svetlitsa
A site for a small construction company that is engaged in the construction of wooden houses.
2021
Cut&Go
We put things in order in the marketing of a beauty salon
in Moscow. Beauty is such a beauty.
in Moscow. Beauty is such a beauty.
2018
Mascotte Consulting
Developed a page to sell highly specific consulting services with English localization and bilingual advertising.
2019
Overtime
We created a modern website for advertising a basketball camp for children and teenagers, helped the team with marketing and positioning
2023
Panam Pizza
We developed a set of promotional materials for the franchise of the Panama pizzeria network.
2022
HeMaster
Project OnMaster is an attempt to bring a modern approach to the highly traditional and non-service utility market.
2018
ANO DPO RIPKiPMR
We created an online store of educational programs for medical workers and an advertising campaign at the federal level.
2018
Aleksey Tsurpal
Aleksey Tsurpal is a talented specialist
in the field of psychology and neurobiology.
in the field of psychology and neurobiology.
2018
«PNR»
Company Parus - National Reforms sells training courses for civil servants and medical workers, is engaged in IT consulting and implements solutions based on Parus Corporation products.
2017
Sinus Group
We were faced with a difficult task: to create a promotional website in 2 days and put it into operation.
2021
Show more
