+
-
+ Last 90 days uptime
+Daily uptime
Last 90 days uptime
class="view-toggle-btn"
type="button"
role="tab"
- data-view="90d"
+ data-view="daily"
aria-selected="true"
+ aria-controls="uptimeViewDaily"
+ id="uptimeViewBtnDaily"
+ >
+ Daily
+
+
@@ -97,7 +109,7 @@
Last 90 days uptime
id="uptimeViewBtnAll" tabindex="-1" > - All time + Rolling 90d
+
+
+
+
+ uptime per UTC day · non-maintenance downtime, merged windows
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/styles.css b/site/styles.css
index af8df67..f11fc62 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -941,6 +941,52 @@ main {
}
}
+/* Work-day filters on the daily view. Muted chrome so the chart stays the focus;
+ the time/zone inputs light up only while the work-hours toggle is on. */
+.daily-filters {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px 14px;
+ font-size: 0.82rem;
+ color: var(--muted);
+}
+
+.daily-filter-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-weight: 600;
+}
+
+.daily-filter-item input[type='checkbox'] {
+ accent-color: var(--accent);
+}
+
+.daily-filter-controls,
+/* Keeps a label and its select on the same line when the row wraps. */
+.daily-filter-group {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.daily-filters input[type='time'],
+.daily-filters select {
+ font: inherit;
+ color: var(--ink);
+ background: var(--icon-button-bg);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 3px 6px;
+}
+
+.daily-filters input[type='time']:disabled,
+.daily-filters select:disabled {
+ opacity: 0.45;
+}
+
.uptime-history-figure {
margin: 0;
display: flex;
diff --git a/site/uptime-history-chart.js b/site/uptime-history-chart.js
index 3dbaf5d..f326ee2 100644
--- a/site/uptime-history-chart.js
+++ b/site/uptime-history-chart.js
@@ -19,6 +19,11 @@ const uptimeHistoryDateFormatter = new Intl.DateTimeFormat(undefined, {
timeZone: 'UTC',
});
+const uptimeHistoryMonthFormatter = new Intl.DateTimeFormat(undefined, {
+ month: 'short',
+ timeZone: 'UTC',
+});
+
const formatUptimeHistoryDate = (value) =>
uptimeHistoryDateFormatter.format(value instanceof Date ? value : new Date(value));
@@ -40,51 +45,19 @@ const collectUptimeHistoryIntervals = (entries) =>
)
.sort((a, b) => a[0] - b[0]);
-const computeUptimeHistorySeries = (intervals, startMs, endMs) => {
- const series = [];
- for (let dayStart = startMs; dayStart < endMs; dayStart += UPTIME_HISTORY_ONE_DAY_MS) {
- const windowEnd = dayStart + UPTIME_HISTORY_ONE_DAY_MS;
- const windowStart = windowEnd - UPTIME_HISTORY_WINDOW_MS;
-
- let downtimeMs = 0;
- let mergedStart = -1;
- let mergedEnd = -1;
- for (let i = 0; i < intervals.length; i += 1) {
- const [entryStart, entryEnd] = intervals[i];
- if (entryEnd <= windowStart) continue;
- if (entryStart >= windowEnd) break;
- const clipStart = entryStart > windowStart ? entryStart : windowStart;
- const clipEnd = entryEnd < windowEnd ? entryEnd : windowEnd;
- if (clipEnd <= clipStart) continue;
- if (mergedStart < 0) {
- mergedStart = clipStart;
- mergedEnd = clipEnd;
- } else if (clipStart <= mergedEnd) {
- if (clipEnd > mergedEnd) mergedEnd = clipEnd;
- } else {
- downtimeMs += mergedEnd - mergedStart;
- mergedStart = clipStart;
- mergedEnd = clipEnd;
- }
- }
- if (mergedStart >= 0) downtimeMs += mergedEnd - mergedStart;
-
- const uptime = Math.max(0, 1 - downtimeMs / UPTIME_HISTORY_WINDOW_MS) * 100;
- series.push({ time: dayStart, uptime });
- }
- return series;
-};
-
-const computeLifetimeUptime = (intervals, startMs, endMs) => {
+// Merged downtime inside [windowStart, windowEnd). Intervals must be sorted by
+// start; overlapping entries are merged as they are clipped so double-reported
+// incidents never count twice.
+const uptimeHistoryDowntimeWithin = (intervals, windowStart, windowEnd) => {
let downtimeMs = 0;
let mergedStart = -1;
let mergedEnd = -1;
for (let i = 0; i < intervals.length; i += 1) {
const [entryStart, entryEnd] = intervals[i];
- if (entryEnd <= startMs) continue;
- if (entryStart >= endMs) break;
- const clipStart = entryStart > startMs ? entryStart : startMs;
- const clipEnd = entryEnd < endMs ? entryEnd : endMs;
+ if (entryEnd <= windowStart) continue;
+ if (entryStart >= windowEnd) break;
+ const clipStart = entryStart > windowStart ? entryStart : windowStart;
+ const clipEnd = entryEnd < windowEnd ? entryEnd : windowEnd;
if (clipEnd <= clipStart) continue;
if (mergedStart < 0) {
mergedStart = clipStart;
@@ -98,14 +71,287 @@ const computeLifetimeUptime = (intervals, startMs, endMs) => {
}
}
if (mergedStart >= 0) downtimeMs += mergedEnd - mergedStart;
+ return downtimeMs;
+};
+// windowMs is the trailing window each point summarizes: 90 days for the rolling
+// view, one day for the daily view (where the window IS the day itself).
+const computeUptimeHistorySeries = (intervals, startMs, endMs, windowMs = UPTIME_HISTORY_WINDOW_MS) => {
+ const series = [];
+ for (let dayStart = startMs; dayStart < endMs; dayStart += UPTIME_HISTORY_ONE_DAY_MS) {
+ const windowEnd = dayStart + UPTIME_HISTORY_ONE_DAY_MS;
+ const windowStart = windowEnd - windowMs;
+ const downtimeMs = uptimeHistoryDowntimeWithin(intervals, windowStart, windowEnd);
+ const uptime = Math.max(0, 1 - downtimeMs / windowMs) * 100;
+ series.push({ time: dayStart, uptime });
+ }
+ return series;
+};
+
+// Wall-clock time in an arbitrary IANA zone -> epoch ms, DST-aware. Formatters are
+// cached because the work-hours series calls this twice per day over ~1500 days.
+const uptimeHistoryTzFormatters = new Map();
+const uptimeHistoryTzFormatter = (timeZone) => {
+ let formatter = uptimeHistoryTzFormatters.get(timeZone);
+ if (!formatter) {
+ formatter = new Intl.DateTimeFormat('en-US', {
+ timeZone,
+ hourCycle: 'h23',
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ second: 'numeric',
+ });
+ uptimeHistoryTzFormatters.set(timeZone, formatter);
+ }
+ return formatter;
+};
+
+const uptimeHistoryTzOffsetMs = (ts, timeZone) => {
+ const values = {};
+ uptimeHistoryTzFormatter(timeZone)
+ .formatToParts(ts)
+ .forEach((part) => {
+ if (part.type !== 'literal') values[part.type] = Number(part.value);
+ });
+ const asUTC = Date.UTC(
+ values.year,
+ values.month - 1,
+ values.day,
+ values.hour,
+ values.minute,
+ values.second,
+ );
+ return asUTC - ts;
+};
+
+const uptimeHistoryZonedMs = (year, month, day, minutes, timeZone) => {
+ const naive = Date.UTC(year, month, day, 0, minutes);
+ // First guess assumes the zone's offset at the naive instant; the second pass
+ // corrects the guess when the window straddles a DST transition.
+ let ts = naive - uptimeHistoryTzOffsetMs(naive, timeZone);
+ ts = naive - uptimeHistoryTzOffsetMs(ts, timeZone);
+ return ts;
+};
+
+// Daily series restricted to working hours: each point covers only
+// [startMinutes, endMinutes) of its calendar day, evaluated in `timeZone`.
+// Points carry their downtime and window length so the caller can aggregate a
+// work-hours lifetime figure without recomputing.
+const computeWorkHoursDailySeries = (intervals, startMs, endMs, workWindow) => {
+ const { startMinutes, endMinutes, timeZone, weekdaysOnly } = workWindow;
+ const series = [];
+ for (let dayStart = startMs; dayStart < endMs; dayStart += UPTIME_HISTORY_ONE_DAY_MS) {
+ const date = new Date(dayStart);
+ if (weekdaysOnly) {
+ const weekday = date.getUTCDay();
+ if (weekday === 0 || weekday === 6) continue;
+ }
+ const windowStart = uptimeHistoryZonedMs(
+ date.getUTCFullYear(),
+ date.getUTCMonth(),
+ date.getUTCDate(),
+ startMinutes,
+ timeZone,
+ );
+ const windowEnd = uptimeHistoryZonedMs(
+ date.getUTCFullYear(),
+ date.getUTCMonth(),
+ date.getUTCDate(),
+ endMinutes,
+ timeZone,
+ );
+ const windowMs = windowEnd - windowStart;
+ if (windowMs <= 0) continue;
+ const downtimeMs = uptimeHistoryDowntimeWithin(intervals, windowStart, windowEnd);
+ const uptime = Math.max(0, 1 - downtimeMs / windowMs) * 100;
+ series.push({ time: dayStart, uptime, downtimeMs, windowMs });
+ }
+ return series;
+};
+
+const computeLifetimeUptime = (intervals, startMs, endMs) => {
+ const downtimeMs = uptimeHistoryDowntimeWithin(intervals, startMs, endMs);
const totalMs = Math.max(1, endMs - startMs);
return Math.max(0, 1 - downtimeMs / totalMs) * 100;
};
-const buildUptimeHistorySVG = (series, layout = UPTIME_HISTORY_LAYOUT) => {
+// The three y axes the daily view offers. Each answers a different question:
+// linear -- how much of the day was up, read straight off the axis
+// log-uptime -- how bad was a bad day: 3% and 0.3% separate, 90-100% squeezes
+// log-downtime -- how good was a good day: the "nines", where 99.9% and 99% separate
+const UPTIME_Y_SCALE_MODES = ['linear', 'log-uptime', 'log-downtime'];
+
+// Gridline candidates for the log-uptime axis, densest where that axis stretches.
+// Thinned to whatever the plot height can fit; the linear axis keeps its own even step.
+const UPTIME_LOG_TICK_LADDER = [1, 2, 3, 5, 7, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100];
+
+// 1-2-5 per decade, the conventional log ladder. Used in *downtime* percent, so
+// 0.01 is "four nines" and 100 is a day that was down from end to end.
+const decadeLadder = (min, max) => {
+ const out = [];
+ for (let exp = -3; exp <= 2; exp += 1) {
+ [1, 2, 5].forEach((mantissa) => {
+ const value = Number((mantissa * Math.pow(10, exp)).toPrecision(12));
+ if (value >= min - 1e-12 && value <= max + 1e-12) out.push(value);
+ });
+ }
+ return out;
+};
+
+const powerOfTenAtOrBelow = (value) => Math.pow(10, Math.floor(Math.log10(value)));
+
+// Keep ticks from the top down, dropping any that would crowd the one above it. The
+// axis floor is never dropped -- it labels the end of the scale -- so whatever crowds
+// it goes instead.
+const thinTicks = (candidates, ratio, plotH, minGapPx) => {
+ const kept = [];
+ candidates.forEach((value, index) => {
+ const isFloor = index === candidates.length - 1;
+ const gap = kept.length ? (ratio(kept[kept.length - 1]) - ratio(value)) * plotH : Infinity;
+ if (gap >= minGapPx) {
+ kept.push(value);
+ } else if (isFloor) {
+ while (kept.length > 1 && (ratio(kept[kept.length - 1]) - ratio(value)) * plotH < minGapPx) {
+ kept.pop();
+ }
+ kept.push(value);
+ }
+ });
+ return kept;
+};
+
+// The y axis for both renderers: a domain sized off the data, a bottom-anchored 0..1
+// position for a value, the tick values, and how to label them.
+const makeUptimeYScale = (series, mode = 'linear') => {
+ const yMax = 100;
+ let dataMin = 100;
+ let minDowntime = Infinity; // smallest dip that is not a perfect day
+ let maxDowntime = 0;
+ series.forEach((point) => {
+ if (point.uptime < dataMin) dataMin = point.uptime;
+ const downtime = 100 - point.uptime;
+ if (downtime > 0 && downtime < minDowntime) minDowntime = downtime;
+ if (downtime > maxDowntime) maxDowntime = downtime;
+ });
+
+ if (mode === 'log-downtime') {
+ // Position tracks log10(downtime), inverted so 100% stays at the top. log10(0) is
+ // undefined and perfect days are the common case, so the axis stops one decade
+ // below the smallest real dip: only a zero-downtime day can reach the top line,
+ // which is why that line is labelled a flat 100%.
+ const top = Number.isFinite(minDowntime)
+ ? Math.min(1, Math.max(0.001, powerOfTenAtOrBelow(minDowntime)))
+ : 0.01;
+ const ladder = decadeLadder(top, 100);
+ const bottom =
+ maxDowntime > 0
+ ? ladder.find((value) => value >= maxDowntime - 1e-12) || 100
+ : Math.min(1, top * 100);
+ const logTop = Math.log10(top);
+ const logBottom = Math.log10(bottom);
+ const span = logBottom - logTop;
+
+ const ratio = (value) => {
+ const downtime = Math.min(bottom, Math.max(top, 100 - value));
+ return (logBottom - Math.log10(downtime)) / span;
+ };
+
+ return {
+ yMin: 100 - bottom,
+ yMax,
+ mode,
+ ratio,
+ ticks: (plotH, minGapPx = 26) => {
+ const ladder = decadeLadder(top, bottom).filter((downtime) => downtime > top + 1e-12);
+ const fits = (value, kept) =>
+ kept.every((other) => Math.abs(ratio(value) - ratio(other)) * plotH >= minGapPx);
+ // The nines themselves -- 99.9, 99, 90 -- are the labels this axis exists for,
+ // so the decades are placed first and the 2/5 steps only fill what is left.
+ // 100 rather than 100 - top: the two share a pixel row, and 100 is both the
+ // shorter label and the truthful one for everything that can land there.
+ const kept = [100];
+ ladder
+ .filter((downtime) => Math.abs(Math.log10(downtime) % 1) < 1e-9)
+ .concat(bottom)
+ .forEach((downtime) => {
+ const value = 100 - downtime;
+ if (!kept.includes(value) && fits(value, kept)) kept.push(value);
+ });
+ ladder.forEach((downtime) => {
+ const value = 100 - downtime;
+ if (!kept.includes(value) && fits(value, kept)) kept.push(value);
+ });
+ return kept.sort((a, b) => b - a);
+ },
+ // Enough decimals to tell one gridline from the next, and no more: 99.99, 99.9,
+ // 99, 90, 0. toPrecision first, or 100 - 99.9 = 0.09999... asks for one decimal
+ // too many.
+ format: (value) => {
+ const downtime = Number((100 - value).toPrecision(12));
+ const decimals =
+ downtime > 0 ? Math.max(0, Math.min(3, Math.ceil(-Math.log10(downtime)))) : 0;
+ return `${value.toFixed(decimals)}%`;
+ },
+ };
+ }
+
+ const logUptime = mode === 'log-uptime';
+ // Same floor either way, so switching between these two redistributes the axis
+ // without also moving its ends.
+ const linearMin = Math.max(0, Math.min(85, Math.floor(dataMin / 5) * 5 - 5));
+ // A full-day outage reads 0% and log10(0) is undefined, so the log domain stops at 1%
+ // and anything below it clamps to the baseline.
+ const yMin = logUptime ? Math.max(1, linearMin) : linearMin;
+ const logMin = Math.log10(yMin);
+ const span = logUptime ? Math.log10(yMax) - logMin : yMax - yMin;
+
+ const ratio = (value) => {
+ const clamped = Math.min(yMax, Math.max(yMin, value));
+ return logUptime ? (Math.log10(clamped) - logMin) / span : (clamped - yMin) / span;
+ };
+
+ return {
+ yMin,
+ yMax,
+ mode: logUptime ? 'log-uptime' : 'linear',
+ ratio,
+ ticks: (plotH, minGapPx = 26) => {
+ if (!logUptime) {
+ // A fixed 5% step is right for the rolling view's few-percent span but draws 21
+ // gridlines across a 0-100% one, so pick the smallest step that lands on both
+ // edges with at most 8 lines.
+ const step = [5, 10, 20, 25].find((s) => span % s === 0 && span / s <= 8) || 5;
+ const out = [];
+ for (let tick = yMax; tick >= yMin - 1e-9; tick -= step) out.push(tick);
+ return out;
+ }
+ const candidates = UPTIME_LOG_TICK_LADDER.filter((v) => v > yMin && v <= yMax)
+ .sort((a, b) => b - a)
+ .concat(yMin);
+ return thinTicks(candidates, ratio, plotH, minGapPx);
+ },
+ format: (value) => `${value.toFixed(0)}%`,
+ };
+};
+
+const buildUptimeHistorySVG = (series, layout = UPTIME_HISTORY_LAYOUT, opts = {}) => {
if (!series.length) return { markup: '', geometry: null };
+ const {
+ ariaLabel = 'GitHub Platform 90-day rolling uptime since project start',
+ // The daily series pins its peak at 100% for most of its life, so a "peak"
+ // annotation says nothing there; the rolling view keeps it.
+ showPeak = true,
+ lowLabel = 'low',
+ // Two SVGs share the page (daily and rolling); gradient ids must not collide or
+ // the hidden chart's defs would answer the visible chart's url() references.
+ gradientId = 'uptimeHistory',
+ yScaleMode = 'linear',
+ } = opts;
+
const { width, height, marginLeft, marginRight, marginTop, marginBottom } = layout;
const plotW = width - marginLeft - marginRight;
const plotH = height - marginTop - marginBottom;
@@ -114,19 +360,12 @@ const buildUptimeHistorySVG = (series, layout = UPTIME_HISTORY_LAYOUT) => {
const xMax = series[series.length - 1].time;
const xSpan = Math.max(1, xMax - xMin);
- let dataMin = 100;
- for (let i = 0; i < series.length; i += 1) {
- if (series[i].uptime < dataMin) dataMin = series[i].uptime;
- }
- const yMin = Math.max(0, Math.min(85, Math.floor(dataMin / 5) * 5 - 5));
- const yMax = 100;
+ const yScale = makeUptimeYScale(series, yScaleMode);
+ const { yMin, yMax } = yScale;
const ySpan = yMax - yMin;
const xAt = (time) => marginLeft + ((time - xMin) / xSpan) * plotW;
- const yAt = (value) => {
- const clamped = Math.min(yMax, Math.max(yMin, value));
- return marginTop + (1 - (clamped - yMin) / ySpan) * plotH;
- };
+ const yAt = (value) => marginTop + (1 - yScale.ratio(value)) * plotH;
const baselineY = marginTop + plotH;
const points = series
@@ -139,15 +378,33 @@ const buildUptimeHistorySVG = (series, layout = UPTIME_HISTORY_LAYOUT) => {
.join(' ') +
` L ${xAt(series[series.length - 1].time).toFixed(2)},${baselineY.toFixed(2)} Z`;
- const yTicks = [];
- for (let tick = 100; tick >= yMin - 1e-9; tick -= 5) yTicks.push(tick);
+ const yTicks = yScale.ticks(plotH);
const startDate = new Date(xMin);
const endDate = new Date(xMax);
- const xTicks = [];
- for (let year = startDate.getUTCFullYear(); year <= endDate.getUTCFullYear(); year += 1) {
- const candidate = Date.UTC(year, 0, 1);
- if (candidate >= xMin && candidate <= xMax) xTicks.push({ year, time: candidate });
+ // Year ticks label a multi-year span but leave a two-month window with a bare
+ // axis, so short ranges tick by month instead (thinned to at most 8 labels).
+ let xTicks = [];
+ if (xSpan / UPTIME_HISTORY_ONE_DAY_MS <= 400) {
+ let year = startDate.getUTCFullYear();
+ let month = startDate.getUTCMonth() + 1;
+ for (;;) {
+ const candidate = Date.UTC(year, month, 1);
+ if (candidate > xMax) break;
+ if (candidate >= xMin) {
+ xTicks.push({ label: uptimeHistoryMonthFormatter.format(candidate), time: candidate });
+ }
+ month += 1;
+ }
+ const stride = Math.ceil(xTicks.length / 8);
+ if (stride > 1) xTicks = xTicks.filter((_, index) => index % stride === 0);
+ } else {
+ for (let year = startDate.getUTCFullYear(); year <= endDate.getUTCFullYear(); year += 1) {
+ const candidate = Date.UTC(year, 0, 1);
+ if (candidate >= xMin && candidate <= xMax) {
+ xTicks.push({ label: String(year), time: candidate });
+ }
+ }
}
const lastPoint = series[series.length - 1];
@@ -189,16 +446,16 @@ const buildUptimeHistorySVG = (series, layout = UPTIME_HISTORY_LAYOUT) => {
parts.push(
`');
return {
markup: parts.join(''),
- geometry: { marginLeft, marginTop, plotW, plotH, xMin, xSpan, yMin, yMax, width, height },
+ geometry: {
+ marginLeft,
+ marginTop,
+ plotW,
+ plotH,
+ xMin,
+ xSpan,
+ yMin,
+ yMax,
+ // The cursor has to land on the line it is tracking, so it shares the scale
+ // rather than assuming the axis is linear.
+ yRatio: yScale.ratio,
+ width,
+ height,
+ },
};
};
@@ -340,18 +620,30 @@ const nearestUptimePoint = (series, geometry, clientX, svgEl) => {
const localX = (clientX - box.left) / scale;
const ratio = (localX - geometry.marginLeft) / geometry.plotW;
const clamped = Math.min(1, Math.max(0, ratio));
- const index = Math.round(clamped * (series.length - 1));
+ // Search by time, not by index-as-ratio: the weekdays-only series has weekend
+ // gaps, so points are not uniformly spaced along the x axis.
+ const target = geometry.xMin + clamped * geometry.xSpan;
+ let lo = 0;
+ let hi = series.length - 1;
+ while (lo < hi) {
+ const mid = (lo + hi) >> 1;
+ if (series[mid].time < target) lo = mid + 1;
+ else hi = mid;
+ }
+ const index =
+ lo > 0 && target - series[lo - 1].time <= series[lo].time - target ? lo - 1 : lo;
return { index, point: series[index] };
};
-// Clicking a point scopes the incident timeline to the 90-day window that produced
-// it, turning "there is a dip in May 2026" into the incidents that caused it.
-const focusTimelineOn = (point) => {
+// Clicking a point scopes the incident timeline to the window that produced it,
+// turning "there is a dip in May 2026" into the incidents that caused it. For the
+// daily view that window is the single clicked day.
+const focusTimelineOn = (point, windowDays = UPTIME_HISTORY_WINDOW_DAYS) => {
const from = document.querySelector('[data-range-from]');
const to = document.querySelector('[data-range-to]');
if (!from || !to) return false;
const end = new Date(point.time);
- const start = new Date(point.time - (UPTIME_HISTORY_WINDOW_DAYS - 1) * UPTIME_HISTORY_ONE_DAY_MS);
+ const start = new Date(point.time - (windowDays - 1) * UPTIME_HISTORY_ONE_DAY_MS);
const iso = (d) => d.toISOString().slice(0, 10);
from.value = iso(start);
to.value = iso(end);
@@ -361,7 +653,8 @@ const focusTimelineOn = (point) => {
return true;
};
-const attachUptimeHistoryInteraction = (container, series, geometry) => {
+const attachUptimeHistoryInteraction = (container, series, geometry, opts = {}) => {
+ const windowDays = opts.windowDays || UPTIME_HISTORY_WINDOW_DAYS;
const svgEl = container.querySelector('svg');
const cursor = svgEl && svgEl.querySelector('.uptime-cursor');
const line = cursor && cursor.querySelector('.uptime-cursor-line');
@@ -389,19 +682,21 @@ const attachUptimeHistoryInteraction = (container, series, geometry) => {
line.setAttribute('x1', cx.toFixed(2));
line.setAttribute('x2', cx.toFixed(2));
- const clamped = Math.min(geometry.yMax, Math.max(geometry.yMin, point.uptime));
- const cy =
- geometry.marginTop +
- (1 - (clamped - geometry.yMin) / (geometry.yMax - geometry.yMin)) * geometry.plotH;
+ const cy = geometry.marginTop + (1 - geometry.yRatio(point.uptime)) * geometry.plotH;
dot.setAttribute('cx', cx.toFixed(2));
dot.setAttribute('cy', cy.toFixed(2));
cursor.setAttribute('opacity', '1');
- const windowStart = new Date(point.time - (UPTIME_HISTORY_WINDOW_DAYS - 1) * UPTIME_HISTORY_ONE_DAY_MS);
+ const windowStart = new Date(point.time - (windowDays - 1) * UPTIME_HISTORY_ONE_DAY_MS);
+ const scope =
+ opts.tooltipScope ||
+ (windowDays === 1
+ ? 'uptime on this day (UTC)'
+ : `over the ${windowDays} days from ${formatUptimeHistoryDate(windowStart)}`);
tooltip.innerHTML =
`
` +
``;
tooltip.classList.add('active');
tooltip.setAttribute('aria-hidden', 'false');
@@ -425,7 +720,7 @@ const attachUptimeHistoryInteraction = (container, series, geometry) => {
svgEl.addEventListener('pointerdown', onMove);
svgEl.addEventListener('pointerleave', hide);
svgEl.addEventListener('click', () => {
- if (active >= 0) focusTimelineOn(series[active]);
+ if (active >= 0) focusTimelineOn(series[active], windowDays);
});
// Replacing innerHTML discards the old SVG along with its listeners, but the
@@ -438,6 +733,9 @@ const attachUptimeHistoryInteraction = (container, series, geometry) => {
lastIndex: () => series.length - 1,
activeIndex: () => active,
pointAt: (index) => series[index],
+ // The container-level keydown handler is bound once but must use the window of
+ // whichever render published this controller last.
+ windowDays,
};
container.tabIndex = 0;
@@ -460,7 +758,7 @@ const attachUptimeHistoryInteraction = (container, series, geometry) => {
c.show(Math.min(c.lastIndex(), Math.max(0, next)));
} else if (event.key === 'Enter' && current >= 0) {
event.preventDefault();
- focusTimelineOn(c.pointAt(current));
+ focusTimelineOn(c.pointAt(current), c.windowDays);
} else if (event.key === 'Escape') {
c.hide();
}
@@ -470,20 +768,64 @@ const attachUptimeHistoryInteraction = (container, series, geometry) => {
const renderUptimeHistoryChart = (windowEntries, rangeEnd, options = {}) => {
const projectStartMs = options.projectStartUTC ?? PROJECT_START_UTC;
const endMs = rangeEnd instanceof Date ? rangeEnd.getTime() : Number(rangeEnd);
+ const windowDays = options.windowDays || UPTIME_HISTORY_WINDOW_DAYS;
+ const daily = windowDays === 1;
const intervals = collectUptimeHistoryIntervals(windowEntries);
- const series = computeUptimeHistorySeries(intervals, projectStartMs, endMs);
- const lifetimeUptime = computeLifetimeUptime(intervals, projectStartMs, endMs);
+ const workWindow = daily ? options.workWindow || null : null;
+ const series = workWindow
+ ? computeWorkHoursDailySeries(intervals, projectStartMs, endMs, workWindow)
+ : computeUptimeHistorySeries(
+ intervals,
+ projectStartMs,
+ endMs,
+ windowDays * UPTIME_HISTORY_ONE_DAY_MS,
+ );
+
+ // With a work-hours filter the lifetime figure must honor it too: total downtime
+ // inside the filtered windows over total filtered time, not calendar time.
+ let lifetimeUptime;
+ if (workWindow) {
+ let downtimeMs = 0;
+ let totalMs = 0;
+ series.forEach((point) => {
+ downtimeMs += point.downtimeMs;
+ totalMs += point.windowMs;
+ });
+ lifetimeUptime = totalMs > 0 ? Math.max(0, 1 - downtimeMs / totalMs) * 100 : 100;
+ } else {
+ lifetimeUptime = computeLifetimeUptime(intervals, projectStartMs, endMs);
+ }
const captionSelector = options.captionTarget || '#uptimeHistoryCaption';
const chartSelector = options.chartTarget || '#uptimeHistoryImage';
+ const svgOpts = {
+ ariaLabel:
+ options.ariaLabel ||
+ (daily
+ ? 'GitHub Platform daily uptime since project start'
+ : 'GitHub Platform 90-day rolling uptime since project start'),
+ showPeak: !daily,
+ lowLabel: daily ? 'worst day' : 'low',
+ gradientId: daily ? 'uptimeDaily' : 'uptimeHistory',
+ // Only the daily view offers the axis control; the rolling view already spans a
+ // few percent, where a log axis is indistinguishable from a linear one.
+ yScaleMode: daily && UPTIME_Y_SCALE_MODES.includes(options.yScaleMode)
+ ? options.yScaleMode
+ : 'linear',
+ };
+
// Only the methodology is left. The start date is already on the x-axis as
// "start: Jun 11, 2022", the lifetime figure is in the stat strip, and the hover
// hint is redundant with the crosshair cursor and the container's aria-label.
const caption = document.querySelector(captionSelector);
if (caption) {
- caption.textContent = '90-day rolling window · non-maintenance downtime, merged windows';
+ caption.textContent =
+ options.caption ||
+ (daily
+ ? 'uptime per UTC day · non-maintenance downtime, merged windows'
+ : '90-day rolling window · non-maintenance downtime, merged windows');
}
const chartContainer = document.querySelector(chartSelector);
@@ -508,10 +850,13 @@ const renderUptimeHistoryChart = (windowEntries, rangeEnd, options = {}) => {
const draw = () => {
const width = contentWidth();
const layout = options.layout || layoutForWidth(width);
- const { markup, geometry } = buildUptimeHistorySVG(series, layout);
+ const { markup, geometry } = buildUptimeHistorySVG(series, layout, svgOpts);
chartContainer.innerHTML = markup;
drawnWidth = layout.width;
- attachUptimeHistoryInteraction(chartContainer, series, geometry);
+ attachUptimeHistoryInteraction(chartContainer, series, geometry, {
+ windowDays,
+ tooltipScope: options.tooltipScope,
+ });
// A draw can land while the container measures zero (hidden panel, mid-layout
// reflow) and fall back to the default width. Nothing resizes afterwards, so the
@@ -560,9 +905,14 @@ const renderUptimeHistoryChart = (windowEntries, rangeEnd, options = {}) => {
var UptimeHistoryChart = {
render: renderUptimeHistoryChart,
computeUptimeHistorySeries,
+ computeWorkHoursDailySeries,
computeLifetimeUptime,
collectDowntimeIntervals: collectUptimeHistoryIntervals,
buildSVG: buildUptimeHistorySVG,
+ // The share card redraws the same series on a canvas; it takes the axis from here so
+ // the PNG cannot disagree with the page about where a point sits.
+ makeYScale: makeUptimeYScale,
+ Y_SCALE_MODES: UPTIME_Y_SCALE_MODES,
formatUTCDate: formatUptimeHistoryDate,
PROJECT_START_UTC,
WINDOW_DAYS: UPTIME_HISTORY_WINDOW_DAYS,
${formatUptimeHistoryDate(point.time)}
` +
`${point.uptime.toFixed(2)}%` +
- `over the 90 days from ${formatUptimeHistoryDate(windowStart)}
` +
+ `${scope}