update(bullet-basic): plotly — comprehensive quality review

Comprehensive quality review improving visual design, indicator usage, and layout.

Author: MarkusNeusinger

plots/bullet-basic/implementations/plotly.py

@@ -1,11 +1,10 @@
-""" pyplots.ai
+"""pyplots.ai
 bullet-basic: Basic Bullet Chart
-Library: plotly 6.5.0 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: plotly 6.5.2 | Python 3.14.3
+Quality: /100 | Updated: 2026-02-22
 """
 
 import plotly.graph_objects as go
-from plotly.subplots import make_subplots
 
 
 # Data - Multiple KPIs with different performance levels
@@ -17,97 +16,49 @@
 ]
 
 # Grayscale colors for qualitative ranges (poor -> satisfactory -> good)
-range_colors = ["#D9D9D9", "#BFBFBF", "#A6A6A6"]
+range_colors = ["#A6A6A6", "#C0C0C0", "#DCDCDC"]
 
-# Create subplots - one row per metric for proper scaling
-fig = make_subplots(
-    rows=len(metrics), cols=1, shared_xaxes=False, vertical_spacing=0.12, subplot_titles=[m["label"] for m in metrics]
-)
+# Create figure with native Indicator traces (bullet mode)
+fig = go.Figure()
+n = len(metrics)
+spacing = 0.04
+row_height = (1.0 - spacing * (n - 1)) / n
 
-# Create each bullet chart in its own subplot
 for i, m in enumerate(metrics):
-    row = i + 1
-
-    # Add qualitative range bands (background, plotted in reverse order)
-    for j, r in enumerate(reversed(m["ranges"])):
-        fig.add_trace(
-            go.Bar(
-                x=[r],
-                y=[""],
-                orientation="h",
-                marker=dict(color=range_colors[len(m["ranges"]) - 1 - j]),
-                width=0.6,
-                showlegend=False,
-                hoverinfo="skip",
-            ),
-            row=row,
-            col=1,
-        )
+    y_start = 1.0 - (i + 1) * row_height - i * spacing
+    y_end = y_start + row_height
 
-    # Add actual value bar (primary measure) using Python Blue
     fig.add_trace(
-        go.Bar(
-            x=[m["actual"]],
-            y=[""],
-            orientation="h",
-            marker=dict(color="#306998"),
-            width=0.25,
-            showlegend=False,
-            name=m["label"],
-            hovertemplate=f"{m['label']}: {m['actual']}<extra></extra>",
-        ),
-        row=row,
-        col=1,
-    )
-
-    # Add target marker line (thin black vertical line)
-    fig.add_shape(
-        type="line",
-        x0=m["target"],
-        x1=m["target"],
-        y0=-0.4,
-        y1=0.4,
-        line=dict(color="#1A1A1A", width=5),
-        row=row,
-        col=1,
-    )
-
-    # Add actual value annotation for precise reading
-    max_range = m["ranges"][-1]
-    fig.add_annotation(
-        x=max_range * 1.02,
-        y=0,
-        text=f"<b>{m['actual']}</b>",
-        showarrow=False,
-        font=dict(size=20, color="#306998"),
-        xanchor="left",
-        row=row,
-        col=1,
-    )
-
-    # Update x-axis range for each subplot
-    fig.update_xaxes(
-        range=[0, max_range * 1.15], tickfont=dict(size=16), showgrid=True, gridcolor="rgba(0,0,0,0.1)", row=row, col=1
+        go.Indicator(
+            mode="number+gauge",
+            value=m["actual"],
+            number={"font": {"size": 26, "color": "#306998"}},
+            domain={"x": [0.18, 0.95], "y": [y_start, y_end]},
+            title={"text": m["label"], "font": {"size": 22}, "align": "left"},
+            gauge={
+                "shape": "bullet",
+                "axis": {"range": [0, m["ranges"][-1]], "tickfont": {"size": 16}},
+                "bar": {"color": "#306998"},
+                "bgcolor": "white",
+                "threshold": {"line": {"color": "#1A1A1A", "width": 4}, "thickness": 0.75, "value": m["target"]},
+                "steps": [
+                    {"range": [0, m["ranges"][0]], "color": range_colors[0]},
+                    {"range": [m["ranges"][0], m["ranges"][1]], "color": range_colors[1]},
+                    {"range": [m["ranges"][1], m["ranges"][2]], "color": range_colors[2]},
+                ],
+            },
+        )
     )
 
-    fig.update_yaxes(showticklabels=False, row=row, col=1)
-
 # Layout
 fig.update_layout(
-    title=dict(text="bullet-basic · plotly · pyplots.ai", font=dict(size=32), x=0.5, xanchor="center"),
-    barmode="overlay",
+    title={"text": "bullet-basic · plotly · pyplots.ai", "font": {"size": 32}, "x": 0.5, "xanchor": "center"},
     template="plotly_white",
-    margin=dict(l=80, r=100, t=120, b=60),
-    showlegend=False,
+    margin={"l": 40, "r": 40, "t": 100, "b": 40},
     height=900,
     width=1600,
 )
 
-# Update subplot titles font size
-for annotation in fig["layout"]["annotations"]:
-    if "text" in annotation and annotation["text"] in [m["label"] for m in metrics]:
-        annotation["font"] = dict(size=22)
-
 # Save
 fig.write_image("plot.png", width=1600, height=900, scale=3)
 fig.write_html("plot.html", include_plotlyjs="cdn")

plots/bullet-basic/metadata/plotly.yaml

@@ -1,16 +1,16 @@
 library: plotly
 specification_id: bullet-basic
 created: '2025-12-23T09:18:22Z'
-updated: '2025-12-23T09:22:28Z'
-generated_by: claude-opus-4-5-20251101
+updated: '2026-02-22T12:00:00+00:00'
+generated_by: claude-opus-4-6
 workflow_run: 20456603137
 issue: 0
-python_version: 3.13.11
-library_version: 6.5.0
+python_version: 3.14.3
+library_version: 6.5.2
 preview_url: https://storage.googleapis.com/pyplots-images/plots/bullet-basic/plotly/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/bullet-basic/plotly/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/bullet-basic/plotly/plot.html
-quality_score: 92
+quality_score: null
 impl_tags:
   dependencies: []
   techniques: