class Spoom::Coverage::D3::Pie

Public Class Methods

header_script() click to toggle source
# File lib/spoom/coverage/d3/pie.rb, line 40
        def self.header_script
          <<~JS
            function tooltipPie(d, title, kind, sum) {
              moveTooltip(d)
                .html("<b>" + title + "</b><br><br>"
                  + "<b>" + d.data.value + "</b> " + kind + "<br>"
                  + "<b>" + toPercent(d.data.value, sum) + "</b>%")
            }
          JS
        end
header_style() click to toggle source
# File lib/spoom/coverage/d3/pie.rb, line 22
        def self.header_style
          <<~CSS
            .pie .title {
              font: 18px Arial, sans-serif;
              font-weight: bold;
              fill: #212529;
              text-anchor: middle;
              pointer-events: none;
            }

            .pie .arc {
              stroke: #fff;
              stroke-width: 2px;
            }
          CSS
        end
new(id, title, data) click to toggle source
Calls superclass method Spoom::Coverage::D3::Base::new
# File lib/spoom/coverage/d3/pie.rb, line 16
def initialize(id, title, data)
  super(id, data)
  @title = title
end

Public Instance Methods

script() click to toggle source
# File lib/spoom/coverage/d3/pie.rb, line 52
        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