class Spoom::Coverage::D3::Timeline::Stacked

Public Instance Methods

line(y:, color: 'strictnessColor(d.key)', curve: 'curveCatmullRom.alpha(1)') click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 384
          def line(y:, color: 'strictnessColor(d.key)', curve: 'curveCatmullRom.alpha(1)')
            <<~JS
              var area_#{id} = d3.area()
                .x((d) => xScale_#{id}(parseDate(#{y})))
                .y0((d) => yScale_#{id}(d[0]))
                .y1((d) => yScale_#{id}(d[1]))
                .curve(d3.#{curve});

              var layer = svg_#{id}.selectAll(".layer")
                .data(layers_#{id})
                .enter().append("g")
                  .attr("class", "layer")
                  .attr("fill", (d, i) => #{color})

              layer.append("path")
                .attr("class", "area")
                .attr("d", area_#{id})
                .attr("fill", (d) => #{color})

              svg_#{id}.selectAll("circle")
                .data(points_#{id})
                .enter()
                  .append("circle")
                  .attr("class", "dot")
                  .attr("cx", (d) => xScale_#{id}(parseDate(#{y})))
                  .attr("cy", (d, i) => yScale_#{id}(d[1]))
                  .on("mouseover", (d) => tooltip.style("opacity", 1))
                  .on("mousemove", tooltip_#{id})
                  .on("mouseleave", (d) => tooltip.style("opacity", 0));
            JS
          end
plot() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 373
          def plot
            <<~JS
              #{x_scale}
              #{y_scale(min: '0', max: '100', ticks: 'tickValues([0, 25, 50, 75, 100])')}
              #{line(y: 'd.data.timestamp')}
              #{x_ticks}
              #{y_ticks(ticks: 'tickValues([25, 50, 75])', format: "d + '%'", padding: 30)}
            JS
          end
script() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 332
          def script
            <<~JS
              #{tooltip}

              var data_#{id} = #{@data.to_json};
              var keys_#{id} = #{T.unsafe(@keys).to_json};

              var stack_#{id} = d3.stack()
                .keys(keys_#{id})
                .value((d, key) => toPercent(d.values[key], d.total));

              var layers_#{id} = stack_#{id}(data_#{id});

              var points_#{id} = []
              layers_#{id}.forEach(function(d) {
                d.forEach(function(p) {
                  p.key = d.key
                  points_#{id}.push(p);
                });
              })

              function draw_#{id}() {
                var width_#{id} = document.getElementById("#{id}").clientWidth;
                var height_#{id} = 200;

                d3.select("##{id}").selectAll("*").remove()

                var svg_#{id} = d3.select("##{id}")
                  .attr("class", "inverted")
                  .attr("width", width_#{id})
                  .attr("height", height_#{id});

                #{plot}
              }

              draw_#{id}();
              window.addEventListener("resize", draw_#{id});
            JS
          end