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, 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 



367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 367

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) => strictnessColor(d.key))
      .attr("fill-opacity", 0.9)

    svg_#{id}.selectAll("circle")
      .data(points_#{id})
      .enter()
        .append("circle")
        .attr("class", "dot")
        .attr("r", 2)
        .attr("cx", (d) => xScale_#{id}(parseDate(#{y})))
        .attr("cy", (d, i) => yScale_#{id}(d[1]))
        .attr("fill", "#fff")
        .on("mouseover", (d) => tooltip.style("opacity", 1))
        .on("mousemove", tooltip_#{id})
        .on("mouseleave", (d) => tooltip.style("opacity", 0));
  JS
end

#plot ⇒ Object 



356
357
358
359
360
361
362
363
364
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 356

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 



315
316
317
318
319
320
321
322
323
324
325
326
327
328
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
 
# File 'lib/spoom/coverage/d3/timeline.rb', line 315

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