Class: Spoom::Coverage::D3::Timeline
- Inherits:
-
Base
- Object
- Base
- Spoom::Coverage::D3::Timeline
show all
- Extended by:
- T::Helpers, T::Sig
- Defined in:
- lib/spoom/coverage/d3/timeline.rb
Defined Under Namespace
Classes: Calls, Runtimes, Sigils, Sigs, Stacked, Versions
Instance Attribute Summary
Attributes inherited from Base
#id
Class Method Summary
collapse
Instance Method Summary
collapse
-
#area(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)") ⇒ Object
-
#initialize(id, data, keys) ⇒ Timeline
constructor
A new instance of Timeline.
-
#line(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)") ⇒ Object
-
#plot ⇒ Object
-
#points(y:) ⇒ Object
-
#script ⇒ Object
-
#x_scale ⇒ Object
-
#x_ticks ⇒ Object
-
#y_scale(min:, max:, ticks:) ⇒ Object
-
#y_ticks(ticks:, format:, padding:) ⇒ Object
Methods inherited from Base
#html, #tooltip
Constructor Details
#initialize(id, data, keys) ⇒ Timeline
Returns a new instance of Timeline.
16
17
18
19
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 16
def initialize(id, data, keys)
super(id, data)
@keys = keys
end
|
Class Method Details
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 54
def self.
<<~JS
var parseVersion = function(version) {
if (!version) {
return null;
}
return parseFloat(version.replaceAll("0.", ""));
}
function tooltipTimeline(d, kind) {
moveTooltip(d)
.html("commit <b>" + d.data.commit + "</b><br>"
+ d3.timeFormat("%y/%m/%d")(parseDate(d.data.timestamp)) + "<br><br>"
+ "<b>typed: " + d.key + "</b><br><br>"
+ "<b>" + (d.data.values[d.key] ? d.data.values[d.key] : 0) + "</b> " + kind +"<br>"
+ "<b>" + toPercent(d.data.values[d.key] ? d.data.values[d.key] : 0, d.data.total) + "%")
}
JS
end
|
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 22
def self.
<<~CSS
.domain {
stroke: transparent;
}
.grid line {
stroke: #ccc;
}
.axis text {
font: 12px Arial, sans-serif;
fill: #333;
text-anchor: right;
pointer-events: none;
}
.inverted .grid line {
stroke: #777;
}
.inverted .axis text {
fill: #fff;
}
.inverted .axis line {
stroke: #fff;
}
CSS
end
|
Instance Method Details
#area(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)") ⇒ Object
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 161
def area(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)")
<<~HTML
svg_#{id}.append("path")
.datum(data_#{id}.filter((d) => #{y}))
.attr("class", "area")
.attr("d", d3.area()
.defined((d) => #{y})
.x((d) => xScale_#{id}(parseDate(d.timestamp)))
.y0(yScale_#{id}(0))
.y1((d) => yScale_#{id}(#{y}))
.curve(d3.#{curve}))
.attr("fill", "#{color}")
.attr("fill-opacity", 0.5)
HTML
end
|
#line(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)") ⇒ Object
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 178
def line(y:, color: "#ccc", curve: "curveCatmullRom.alpha(1)")
<<~HTML
svg_#{id}.append("path")
.datum(data_#{id}.filter((d) => #{y}))
.attr("class", "line")
.attr("d", d3.line()
.x((d) => xScale_#{id}(parseDate(d.timestamp)))
.y((d) => yScale_#{id}(#{y}))
.curve(d3.#{curve}))
.attr("stroke", "#{color}")
.attr("stroke-width", 3)
.attr("fill", "transparent")
HTML
end
|
#plot ⇒ Object
100
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 100
def plot; end
|
#points(y:) ⇒ Object
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 194
def points(y:)
<<~HTML
svg_#{id}.selectAll("circle")
.data(data_#{id})
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3)
.attr("cx", (d) => xScale_#{id}(parseDate(d.timestamp)))
.attr("cy", (d, i) => yScale_#{id}(#{y}))
.attr("fill", "#aaa")
.on("mouseover", (d) => tooltip.style("opacity", 1))
.on("mousemove", tooltip_#{id})
.on("mouseleave", (d) => tooltip.style("opacity", 0));
HTML
end
|
#script ⇒ Object
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 75
def script
<<~HTML
#{tooltip}
var data_#{id} = #{@data.to_json};
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("width", width_#{id})
.attr("height", height_#{id})
#{plot}
}
draw_#{id}();
window.addEventListener("resize", draw_#{id});
HTML
end
|
#x_scale ⇒ Object
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 103
def x_scale
<<~HTML
var xScale_#{id} = d3.scaleTime()
.range([0, width_#{id}])
.domain(d3.extent(data_#{id}, (d) => parseDate(d.timestamp)));
svg_#{id}.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height_#{id} + ")")
.call(d3.axisBottom(xScale_#{id})
.tickFormat("")
.tickSize(-height_#{id}))
HTML
end
|
#x_ticks ⇒ Object
119
120
121
122
123
124
125
126
127
128
129
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 119
def x_ticks
<<~HTML
svg_#{id}.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0," + height_#{id} + ")")
.call(d3.axisBottom(xScale_#{id})
.tickFormat(d3.timeFormat("%y/%m/%d"))
.tickPadding(-15)
.tickSize(-3));
HTML
end
|
#y_scale(min:, max:, ticks:) ⇒ Object
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 132
def y_scale(min:, max:, ticks:)
<<~HTML
var yScale_#{id} = d3.scaleLinear()
.range([height_#{id}, 0])
.domain([#{min}, #{max}]);
svg_#{id}.append("g")
.attr("class", "grid")
.call(d3.axisLeft(yScale_#{id})
.#{ticks}
.tickFormat("")
.tickSize(-width_#{id}))
HTML
end
|
#y_ticks(ticks:, format:, padding:) ⇒ Object
148
149
150
151
152
153
154
155
156
157
158
|
# File 'lib/spoom/coverage/d3/timeline.rb', line 148
def y_ticks(ticks:, format:, padding:)
<<~HTML
svg_#{id}.append("g")
.attr("class", "axis y")
.call(d3.axisLeft(yScale_#{id})
.#{ticks}
.tickSize(-3)
.tickFormat((d) => #{format})
.tickPadding(-#{padding}))
HTML
end
|