Update charts.py

charts.py

@@ -8,23 +8,25 @@ import plotly.express as px
 import pandas as pd
 import numpy as np
 
-#  Shared theme ─
-DARK_BG     = "#0d0f14"
-CARD_BG     = "#13161e"
-BORDER      = "#1e2330"
-TEXT_MAIN   = "#e8eaf0"
-TEXT_DIM    = "#5a6070"
-CYAN        = "#00d4ff"
-GREEN       = "#00e5a0"
-RED         = "#ff4757"
-AMBER       = "#ffb347"
-PURPLE      = "#b388ff"
-BLUE        = "#4a8eff"
+#  Shared theme — Light Professional
+DARK_BG     = "#f4f7fb"          # used as bar border / contrast edge
+CARD_BG     = "#ffffff"
+BORDER      = "#dde3ed"
+TEXT_MAIN   = "#1e293b"
+TEXT_DIM    = "#7b7b7b"          # Flat Grey
+PRIMARY     = "#269ccc"          # Optimism Blue
+ALGAE       = "#9ed2c5"          # Blue Algae
+CYAN        = "#269ccc"          # alias for PRIMARY
+GREEN       = "#16a34a"
+RED         = "#dc2626"
+AMBER       = "#d97706"
+PURPLE      = "#7c3aed"
+BLUE        = "#2563eb"
 
 PLOTLY_LAYOUT = dict(
-    paper_bgcolor="rgba(0,0,0,0)",
-    plot_bgcolor="rgba(0,0,0,0)",
-    font=dict(family="'DM Mono', monospace", color=TEXT_MAIN, size=12),
+    paper_bgcolor="rgba(255,255,255,0)",
+    plot_bgcolor="rgba(255,255,255,0)",
+    font=dict(family="'DM Sans', 'Nunito', sans-serif", color=TEXT_MAIN, size=12),
     margin=dict(l=20, r=20, t=40, b=20),
 )
 
