Class: Spoom::Coverage::D3::Timeline::Stacked
- Inherits:
-
Spoom::Coverage::D3::Timeline
- Object
- Base
- Spoom::Coverage::D3::Timeline
- Spoom::Coverage::D3::Timeline::Stacked
- Extended by:
- T::Helpers, T::Sig
- Defined in:
- lib/spoom/coverage/d3/timeline.rb
Instance Attribute Summary
Attributes inherited from Base
Instance Method Summary collapse
- #line(y:, color: 'strictnessColor(d.key)', curve: 'curveCatmullRom.alpha(1)') ⇒ Object
- #plot ⇒ Object
- #script ⇒ Object
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 |
#plot ⇒ Object
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 |
#script ⇒ Object
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 |