class Spoom::Coverage::D3::Timeline

Public Class Methods

header_script() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 76
        def self.header_script
          <<~JS
            var parseVersion = function(version) {
              if (!version) {
                return null;
              }
              return parseFloat(version.replaceAll("0.", ""));
            }

            function tooltipTimeline(d, kind) {
              moveTooltip(d)
                .html("commit <b>" + d.data.commit + "</b><br>"
                  + d3.timeFormat("%y/%m/%d")(parseDate(d.data.timestamp)) + "<br><br>"
                  + "<b>typed: " + d.key + "</b><br><br>"
                  + "<b>" + (d.data.values[d.key] ? d.data.values[d.key] : 0) + "</b> " + kind +"<br>"
                  + "<b>" + toPercent(d.data.values[d.key] ? d.data.values[d.key] : 0, d.data.total) + "%")
            }
          JS
        end
header_style() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 22
        def self.header_style
          <<~CSS
            .domain {
              stroke: transparent;
            }

            .grid line {
              stroke: #ccc;
            }

            .axis text {
              font: 12px Arial, sans-serif;
              fill: #333;
              text-anchor: right;
              pointer-events: none;
            }

            .area {
              fill-opacity: 0.5;
            }

            .line {
              stroke-width: 2;
              fill: transparent;
            }

            .dot {
              r: 2;
              fill: #888;
            }

            .inverted .grid line {
              stroke: #777;
            }

            .inverted .area {
              fill-opacity: 0.9;
            }

            .inverted .axis text {
              fill: #fff;
            }

            .inverted .axis line {
              stroke: #fff;
            }

            .inverted .dot {
              fill: #fff;
            }
          CSS
        end
new(id, data, keys) click to toggle source
Calls superclass method Spoom::Coverage::D3::Base::new
# File lib/spoom/coverage/d3/timeline.rb, line 16
def initialize(id, data, keys)
  super(id, data)
  @keys = keys
end

Public Instance Methods

area(y:, color: " click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 183
        def area(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)")
          <<~HTML
            svg_#{id}.append("path")
              .datum(data_#{id}.filter((d) => #{y}))
              .attr("class", "area")
              .attr("d", d3.area()
                .defined((d) => #{y})
                .x((d) => xScale_#{id}(parseDate(d.timestamp)))
                .y0(yScale_#{id}(0))
                .y1((d) => yScale_#{id}(#{y}))
                .curve(d3.#{curve}))
              .attr("fill", "#{color}")
          HTML
        end
line(y:, color: " click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 199
        def line(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)")
          <<~HTML
            svg_#{id}.append("path")
               .datum(data_#{id}.filter((d) => #{y}))
               .attr("class", "line")
               .attr("d", d3.line()
                 .x((d) => xScale_#{id}(parseDate(d.timestamp)))
                 .y((d) => yScale_#{id}(#{y}))
                 .curve(d3.#{curve}))
               .attr("stroke", "#{color}")
          HTML
        end
plot() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 122
def plot; end
points(y:) click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 213
        def points(y:)
          <<~HTML
            svg_#{id}.selectAll("circle")
              .data(data_#{id})
              .enter()
                .append("circle")
                .attr("class", "dot")
                .attr("cx", (d) => xScale_#{id}(parseDate(d.timestamp)))
                .attr("cy", (d, i) => yScale_#{id}(#{y}))
                .on("mouseover", (d) => tooltip.style("opacity", 1))
                .on("mousemove", tooltip_#{id})
                .on("mouseleave", (d) => tooltip.style("opacity", 0));
          HTML
        end
script() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 97
        def script
          <<~HTML
            #{tooltip}

            var data_#{id} = #{@data.to_json};

            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("width", width_#{id})
                .attr("height", height_#{id})

              #{plot}
            }

            draw_#{id}();
            window.addEventListener("resize", draw_#{id});
          HTML
        end
x_scale() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 125
        def x_scale
          <<~HTML
            var xScale_#{id} = d3.scaleTime()
              .range([0, width_#{id}])
              .domain(d3.extent(data_#{id}, (d) => parseDate(d.timestamp)));

            svg_#{id}.append("g")
              .attr("class", "grid")
              .attr("transform", "translate(0," + height_#{id} + ")")
              .call(d3.axisBottom(xScale_#{id})
                .tickFormat("")
                .tickSize(-height_#{id}))
          HTML
        end
x_ticks() click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 141
        def x_ticks
          <<~HTML
            svg_#{id}.append("g")
              .attr("class", "axis x")
              .attr("transform", "translate(0," + height_#{id} + ")")
              .call(d3.axisBottom(xScale_#{id})
                .tickFormat(d3.timeFormat("%y/%m/%d"))
                .tickPadding(-15)
                .tickSize(-3));
          HTML
        end
y_scale(min:, max:, ticks:) click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 154
        def y_scale(min:, max:, ticks:)
          <<~HTML
            var yScale_#{id} = d3.scaleLinear()
              .range([height_#{id}, 0])
              .domain([#{min}, #{max}]);

            svg_#{id}.append("g")
              .attr("class", "grid")
              .call(d3.axisLeft(yScale_#{id})
                .#{ticks}
                .tickFormat("")
                .tickSize(-width_#{id}))
          HTML
        end
y_ticks(ticks:, format:, padding:) click to toggle source
# File lib/spoom/coverage/d3/timeline.rb, line 170
        def y_ticks(ticks:, format:, padding:)
          <<~HTML
            svg_#{id}.append("g")
              .attr("class", "axis y")
              .call(d3.axisLeft(yScale_#{id})
                .#{ticks}
                .tickSize(-3)
                .tickFormat((d) => #{format})
                .tickPadding(-#{padding}))
          HTML
        end