spoom 1.0.4 → 1.0.9

data/lib/spoom/coverage/d3/base.rb

@@ -0,0 +1,50 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Spoom
+  module Coverage
+    module D3
+      class Base
+        extend T::Sig
+        extend T::Helpers
+
+        abstract!
+
+        sig { returns(String) }
+        attr_reader :id
+
+        sig { params(id: String, data: T.untyped).void }
+        def initialize(id, data)
+          @id = id
+          @data = data
+        end
+
+        sig { returns(String) }
+        def self.header_style
+          ""
+        end
+
+        sig { returns(String) }
+        def self.header_script
+          ""
+        end
+
+        sig { returns(String) }
+        def html
+          <<~HTML
+            <svg id="#{id}"></svg>
+            <script>#{script}</script>
+          HTML
+        end
+
+        sig { returns(String) }
+        def tooltip
+          ""
+        end
+
+        sig { abstract.returns(String) }
+        def script; end
+      end
+    end
+  end
+end

data/lib/spoom/coverage/d3/circle_map.rb

@@ -0,0 +1,195 @@
+# typed: strict
+# frozen_string_literal: true
+
+require_relative "base"
+
+module Spoom
+  module Coverage
+    module D3
+      class CircleMap < Base
+        extend T::Sig
+
+        sig { returns(String) }
+        def self.header_style
+          <<~CSS
+            .node {
+              cursor: pointer;
+            }
+
+            .node:hover {
+              stroke: #333;
+              stroke-width: 1px;
+            }
+
+            .label.dir {
+              fill: #333;
+            }
+
+            .label.file {
+              font: 12px Arial, sans-serif;
+            }
+
+            .node.root, .node.file {
+              pointer-events: none;
+            }
+          CSS
+        end
+
+        sig { returns(String) }
+        def self.header_script
+          <<~JS
+            function treeHeight(root, height = 0) {
+              height += 1;
+              if (root.children && root.children.length > 0)
+                return Math.max(...root.children.map(child => treeHeight(child, height)));
+              else
+                return height;
+            }
+
+            function tooltipMap(d) {
+              moveTooltip(d)
+                .html("<b>" + d.data.name + "</b>")
+            }
+          JS
+        end
+
+        sig { override.returns(String) }
+        def script
+          <<~JS
+            var root = {children: #{@data.to_json}}
+            var dataHeight = treeHeight(root)
+
+            var opacity = d3.scaleLinear()
+                .domain([0, dataHeight])
+                .range([0, 0.2])
+
+            root = d3.hierarchy(root)
+                .sum((d) => d.children ? d.children.length : 1)
+                .sort((a, b) => b.value - a.value);
+
+            var dirColor = d3.scaleLinear()
+              .domain([1, 0])
+              .range([strictnessColor("true"), strictnessColor("false")])
+              .interpolate(d3.interpolateRgb);
+
+            function redraw() {
+              var diameter = document.getElementById("#{id}").clientWidth - 20;
+              d3.select("##{id}").selectAll("*").remove()
+
+              var svg_#{id} = d3.select("##{id}")
+                .attr("width", diameter)
+                .attr("height", diameter)
+                .append("g")
+                  .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
+
+              var pack = d3.pack()
+                  .size([diameter, diameter])
+                  .padding(2);
+
+              var focus = root,
+                  nodes = pack(root).descendants(),
+                  view;
+
+              var circle = svg_#{id}.selectAll("circle")
+                .data(nodes)
+                .enter().append("circle")
+                  .attr("class", (d) => d.parent ? d.children ? "node" : "node file" : "node root")
+                  .attr("fill", (d) => d.children ? dirColor(d.data.score) : strictnessColor(d.data.strictness))
+                  .attr("fill-opacity", (d) => d.children ? opacity(d.depth) : 1)
+                  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); })
+                  .on("mouseover", (d) => tooltip.style("opacity", 1))
+                  .on("mousemove", tooltipMap)
+                  .on("mouseleave", (d) => tooltip.style("opacity", 0));
+
+              var text = svg_#{id}.selectAll("text")
+                .data(nodes)
+                .enter().append("text")
+                  .attr("class", (d) => d.children ? "label dir" : "label file")
+                  .attr("fill-opacity", (d) => d.depth <= 1 ? 1 : 0)
+                  .attr("display", (d) => d.depth <= 1 ? "inline" : "none")
+                  .text((d) => d.data.name);
+
+              var node = svg_#{id}.selectAll("circle,text");
+
+              function zoom(d) {
+                var focus0 = focus; focus = d;
+
+                var transition = d3.transition()
+                    .duration(d3.event.altKey ? 7500 : 750)
+                    .tween("zoom", function(d) {
+                      var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
+                      return (t) => zoomTo(i(t));
+                    });
+
+                transition.selectAll("text")
+                  .filter(function(d) { return d && d.parent === focus || this.style.display === "inline"; })
+                    .attr("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
+                    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
+                    .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
+              }
+
+              function zoomTo(v) {
+                var k = diameter / v[2]; view = v;
+                node.attr("transform", (d) => "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")");
+                circle.attr("r", (d) => d.r * k);
+              }
+
+              zoomTo([root.x, root.y, root.r * 2]);
+              d3.select("##{id}").on("click", () => zoom(root));
+            }
+
+            redraw();
+            window.addEventListener("resize", redraw);
+          JS
+        end
+
+        class Sigils < CircleMap
+          extend T::Sig
+
+          sig { params(id: String, sigils_tree: FileTree).void }
+          def initialize(id, sigils_tree)
+            @scores = T.let({}, T::Hash[FileTree::Node, Float])
+            @strictnesses = T.let({}, T::Hash[FileTree::Node, T.nilable(String)])
+            @sigils_tree = sigils_tree
+            super(id, sigils_tree.roots.map { |r| tree_node_to_json(r) })
+          end
+
+          sig { params(node: FileTree::Node).returns(T::Hash[Symbol, T.untyped]) }
+          def tree_node_to_json(node)
+            if node.children.empty?
+              return { name: node.name, strictness: tree_node_strictness(node) }
+            end
+            {
+              name: node.name,
+              children: node.children.values.map { |n| tree_node_to_json(n) },
+              score: tree_node_score(node),
+            }
+          end
+
+          sig { params(node: FileTree::Node).returns(T.nilable(String)) }
+          def tree_node_strictness(node)
+            prefix = @sigils_tree.strip_prefix
+            path = node.path
+            path = "#{prefix}/#{path}" if prefix
+            @strictnesses[node] ||= Spoom::Sorbet::Sigils.file_strictness(path)
+          end
+
+          sig { params(node: FileTree::Node).returns(Float) }
+          def tree_node_score(node)
+            unless @scores.key?(node)
+              if node.name =~ /\.rbi?$/
+                case tree_node_strictness(node)
+                when "true", "strict", "strong"
+                  @scores[node] = 1.0
+                end
+              elsif !node.children.empty?
+                @scores[node] = node.children.values.sum { |n| tree_node_score(n) } / node.children.size.to_f
+              end
+            end
+            @scores[node] || 0.0
+          end
+        end
+      end
+    end
+  end
+end

