streamlit-analytics-cards 0.0.2

A custom Streamlit component for analytics cards

streamlit-analytics-cards

A project to create custom Streamlit components using React and TypeScript for analytics and insights.

View a demo: 💾 View it on PyPI: 👾

Using the component

Prerequisites

• Python 3.7+
• Streamlit

Installation

pip install streamlit-analytics-cards
or
python3 -m pip install streamlit-analytics-cards

Implementation

from streamlit_analytics_cards import card as stac
# Render the component in your Streamlit app
stac(
            template="CardOne",
            title="Attrition Diversity",
            subtitle="Female Attrition",
            main_value="4.7%",
            secondary_value="52",
            delta="Y/Y 5.1%, -0.4%",
            chart_data=df["Number of Exits"].tolist(),
            x_axis_label=df.columns[0],
            color_scheme={"background": "#FFFFFF", "text": "#000000"},
            key="card_1",
        )

---

For developers

Prerequisites

Before you start, ensure you have the following installed on your system:

• Python 3.7+
• Node.js 14+ and npm
• Streamlit

---

Installation

1. Clone the repository:

   git clone https://github.com/natxc/streamlit-analytics-cards.git
   cd streamlit-analytics-cards
   

2. Set up the Python environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   pip install -r requirements.txt
   

3. Install frontend dependencies: Navigate to the frontend/ folder and install the required Node.js packages:

   cd frontend
   npm install
   

---

Development

Run the Frontend

Start the development server for the React app:

npm start

This will start a local development server at http://localhost:3000.

---

Run the Streamlit

In the root directory, start the Streamlit app:

streamlit run streamlit_app/app.py

---

Production Build

1. Build the Frontend: Navigate to the frontend/ folder and run:

   npm run build
   

   This will create a production-ready build in the frontend/build directory.

2. Run Streamlit in Production Mode: Ensure _RELEASE is set to True in the __init__.py file:

   _RELEASE = True
   

   Then start the Streamlit app:

   streamlit run streamlit_app/app.py