Use more consistent styling

- X axis on top
- Refactor figure generation logic

stat/frequency.py

@@ -23,19 +23,77 @@ def plot_freq(stats_df: pd.DataFrame, title: str) -> go.Figure:
         stats_df, y='Identifier', x='Count', orientation='h', title=title, log_x=True,
         labels={'Identifier': 'PGN / CAN ID', 'Count': 'Message Count'},
         color='Count', color_continuous_scale='Turbo',
-        hover_data={'Percentage': ':.2f', 'Count': True, 'Identifier': True}
+        range_color=(stats_df['Count'].min(), stats_df['Count'].max()),
+        hover_data={'Percentage': ':.2f', 'Count': ':,', 'Identifier': True}
     )
     fig.update_layout(
-        height=max(600, len(stats_df) * 18), width=1000,
-        xaxis_title='Total Message Count (Log Scale)', yaxis_title='PGN or CAN ID',
-        yaxis={'categoryorder': 'total ascending'},
-        plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='white',
-        font=dict(family="Segoe UI, Arial, sans-serif", size=12),
-        hoverlabel=dict(bgcolor="white", font_size=13, font_family="Segoe UI"),
-        margin=dict(l=250, r=50, t=80, b=50),
-        title=dict(font=dict(size=20), x=0.5)
+        height=max(600, len(stats_df) * 18),
+        autosize=True,
+        template='plotly_white',
+        xaxis=dict(
+            title=dict(text="Message count [log scale]", font=dict(size=13, color="#1a1a1a")),
+            side="top",
+            dtick=1,
+            showgrid=False,
+            linecolor="#bdbdbd",
+            tickfont=dict(size=12, color="#2a2a2a"),
+            ticks="outside",
+            ticklen=4,
+            tickcolor="#cccccc",
+        ),
+        yaxis=dict(
+            title=dict(text="PGN or CAN ID", font=dict(size=13, color="#1a1a1a")),
+            #autorange="",
+            showgrid=False,
+            linecolor="#bdbdbd",
+            tickfont=dict(size=12, color="#2a2a2a"),
+            ticks="outside",
+            ticklen=4,
+            tickcolor="#cccccc",
+            automargin=True,
+        ),
+        font=dict(family="Segoe UI, Arial, sans-serif", size=12, color='#2a2a2a'),
+        hoverlabel=dict(bgcolor="white", font_size=13, font_family="Segoe UI",
+                        bordercolor='#cccccc'),
+        margin=dict(l=200, r=40, t=120, b=60),
+        bargap=0.35,
+        coloraxis_colorbar=dict(
+            title=dict(text='Message Count', side='top'),
+            orientation='h',
+            thickness=15,
+            len=0.35,
+            x=1.0,
+            xanchor='right',
+            y=1.02,
+            yanchor='bottom',
+            tickformat=',',
+            outlinecolor='#cccccc',
+            outlinewidth=0.5
+        ),
+        title=dict(font=dict(size=20, color='#1a1a1a'), x=0.5, xanchor='center',
+                   pad=dict(b=20))
+    )
+    fig.update_xaxes(
+        showgrid=True, gridwidth=0.5, gridcolor='#e8e8e8',
+        zeroline=False, linecolor='#bdbdbd', mirror=False,
+        tickformat=',',
+        minor=dict(showgrid=True, gridcolor='#f4f4f4', gridwidth=0.5)
+    )
+    fig.update_yaxes(
+        showgrid=False, zeroline=False, linecolor='#bdbdbd',
+        ticks='outside', ticklen=4, tickcolor='#cccccc',
+        automargin=True
+    )
+    fig.update_traces(
+        hovertemplate="<b>%{y}</b><br>Count: %{x:,}<br>Share: %{customdata[0]}%<extra></extra>",
+        marker_line_width=0,
+        texttemplate='%{x:,}',
+        textposition='outside',
+        textfont=dict(size=10, color='#666666'),
+        cliponaxis=False,
+        selected=dict(marker=dict(opacity=0.6)),
+        unselected=dict(marker=dict(opacity=0.2))
     )
-    fig.update_traces(hovertemplate="<b>%{y}</b><br>Count: %{x:,}<br>Share: %{customdata[0]}%<extra></extra>")
     return fig
 
 if __name__ == "__main__":
@@ -48,4 +106,11 @@ if __name__ == "__main__":
     df = load_data(args.input)
     stats = calc_freq(df)
     fig = plot_freq(stats, title=args.title)
-    fig.write_html(str(args.output), include_plotlyjs='cdn')
+    config = {
+        'responsive': True,
+        'displaylogo': False,
+        'scrollZoom': True,
+        'modeBarButtonsToAdd': ['toggleSpikelines'],
+        'toImageButtonOptions': {'format': 'png', 'scale': 2}
+    }
+    fig.write_html(str(args.output), include_plotlyjs='cdn', config=config)