Template.render

.attr("x", -height / 2)
        .style("text-anchor", "middle")
        .text("Repository");
    }

    // Initial render
    drawChart();

    // Redraw on resize (debounced)
    let resizeTimer;
    window.addEventListener("resize", () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(drawChart, 150);
    });
  </script>
</body>
</html>""")

    rendered = html_template.render(data_json_str=data_json_str)
    return common.html_to_obj(rendered)

buckets["1k–10k"] += 1
        else:
            buckets["<1k"] += 1
    return buckets

def render_chart(buckets):
    """用 Plotly 畫出高質感圖表"""
    total = sum(buckets.values())
    labels = list(buckets.keys())
    values = list(buckets.values())
    colors = ["#FFD700", "#4CAF50", "#9E9E9E"]

    fig = go.Figure(
        data=[go.Pie(
            labels=labels,
            values=values,
            marker=dict(colors=colors),
            textinfo='label+percent',
            pull=[0.05, 0, 0],
        )]
    )

    fig.update_layout(
        template="plotly_dark",  # 黑底風格
        paper_bgcolor="rgba(0,0,0,0)",