Create a Crypto Portfolio -dashboard (Python Guide)

Building a cryptocurrency portfolio -dashboard is an excellent way to learn more about this emerging financial market. Like any other investment, it is also subject to a certain degree of risk. Therefore, once a portfolio is created, it becomes important to constantly watch the growth. In addition to visualizing trends over time, the calculation of returns in periodic intervals also helps to refine trading strategies and to make the market access and exit decisions.

In today’s article, we will investigate how to build a crypto portfolio -dashboard using detectable framework and Python. This will provide a comprehensive exposition of absolute and relative price change, along with clear indicators to calculate returns. As Crypto markets trade 24/7, we will also set up automation using GitHub actions to update the dashboard regularly.

Here is a direct preview of what the dashboard will eventually look like, and you can access the GitHub keeping here. Let’s dive in!

Prerequisites

In addition to Python 3, we must set up a detectable framework that is a node. Make sure you install Node.JS version 18 or later. It is also recommended to install yarn as the package manager.

Npm install -global yarn

Installed versions of different packages can be verified as shown below:

Node -Sion

Npm -version

yarn -version

Since the dashboard is offered as a GitHub page and uses GitHub actions for automation, a personal GitHub account is also needed.

The above end point can be obtained for free, but it needs key verification. All you have to do is sign up and create a demo account. The key can then be generated using the developer’s dashboard. In this guide we will use a Pro API key, which unlocks the higher tariff boundaries.

Creating a new project on observable framework

We will start creating the folder structure for our dashboard. The fronting provides what the dashboard looks like and will be based on JavaScript. The backing is responsible for retrieving the historical price data of Coingecko, and will use Python. To create a new project, run:

yarn creates @observablehq

Now a series of directions will appear that can be answered based on user preferences. Note that we chose Yarn as the preferred package manager and also initiated a GIT repository.

The Docs folder contains code for both the front and the backing. In our case, the Python will be used to make API calls to Coingecko and make historical price data for a given asset. It is also called a data fan, which will then be used by the dashboard -front. Within documents we can create another folder data to store all the Python code. This will further help to organize the code in separate files for better readability as shown in the following sections.

How can you fetch historical coin price data using an API?

In the File API.py we define the following feature to read the API key locally from a file or from an environmental variable. The latter is relevant in setting automation using GitHub actions, and will be discussed in detail later.

💡 Pro-Tip: Using a custom exception class such as Keynotfounderror makes debugging easy.

We now define another feature that will be used to process the API request. Response -code 200 indicates that the request was successful.

Finally, the appropriate URL is used to reach historical price data for a specified duration (number of days), for a given currency and to a certain accuracy. Further details regarding this endpoint can be found in the API documents.

The import parameters of the above function along with a set of dummy portfolio details are added to a separate portfolio.py file. Historical data will be fetched with euros for an expensive 120 days as the target currency.

# Number of days Duration = “120” target_currency = “EUR”

# Define Portfolio Port_curr = [“bitcoin”, “ethereum”, “chainlink”, “dash”, “litecoin”]Port_amount = [0.10, 1.5, 300, 75, 50]

How can you set up the Python Data Loader?

The Datal Aaner is essentially a Python script (value.json.py) that does the following:

Fetch the historical price data for a given coin and a specified duration

Create a distribution dictionary with daily value (daily price x portfolio amount)

Convert the dictionary to Json and dump the data to standard output

The API call returns a dictionary, which has time in the form of Unix epoch. To convert it into the DateTime format, we can make use of the following transformation:

In addition, we want to collect price data for all assets and store it in a list of dictionaries. Such a data structure can be created by initializing with zeros.

How to Set Up Your Crypto Portfolio -Dashboard

The pages for the dashboard are grouped in Markdown files, where special code blocks can be used to execute JavaScript code. The content of the homepage is specified in the index.md file. Furthermore, we will create two more pages with the following idea:

Value.md – Show change in total value (euro) of the portfolio along with individual crashes

Change.md – Show relative change (in %) between different cryptocurrencies with an interactive date choice function

Similar to our Python -backend, we can also organize the front end code in separate files to make reuse possible and improve the readability. The plot functions are grouped into the components/plots.js file. For the first page, we want to make a line + area plot to detect the total change of value in our portfolio. This can be achieved using the fantastic observable plot library.

Similarly, it also helps to visualize changes in the individual assets within the portfolio, as there may be a situation where some of them remain the same or decrease over time. So a stacked bar plot is a neat way to get more insights on the performance of the individual assets.

A stacked surface plot shows the same information, but can be more visually attractive.

To give the user a better perspective on the extent of the portfolio changes, we can also add two cards on the top row, one that shows the % change over the past 7 days, while the other over the past 30 days.

The % change can be easily calculated by making a JavaScript function Gettpertchange, which takes the number of days as an additional input.

Overall layout of the page is controlled via the following code in value.md:

The second page (change.md) shows relative achievement when comparing all the assets in the portfolio.

A similar approach can be used to show the change in total value.

Similar to the first page, it will be helpful to add two cards to the top, showing the top performer (maximum % change in value) over a period of 7 and 30 days.

To calculate the top performer, we use the following logic:

In addition, we want an interactive date choice function so that we can have different points of origin when comparing the relative performance. This is achieved using the date interface component available via observable input.

Const Date = View (Inputs.date ({Label: “Select BeginDate for Comparison”, Min: ClubbedStack[0].Time, Max: Clubbedstack[clubbedStack.length – 1].Time})));

The overall page layout is controlled via the following logic:

How to test the dashboard locally?

Once the pre- and backing code is ready, the dashboard can be built locally to verify that everything works as expected. Observable framework supports live preview, which means that the in-browsing page automatically updates when any changes are made. It helps quickly test the impact of any changes to the page layout or on the data trenders.

Perform the following to start the preview server:

yarn dev

A browser window should open automatically. If not, then visit the following address: http://127.0.0.1:3000/

How can you deploy the dashboard on GitHub pages?

In the previous section, we managed to generate the dashboard locally.

Since you may also want to look at your portfolio if you are from your laptop or on your phone, we will now take a step further and use GitHub actions to automatically deploy our dashboard to our own GitHub page -this will make it accessible to all devices.

We can even set up a schedule on which the dashboard must be updated, ensuring that the impact of any sudden price movement immediately becomes visible to us.

The observable project was initiated as a GIT keeping site in the beginning. This can now be printed to GitHub, as is done for the code in this article. Now we need to enable pages deployment. Go to Settings> Pages> Build and Implementation> Source (Select GitHub actions).

The Coingecko API key must be stored as a repository secret: Settings> Secrets and Variables> Actions> Secret> Repository Secrets> New Repentance secret.

The next step is to create a workflow file that will be used to build and deploy the dashboard. The file contains one or more tasks, which are essentially a series of steps that describe how we want to create the software environment and build the dashboard. We must ensure that all dependencies (node.js and python) are only installed during the construction. The last step loads up artifacts, which are picked up by the deployment work, setting out how the pages should be created.

The schedule trigger can be used to set up a pre -defined frequency with which the dashboard will be built and deployed. It uses the Cron Synaxis, which can be adjusted according to your need. The example above causes the workflow 30 minutes past an hour, every two hours (02:30, 04:30, etc.). Summary of the workflow runs appears in the tabal actions.

Opening a single workflow result shows a figure with all linked posts (only two in our case). The URL of the deployed GitHub page is also visible.

To check your portfolio health, you can now bookmark the URL for the dashboard and visit it whenever you want!

If you enjoyed this article, you might want to read more about building a Dex tracker with Streamlit and Python.