Create viz_components.py

viz_components.py

@@ -0,0 +1,85 @@
+
+import plotly.graph_objects as go
+
+def make_gauge(aqi):
+    # Determine color
+    color = "#10b981"
+    if aqi > 50: color = "#f59e0b"
+    if aqi > 100: color = "#f97316"
+    if aqi > 150: color = "#ef4444"
+    
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number",
+        value=round(aqi, 1),
+        number={"font": {"size": 48, "color": "#0f172a", "family": "Inter, sans-serif", "weight": "bold"}},
+        gauge={
+            "axis": {"range": [0, 300], "visible": False},
+            "bar": {"color": color, "thickness": 0.3},
+            "bgcolor": "#f1f5f9",
+            "borderwidth": 0,
+            "steps": [
+                {"range": [0, 50], "color": "rgba(16, 185, 129, 0.1)"},
+                {"range": [50, 100], "color": "rgba(245, 158, 11, 0.1)"},
+                {"range": [100, 150], "color": "rgba(249, 115, 22, 0.1)"},
+                {"range": [150, 200], "color": "rgba(239, 68, 68, 0.1)"},
+                {"range": [200, 300], "color": "rgba(139, 92, 246, 0.1)"},
+            ],
+        },
+    ))
+    fig.update_layout(
+        height=240,
+        margin=dict(l=30, r=30, t=10, b=10),
+        paper_bgcolor="rgba(0,0,0,0)",
+        font=dict(family="Inter", color="#64748b"),
+    )
+    return fig
+
+def make_plot(hist, fc):
+    n_hist = len(hist)
+    n_fc = len(fc)
+    x_hist = list(range(-n_hist, 0))
+    x_fc = list(range(0, n_fc))
+    
+    fig = go.Figure()
+    
+    # Clean background
+    fig.add_trace(go.Scatter(
+        x=x_hist, y=hist, name="Past",
+        line=dict(color="#10b981", width=4, shape='spline'),
+        mode="lines",
+        fill='tozeroy',
+        fillcolor='rgba(16, 185, 129, 0.05)',
+        hovertemplate="AQI %{y:.0f}<extra></extra>"
+    ))
+    
+    fig.add_trace(go.Scatter(
+        x=x_fc, y=fc, name="Forecast",
+        line=dict(color="#3b82f6", width=4, dash="dot", shape='spline'),
+        mode="lines",
+        hovertemplate="AQI %{y:.0f}<extra></extra>"
+    ))
+    
+    fig.update_layout(
+        template="plotly_white",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        font=dict(color="#64748b", family="Inter"),
+        margin=dict(l=10, r=10, t=40, b=40),
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
+        xaxis=dict(
+            showgrid=False,
+            zeroline=False,
+            showticklabels=True,
+            tickmode="array",
+            tickvals=[-24, 0, 24, 48],
+            ticktext=["-24h", "Now", "+24h", "+48h"]
+        ),
+        yaxis=dict(
+            showgrid=True,
+            gridcolor="#f1f5f9",
+            zeroline=False,
+            side="right"
+        ),
+        hovermode="x unified",
+    )
+    return fig