Class: Spoom::Coverage::D3::Timeline::Stacked Abstract

Inherits:
Spoom::Coverage::D3::Timeline show all
Defined in:
lib/spoom/coverage/d3/timeline.rb

Overview

This class is abstract.

Direct Known Subclasses

Calls, RBIs, Sigils, Sigs

Instance Attribute Summary

Attributes inherited from Base

#id

Instance Method Summary collapse

Methods inherited from Spoom::Coverage::D3::Timeline

#area, header_script, header_style, #initialize, #points, #x_scale, #x_ticks, #y_scale, #y_ticks

Methods inherited from Base

header_script, header_style, #html, #initialize, #tooltip

Constructor Details

This class inherits a constructor from Spoom::Coverage::D3::Timeline

Instance Method Details

#line(y:, color: "strictnessColor(d.key)", curve: "curveCatmullRom.alpha(1)") ⇒ Object

: (y: String, ?color: String, ?curve: String) -> String



383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 383

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 ⇒ Object

: -> String



371
372
373
374
375
376
377
378
379
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 371

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 ⇒ Object

: -> String



329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 329

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