data/lib/spoom/coverage/d3/pie.rb

@@ -0,0 +1,175 @@
+# typed: strict
+# frozen_string_literal: true
+
+require_relative "base"
+
+module Spoom
+  module Coverage
+    module D3
+      class Pie < Base
+        extend T::Sig
+        extend T::Helpers
+
+        abstract!
+
+        sig { params(id: String, title: String, data: T.untyped).void }
+        def initialize(id, title, data)
+          super(id, data)
+          @title = title
+        end
+
+        sig { returns(String) }
+        def self.header_style
+          <<~CSS
+            .pie .title {
+              font: 18px Arial, sans-serif;
+              font-weight: bold;
+              fill: #212529;
+              text-anchor: middle;
+              pointer-events: none;
+            }
+
+            .pie .arc {
+              stroke: #fff;
+              stroke-width: 2px;
+            }
+          CSS
+        end
+
+        sig { returns(String) }
+        def self.header_script
+          <<~JS
+            function tooltipPie(d, title, kind, sum) {
+              moveTooltip(d)
+                .html("<b>" + title + "</b><br><br>"
+                  + "<b>" + d.data.value + "</b> " + kind + "<br>"
+                  + "<b>" + toPercent(d.data.value, sum) + "</b>%")
+            }
+          JS
+        end
+
+        sig { override.returns(String) }
+        def script
+          <<~JS
+            #{tooltip}
+
+            var json_#{id} = #{@data.to_json};
+            var pie_#{id} = d3.pie().value((d) => d.value);
+            var data_#{id} = pie_#{id}(d3.entries(json_#{id}));
+            var sum_#{id} = d3.sum(data_#{id}, (d) => d.data.value);
+            var title_#{id} = #{@title.to_json};
+
+            function draw_#{id}() {
+              var pieSize_#{id} = document.getElementById("#{id}").clientWidth - 10;
+
+              var arcGenerator_#{id} = d3.arc()
+                .innerRadius(pieSize_#{id} / 4)
+                .outerRadius(pieSize_#{id} / 2);
+
+              d3.select("##{id}").selectAll("*").remove()
+
+              var svg_#{id} = d3.select("##{id}")
+                .attr("width", pieSize_#{id})
+                .attr("height", pieSize_#{id})
+                .attr("class", "pie")
+                .append("g")
+                  .attr("transform", "translate(" + pieSize_#{id} / 2 + "," + pieSize_#{id} / 2 + ")");
+
+              svg_#{id}.selectAll("arcs")
+                .data(data_#{id})
+                .enter()
+                  .append('path')
+                    .attr("class", "arc")
+                    .attr('fill', (d) => strictnessColor(d.data.key))
+                    .attr('d', arcGenerator_#{id})
+                    .on("mouseover", (d) => tooltip.style("opacity", 1))
+                    .on("mousemove", tooltip_#{id})
+                    .on("mouseleave", (d) => tooltip.style("opacity", 0));
+
+              svg_#{id}.selectAll("labels")
+                .data(data_#{id})
+                .enter()
+                  .append('text')
+                  .attr("class", "label")
+                  .attr("transform", (d) => "translate(" + arcGenerator_#{id}.centroid(d) + ")")
+                  .filter(d => (d.endAngle - d.startAngle) > 0.25)
+                    .append("tspan")
+                    .attr("x", 0)
+                    .attr("y", -3)
+                    .text((d) => d.data.value)
+                      .append("tspan")
+                      .attr("class", "small")
+                      .attr("x", 0)
+                      .attr("y", 13)
+                      .text((d) => toPercent(d.data.value, sum_#{id}) + "%");
+
+              svg_#{id}
+                .append("text")
+                .attr("class", "title")
+                .append("tspan")
+                  .attr("y", 7)
+                  .text(title_#{id});
+            }
+
+            draw_#{id}();
+            window.addEventListener("resize", draw_#{id});
+          JS
+        end
+
+        class Sigils < Pie
+          extend T::Sig
+
+          sig { params(id: String, title: String, snapshot: Snapshot).void }
+          def initialize(id, title, snapshot)
+            super(id, title, snapshot.sigils.select { |_k, v| v })
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipPie(d, "typed: " + d.data.key, "files", sum_#{id});
+              }
+            JS
+          end
+        end
+
+        class Calls < Pie
+          extend T::Sig
+
+          sig { params(id: String, title: String, snapshot: Snapshot).void }
+          def initialize(id, title, snapshot)
+            super(id, title, { true: snapshot.calls_typed, false: snapshot.calls_untyped })
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipPie(d, d.data.key == "true" ? " checked" : " unchecked", "calls", sum_#{id})
+              }
+            JS
+          end
+        end
+
+        class Sigs < Pie
+          extend T::Sig
+
+          sig { params(id: String, title: String, snapshot: Snapshot).void }
+          def initialize(id, title, snapshot)
+            super(id, title, { true: snapshot.methods_with_sig, false: snapshot.methods_without_sig })
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipPie(d, (d.data.key == "true" ? " with" : " without") + " a signature", "methods", sum_#{id})
+              }
+            JS
+          end
+        end
+      end
+    end
+  end
+end

data/lib/spoom/coverage/d3/timeline.rb

@@ -0,0 +1,486 @@
+# typed: strict
+# frozen_string_literal: true
+
+require_relative "base"
+
+module Spoom
+  module Coverage
+    module D3
+      class Timeline < Base
+        extend T::Sig
+        extend T::Helpers
+
+        abstract!
+
+        sig { params(id: String, data: T.untyped, keys: T::Array[String]).void }
+        def initialize(id, data, keys)
+          super(id, data)
+          @keys = keys
+        end
+
+        sig { returns(String) }
+        def self.header_style
+          <<~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
+
+        sig { returns(String) }
+        def self.header_script
+          <<~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
+
+        sig { override.returns(String) }
+        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
+
+        sig { abstract.returns(String) }
+        def plot; end
+
+        sig { returns(String) }
+        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
+
+        sig { returns(String) }
+        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
+
+        sig { params(min: String, max: String, ticks: String).returns(String) }
+        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
+
+        sig { params(ticks: String, format: String, padding: Integer).returns(String) }
+        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
+
+        sig { params(y: String, color: String, curve: String).returns(String) }
+        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
+
+        sig { params(y: String, color: String, curve: String).returns(String) }
+        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
+
+        sig { params(y: String).returns(String) }
+        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
+
+        class Versions < Timeline
+          extend T::Sig
+
+          sig { params(id: String, snapshots: T::Array[Snapshot]).void }
+          def initialize(id, snapshots)
+            data = snapshots.map do |snapshot|
+              {
+                timestamp: snapshot.commit_timestamp,
+                commit: snapshot.commit_sha,
+                static: snapshot.version_static,
+                runtime: snapshot.version_runtime,
+              }
+            end
+            super(id, data, [])
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                moveTooltip(d)
+                  .html("commit <b>" + d.commit + "</b><br>"
+                    + d3.timeFormat("%y/%m/%d")(parseDate(d.timestamp)) + "<br><br>"
+                    + "static: v<b>" + d.static + "</b><br>"
+                    + "runtime: v<b>" + d.runtime + "</b><br><br>"
+                    + "versions from<br>Gemfile.lock")
+              }
+            JS
+          end
+
+          sig { override.returns(String) }
+          def plot
+            <<~JS
+              #{x_scale}
+              #{y_scale(
+                min: "d3.min([d3.min(data_#{id}, (d) => parseVersion(d.static)),
+                              d3.min(data_#{id}, (d) => parseVersion(d.runtime))]) - 0.01",
+                max: "d3.max([d3.max(data_#{id}, (d) => parseVersion(d.static)),
+                              d3.max(data_#{id}, (d) => parseVersion(d.runtime))]) + 0.01",
+                ticks: 'ticks(8)'
+              )}
+              #{line(y: 'parseVersion(d.runtime)', color: '#e83e8c', curve: 'curveStepAfter')}
+              #{line(y: 'parseVersion(d.static)', color: '#007bff', curve: 'curveStepAfter')}
+              #{points(y: 'parseVersion(d.static)')}
+              #{x_ticks}
+              #{y_ticks(ticks: 'ticks(4)', format: "'v0.' + d.toFixed(2)", padding: 50)}
+            JS
+          end
+        end
+
+        class Runtimes < Timeline
+          extend T::Sig
+
+          sig { params(id: String, snapshots: T::Array[Snapshot]).void }
+          def initialize(id, snapshots)
+            data = snapshots.map do |snapshot|
+              {
+                timestamp: snapshot.commit_timestamp,
+                commit: snapshot.commit_sha,
+                runtime: snapshot.duration.to_f / 1000.0 / 1000.0,
+              }
+            end
+            super(id, data, [])
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                moveTooltip(d)
+                  .html("commit <b>" + d.commit + "</b><br>"
+                    + d3.timeFormat("%y/%m/%d")(parseDate(d.timestamp)) + "<br><br>"
+                    + "<b>" + d.runtime + "</b>s<br><br>"
+                    + "(sorbet user + system time)")
+              }
+            JS
+          end
+
+          sig { override.returns(String) }
+          def plot
+            <<~JS
+              #{x_scale}
+              #{y_scale(
+                min: '0',
+                max: "d3.max(data_#{id}, (d) => d.runtime)",
+                ticks: 'ticks(10)'
+              )}
+              #{area(y: 'd.runtime')}
+              #{line(y: 'd.runtime')}
+              #{points(y: 'd.runtime')}
+              #{x_ticks}
+              #{y_ticks(ticks: 'ticks(5)', format: 'd.toFixed(2) + "s"', padding: 40)}
+                .call(g => g.selectAll(".tick:first-of-type text").remove())
+            JS
+          end
+        end
+
+        class Stacked < Timeline
+          extend T::Sig
+          extend T::Helpers
+
+          abstract!
+
+          sig { override.returns(String) }
+          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
+
+          sig { override.returns(String) }
+          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
+
+          sig { override.params(y: String, color: String, curve: String).returns(String) }
+          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
+        end
+
+        class Sigils < Stacked
+          extend T::Sig
+
+          sig { params(id: String, snapshots: T::Array[Snapshot]).void }
+          def initialize(id, snapshots)
+            keys = Snapshot::STRICTNESSES
+            data = snapshots.map do |snapshot|
+              {
+                timestamp: snapshot.commit_timestamp,
+                commit: snapshot.commit_sha,
+                total: snapshot.files,
+                values: snapshot.sigils,
+              }
+            end
+            super(id, data, keys)
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipTimeline(d, "files");
+              }
+            JS
+          end
+        end
+
+        class Calls < Stacked
+          extend T::Sig
+
+          sig { params(id: String, snapshots: T::Array[Snapshot]).void }
+          def initialize(id, snapshots)
+            keys = ['false', 'true']
+            data = snapshots.map do |snapshot|
+              {
+                timestamp: snapshot.commit_timestamp,
+                commit: snapshot.commit_sha,
+                total: snapshot.calls_typed + snapshot.calls_untyped,
+                values: { true: snapshot.calls_typed, false: snapshot.calls_untyped },
+              }
+            end
+            super(id, data, keys)
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipTimeline(d, "calls");
+              }
+            JS
+          end
+        end
+
+        class Sigs < Stacked
+          extend T::Sig
+
+          sig { params(id: String, snapshots: T::Array[Snapshot]).void }
+          def initialize(id, snapshots)
+            keys = ['false', 'true']
+            data = snapshots.map do |snapshot|
+              {
+                timestamp: snapshot.commit_timestamp,
+                commit: snapshot.commit_sha,
+                total: snapshot.methods_with_sig + snapshot.methods_without_sig,
+                values: { true: snapshot.methods_with_sig, false: snapshot.methods_without_sig },
+              }
+            end
+            super(id, data, keys)
+          end
+
+          sig { override.returns(String) }
+          def tooltip
+            <<~JS
+              function tooltip_#{id}(d) {
+                tooltipTimeline(d, "methods");
+              }
+            JS
+          end
+        end
+      end
+    end
+  end
+end