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

Inherits:
Spoom::Coverage::D3::Timeline show all
Extended by:
T::Helpers, T::Sig
Defined in:
lib/spoom/coverage/d3/timeline.rb

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 



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
414
415
416
417
418
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 388

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 



377
378
379
380
381
382
383
384
385
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 377

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 



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
368
369
370
371
372
373
374
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 336

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