Update components.py

components.py

@@ -21,20 +21,21 @@ logger = logging.getLogger(__name__)
 # FILTER COMPONENTS
 # =============================================================================
 
-def create_date_range_inputs() -> Tuple:
-    """Create date range input components."""
+def create_date_range_inputs() -> Tuple[datetime, datetime]:
+    """Create default date range (last 90 days)."""
     end_date = datetime.now()
     start_date = end_date - timedelta(days=90)
-    return start_date.date(), end_date.date()
+    return start_date, end_date
 
 
 def create_filter_options() -> Dict[str, List]:
     """Create filter options for dropdowns."""
     return {
         "granularity": ["day", "week", "month"],
-        "driver_types": ["All", "car", "transit", "bike", "walk", "carpool", "vanpool", "ebike", "scooter"],
+        "driver_types": ["All", "Owner", "Participant", "External"],
         "trip_types": ["All", "Solo", "Shared"],
-        "geo_levels": ["state", "city", "zip"]
+        "geo_levels": ["state", "city", "zip"],
+        "impact_grades": ["All", "A+", "A", "B", "C", "D", "F"]
     }
 
 
@@ -65,27 +66,37 @@ def create_kpi_tile(
     fmt = KPI_FORMATS.get(format_type, "{}")
     
     try:
-        formatted_value = fmt.format(value) if value is not None else "N/A"
+        if value is None:
+            formatted_value = "N/A"
+        elif pd.isna(value):
+            formatted_value = "N/A"
+        else:
+            formatted_value = fmt.format(float(value))
     except (ValueError, TypeError):
-        formatted_value = str(value)
+        formatted_value = str(value) if value is not None else "N/A"
     
     delta_html = ""
-    if delta is not None:
-        delta_color = "green" if delta >= 0 else "red"
-        delta_symbol = "▲" if delta >= 0 else "▼"
-        delta_html = f'<div style="color: {delta_color}; font-size: 14px;">{delta_symbol} {abs(delta):.1f}% {delta_label}</div>'
+    if delta is not None and not pd.isna(delta):
+        try:
+            delta_val = float(delta)
+            delta_color = "#10B981" if delta_val >= 0 else "#EF4444"
+            delta_symbol = "▲" if delta_val >= 0 else "▼"
+            delta_html = f'<div style="color: {delta_color}; font-size: 14px; margin-top: 4px;">{delta_symbol} {abs(delta_val):.1f}% {delta_label}</div>'
+        except (ValueError, TypeError):
+            pass
     
     html = f"""
     <div style="
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 24px;
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
         color: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        min-height: 120px;
     ">
-        <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">{title}</div>
-        <div style="font-size: 32px; font-weight: bold; margin-bottom: 8px;">{formatted_value}</div>
+        <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px; font-weight: 500;">{title}</div>
+        <div style="font-size: 32px; font-weight: 700; margin-bottom: 4px;">{formatted_value}</div>
         {delta_html}
     </div>
     """
@@ -107,9 +118,9 @@ def create_kpi_grid(kpis: List[Dict[str, Any]]) -> str:
     grid_html = f"""
     <div style="
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 20px;
-        margin-bottom: 30px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
     ">
         {''.join(tiles)}
     </div>
@@ -121,6 +132,24 @@ def create_kpi_grid(kpis: List[Dict[str, Any]]) -> str:
 # CHART COMPONENTS
 # =============================================================================
 
+def create_empty_figure(message: str = "No data available") -> go.Figure:
+    """Create an empty figure with a message."""
+    fig = go.Figure()
+    fig.add_annotation(
+        text=message,
+        xref="paper", yref="paper",
+        x=0.5, y=0.5, showarrow=False,
+        font=dict(size=16, color="#9CA3AF")
+    )
+    fig.update_layout(
+        template='plotly_white',
+        height=400,
+        xaxis=dict(visible=False),
+        yaxis=dict(visible=False)
+    )
+    return fig
+
+
 def create_line_chart(
     df: pd.DataFrame,
     x_col: str,
@@ -131,39 +160,40 @@ def create_line_chart(
     color_col: Optional[str] = None
 ) -> go.Figure:
     """Create a line chart with Plotly."""
-    if df.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
-        )
-        return fig
+    if df is None or df.empty or x_col not in df.columns or y_col not in df.columns:
+        return create_empty_figure("No data available for this period")
     
-    if color_col:
-        fig = px.line(
-            df, x=x_col, y=y_col, color=color_col,
-            title=title,
-            labels={x_col: x_label, y_col: y_label},
-            color_discrete_sequence=COLOR_PALETTE
-        )
-    else:
-        fig = px.line(
-            df, x=x_col, y=y_col,
-            title=title,
-            labels={x_col: x_label, y_col: y_label},
-            color_discrete_sequence=[COLOR_PALETTE[0]]
+    try:
+        if color_col and color_col in df.columns:
+            fig = px.line(
+                df, x=x_col, y=y_col, color=color_col,
+                title=title,
+                labels={x_col: x_label, y_col: y_label},
+                color_discrete_sequence=COLOR_PALETTE
+            )
+        else:
+            fig = px.line(
+                df, x=x_col, y=y_col,
+                title=title,
+                labels={x_col: x_label, y_col: y_label},
+                color_discrete_sequence=[COLOR_PALETTE[0]]
+            )
+        
+        fig.update_layout(
+            hovermode='x unified',
+            template='plotly_white',
+            font=dict(size=12),
+            title_font_size=16,
+            height=400,
+            margin=dict(l=40, r=40, t=60, b=40)
         )
-    
-    fig.update_layout(
-        hovermode='x unified',
-        template='plotly_white',
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+        
+        fig.update_traces(line=dict(width=2.5))
+        
+        return fig
+    except Exception as e:
+        logger.error(f"Error creating line chart: {e}")
+        return create_empty_figure(f"Error creating chart: {str(e)}")
 
 
 def create_bar_chart(
@@ -176,31 +206,30 @@ def create_bar_chart(
     orientation: str = "v"
 ) -> go.Figure:
     """Create a bar chart with Plotly."""
-    if df.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
+    if df is None or df.empty or x_col not in df.columns or y_col not in df.columns:
+        return create_empty_figure("No data available")
+    
+    try:
+        fig = px.bar(
+            df, x=x_col, y=y_col,
+            title=title,
+            labels={x_col: x_label, y_col: y_label},
+            orientation=orientation,
+            color_discrete_sequence=[COLOR_PALETTE[0]]
         )
+        
+        fig.update_layout(
+            template='plotly_white',
+            font=dict(size=12),
+            title_font_size=16,
+            height=400,
+            margin=dict(l=40, r=40, t=60, b=40)
+        )
+        
         return fig
-    
-    fig = px.bar(
-        df, x=x_col, y=y_col,
-        title=title,
-        labels={x_col: x_label, y_col: y_label},
-        orientation=orientation,
-        color_discrete_sequence=[COLOR_PALETTE[0]]
-    )
-    
-    fig.update_layout(
-        template='plotly_white',
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+    except Exception as e:
+        logger.error(f"Error creating bar chart: {e}")
+        return create_empty_figure(f"Error creating chart: {str(e)}")
 
 
 def create_pie_chart(
@@ -210,30 +239,35 @@ def create_pie_chart(
     title: str
 ) -> go.Figure:
     """Create a pie chart with Plotly."""
-    if df.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
+    if df is None or df.empty or names_col not in df.columns or values_col not in df.columns:
+        return create_empty_figure("No data available")
+    
+    try:
+        fig = px.pie(
+            df, names=names_col, values=values_col,
+            title=title,
+            color_discrete_sequence=COLOR_PALETTE
         )
+        
+        fig.update_traces(
+            textposition='inside', 
+            textinfo='percent+label',
+            hovertemplate='%{label}: %{value:,.0f}<br>%{percent}'
+        )
+        fig.update_layout(
+            template='plotly_white',
+            font=dict(size=12),
+            title_font_size=16,
+            height=400,
+            margin=dict(l=40, r=40, t=60, b=40),
+            showlegend=True,
+            legend=dict(orientation="h", yanchor="bottom", y=-0.2)
+        )
+        
         return fig
-    
-    fig = px.pie(
-        df, names=names_col, values=values_col,
-        title=title,
-        color_discrete_sequence=COLOR_PALETTE
-    )
-    
-    fig.update_traces(textposition='inside', textinfo='percent+label')
-    fig.update_layout(
-        template='plotly_white',
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+    except Exception as e:
+        logger.error(f"Error creating pie chart: {e}")
+        return create_empty_figure(f"Error creating chart: {str(e)}")
 
 
 def create_heatmap(
@@ -246,34 +280,32 @@ def create_heatmap(
     y_label: str = ""
 ) -> go.Figure:
     """Create a heatmap with Plotly."""
-    if df.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
+    if df is None or df.empty:
+        return create_empty_figure("No data available")
+    
+    try:
+        # Pivot data for heatmap
+        pivot_df = df.pivot(index=y_col, columns=x_col, values=z_col)
+        
+        fig = px.imshow(
+            pivot_df,
+            title=title,
+            labels=dict(x=x_label, y=y_label, color=z_col),
+            color_continuous_scale='Blues',
+            aspect="auto"
+        )
+        
+        fig.update_layout(
+            template='plotly_white',
+            font=dict(size=12),
+            title_font_size=16,
+            height=400
         )
+        
         return fig
-    
-    # Pivot data for heatmap
-    pivot_df = df.pivot(index=y_col, columns=x_col, values=z_col)
-    
-    fig = px.imshow(
-        pivot_df,
-        title=title,
-        labels=dict(x=x_label, y=y_label, color=z_col),
-        color_continuous_scale='Blues',
-        aspect="auto"
-    )
-    
-    fig.update_layout(
-        template='plotly_white',
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+    except Exception as e:
+        logger.error(f"Error creating heatmap: {e}")
+        return create_empty_figure(f"Error creating heatmap: {str(e)}")
 
 
 def create_geo_heatmap(
@@ -285,69 +317,58 @@ def create_geo_heatmap(
     title: str = "Geographic Distribution"
 ) -> go.Figure:
     """Create a geographic heat map using scatter_mapbox."""
-    if df.empty or lat_col not in df.columns or lon_col not in df.columns:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No geographic data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
-        )
-        return fig
+    if df is None or df.empty:
+        return create_empty_figure("No geographic data available")
+    
+    if lat_col not in df.columns or lon_col not in df.columns:
+        return create_empty_figure(f"Missing required columns: {lat_col}, {lon_col}")
     
     # Remove null coordinates
-    df_clean = df.dropna(subset=[lat_col, lon_col])
+    df_clean = df.dropna(subset=[lat_col, lon_col]).copy()
     
     if df_clean.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No valid coordinates",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
-        )
-        return fig
-    
-    # Determine center
-    center_lat = df_clean[lat_col].median()
-    center_lon = df_clean[lon_col].median()
+        return create_empty_figure("No valid coordinates found")
     
-    # Create map
-    if MAPBOX_TOKEN:
-        fig = px.scatter_mapbox(
-            df_clean,
-            lat=lat_col,
-            lon=lon_col,
-            size=size_col,
-            hover_data=hover_data,
-            title=title,
-            color_continuous_scale='Reds',
-            zoom=3,
-            mapbox_style='light'
-        )
-        fig.update_layout(mapbox_accesstoken=MAPBOX_TOKEN)
-    else:
+    try:
+        # Determine center
+        center_lat = df_clean[lat_col].median()
+        center_lon = df_clean[lon_col].median()
+        
+        # Filter hover_data to only include columns that exist
+        if hover_data:
+            hover_data = [col for col in hover_data if col in df_clean.columns]
+            if not hover_data:
+                hover_data = None
+        
+        # Create map
         fig = px.scatter_mapbox(
             df_clean,
             lat=lat_col,
             lon=lon_col,
-            size=size_col,
+            size=size_col if size_col and size_col in df_clean.columns else None,
             hover_data=hover_data,
             title=title,
             color_continuous_scale='Reds',
             zoom=3
         )
-    
-    fig.update_layout(
-        mapbox_style=MAP_STYLE,
-        mapbox_center={"lat": center_lat, "lon": center_lon},
-        template='plotly_white',
-        height=600,
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+        
+        fig.update_layout(
+            mapbox_style=MAP_STYLE,
+            mapbox_center={"lat": center_lat, "lon": center_lon},
+            template='plotly_white',
+            height=500,
+            font=dict(size=12),
+            title_font_size=16,
+            margin=dict(l=0, r=0, t=50, b=0)
+        )
+        
+        if MAPBOX_TOKEN:
+            fig.update_layout(mapbox_accesstoken=MAPBOX_TOKEN)
+        
+        return fig
+    except Exception as e:
+        logger.error(f"Error creating geo heatmap: {e}")
+        return create_empty_figure(f"Error creating map: {str(e)}")
 
 
 def create_density_heatmap(
@@ -358,54 +379,48 @@ def create_density_heatmap(
     title: str = "Heat Map"
 ) -> go.Figure:
     """Create a density heat map."""
-    if df.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No data available",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
-        )
-        return fig
+    if df is None or df.empty:
+        return create_empty_figure("No data available")
     
-    df_clean = df.dropna(subset=[lat_col, lon_col])
+    if lat_col not in df.columns or lon_col not in df.columns:
+        return create_empty_figure("Missing coordinate columns")
+    
+    df_clean = df.dropna(subset=[lat_col, lon_col]).copy()
     
     if df_clean.empty:
-        fig = go.Figure()
-        fig.add_annotation(
-            text="No valid coordinates",
-            xref="paper", yref="paper",
-            x=0.5, y=0.5, showarrow=False,
-            font=dict(size=20, color="gray")
+        return create_empty_figure("No valid coordinates")
+    
+    try:
+        center_lat = df_clean[lat_col].median()
+        center_lon = df_clean[lon_col].median()
+        
+        fig = px.density_mapbox(
+            df_clean,
+            lat=lat_col,
+            lon=lon_col,
+            z=z_col if z_col and z_col in df_clean.columns else None,
+            radius=10,
+            title=title,
+            zoom=3,
+            mapbox_style=MAP_STYLE
+        )
+        
+        if MAPBOX_TOKEN:
+            fig.update_layout(mapbox_accesstoken=MAPBOX_TOKEN)
+        
+        fig.update_layout(
+            mapbox_center={"lat": center_lat, "lon": center_lon},
+            template='plotly_white',
+            height=500,
+            font=dict(size=12),
+            title_font_size=16,
+            margin=dict(l=0, r=0, t=50, b=0)
         )
+        
         return fig
-    
-    center_lat = df_clean[lat_col].median()
-    center_lon = df_clean[lon_col].median()
-    
-    fig = px.density_mapbox(
-        df_clean,
-        lat=lat_col,
-        lon=lon_col,
-        z=z_col if z_col else None,
-        radius=10,
-        title=title,
-        zoom=3,
-        mapbox_style=MAP_STYLE
-    )
-    
-    if MAPBOX_TOKEN:
-        fig.update_layout(mapbox_accesstoken=MAPBOX_TOKEN)
-    
-    fig.update_layout(
-        mapbox_center={"lat": center_lat, "lon": center_lon},
-        template='plotly_white',
-        height=600,
-        font=dict(size=12),
-        title_font_size=16
-    )
-    
-    return fig
+    except Exception as e:
+        logger.error(f"Error creating density heatmap: {e}")
+        return create_empty_figure(f"Error creating heatmap: {str(e)}")
 
 
 # =============================================================================
@@ -418,51 +433,64 @@ def create_data_table(
     max_rows: int = 100
 ) -> str:
     """Create an HTML table from DataFrame."""
-    if df.empty:
-        return f"<h3>{title}</h3><p>No data available</p>"
+    if df is None or df.empty:
+        return f"""
+        <div style="padding: 20px; text-align: center;">
+            <h3 style="margin-bottom: 16px; color: #374151;">{title}</h3>
+            <p style="color: #9CA3AF;">No data available</p>
+        </div>
+        """
     
     # Limit rows
-    df_display = df.head(max_rows)
+    df_display = df.head(max_rows).copy()
     
     # Format numbers
-    df_display = df_display.copy()
-    for col in df_display.select_dtypes(include=['float64']).columns:
-        df_display[col] = df_display[col].apply(lambda x: f"{x:,.2f}" if pd.notnull(x) else "")
+    for col in df_display.select_dtypes(include=['float64', 'float32']).columns:
+        df_display[col] = df_display[col].apply(
+            lambda x: f"{x:,.2f}" if pd.notnull(x) else ""
+        )
     
     table_html = df_display.to_html(index=False, classes='dataframe', border=0)
     
     styled_html = f"""
-    <h3>{title}</h3>
-    <div style="max-height: 400px; overflow-y: auto;">
-        <style>
-            .dataframe {{
-                border-collapse: collapse;
-                width: 100%;
-                font-size: 14px;
-            }}
-            .dataframe th {{
-                background-color: #667eea;
-                color: white;
-                padding: 12px;
-                text-align: left;
-                position: sticky;
-                top: 0;
-                z-index: 10;
-            }}
-            .dataframe td {{
-                padding: 10px;
-                border-bottom: 1px solid #ddd;
-            }}
-            .dataframe tr:hover {{
-                background-color: #f5f5f5;
-            }}
-        </style>
-        {table_html}
-    </div>
+    <div style="padding: 16px;">
+        <h3 style="margin-bottom: 16px; color: #374151; font-size: 18px; font-weight: 600;">{title}</h3>
+        <div style="max-height: 400px; overflow-y: auto; border-radius: 8px; border: 1px solid #e5e7eb;">
+            <style>
+                .dataframe {{
+                    border-collapse: collapse;
+                    width: 100%;
+                    font-size: 14px;
+                }}
+                .dataframe th {{
+                    background-color: #6366f1;
+                    color: white;
+                    padding: 12px 16px;
+                    text-align: left;
+                    position: sticky;
+                    top: 0;
+                    z-index: 10;
+                    font-weight: 600;
+                }}
+                .dataframe td {{
+                    padding: 12px 16px;
+                    border-bottom: 1px solid #e5e7eb;
+                }}
+                .dataframe tr:hover {{
+                    background-color: #f9fafb;
+                }}
+                .dataframe tr:nth-child(even) {{
+                    background-color: #f9fafb;
+                }}
+            </style>
+            {table_html}
+        </div>
     """
     
     if len(df) > max_rows:
-        styled_html += f"<p><em>Showing {max_rows} of {len(df)} rows</em></p>"
+        styled_html += f'<p style="margin-top: 8px; color: #6B7280; font-size: 12px;"><em>Showing {max_rows} of {len(df)} rows</em></p>'
+    
+    styled_html += "</div>"
     
     return styled_html
 
@@ -471,8 +499,12 @@ def create_data_table(
 # EXPORT HELPERS
 # =============================================================================
 
-def df_to_csv(df: pd.DataFrame, filename: str = "export.csv") -> str:
-    """Convert DataFrame to CSV for download."""
-    if df.empty:
+def df_to_csv(df: pd.DataFrame, filename: str = "export.csv") -> Optional[str]:
+    """Convert DataFrame to CSV string for download."""
+    if df is None or df.empty:
         return None
-    return df.to_csv(index=False)
+    try:
+        return df.to_csv(index=False)
+    except Exception as e:
+        logger.error(f"Error converting to CSV: {e}")
+        return None