diff --git a/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_card.py b/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_card.py index 9be119f7..c526a00e 100644 --- a/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_card.py +++ b/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_card.py @@ -30,6 +30,21 @@ class CryptoCard(rio.Component): coin_amount: A float representing the amount of the cryptocurrency. coin_ticker: A string representing the ticker symbol of the cryptocurrency. logo_url: A string representing the URL of the cryptocurrency's logo. + + ## Layout + ``` + ╔══════════════════ CARD ════════════════════╗ + ║ ┏━━━━━━━━━━━━━┳━━ GRID ━━━━━━━━━━━━━━━━━━┓ ║ + ║ ┃ ┃ ┃ ║ + ║ ┃ Image ┃ Plot ┃ ║ + ║ ┃ ┃ ┃ ║ + ║ ┣━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━┫ ║ + ║ ┃ Coin Ticker ┃ Coin Amount ┃ ║ + ║ ┣━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━┫ ║ + ║ ┃ Coin Name ┃ Coin Amount in USD ┃ ║ + ║ ┗━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ║ + ╚════════════════════════════════════════════╝ + ``` """ data: pd.DataFrame diff --git a/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_chart.py b/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_chart.py index f33aa446..f2b9d446 100644 --- a/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_chart.py +++ b/rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_chart.py @@ -13,6 +13,32 @@ from .. import data_models # class CryptoChart(rio.Component): + """ + The CryptoChart class is a component of a dashboard application, designed to + handle and display cryptocurrency-related data. + + + ## Attributes + data: A pandas DataFrame that holds the cryptocurrency data. + coin: A string representing the name of the cryptocurrency. + logo_url: A string representing the URL of the cryptocurrency's logo. + color: A string representing the color of the cryptocurrency's logo. + + ## Layout + ``` + ╔═══════════════════ CARD ═══════════════════╗ + ║ ┏━━━━━━━━━━━━━━┳━━ GRID ━━━━━┳━━━━━━━━━━━┓ ║ + ║ ┃ Image ┃ Coin Name ┃ Dropdown ┃ ║ + ║ ┣━━━━━━━━━━━━━━┻━━━━━━━━━━━━━┻━━━━━━━━━━━┫ ║ + ║ ┃ Plot ┃ ║ + ║ ┃ ┃ ║ + ║ ┃ ┃ ║ + ║ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ║ + ╚════════════════════════════════════════════╝ + ``` + + """ + data: pd.DataFrame coin: str logo_url: str = data_models.MY_COINS["bitcoin"][3] @@ -24,7 +50,7 @@ class CryptoChart(rio.Component): This function updates the coin, color and logo_url attributes based on the selected coin. - Parameters: + Args: ev (rio.DropdownChangeEvent): The event object containing the selected coin value. """ self.coin = ev.value @@ -44,10 +70,6 @@ class CryptoChart(rio.Component): rio.Card: A Card component with the selected coin's line plot, logo, name, and dropdown. See the layout below: - ############################################ - # Logo | Coin Name | Dropdown # - # Plot # - ############################################ """ fig = px.line( diff --git a/rio/snippets/snippet-files/project-template-Crypto Dashboard/pages/dashboard_page.py b/rio/snippets/snippet-files/project-template-Crypto Dashboard/pages/dashboard_page.py index 87f5611a..c4a811f2 100644 --- a/rio/snippets/snippet-files/project-template-Crypto Dashboard/pages/dashboard_page.py +++ b/rio/snippets/snippet-files/project-template-Crypto Dashboard/pages/dashboard_page.py @@ -2,9 +2,9 @@ import dataclasses from pathlib import Path from typing import * # type:ignore -import numpy as np # +import numpy as np import pandas as pd from pycoingecko import CoinGeckoAPI