// Commit-history line chart for the change log page. // // Data comes from scripts/changelog-data.js (window.__PROTO_COMMIT_HISTORY__, // one weekly series per layer). The plot is cumulative commits per layer; the // hover readout reports the running total for the week under the cursor. (function () { var MOUNT_ID = "changelog-chart"; var READY_CLASS = "is-ready"; var VIEW_W = 960; var VIEW_H = 380; var PAD = { top: 34, right: 22, bottom: 36, left: 56 }; // The chart plots cumulative commits. Weekly counts stay in the data and are what the // hover readout reports for a given week. var MODE = { key: "total", field: "total", tension: 0.22 }; var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var SVG_NS = "http://www.w3.org/2000/svg"; var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; function el(tag, className, attrs) { var node = document.createElementNS(SVG_NS, tag); if (className) node.setAttribute("class", className); for (var key in attrs || {}) node.setAttribute(key, attrs[key]); return node; } function html(tag, className, text) { var node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; return node; } function parseDate(iso) { var parts = iso.split("-"); return new Date(+parts[0], +parts[1] - 1, +parts[2]); } function fmtMonth(date) { return MONTHS[date.getMonth()] + " " + date.getFullYear(); } function fmtDay(date) { return MONTHS[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear(); } function fmtCount(value) { return value >= 1000 ? (value / 1000).toFixed(value % 1000 === 0 ? 0 : 1) + "k" : String(value); } // Axis step that keeps all four gridline labels round (1287 -> 400 -> top 1600). function niceStep(value) { if (value <= 1) return 1; var magnitude = Math.pow(10, Math.floor(Math.log10(value))); var steps = [1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]; for (var i = 0; i < steps.length; i++) { if (steps[i] * magnitude >= value) return steps[i] * magnitude; } return 10 * magnitude; } // Catmull-Rom through every point, expressed as cubic beziers. function curve(points, tension) { if (points.length < 2) return points.length ? "M" + points[0].x + " " + points[0].y : ""; var d = "M" + points[0].x + " " + points[0].y; for (var i = 0; i < points.length - 1; i++) { var p0 = points[i - 1] || points[i]; var p1 = points[i]; var p2 = points[i + 1]; var p3 = points[i + 2] || p2; d += " C" + (p1.x + (p2.x - p0.x) * tension) + " " + (p1.y + (p2.y - p0.y) * tension) + " " + (p2.x - (p3.x - p1.x) * tension) + " " + (p2.y - (p3.y - p1.y) * tension) + " " + p2.x + " " + p2.y; } return d; } // Newsworthy events: dated updates from scripts/updates-data.js and the new-tool cards on // the page. Each is marked by a dot on its layer's line and named in the hover readout for // its week. A new tool belongs to the tools layer; an update names its layer optionally, // and without one sits on whichever line is highest that week. function readEvents() { var updates = (window.__PROTO_UPDATES__ || []) .filter(function (update) { return update && update.date && update.title; }) .map(function (update) { return { date: update.date, label: update.title, layer: update.layer || null }; }); var tools = Array.prototype.map .call(document.querySelectorAll(".changelog-tool-card[data-date]"), function (card) { var name = card.querySelector(".changelog-tool-name"); return { date: card.getAttribute("data-date"), label: name ? name.textContent.trim() + " added" : "", layer: "tools", }; }) .filter(function (event) { return event.label; }); return updates.concat(tools); } // The week bucket an event falls in: the last week starting on or before it. Weeks // are ISO dates, so a lexical compare is a chronological one. Returns -1 for an event // outside the plotted range, which is dropped rather than pinned to an end week it // did not happen in. function weekIndexFor(weeks, date) { if (!weeks.length || date < weeks[0]) return -1; var index = -1; for (var i = 0; i < weeks.length; i++) { if (weeks[i] <= date) index = i; else break; } if (index < 0) return -1; // The final bucket covers its own seven days and no more, so an event after the // data ends is dropped rather than pinned to a week it did not happen in. if (index === weeks.length - 1) { var end = parseDate(weeks[index]); end.setDate(end.getDate() + 7); if (parseDate(date) >= end) return -1; } return index; } function build(mount, data) { var layers = data.layers.filter(function (layer) { return layer.series && layer.series.length; }); if (!layers.length) return false; // One shared x-axis: every week between the earliest and latest activity. var weeks = []; var seen = {}; layers.forEach(function (layer) { layer.series.forEach(function (point) { if (!seen[point.week]) { seen[point.week] = true; weeks.push(point.week); } }); }); weeks.sort(); var events = readEvents() .map(function (event) { return { date: event.date, label: event.label, layer: event.layer, index: weekIndexFor(weeks, event.date), }; }) .filter(function (event) { return event.index >= 0; }); var byWeek = {}; layers.forEach(function (layer) { byWeek[layer.key] = {}; layer.series.forEach(function (point) { byWeek[layer.key][point.week] = point; }); }); var hidden = {}; var head = html("div", "changelog-chart-head"); var legend = html("div", "changelog-legend"); layers.forEach(function (layer) { var button = html("button", "changelog-legend-item is-on"); button.type = "button"; button.setAttribute("data-layer", layer.key); button.appendChild(html("span", "changelog-swatch")); button.appendChild(html("span", "changelog-legend-label", layer.label)); button.appendChild( html("span", "changelog-legend-count", layer.commits.toLocaleString() + " commits") ); button.addEventListener("click", function () { if (!hidden[layer.key] && layers.length - countHidden() === 1) return; // keep one series on hidden[layer.key] = !hidden[layer.key]; button.classList.toggle("is-on", !hidden[layer.key]); draw(); }); legend.appendChild(button); }); head.appendChild(legend); var canvas = html("div", "changelog-chart-canvas"); var svg = el("svg", "changelog-svg", { viewBox: "0 0 " + VIEW_W + " " + VIEW_H, preserveAspectRatio: "xMidYMid meet", role: "img", "aria-label": "Weekly commit history per layer: " + layers .map(function (layer) { return layer.label + ", " + layer.commits.toLocaleString() + " commits since " + fmtMonth(parseDate(layer.first)); }) .join("; "), }); var tooltip = html("div", "changelog-tooltip"); canvas.appendChild(svg); canvas.appendChild(tooltip); mount.textContent = ""; mount.appendChild(head); mount.appendChild(canvas); function countHidden() { var n = 0; for (var key in hidden) if (hidden[key]) n++; return n; } function visibleLayers() { return layers.filter(function (layer) { return !hidden[layer.key]; }); } var plotW = VIEW_W - PAD.left - PAD.right; var plotH = VIEW_H - PAD.top - PAD.bottom; function xAt(index) { return PAD.left + (weeks.length < 2 ? plotW / 2 : (index / (weeks.length - 1)) * plotW); } function draw() { svg.textContent = ""; var shown = visibleLayers(); var peak = 0; shown.forEach(function (layer) { layer.series.forEach(function (point) { if (point[MODE.field] > peak) peak = point[MODE.field]; }); }); var step = niceStep(Math.max(peak, 1) / 4); var top = step * 4; var yAt = function (value) { return PAD.top + plotH - (value / top) * plotH; }; var defs = el("defs"); shown.forEach(function (layer) { var gradient = el("linearGradient", null, { id: "changelog-fill-" + layer.key, x1: "0", y1: "0", x2: "0", y2: "1", }); gradient.appendChild(el("stop", "changelog-stop-from changelog-" + layer.key, { offset: "0" })); gradient.appendChild(el("stop", "changelog-stop-to changelog-" + layer.key, { offset: "1" })); defs.appendChild(gradient); }); svg.appendChild(defs); // Horizontal grid and y-axis labels. var grid = el("g", "changelog-grid"); for (var t = 0; t <= 4; t++) { var value = (top / 4) * t; var y = yAt(value); grid.appendChild(el("line", "changelog-gridline", { x1: PAD.left, y1: y, x2: VIEW_W - PAD.right, y2: y, })); var label = el("text", "changelog-axis-label changelog-axis-y", { x: PAD.left - 12, y: y + 4, "text-anchor": "end", }); label.textContent = fmtCount(Math.round(value)); grid.appendChild(label); } svg.appendChild(grid); // One tick per month, then thinned by a whole number of months so the // labels stay evenly spaced instead of drifting with the week stride. var ticks = el("g", "changelog-ticks"); var monthStarts = []; var lastStamp = ""; weeks.forEach(function (week, index) { var date = parseDate(week); var stamp = date.getFullYear() + "-" + date.getMonth(); if (stamp === lastStamp) return; lastStamp = stamp; monthStarts.push({ index: index, date: date }); }); var stride = Math.max(1, Math.ceil(monthStarts.length / 8)); monthStarts.forEach(function (month, i) { if (i % stride !== 0) return; var tick = el("text", "changelog-axis-label changelog-axis-x", { x: xAt(month.index), y: VIEW_H - PAD.bottom + 22, "text-anchor": "middle", }); tick.textContent = fmtMonth(month.date); ticks.appendChild(tick); }); svg.appendChild(ticks); // Series: gradient area under a smoothed line. The group is attached up // front so getTotalLength() can measure the paths for the draw-in. var seriesGroup = el("g", "changelog-series"); svg.appendChild(seriesGroup); shown.forEach(function (layer) { var points = []; weeks.forEach(function (week, index) { var point = byWeek[layer.key][week]; if (point) points.push({ x: xAt(index), y: yAt(point[MODE.field]), week: week }); }); if (!points.length) return; var line = curve(points, MODE.tension); var base = PAD.top + plotH; seriesGroup.appendChild(el("path", "changelog-area changelog-" + layer.key, { d: line + " L" + points[points.length - 1].x + " " + base + " L" + points[0].x + " " + base + " Z", fill: "url(#changelog-fill-" + layer.key + ")", })); var stroke = el("path", "changelog-line changelog-" + layer.key, { d: line }); seriesGroup.appendChild(stroke); if (!reduceMotion) { var length = stroke.getTotalLength ? stroke.getTotalLength() : 0; if (length) { stroke.style.strokeDasharray = length; stroke.style.strokeDashoffset = length; requestAnimationFrame(function () { stroke.style.transition = "stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1)"; stroke.style.strokeDashoffset = "0"; }); } } }); // Event markers: one ring per line and week, however many events share it. An event // whose layer is hidden hides with it rather than jumping to another line. var markers = el("g", "changelog-markers"); var marked = {}; events.forEach(function (event) { var week = weeks[event.index]; var layer = null; if (event.layer && byWeek[event.layer]) { if (hidden[event.layer]) return; layer = shown.filter(function (candidate) { return candidate.key === event.layer; })[0]; } else { shown.forEach(function (candidate) { var point = byWeek[candidate.key][week]; if (point && (!layer || point[MODE.field] > byWeek[layer.key][week][MODE.field])) { layer = candidate; } }); } var point = layer && byWeek[layer.key][week]; if (!point || marked[layer.key + week]) return; marked[layer.key + week] = true; markers.appendChild(el("circle", "changelog-marker changelog-" + layer.key, { cx: xAt(event.index), cy: yAt(point[MODE.field]), r: 4, })); }); svg.appendChild(markers); // Hover readout: crosshair, focus dots, floating tooltip. var focus = el("g", "changelog-focus", { opacity: "0" }); var crosshair = el("line", "changelog-crosshair", { y1: PAD.top - 6, y2: PAD.top + plotH, }); focus.appendChild(crosshair); var dots = {}; shown.forEach(function (layer) { dots[layer.key] = el("circle", "changelog-focus-dot changelog-" + layer.key, { r: 5 }); focus.appendChild(dots[layer.key]); }); svg.appendChild(focus); var overlay = el("rect", "changelog-overlay", { x: PAD.left, y: PAD.top - 6, width: plotW, height: plotH + 6, fill: "transparent", }); svg.appendChild(overlay); function hide() { focus.setAttribute("opacity", "0"); tooltip.classList.remove("is-visible"); } function move(event) { var box = svg.getBoundingClientRect(); var scale = VIEW_W / box.width; var x = (event.clientX - box.left) * scale; var ratio = (x - PAD.left) / plotW; var index = Math.round(ratio * (weeks.length - 1)); index = Math.max(0, Math.min(weeks.length - 1, index)); var week = weeks[index]; var rows = []; shown.forEach(function (layer) { var point = byWeek[layer.key][week]; var dot = dots[layer.key]; if (!point) { dot.setAttribute("opacity", "0"); return; } dot.setAttribute("opacity", "1"); dot.setAttribute("cx", xAt(index)); dot.setAttribute("cy", yAt(point[MODE.field])); rows.push({ layer: layer, value: point[MODE.field] }); }); if (!rows.length) return hide(); crosshair.setAttribute("x1", xAt(index)); crosshair.setAttribute("x2", xAt(index)); focus.setAttribute("opacity", "1"); tooltip.textContent = ""; tooltip.appendChild(html("div", "changelog-tooltip-date", "Week of " + fmtDay(parseDate(week)))); rows.forEach(function (row) { var line = html("div", "changelog-tooltip-row changelog-" + row.layer.key); line.appendChild(html("span", "changelog-swatch")); line.appendChild(html("span", "changelog-tooltip-label", row.layer.label)); line.appendChild( html( "span", "changelog-tooltip-value", row.value.toLocaleString() ) ); tooltip.appendChild(line); }); events.forEach(function (event) { if (event.index !== index) return; tooltip.appendChild(html("div", "changelog-tooltip-event", event.label)); }); tooltip.classList.add("is-visible"); var left = (xAt(index) / VIEW_W) * box.width; tooltip.style.left = Math.max(8, Math.min(box.width - 8, left)) + "px"; tooltip.classList.toggle("is-flipped", left > box.width * 0.62); } overlay.addEventListener("pointermove", move); overlay.addEventListener("pointerdown", move); overlay.addEventListener("pointerleave", hide); } draw(); mount.classList.add(READY_CLASS); return true; } function init() { var mount = document.getElementById(MOUNT_ID); if (!mount || mount.classList.contains(READY_CLASS)) return; var data = window.__PROTO_COMMIT_HISTORY__; if (!data || !data.layers) { mount.classList.add("is-empty"); return; } build(mount, data); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } // Pick up the page after client-side navigation (Mintlify is a Next.js app). new MutationObserver(init).observe(document.body, { childList: true, subtree: true }); })();