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



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
414
# 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

#plotObject



373
374
375
376
377
378
379
380
381
# 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

#scriptObject



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
368
369
370
# 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