backup incomplete, but working new version
This commit is contained in:
Erikas
parent
9771fd7448
commit
8668d82748
@ -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'},
|
||||
|
||||
@ -50,30 +50,50 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fpsChart" style="height:250pt;"></div>
|
||||
<div id="frameTimeChart" style="height:250pt;"></div>
|
||||
|
||||
<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">
|
||||
|
||||
<div id="cpuLoadChart" style="height:250pt;"></div>
|
||||
<div id="gpuLoadChart" style="height:250pt;"></div>
|
||||
<div id="cpuTempChart" style="height:250pt;"></div>
|
||||
<div id="gpuTempChart" style="height:250pt;"></div>
|
||||
<div id="gpuCoreClockChart" style="height:250pt;"></div>
|
||||
<div id="gpuMemClockChart" style="height:250pt;"></div>
|
||||
<div id="gpuVRAMUsedChart" style="height:250pt;"></div>
|
||||
<div id="gpuPowerChart" style="height:250pt;"></div>
|
||||
<div id="ramUsedChart" style="height:250pt;"></div>
|
||||
<div id="swapUsedChart" 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">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@ -86,19 +106,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="minMaxAvgChart" style="height:500pt;"></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>
|
||||
|
||||
<div id="avgChart" style="height:250pt;"></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>
|
||||
<div id="gpuTempChart" style="height:250pt;"></div>
|
||||
<div id="gpuCoreClockChart" style="height:250pt;"></div>
|
||||
<div id="gpuMemClockChart" style="height:250pt;"></div>
|
||||
<div id="gpuVRAMUsedChart" style="height:250pt;"></div>
|
||||
<div id="gpuPowerChart" style="height:250pt;"></div>
|
||||
<div id="ramUsedChart" style="height:250pt;"></div>
|
||||
<div id="swapUsedChart" style="height:250pt;"></div>
|
||||
</div>
|
||||
|
||||
<div id="densityChart" style="height:250pt;"></div>
|
||||
|
||||
<div id="sdvChart" style="height:400pt;"></div>
|
||||
</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 = [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user