@@ -44,7 +46,7 @@ def misinfo_gauge(score: float, label: str) -> go.Figure:
     fig = go.Figure(go.Indicator(
         mode="gauge+number+delta",
         value=pct,
-        number={"suffix": "%", "font": {"size": 32, "color": bar_color, "family": "'DM Mono', monospace"}},
+        number={"suffix": "%", "font": {"size": 32, "color": bar_color, "family": "'Nunito', sans-serif"}},
         delta={"reference": 50, "increasing": {"color": RED}, "decreasing": {"color": GREEN}},
         title={"text": label, "font": {"size": 13, "color": TEXT_DIM}},
         gauge={
@@ -78,7 +80,7 @@ def misinfo_gauge(score: float, label: str) -> go.Figure:
 def sentiment_donut(summary: Dict) -> go.Figure:
     """Donut chart: Positively Engagement / Negatively Engagement / Neutral breakdown."""
     labels  = ["Positively Engagement", "Neutral", "Negatively Engagement"]
-    values  = [summary["POSITIVELY ENGAGEMENT"], summary["NEUTRAL"], summary["NEGATIVELY ENGAGEMENT"]]
+    values  = [summary["Positively Engagement"], summary["Neutral"], summary["Negatively Engagement"]]
     colors  = [GREEN, TEXT_DIM, RED]
 
     fig = go.Figure(go.Pie(
@@ -87,23 +89,24 @@ def sentiment_donut(summary: Dict) -> go.Figure:
         hole=0.62,
         marker=dict(colors=colors, line=dict(color=DARK_BG, width=3)),
         textinfo="label+percent",
-        textfont=dict(family="'DM Mono', monospace", size=11, color=TEXT_MAIN),
+        textfont=dict(family="'DM Sans', sans-serif", size=11, color=TEXT_MAIN),
         hovertemplate="<b>%{label}</b><br>%{value} comments (%{percent})<extra></extra>",
         rotation=90,
     ))
 
     # Centre annotation
     avg = summary.get("avg_compound", 0)
-    overall = "😊 Positively Engagement" if avg > 0.05 else ("😟 Negatively Engagement" if avg < -0.05 else "😐 Mixed")
+    overall = "😊 Positively Engaged" if avg > 0.05 else ("😟 Negatively Engaged" if avg < -0.05 else "😐 Mixed")
     fig.add_annotation(
         text=f"<b>{overall}</b><br><span style='font-size:11px;color:{TEXT_DIM}'>{summary['total']} comments</span>",
         x=0.5, y=0.5,
         showarrow=False,
-        font=dict(size=13, color=TEXT_MAIN, family="'DM Mono', monospace"),
+        font=dict(size=13, color=TEXT_MAIN, family="'DM Sans', sans-serif"),
         align="center",
     )
     fig.update_layout(**PLOTLY_LAYOUT, height=300,
-                      legend=dict(orientation="h", y=-0.08, font=dict(size=11)))
+                      legend=dict(orientation="h", y=-0.08, font=dict(size=11)),
+                      title=dict(text="Sentiment Breakdown", font=dict(size=13, color=TEXT_DIM), x=0))
     return fig
 
 
@@ -128,21 +131,23 @@ def keyword_bar(
         orientation="h",
         marker=dict(
             color=norm,
-            colorscale=[[0, f"{color}33"], [1, color]],
+            colorscale=[[0, f"{PRIMARY}33"], [1, PRIMARY]],
             line=dict(width=0),
         ),
         text=[f"{w:.0f}" for w in weights],
         textposition="inside",
-        textfont=dict(size=10, color=DARK_BG),
+        textfont=dict(size=10, color="#ffffff", family="'DM Sans', sans-serif"),
         hovertemplate="<b>%{y}</b><br>Weight: %{text}<extra></extra>",
     ))
     fig.update_layout(
         **PLOTLY_LAYOUT,
         title=dict(text=title, font=dict(size=13, color=TEXT_DIM), x=0),
         height=380,
-        yaxis=dict(autorange="reversed", tickfont=dict(size=11), gridcolor=BORDER),
-        xaxis=dict(showticklabels=False, gridcolor=BORDER),
-        bargap=0.35,
+        yaxis=dict(autorange="reversed", tickfont=dict(size=11), gridcolor=BORDER,
+                   showgrid=True, gridwidth=1),
+        xaxis=dict(showticklabels=False, gridcolor=BORDER, showgrid=False),
+        bargap=0.3,
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -214,7 +219,7 @@ def modality_misinfo_distribution(modality_analysis: Dict) -> go.Figure:
         marker=dict(
             color=[RED, RED, RED],
             opacity=0.88,
-            line=dict(color=DARK_BG, width=1),
+            line=dict(color=CARD_BG, width=1),
         ),
         text=[f"{v:.1f}%" for v in misinfo_pcts],
         textposition="outside",
@@ -234,7 +239,7 @@ def modality_misinfo_distribution(modality_analysis: Dict) -> go.Figure:
         marker=dict(
             color=[GREEN, GREEN, GREEN],
             opacity=0.88,
-            line=dict(color=DARK_BG, width=1),
+            line=dict(color=CARD_BG, width=1),
         ),
         text=[f"{v:.1f}%" for v in credible_pcts],
         textposition="outside",
@@ -271,10 +276,11 @@ def modality_misinfo_distribution(modality_analysis: Dict) -> go.Figure:
             orientation="h",
             y=1.12,
             font=dict(size=11),
-            bgcolor="rgba(0,0,0,0)",
+            bgcolor="rgba(255,255,255,0)",
         ),
         bargap=0.22,
         bargroupgap=0.06,
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -308,7 +314,7 @@ def trust_score_by_modality(modality_analysis: Dict) -> go.Figure:
         marker=dict(
             color=bar_colors,
             opacity=0.88,
-            line=dict(color=DARK_BG, width=1),
+            line=dict(color=CARD_BG, width=1),
         ),
         text=[f"{v:.1f}%" for v in trust_vals],
         textposition="outside",
@@ -351,6 +357,7 @@ def trust_score_by_modality(modality_analysis: Dict) -> go.Figure:
             ticksuffix="%",
         ),
         bargap=0.38,
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -388,7 +395,7 @@ def uncertainty_analysis(modality_analysis: Dict) -> go.Figure:
         marker=dict(
             color=bar_colors,
             opacity=0.88,
-            line=dict(color=DARK_BG, width=1),
+            line=dict(color=CARD_BG, width=1),
         ),
         text=[f"{v:.1f}%" for v in uncertainty_vals],
         textposition="outside",
