+
+
+
+
+ data points
+
+ {loadingMetrics.size > 0 && (
+
+
+ Loading {loadingMetrics.size} metric(s)...
+
+ )}
+
+
+ {metricList.map(function (metricKey, mi) {
+ var parts = metricKey.split('::');
+ var source = parts[0];
+ var type = parts[1];
+ var metricResults = metricData[metricKey] || {};
+
+ // Build chart data: merge all iterations into a unified elapsed-time dataset
+ // With breakouts, each breakout label becomes a separate line per iteration
+ var allPoints = []; // { elapsed, lineKey, value }
+ var lineKeys = []; // { key, label (display), iterationId }
+ var lineColors = {};
+ var colorIdx = 0;
+
+ iterations.forEach(function (it) {
+ var result = metricResults[it.iterationId];
+ if (!result || !result.values) return;
+ var iterLabel = buildIterShortLabel(it, iterations);
+
+ var periodBegin = Number(result.periodBegin);
+ var labelKeys = Object.keys(result.values);
+
+ labelKeys.forEach(function (lk) {
+ var entries = result.values[lk];
+ if (!Array.isArray(entries)) return;
+ // Build a unique line key: "iterLabel" or "iterLabel
" if breakouts
+ var lineKey = labelKeys.length > 1 ? iterLabel + ' ' + lk : iterLabel;
+ var displayLabel = lineKey;
+ if (!lineKeys.find(function (l) { return l.key === lineKey; })) {
+ lineKeys.push({ key: lineKey, label: displayLabel, iterationId: it.iterationId });
+ lineColors[lineKey] = COLORS[colorIdx % COLORS.length];
+ colorIdx++;
+ }
+ entries.forEach(function (entry) {
+ var elapsed = (Number(entry.begin) + Number(entry.end)) / 2 - periodBegin;
+ allPoints.push({ elapsed: elapsed, lineKey: lineKey, value: entry.value });
+ });
+ });
+ });
+
+ // Build unified time axis
+ var timeSet = new Set();
+ allPoints.forEach(function (p) { timeSet.add(p.elapsed); });
+ var times = Array.from(timeSet).sort(function (a, b) { return a - b; });
+
+ // Build chart data array
+ var chartData = times.map(function (t) {
+ return { elapsed: t };
+ });
+
+ // Index for fast lookup
+ var timeIndex = {};
+ times.forEach(function (t, i) { timeIndex[t] = i; });
+
+ // Fill in values per line
+ allPoints.forEach(function (p) {
+ var idx = timeIndex[p.elapsed];
+ if (idx != null) {
+ chartData[idx][p.lineKey] = p.value;
+ }
+ });
+
+ var hasData = lineKeys.length > 0 && chartData.length > 0;
+
+ // Build legend data: group by iteration, then by breakout segments
+ var legendByIter = {};
+ lineKeys.forEach(function (lk) {
+ var itId = lk.iterationId;
+ if (!legendByIter[itId]) legendByIter[itId] = { iterLabel: '', items: [] };
+ // Extract breakout label from key (key = "iterLabel" or "iterLabel ")
+ var iterLabel = buildIterShortLabel(iterations.find(function (it) { return it.iterationId === itId; }), iterations);
+ legendByIter[itId].iterLabel = iterLabel;
+ var breakoutPart = lk.key.substring(iterLabel.length).trim();
+ var segments = breakoutPart ? parseSegments(breakoutPart) : [];
+ legendByIter[itId].items.push({ key: lk.key, segments: segments, color: lineColors[lk.key] });
+ });
+
+ // Sort items within each iteration by segments
+ Object.values(legendByIter).forEach(function (group) {
+ group.items.sort(function (a, b) {
+ for (var i = 0; i < Math.max(a.segments.length, b.segments.length); i++) {
+ var cmp = naturalCompare(a.segments[i] || '', b.segments[i] || '');
+ if (cmp !== 0) return cmp;
+ }
+ return 0;
+ });
+ });
+
+ // Get breakout dimension names from config
+ var config = configLookup[metricKey] || {};
+ var breakoutNames = (config.breakouts || []).map(function (b) {
+ var eqIdx = b.indexOf('=');
+ return eqIdx >= 0 ? b.substring(0, eqIdx) : b;
+ });
+
+ // Get active entry: find nearest data point to the shared elapsed time
+ var activeElapsed = pinnedElapsed != null ? pinnedElapsed : hoverElapsed;
+ var isPinned = pinnedElapsed != null;
+ var activeEntry = null;
+ if (activeElapsed != null && chartData.length > 0) {
+ // Binary-ish search for nearest elapsed time in this chart's data
+ var bestIdx = 0;
+ var bestDiff = Math.abs(chartData[0].elapsed - activeElapsed);
+ for (var ai = 1; ai < chartData.length; ai++) {
+ var diff = Math.abs(chartData[ai].elapsed - activeElapsed);
+ if (diff < bestDiff) { bestDiff = diff; bestIdx = ai; }
+ if (chartData[ai].elapsed > activeElapsed) break; // sorted, can stop early
+ }
+ activeEntry = chartData[bestIdx];
+ }
+
+ return (
+
+
{source}::{type}
+ {!hasData && (
+
+ {loadingMetrics.size > 0 ? (
+ <> Loading...
+ ) : 'No data available'}
+
+ )}
+ {hasData && (
+ <>
+
+
+
+
+
+ ; }}
+ cursor={{ stroke: 'var(--text-muted)', strokeWidth: 1, strokeDasharray: '3 3' }}
+ />
+ {activeEntry && (
+
+ )}
+ {lineKeys.map(function (lk) {
+ return (
+
+ );
+ })}
+
+
+
+ {/* Series legend table */}
+
+
+ {activeEntry ? (
+
+ {isPinned ? '\u{1F512} ' : ''}{formatElapsed(activeEntry.elapsed)}
+ {isPinned && }
+
+ ) : (
+ Move pointer over chart to see values
+ )}
+
+
+ {Object.keys(legendByIter).map(function (itId) {
+ var group = legendByIter[itId];
+ return (
+
+
{group.iterLabel}
+
+
+
+ |
+ {breakoutNames.map(function (name, ni) {
+ return {name} | ;
+ })}
+ {breakoutNames.length === 0 && Series | }
+ Value |
+
+
+
+ {group.items.map(function (item) {
+ var value = activeEntry ? activeEntry[item.key] : null;
+ return (
+
+ |
+ {item.segments.length > 0 ? item.segments.map(function (seg, si) {
+ return {seg} | ;
+ }) : - | }
+ {value != null ? formatValue(value) : '-'} |
+
+ );
+ })}
+
+
+
+ );
+ })}
+
+
+
+ )}
+