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