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
118
119
120
121
|
# File 'lib/spoom/coverage/d3/pie.rb', line 56
def script
<<~JS
#{tooltip}
var json_#{id} = #{@data.to_json};
var pie_#{id} = d3.pie().value((d) => d.value);
var data_#{id} = pie_#{id}(d3.entries(json_#{id}));
var sum_#{id} = d3.sum(data_#{id}, (d) => d.data.value);
var title_#{id} = #{@title.to_json};
function draw_#{id}() {
var pieSize_#{id} = document.getElementById("#{id}").clientWidth - 10;
var arcGenerator_#{id} = d3.arc()
.innerRadius(pieSize_#{id} / 4)
.outerRadius(pieSize_#{id} / 2);
d3.select("##{id}").selectAll("*").remove()
var svg_#{id} = d3.select("##{id}")
.attr("width", pieSize_#{id})
.attr("height", pieSize_#{id})
.attr("class", "pie")
.append("g")
.attr("transform", "translate(" + pieSize_#{id} / 2 + "," + pieSize_#{id} / 2 + ")");
svg_#{id}.selectAll("arcs")
.data(data_#{id})
.enter()
.append('path')
.attr("class", "arc")
.attr('fill', (d) => strictnessColor(d.data.key))
.attr('d', arcGenerator_#{id})
.on("mouseover", (d) => tooltip.style("opacity", 1))
.on("mousemove", tooltip_#{id})
.on("mouseleave", (d) => tooltip.style("opacity", 0));
svg_#{id}.selectAll("labels")
.data(data_#{id})
.enter()
.append('text')
.attr("class", "label")
.attr("transform", (d) => "translate(" + arcGenerator_#{id}.centroid(d) + ")")
.filter(d => (d.endAngle - d.startAngle) > 0.25)
.append("tspan")
.attr("x", 0)
.attr("y", -3)
.text((d) => d.data.value)
.append("tspan")
.attr("class", "small")
.attr("x", 0)
.attr("y", 13)
.text((d) => toPercent(d.data.value, sum_#{id}) + "%");
svg_#{id}
.append("text")
.attr("class", "title")
.append("tspan")
.attr("y", 7)
.text(title_#{id});
}
draw_#{id}();
window.addEventListener("resize", draw_#{id});
JS
end
|