@@ -439,6 +446,7 @@ def uncertainty_analysis(modality_analysis: Dict) -> go.Figure:
             ticksuffix="%",
         ),
         bargap=0.38,
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -452,12 +460,16 @@ def sentiment_timeline(comments_df: pd.DataFrame, sentiments: List[Dict]) -> go.
 
     df = comments_df.copy()
     df["compound"] = [s.get("compound", 0) for s in sentiments]
-    df["label"]    = [s.get("label", "NEUTRAL") for s in sentiments]
-    df["color"]    = df["label"].map({"POSITIVE": GREEN, "NEGATIVE": RED, "NEUTRAL": AMBER})
+    df["label"]    = [s.get("label", "Neutral") for s in sentiments]
+    df["color"]    = df["label"].map({
+        "Positively Engagement": GREEN,
+        "Negatively Engagement": RED,
+        "Neutral": AMBER,
+    })
     df["text_short"] = df["text"].str[:80] + "…"
 
     fig = go.Figure()
-    for lbl, clr in [("POSITIVE", GREEN), ("NEGATIVE", RED), ("NEUTRAL", AMBER)]:
+    for lbl, clr in [("Positively Engagement", GREEN), ("Negatively Engagement", RED), ("Neutral", AMBER)]:
         sub = df[df["label"] == lbl]
         if sub.empty:
             continue
@@ -482,8 +494,11 @@ def sentiment_timeline(comments_df: pd.DataFrame, sentiments: List[Dict]) -> go.
         title=dict(text="Comment Sentiment (size = likes)", font=dict(size=13, color=TEXT_DIM), x=0),
         height=320,
         xaxis=dict(title="Comment index", gridcolor=BORDER, showgrid=False),
-        yaxis=dict(title="Compound score", gridcolor=BORDER, range=[-1.1, 1.1]),
-        legend=dict(orientation="h", y=1.12, font=dict(size=11)),
+        yaxis=dict(title="Compound score", gridcolor=BORDER, range=[-1.1, 1.1],
+                   showgrid=True, gridwidth=1),
+        legend=dict(orientation="h", y=1.12, font=dict(size=11),
+                    bgcolor="rgba(255,255,255,0.8)", bordercolor=BORDER, borderwidth=1),
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -533,10 +548,12 @@ def keyword_comparison(
         title=dict(text="Sentiment-Weighted Keywords", font=dict(size=13, color=TEXT_DIM), x=0),
         height=360,
         barmode="overlay",
-        xaxis=dict(title="← Negatively Engagement  |  Positively Engagement →", gridcolor=BORDER, zeroline=True,
-                   zerolinecolor=BORDER, zerolinewidth=2),
+        xaxis=dict(title="← Negatively Engagement  |  Positively Engagement →", gridcolor=BORDER,
+                   zeroline=True, zerolinecolor=BORDER, zerolinewidth=2),
         yaxis=dict(tickfont=dict(size=10)),
-        legend=dict(orientation="h", y=1.1),
+        legend=dict(orientation="h", y=1.1, bgcolor="rgba(255,255,255,0.8)",
+                    bordercolor=BORDER, borderwidth=1),
+        plot_bgcolor="rgba(248,250,252,0.6)",
     )
     return fig
 
@@ -547,5 +564,6 @@ def _empty_fig(title: str) -> go.Figure:
     fig = go.Figure()
     fig.add_annotation(text="No data available", x=0.5, y=0.5, showarrow=False,
                        font=dict(size=14, color=TEXT_DIM))
-    fig.update_layout(**PLOTLY_LAYOUT, title=dict(text=title, x=0), height=250)
-    return fig
+    fig.update_layout(**PLOTLY_LAYOUT, title=dict(text=title, x=0), height=250,
+                      plot_bgcolor="rgba(248,250,252,0.6)")
+    return fig