Dashboards are a great way to represent any kind of data and it’s one such form to make great sense of the data we are dealing with. Building stunning dashboards using HTML, CSS, and JavaScript frameworks can be a very tricky job especially when you want to add complex functionalities and intricate designs to the dashboard. But fear not, Python’s here for your rescue.
With the introduction of a massive number of frameworks and libraries dedicated to web development, Python is becoming a favorite among web developers. Today, we will be using one such powerful framework called Streamlit to build our great-looking, professional crypto dashboard.
This article contains a lot of things like acquiring the crypto data using TAAPI.IO’s API endpoints, defining the dashboard layout, adding custom CSS to the dashboard, etc. So fasten your seatbelts for this exciting ride!
Acquiring the DataBefore starting to build the dashboard, it is essential to have a clear background on the data we are going to work with. Let’s start with importing the essential packages into our Python environment:
# IMPORTING PACKAGESIf you haven’t installed any of the imported packages, make sure to do so using the pip command in your terminal.
Now, we are going to pull the crypto data from one of the most reliable data providers in the market, TAAPI.IO. They offer both real-time and historical crypto as well as stock data API endpoints. Along with that, their unique and huge library of technical indicators API comes in handy for tasks like algo trading and much more. Make sure to create a TAAPI.IO account for the smooth execution of all the upcoming code.
In this article, our focus is only on two of their crypto APIs which are Real-Time Price API, and Historical Crypto Prices API. Starting off with the real-time API, here’s an example of using it in Python:
api_key = 'YOUR API KEY'Pretty simple, right? Now, let’s analyze the API URL to understand more about the endpoint. It takes the API key, the exchange from which we are interested in getting the data, the crypto symbol, and the interval/timeframe of the data. Apart from these, there are a lot of additional parameters for further filtering the data which you can view in their documentation. The output is a JSON response that looks like this:
{'value': 33999.99}Another API that we’ll be using for our dashboard is the historical crypto data API which, as the name suggests, helps in obtaining historical data for a given cryptocurrency. The following code uses this API to extract Bitcoin’s historical data for the last one year:
api_key = 'YOUR API KEY'The code is pretty much the same except for some data manipulation tasks. The parameters of the API are very similar to those of the real-time API but one additional parameter we are adding here is the time period of the historical data (365 days in our case). This is the final output dataframe:
Awesome! Now that we have a good background on the two APIs we’re going to use to power the dashboard, let’s start with our actual work of building it.
Sketching the LayoutThis is one of the most overlooked steps but can be of incredible help and saves a ton of time. Having some sort of reference material for designing the dashboard exponentially boosts the development process. Here’s a rough sketch of the dashboard we’re going to build:
Nothing fancy here but just a plain, simple, and clean design. The header consists of the dashboard title along with five cards that reveal the real-time prices of five major crypto pairs.
As the body, we have three sections. The first is the chart parameters which contain streamlit widgets like selectbox and number input. The second section is dedicated to charting the historical data using a Python library for creating TradingView charts. The third and final section is for representing the historical data in table format.
Each part of the dashboard will be designed with custom CSS as Streamlit’s preset designs are too generic and basic. With that being said, let’s start building the dashboard in Streamlit.
Building Blocks: Creating Dashboard.py, style.css, config.tomlBefore jumping into building the streamlit app, it is highly recommended to keep things in place as it is a much more organized way of development.
To start off, create a Dashboard.py (name the file as you like) which will be the core file for running the streamlit app. This is the file where the actual building of the app undergoes.
Secondly, since we are going to build the app with custom CSS, it is mandatory to have a separate CSS file. You can name the file as you like but I prefer a more common naming convention, i.e., style.css. In this file, we will be customizing all the pre-defined streamlit CSS properties.
Finally, in order to change the theme of the streamlit app globally, we have to create a separate directory with the name of .streamlit inside which, we need to have a config.toml file. After creating the TOML file, copy and paste the following code to replicate the theme of the dashboard:
[theme]The theme is a blend of dark mode with some blues in it for a pleasant and soft-looking feel. You can customize the theme as per your wish.
Building the Dashboard HeaderLet’s take the final dashboard header as the reference material which will be easier for me to explain the development process.
After analyzing the header section, here’s the approach we can follow.
Development Approach:The following two blocks of code implement the two approaches we discussed above to create the header section of the dashboard. The first code block is written in the Dashboard.py file and the second on style.css.
Dashboard.py:
import streamlit as stCrypto
Dashboard
BTC / USDT
{btc_price}
', unsafe_allow_html = True)ETH / USDT
{eth_price}
', unsafe_allow_html = True)XMR / USDT
{xmr_price}
', unsafe_allow_html = True)SOL / USDT
{sol_price}
', unsafe_allow_html = True)XRP / USDT
{xrp_price}
', unsafe_allow_html = True)style.css:
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');In the Dashboard.py, make sure to replace YOUR TAAPI.IO API KEY with your secret API key. In both files, there will be some stuff that goes beyond what we discussed in the development and styling approaches, but I’m not going to delve into the details as it will take a long time to explain them.
Building the Dashboard BodySimilar to what we did in the previous section, we’ll take the final output as the reference material to lay out the development and styling approaches. The following image is the final result of the dashboard’s body which we’re trying to build:
The following two blocks of code implement the two approaches we discussed above to create the body section of the dashboard. The first code block is written in the Dashboard.py file and the second on style.css.
Dashboard.py:
params_col, chart_col, data_col = st.columns([0.5,1.2,0.6])CHART DATA PARAMETERS', unsafe_allow_html = True)
st.divider()
exchanges = ['binance', 'bitstamp', 'binancefutures', 'whitebit', 'bybit', 'gatetio', 'coinbase', 'binanceus', 'kraken']
exchange = st.selectbox('Exchange', exchanges, key = 'exchange_selectbox')
if st.session_state.symbols_list == None:
symbols = []
for i in exchanges:
symbols_list = requests.get(f'https://api.taapi.io/exchange-symbols?secret={api_key}&exchange={i}').json()
symbols.extend(symbols_list)
symbol = st.selectbox('Symbol', symbols, key = 'symbol_selectbox')
st.session_state.symbols_list = symbols
else:
symbol = st.selectbox('Symbol', st.session_state.symbols_list, key = 'symbol_selectbox')
interval_col, period_col = st.columns(2)
with interval_col:
interval = st.selectbox('Interval', ['1m', '5m', '15m', '30m', '1h', '2h', '4h', '12h', '1d'], key = 'interval_selectbox')
with period_col:
period = st.number_input('Period', min_value = 10, max_value = 500, value = 365, step = 1, key = 'period_no_input')
st.markdown('')
update_chart = st.form_submit_button('Update chart')
st.markdown('')
if update_chart:
url = f'https://api.taapi.io/candles?secret={api_key}&exchange={exchange}&symbol={symbol}&interval={interval}&period={period}&results=max'
hist_json = requests.get(url).json()
hist_df = pd.DataFrame(hist_json).drop('timestampHuman', axis = 1).rename(columns = {'timestamp':'time'})
hist_df.time = pd.to_datetime(hist_df.time, unit = 's')
with chart_col:
with st.container():
chart = StreamlitChart(height = 450, width = 650)
chart.grid(vert_enabled = True, horz_enabled = True)
chart.layout(background_color='#131722', font_family='Trebuchet MS', font_size = 16)
chart.candle_style(up_color='#2962ff', down_color='#e91e63',
border_up_color='#2962ffcb', border_down_color='#e91e63cb',
wick_up_color='#2962ffcb', wick_down_color='#e91e63cb')
chart.volume_config(up_color='#2962ffcb', down_color='#e91e63cb')
chart.legend(visible = True, font_family = 'Trebuchet MS', ohlc = True, percent = True)
chart.set(hist_df)
chart.load()
with data_col:
st.dataframe(hist_df, height = 470)
style.css:
/* FORM CSS */That’s it! You’ve built yourself an amazing dashboard from scratch. This is the final result of our work:
In this article, we went through an extensive process of building a crypto dashboard using Streamlit. We started off by exploring the data we were going to deal with, then we sketched the layout for the dashboard, and after that, we went on to build the dashboard with Streamlit using custom CSS in Python.
Though it was kinda tricky at several places, I personally enjoyed the whole process thoroughly. And thanks to TAAPI.IO’s API endpoints which made the development process less hectic.
This article is just a glimpse of the potential of Streamlit and Python’s growing dominance in the web development space. What could be done only with frameworks like React can also be accomplished using Python nowadays. With that being said, you’ve reached the end of the article. Hope you learned something new and useful. Thanks for your time.
Creating a Crypto Dashboard with Custom CSS in Streamlit was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.