website/flightlesssomething
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backup incomplete, but working new version

Browse Source
This commit is contained in:
Erikas 2024-08-05 18:57:50 +03:00
parent 9771fd7448
commit 8668d82748
2 changed files with 144 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
static/js/benchmark.js
View File

@ -1,3 +1,26 @@
document.addEventListener('DOMContentLoaded', function () {
var converter = new showdown.Converter();
var aiSummaryHTMLElement = document.getElementById('aiSummaryMarkdown');
// Create an Intersection Observer
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
// Element is visible, render the Markdown
var htmlContents = converter.makeHtml(aiSummaryHTMLElement.innerText);
aiSummaryHTMLElement.innerHTML = htmlContents;
// Stop observing after rendering
observer.unobserve(aiSummaryHTMLElement);
}
});
}, { threshold: 1.0 });
// Start observing the element
observer.observe(aiSummaryHTMLElement);
});
// ===========================================================================================
// Common chart options
const commonChartOptions = {
chart: {backgroundColor: null, style: {color: '#FFFFFF'}, animation: false},
@ -16,6 +39,8 @@ Highcharts.setOptions({chart: {animation: false}, plotOptions: {series: {animati
const colors = Highcharts.getOptions().colors;
// ===========================================================================================
function getLineChartOptions(title, description, unit, maxY = null) {
return {
...commonChartOptions,
@ -32,6 +57,42 @@ function getLineChartOptions(title, description, unit, maxY = null) {
};
}
function createChart(chartId, title, description, unit, dataArrays, maxY = null) {
const options = getLineChartOptions(title, description, unit, maxY);
options.series = dataArrays.map((dataArray, index) => ({name: dataArray.label, data: dataArray.data, color: colors[index % colors.length]}));
Highcharts.chart(chartId, options);
}
// Create line charts
createChart('fpsChart', 'FPS', 'More is better', 'fps', fpsDataArrays);
createChart('fpsChart2', 'FPS', 'More is better', 'fps', fpsDataArrays);
createChart('frameTimeChart', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
createChart('frameTimeChart2', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
createChart('cpuLoadChart', 'CPU Load', '', '%', cpuLoadDataArrays, 100);
createChart('gpuLoadChart', 'GPU Load', '', '%', gpuLoadDataArrays, 100);
createChart('cpuTempChart', 'CPU Temperature', '', '°C', cpuTempDataArrays);
createChart('gpuTempChart', 'GPU Temperature', '', '°C', gpuTempDataArrays);
createChart('gpuCoreClockChart', 'GPU Core Clock', '', 'MHz', gpuCoreClockDataArrays);
createChart('gpuMemClockChart', 'GPU Memory Clock', '', 'MHz', gpuMemClockDataArrays);
createChart('gpuVRAMUsedChart', 'GPU VRAM Usage', '', 'GB', gpuVRAMUsedDataArrays);
createChart('gpuPowerChart', 'GPU Power', '', 'W', gpuPowerDataArrays);
createChart('ramUsedChart', 'RAM Usage', '', 'GB', ramUsedDataArrays);
createChart('swapUsedChart', 'SWAP Usage', '', 'GB', swapUsedDataArrays);
// ===========================================================================================
function calculateAverage(data) {
return data.reduce((acc, value) => acc + value, 0) / data.length;
}
// Calculate average CPU, GPU, GPU Core clock and GPU memory clock load
const fpsAverages = fpsDataArrays.map(dataArray => calculateAverage(dataArray.data));
const frametimeAverages = frameTimeDataArrays.map(dataArray => calculateAverage(dataArray.data));
const cpuLoadAverages = cpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
const gpuLoadAverages = gpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
const gpuCoreClockAverages = gpuCoreClockDataArrays.map(dataArray => calculateAverage(dataArray.data));
const gpuMemClockAverages = gpuMemClockDataArrays.map(dataArray => calculateAverage(dataArray.data));
function getBarChartOptions(title, unit, maxY = null) {
return {
...commonChartOptions,
@ -46,12 +107,6 @@ function getBarChartOptions(title, unit, maxY = null) {
};
}
function createChart(chartId, title, description, unit, dataArrays, maxY = null) {
const options = getLineChartOptions(title, description, unit, maxY);
options.series = dataArrays.map((dataArray, index) => ({name: dataArray.label, data: dataArray.data, color: colors[index % colors.length]}));
Highcharts.chart(chartId, options);
}
function createBarChart(chartId, title, unit, categories, data, colors, maxY = null) {
const options = getBarChartOptions(title, unit, maxY);
options.xAxis.categories = categories;
@ -59,37 +114,21 @@ function createBarChart(chartId, title, unit, categories, data, colors, maxY = n
Highcharts.chart(chartId, options);
}
function calculateAverage(data) {
return data.reduce((acc, value) => acc + value, 0) / data.length;
}
// Create bar charts for average CPU, GPU, GPU Core clock and GPU memory clock load
createBarChart('fpsSummaryChart', 'Average FPS', 'fps', fpsDataArrays.map(dataArray => dataArray.label), fpsAverages, colors, 100);
createBarChart('frametimeSummaryChart', 'Average Frametime', 'ms', frameTimeDataArrays.map(dataArray => dataArray.label), frametimeAverages, colors, 100);
createBarChart('cpuLoadSummaryChart', 'Average CPU Load', '%', cpuLoadDataArrays.map(dataArray => dataArray.label), cpuLoadAverages, colors, 100);
createBarChart('gpuLoadSummaryChart', 'Average GPU Load', '%', gpuLoadDataArrays.map(dataArray => dataArray.label), gpuLoadAverages, colors, 100);
createBarChart('gpuCoreClockSummaryChart', 'Average GPU Core Clock', 'Hz', gpuCoreClockDataArrays.map(dataArray => dataArray.label), gpuCoreClockAverages, colors);
createBarChart('gpuMemClockSummaryChart', 'Average GPU Memory Clock', 'Hz', gpuMemClockDataArrays.map(dataArray => dataArray.label), gpuMemClockAverages, colors);
// ===========================================================================================
function calculatePercentile(data, percentile) {
data.sort((a, b) => a - b);
return data[Math.ceil(percentile / 100 * data.length) - 1];
}
// Create line charts
createChart('fpsChart', 'FPS', 'More is better', 'fps', fpsDataArrays);
createChart('frameTimeChart', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
createChart('cpuLoadChart', 'CPU Load', '', '%', cpuLoadDataArrays, 100);
createChart('gpuLoadChart', 'GPU Load', '', '%', gpuLoadDataArrays, 100);
createChart('cpuTempChart', 'CPU Temperature', '', '°C', cpuTempDataArrays);
createChart('gpuTempChart', 'GPU Temperature', '', '°C', gpuTempDataArrays);
createChart('gpuCoreClockChart', 'GPU Core Clock', '', 'MHz', gpuCoreClockDataArrays);
createChart('gpuMemClockChart', 'GPU Memory Clock', '', 'MHz', gpuMemClockDataArrays);
createChart('gpuVRAMUsedChart', 'GPU VRAM Usage', '', 'GB', gpuVRAMUsedDataArrays);
createChart('gpuPowerChart', 'GPU Power', '', 'W', gpuPowerDataArrays);
createChart('ramUsedChart', 'RAM Usage', '', 'GB', ramUsedDataArrays);
createChart('swapUsedChart', 'SWAP Usage', '', 'GB', swapUsedDataArrays);
// Calculate average CPU and GPU load
const cpuLoadAverages = cpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
const gpuLoadAverages = gpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
// Create bar charts for average CPU and GPU load
createBarChart('cpuLoadSummaryChart', 'Average CPU Load', '%', cpuLoadDataArrays.map(dataArray => dataArray.label), cpuLoadAverages, colors, 100);
createBarChart('gpuLoadSummaryChart', 'Average GPU Load', '%', gpuLoadDataArrays.map(dataArray => dataArray.label), gpuLoadAverages, colors, 100);
// Calculate and render min, max, and average FPS
const categories = [];
const minFPSData = [];
@ -103,7 +142,7 @@ fpsDataArrays.forEach(dataArray => {
maxFPSData.push(calculatePercentile(dataArray.data, 97));
});
Highcharts.chart('minMaxAvgChart', {
Highcharts.chart('fpsMinMaxAvgChart', {
...commonChartOptions,
chart: {...commonChartOptions.chart, type: 'bar'},
title: {...commonChartOptions.title, text: 'Min/Avg/Max FPS'},
@ -141,7 +180,7 @@ const sortedCategories = sortedData.map(item => item.label);
const sortedPercentageFPSData = sortedData.map(item => item.percentage);
// Create bar chart for FPS percentage
Highcharts.chart('avgChart', {
Highcharts.chart('fpsAvgChart', {
...commonChartOptions,
chart: {...commonChartOptions.chart, type: 'bar'},
title: {...commonChartOptions.title, text: 'Avg FPS comparison in %'},
@ -194,7 +233,7 @@ function countFPS(data) {
const densityData = fpsDataArrays.map(dataArray => ({name: dataArray.label, data: countFPS(filterOutliers(dataArray.data))}));
// Create the chart
Highcharts.chart('densityChart', {
Highcharts.chart('fpsDensityChart', {
...commonChartOptions,
chart: {...commonChartOptions.chart, type: 'areaspline'},
title: {...commonChartOptions.title, text: 'FPS Density'},
@ -222,7 +261,7 @@ const sdvCategories = fpsDataArrays.map(dataArray => dataArray.label);
const standardDeviations = fpsDataArrays.map(dataArray => calculateStandardDeviation(dataArray.data));
const variances = fpsDataArrays.map(dataArray => calculateVariance(dataArray.data));
Highcharts.chart('sdvChart', {
Highcharts.chart('fpsStddevVarianceChart', {
...commonChartOptions,
chart: {...commonChartOptions.chart, type: 'bar'},
title: {...commonChartOptions.title, text: 'FPS Stability'},

99
templates/benchmark.tmpl
View File

@ -50,18 +50,76 @@
</div>
</div>
<div id="fpsChart" style="height:250pt;"></div>
<div id="frameTimeChart" style="height:250pt;"></div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="fps-tab" data-bs-toggle="tab" data-bs-target="#fps" type="button" role="tab" aria-controls="fps" aria-selected="false"><i class="fas fa-tachometer-alt"></i> FPS</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="frametime-tab" data-bs-toggle="tab" data-bs-target="#frametime" type="button" role="tab" aria-controls="frametime" aria-selected="false"><i class="fas fa-clock"></i> Frametime</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true"><i class="fas fa-chart-bar"></i> Summary</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="more-metrics-tab" data-bs-toggle="tab" data-bs-target="#more-metrics" type="button" role="tab" aria-controls="more-metrics" aria-selected="true"><i class="fas fa-chart-line"></i> All data</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button id="hideAdditionalMetricsBtn" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Additional metrics
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<!-- FPS tab -->
<div class="tab-pane fade show active" id="fps" role="tabpanel" aria-labelledby="fps-tab">
<div id="fpsChart2" style="height:250pt;"></div>
<div id="fpsMinMaxAvgChart" style="height:500pt;"></div>
<div id="fpsDensityChart" style="height:250pt;"></div>
<div id="fpsAvgChart" style="height:250pt;"></div>
<div id="fpsStddevVarianceChart" style="height:400pt;"></div>
</div>
<!-- Frametime tab -->
<div class="tab-pane fade" id="frametime" role="tabpanel" aria-labelledby="frametime-tab">
<div id="frameTimeChart2" style="height:250pt;"></div>
</div>
<!-- Summary tab -->
<div class="tab-pane" id="summary" role="tabpanel" aria-labelledby="summary-tab">
<div class="row">
<div class="col-md-12 text-center" id="aiSummaryMarkdown">
<!-- TODO: markdown placeholder for AI summary -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="fpsSummaryChart" style="height:250pt;"></div>
</div>
<div class="col-md-6">
<div id="frametimeSummaryChart" style="height:250pt;"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="cpuLoadSummaryChart" style="height:250pt;"></div>
</div>
<div class="col-md-6">
<div id="gpuLoadSummaryChart" style="height:250pt;"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="gpuCoreClockSummaryChart" style="height:250pt;"></div>
</div>
<div class="col-md-6">
<div id="gpuMemClockSummaryChart" style="height:250pt;"></div>
</div>
</div>
</div>
<!-- More metrics tab -->
<div class="tab-pane" id="more-metrics" role="tabpanel" aria-labelledby="more-metrics-tab">
<div id="fpsChart" style="height:250pt;"></div>
<div id="frameTimeChart" style="height:250pt;"></div>
<div id="cpuLoadChart" style="height:250pt;"></div>
<div id="gpuLoadChart" style="height:250pt;"></div>
<div id="cpuTempChart" style="height:250pt;"></div>
@ -72,33 +130,16 @@
<div id="gpuPowerChart" style="height:250pt;"></div>
<div id="ramUsedChart" style="height:250pt;"></div>
<div id="swapUsedChart" style="height:250pt;"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="cpuLoadSummaryChart" style="height:250pt;"></div>
</div>
<div class="col-md-6">
<div id="gpuLoadSummaryChart" style="height:250pt;"></div>
</div>
</div>
<div id="minMaxAvgChart" style="height:500pt;"></div>
<div id="avgChart" style="height:250pt;"></div>
<div id="densityChart" style="height:250pt;"></div>
<div id="sdvChart" style="height:400pt;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script>
var fpsDataArrays = [