snippets - minor improvements

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

rio/snippets/snippet-files/project-template-Crypto Dashboard/components/crypto_chart.py

@@ -13,6 +13,32 @@ from .. import data_models
 
 # <component>
 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(

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
 
 # <additional-imports>
+import numpy as np
 import pandas as pd
 from pycoingecko import CoinGeckoAPI