Visualize stock charts #52
Description
Proposal - Visualize stock charts
It should be possible to visualize historical stock price data.
This issue should collect and discuss ideas on this topic.
Description
As a user I want to be able to visualize stock charts for my assets.
There are multiple possible locations where a chart could be shown
- Single security - display a chart for a single security
- Security account - display a chart for all securities in a securities account
- Portfolio - display a chart for all securities in all securities accounts of the current portfolio
- Global - display a chart for all portfolios
Stock charts
Currently portfolio performance only saves one value per day. Displaying the already available data should be the first goal.
But in order to have a future proof concept the initial data model should already be prepared to overcome these limitations.
There are many different charts on how to display the data. The most relevant are
- line chart
- candle stick chart
Where a single value per time frame is enough for line chart for a candle stick chart we need 4 values
- open (for intraday this could be omitted because it will be the close price of the last record)
- high
- low
- close
Time frames
- intraday - shows data for the current day, usually divided into 5 / 10 or 20 minutes segments
- week - shows data for the last 7 days, usually divided into 1 hour segments
- month - shows data for the last 30 days, usually divided into 1 or only a few segments per day (maybe open and close)
- year - shows data for the last 30 days, usually divided into 1 segment per day
- ytd - shows data for the current year, usually divided into 1 segment per day
Portfolio Performance it self has the following time periods (1M, 2M, 6M, 1Y, 2Y, 3Y, 5Y, 10Y, YTD, H(olding period), A(ll available data))
Different assets may have different points in the daily chart (while securites are usually only updated while the market is open, cryptos are traded 24/7).
Implementation
The implementation consists of different parts
Api
There should be an api to query the data. Since the "raw" data might not necessarily be in the correct format, the data could be prepared on the server side (on the fly or even persisted in the database).
Web
In the web frontend there should be the possibility to fetch the data from the backend api and assign it to a reactive property.
The visual part should be a single component that takes the data and displays it. It should be possible to
- toggling between time frames (which triggers a reload)
- focusing a single record and view its value (mobile frindly)
However, we should keep in mind that the users might have added their own logic to fetch the data, so there should be a provider model on a per security basis where the default implementation fetches the data from the backend api.
Stock chart visualisation
We need to find and implement a good library to display the charts.
Because it looks promissing, has tons of examples and even a financial plugin, we should focus on chart.js atm.
- chartjs examples: https://www.chartjs.org/samples/latest/
- chartjs financial line chart (without plugin): https://www.chartjs.org/samples/latest/scales/time/financial.html
- chartjs-financial: https://www.chartjs.org/chartjs-chart-financial/
- vue-chartjs: https://vue-chartjs.org/
- example for backend / frontend vue app with realtime data (based on a cloud service but might be a good best practice starting point): https://pusher.com/tutorials/chart-vuejs/