mirror of
https://github.com/fastfetch-cli/fastfetch.git
synced 2026-10-28 02:31:25 +01:00
CI (macOS): optimises benchmark charts
This commit is contained in:
@@ -59,13 +59,14 @@
|
|||||||
.legend-item.is-hidden .legend-swatch { opacity: .35; }
|
.legend-item.is-hidden .legend-swatch { opacity: .35; }
|
||||||
.chart-tooltip { position: fixed; z-index: 1000; pointer-events: none; width: min(90vw, 900px); max-height: calc(100vh - 24px); overflow: hidden; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); color: var(--text); box-shadow: 0 10px 30px #0f172a33; font-size: .8rem; opacity: 0; transition: opacity .1s ease; }
|
.chart-tooltip { position: fixed; z-index: 1000; pointer-events: none; width: min(90vw, 900px); max-height: calc(100vh - 24px); overflow: hidden; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); color: var(--text); box-shadow: 0 10px 30px #0f172a33; font-size: .8rem; opacity: 0; transition: opacity .1s ease; }
|
||||||
.chart-tooltip-title { margin-bottom: .35rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
|
.chart-tooltip-title { margin-bottom: .35rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
|
||||||
|
.chart-tooltip-message { margin-bottom: .35rem; color: var(--muted); font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
|
||||||
.chart-tooltip-body { max-height: calc(100vh - 76px); overflow: auto; columns: 220px auto; column-gap: 1.5rem; }
|
.chart-tooltip-body { max-height: calc(100vh - 76px); overflow: auto; columns: 220px auto; column-gap: 1.5rem; }
|
||||||
.chart-tooltip-row { display: flex; align-items: center; gap: .45rem; break-inside: avoid; white-space: nowrap; }
|
.chart-tooltip-row { display: flex; align-items: center; gap: .45rem; break-inside: avoid; white-space: nowrap; }
|
||||||
.chart-tooltip-swatch { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
|
.chart-tooltip-swatch { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
|
||||||
.empty { padding: 2rem 0; color: var(--muted); }
|
.empty { padding: 2rem 0; color: var(--muted); }
|
||||||
</style>
|
</style>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
|
|
||||||
<script src="data.js"></script>
|
<script src="data.js"></script>
|
||||||
|
<script src="https://unpkg.com/chart.js@latest/dist/chart.umd.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@@ -73,11 +74,11 @@
|
|||||||
<h1>Fastfetch Benchmark</h1>
|
<h1>Fastfetch Benchmark</h1>
|
||||||
<button id="theme-toggle" class="theme-toggle" type="button"></button>
|
<button id="theme-toggle" class="theme-toggle" type="button"></button>
|
||||||
</div>
|
</div>
|
||||||
<p class="intro">Performance history grouped by CPU family. Each chart contains all modules and total process time for one operating system and architecture. Module curves are available from the legend and hidden by default.</p>
|
<p class="intro">Performance history grouped by CPU family. Each chart contains all modules and the total process time for one operating system and architecture. All metric series are shown by default except total process time, module Weather, and module PublicIp — toggle any series from the legend below the chart.</p>
|
||||||
<p class="links"><a href="data.js">Download raw benchmark data</a></p>
|
<p class="links"><a href="data.js">Download raw benchmark data</a></p>
|
||||||
</header>
|
</header>
|
||||||
<nav id="tabs" class="tabs" aria-label="CPU architecture"></nav>
|
<nav id="tabs" class="tabs" aria-label="CPU architecture"></nav>
|
||||||
<main id="panels"></main>
|
<main id="panels"><p class="empty">Loading charts…</p></main>
|
||||||
<script>
|
<script>
|
||||||
(() => {
|
(() => {
|
||||||
const benchmarkData = window.BENCHMARK_DATA || {};
|
const benchmarkData = window.BENCHMARK_DATA || {};
|
||||||
@@ -103,11 +104,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function entryMetadata(entry) {
|
function entryMetadata(entry) {
|
||||||
const raw = entry.commit && entry.commit.timestamp || entry.date;
|
const raw = entry.commit?.timestamp ?? entry.date;
|
||||||
const date = new Date(raw);
|
const date = new Date(raw);
|
||||||
return {
|
return {
|
||||||
date: Number.isNaN(date.valueOf()) ? String(entry.date || '') : date.toISOString(),
|
date: Number.isNaN(date.valueOf()) ? String(entry.date ?? '') : date.toISOString(),
|
||||||
sha: entry.commit && entry.commit.id ? entry.commit.id : 'unknown'
|
sha: entry.commit?.id ?? 'unknown',
|
||||||
|
message: entry.commit?.message?.trim() ?? ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -131,6 +133,8 @@
|
|||||||
'#2563eb', '#dc2626', '#16a34a', '#9333ea', '#ea580c', '#0891b2',
|
'#2563eb', '#dc2626', '#16a34a', '#9333ea', '#ea580c', '#0891b2',
|
||||||
'#db2777', '#65a30d', '#4f46e5', '#ca8a04', '#0f766e', '#be123c'
|
'#db2777', '#65a30d', '#4f46e5', '#ca8a04', '#0f766e', '#be123c'
|
||||||
];
|
];
|
||||||
|
// Series hidden on first render; every other metric is shown by default.
|
||||||
|
const hiddenByDefault = new Set(['total process time', 'module Weather', 'module PublicIp']);
|
||||||
const tabs = document.getElementById('tabs');
|
const tabs = document.getElementById('tabs');
|
||||||
const panels = document.getElementById('panels');
|
const panels = document.getElementById('panels');
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
@@ -139,6 +143,13 @@
|
|||||||
let theme = savedTheme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
let theme = savedTheme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
const chartsByInstance = [];
|
const chartsByInstance = [];
|
||||||
|
|
||||||
|
if (!window.Chart) {
|
||||||
|
tabs.hidden = true;
|
||||||
|
panels.innerHTML = '<p class="empty">Failed to load Chart.js.</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
panels.replaceChildren();
|
||||||
|
|
||||||
function chartColors() {
|
function chartColors() {
|
||||||
const styles = getComputedStyle(root);
|
const styles = getComputedStyle(root);
|
||||||
return {
|
return {
|
||||||
@@ -167,6 +178,12 @@
|
|||||||
const row = chart._benchmarkRows[tooltip.dataPoints[0].dataIndex];
|
const row = chart._benchmarkRows[tooltip.dataPoints[0].dataIndex];
|
||||||
title.textContent = `${new Date(row.date).toLocaleString()} · ${row.sha}`;
|
title.textContent = `${new Date(row.date).toLocaleString()} · ${row.sha}`;
|
||||||
tooltipElement.appendChild(title);
|
tooltipElement.appendChild(title);
|
||||||
|
if (row.message) {
|
||||||
|
const message = document.createElement('div');
|
||||||
|
message.className = 'chart-tooltip-message';
|
||||||
|
message.textContent = row.message;
|
||||||
|
tooltipElement.appendChild(message);
|
||||||
|
}
|
||||||
const bodyElement = document.createElement('div');
|
const bodyElement = document.createElement('div');
|
||||||
bodyElement.className = 'chart-tooltip-body';
|
bodyElement.className = 'chart-tooltip-body';
|
||||||
for (const body of [...tooltip.dataPoints].sort((a, b) => b.parsed.y - a.parsed.y)) {
|
for (const body of [...tooltip.dataPoints].sort((a, b) => b.parsed.y - a.parsed.y)) {
|
||||||
@@ -229,7 +246,9 @@
|
|||||||
families.get(family).push({ key, rows });
|
families.get(family).push({ key, rows });
|
||||||
}
|
}
|
||||||
|
|
||||||
const familyOrder = ['Intel', 'ARM', 'Other'];
|
// 'Other' is intentionally not rendered: it only catches stray series (e.g. the retired
|
||||||
|
// 'macos universal' records) that should not show up as their own tab
|
||||||
|
const familyOrder = ['Intel', 'ARM'];
|
||||||
const availableFamilies = familyOrder.filter(family => families.has(family));
|
const availableFamilies = familyOrder.filter(family => families.has(family));
|
||||||
|
|
||||||
for (const [index, family] of availableFamilies.entries()) {
|
for (const [index, family] of availableFamilies.entries()) {
|
||||||
@@ -311,7 +330,7 @@
|
|||||||
pointRadius: 3,
|
pointRadius: 3,
|
||||||
tension: 0.2,
|
tension: 0.2,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
hidden: metric !== 'total process time'
|
hidden: hiddenByDefault.has(metric)
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
@@ -373,7 +392,7 @@
|
|||||||
chart.update();
|
chart.update();
|
||||||
});
|
});
|
||||||
addLegendAction('Reset', () => {
|
addLegendAction('Reset', () => {
|
||||||
metrics.forEach((metric, metricIndex) => chart.setDatasetVisibility(metricIndex, metric === 'total process time'));
|
metrics.forEach((metric, metricIndex) => chart.setDatasetVisibility(metricIndex, !hiddenByDefault.has(metric)));
|
||||||
refreshLegend();
|
refreshLegend();
|
||||||
chart.update();
|
chart.update();
|
||||||
});
|
});
|
||||||
@@ -395,7 +414,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!groups.size) {
|
if (!availableFamilies.length) {
|
||||||
tabs.hidden = true;
|
tabs.hidden = true;
|
||||||
panels.innerHTML = '<p class="empty">No benchmark data available.</p>';
|
panels.innerHTML = '<p class="empty">No benchmark data available.</p>';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ jobs:
|
|||||||
run: |
|
run: |
|
||||||
real_seconds=$(awk '$1 == "real" { print $2 }' fastfetch.time)
|
real_seconds=$(awk '$1 == "real" { print $2 }' fastfetch.time)
|
||||||
jq -e 'type == "array"' fastfetch.json > /dev/null
|
jq -e 'type == "array"' fastfetch.json > /dev/null
|
||||||
jq --arg platform "macos" --arg arch "universal" --argjson real_seconds "$real_seconds" '
|
jq --arg platform "macos" --arg arch "aarch64" --argjson real_seconds "$real_seconds" '
|
||||||
map(select(.stat | type == "number") | {
|
map(select(.stat | type == "number") | {
|
||||||
name: ("fastfetch " + $platform + " " + $arch + " module " + .type),
|
name: ("fastfetch " + $platform + " " + $arch + " module " + .type),
|
||||||
unit: "ms",
|
unit: "ms",
|
||||||
|
|||||||
Reference in New Issue
Block a user