modules/visuals.py

import pandas as pd

def display_dashboard(df: pd.DataFrame):
    st.subheader("📊 System Summary")
    col1, col2, col3, col4 = st.columns(4)
    
    col1.metric("Total Poles", df.shape[0])
    col2.metric("🚨 Red Alerts", df[df["Alert_Level__c"] == "Red"].shape[0])
    col3.metric("⚡ Power Issues", df[df["Power_Sufficient__c"] == "No"].shape[0])
    col4.metric("📷 Offline Cameras", df[df["Camera_Status__c"] == "Offline"].shape[0])

import streamlit as st
import plotly.express as px


def display_charts(df: pd.DataFrame):
    fig_energy = px.bar(
        df,
        x="Name",
        y=["Solar_Generation__c", "Wind_Generation__c"],
    )
    

    st.subheader("🚨 Alert Level Breakdown")
    fig_alerts = px.histogram(
        df,
        x="Alert_Level__c",
        title="Number of Poles by Alert Level"
    )
    st.plotly_chart(fig_alerts)

import pydeck as pdk
# Function to generate heatmap for a given site
def generate_heatmap_for_site(site_name, df):
    site_df = df[df['Site__c'] == site_name]

    # Ensure that Alert_Level__c is treated as a string (for color mapping)
    site_df['Alert_Level__c'] = site_df['Alert_Level__c'].astype(str)

    # Define color mapping for alert levels
    color_map = {
        "Green": [0, 255, 0],   # Green for "Green" alert level
        "Yellow": [255, 255, 0], # Yellow for "Yellow" alert level
        "Red": [255, 0, 0]       # Red for "Red" alert level
    }

    # Create a color column based on Alert_Level__c
    site_df["color"] = site_df["Alert_Level__c"].map(color_map)

    # Create a Pydeck map for the site
    layer = pdk.Layer(
        "ScatterplotLayer",
        data=site_df,
        get_position='[Longitude__c, Latitude__c]',
        get_color="color",
        get_radius=80,  # You can adjust the radius if needed
        pickable=True,
        auto_highlight=True
    )

    view_state = pdk.ViewState(
        latitude=site_df["Location_Latitude__c"].mean(),
        longitude=site_df["Location_Longitude__c"].mean(),
        zoom=10,
        pitch=40
    )

    tooltip = {
        "html": """
            <b>Pole Name:</b> {Name}<br>
            <b>Site:</b> {Site__c}<br>
            <b>Alert Level:</b> {Alert_Level__c}<br>
            <b>RFID Tag:</b> {RFID_Tag__c}<br>
            <b>Tilt:</b> {Tilt__c}<br>
            <b>Vibration:</b> {Vibration__c}
        """,
        "style": {
            "backgroundColor": "steelblue",
            "color": "white"
        }
    }

    # Return the heatmap
    return pdk.Deck(
        map_style="mapbox://styles/mapbox/dark-v10",
        initial_view_state=view_state,
        layers=[layer],
        tooltip=tooltip
    )