Spaces:
Running
Running
File size: 3,160 Bytes
5846c4a fee9c1e 5846c4a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import plotly.graph_objects as go
import plotly.io as pio
import os
"""
Simple grouped bar chart (Baseline / Improved / Target), minimal Distill-like style.
Responsive, no zoom/pan, clean hover (rounded tooltip corners via post_script).
"""
# Data (five categories)
categories = ["A", "B", "C", "D", "E"]
baseline = [0.52, 0.61, 0.67, 0.73, 0.78]
improved = [0.58, 0.66, 0.72, 0.79, 0.86]
target = [0.60, 0.68, 0.75, 0.82, 0.90]
color_base = "#64748b" # slate-500
color_improved = "#2563eb" # blue-600
color_target = "#4b5563" # gray-600
fig = go.Figure()
fig.add_bar(
x=categories,
y=baseline,
name="Baseline",
marker=dict(color=color_base),
offsetgroup="grp",
hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
)
fig.add_bar(
x=categories,
y=improved,
name="Improved",
marker=dict(color=color_improved),
offsetgroup="grp",
hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
)
fig.add_bar(
x=categories,
y=target,
name="Target",
marker=dict(color=color_target, opacity=0.65, line=dict(color=color_target, width=1)),
offsetgroup="grp",
hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
)
fig.update_layout(
barmode="group",
autosize=True,
paper_bgcolor="rgba(0,0,0,0)",
plot_bgcolor="rgba(0,0,0,0)",
margin=dict(l=28, r=12, t=8, b=28),
hovermode="x unified",
legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="left", x=0),
xaxis=dict(
showgrid=False,
zeroline=False,
showline=True,
linecolor="rgba(0,0,0,0.25)",
linewidth=1,
ticks="outside",
ticklen=6,
tickcolor="rgba(0,0,0,0.25)",
tickfont=dict(size=12, color="rgba(0,0,0,0.65)"),
title=None,
automargin=True,
fixedrange=True,
),
yaxis=dict(
showgrid=False,
zeroline=False,
showline=True,
linecolor="rgba(0,0,0,0.25)",
linewidth=1,
ticks="outside",
ticklen=6,
tickcolor="rgba(0,0,0,0.25)",
tickfont=dict(size=12, color="rgba(0,0,0,0.65)"),
title=None,
tickformat=".2f",
automargin=True,
fixedrange=True,
),
)
post_script = """
(function(){
var plots = document.querySelectorAll('.js-plotly-plot');
plots.forEach(function(gd){
function round(){
try {
var root = gd && gd.parentNode ? gd.parentNode : document;
var rects = root.querySelectorAll('.hoverlayer .hovertext rect');
rects.forEach(function(r){ r.setAttribute('rx', 8); r.setAttribute('ry', 8); });
} catch(e) {}
}
if (gd && gd.on){
gd.on('plotly_hover', round);
gd.on('plotly_unhover', round);
gd.on('plotly_relayout', round);
}
setTimeout(round, 0);
});
})();
"""
fig.write_html("../app/src/fragments/bar.html",
include_plotlyjs=False,
full_html=False,
config={
'displayModeBar': False,
'responsive': True,
'scrollZoom': False,
})
|