More code written by chatGPT :D

This commit is contained in:
Erikas 2024-07-29 22:27:31 +03:00
parent 0c4ddda0d5
commit e82c2a5d10
2 changed files with 29 additions and 50 deletions

View File

@ -206,51 +206,35 @@ Highcharts.chart('densityChart', {
series: densityData series: densityData
}); });
function calculateSpikes(data, threshold) { function calculateStandardDeviation(data) {
if (data.length < 6) throw new Error("Data length must be greater than or equal to 6."); const mean = calculateAverage(data);
const squaredDiffs = data.map(value => Math.pow(value - mean, 2));
let spikeCount = 0; const avgSquaredDiff = calculateAverage(squaredDiffs);
return Math.sqrt(avgSquaredDiff);
function movingAverage(arr, index) {
const windowSize = Math.max(6, Math.ceil(arr.length * 0.05));
const halfWindowSize = Math.floor(windowSize / 2);
const start = Math.max(0, index - halfWindowSize);
const end = Math.min(arr.length - 1, index + halfWindowSize);
const actualWindowSize = end - start + 1;
let sum = 0;
for (let i = start; i <= end; i++) sum += arr[i];
return sum / actualWindowSize;
} }
for (let i = 0; i < data.length; i++) { function calculateVariance(data) {
const currentPoint = data[i]; const mean = calculateAverage(data);
const movingAvg = movingAverage(data, i); const squaredDiffs = data.map(value => Math.pow(value - mean, 2));
const change = Math.abs(currentPoint - movingAvg) / movingAvg * 100; return calculateAverage(squaredDiffs);
if (change > threshold) spikeCount++;
} }
return (spikeCount / data.length) * 100; const sdvCategories = fpsDataArrays.map(dataArray => dataArray.label);
} const standardDeviations = fpsDataArrays.map(dataArray => calculateStandardDeviation(dataArray.data));
const variances = fpsDataArrays.map(dataArray => calculateVariance(dataArray.data));
function updateSpikesChart(threshold) { Highcharts.chart('sdvChart', {
document.getElementById('spikeThresholdValue').innerText = threshold + '%';
const spikePercentages = fpsDataArrays.map(dataArray => calculateSpikes(dataArray.data, threshold));
Highcharts.chart('spikesChart', {
...commonChartOptions, ...commonChartOptions,
chart: {...commonChartOptions.chart, type: 'bar'}, chart: {...commonChartOptions.chart, type: 'bar'},
title: {...commonChartOptions.title, text: 'FPS Spikes'}, title: {...commonChartOptions.title, text: 'FPS Stability'},
subtitle: {...commonChartOptions.subtitle, text: 'Less is better'}, subtitle: {...commonChartOptions.subtitle, text: 'Measures of FPS consistency (std. dev.) and spread (variance). Less is better.'},
xAxis: {...commonChartOptions.xAxis, categories: categories}, xAxis: {...commonChartOptions.xAxis, categories: sdvCategories},
yAxis: {...commonChartOptions.yAxis, title: {text: 'Percentage (%)', align: 'high', style: {color: '#FFFFFF'}}}, yAxis: {...commonChartOptions.yAxis, title: {text: 'Value', align: 'high', style: {color: '#FFFFFF'}}},
tooltip: {...commonChartOptions.tooltip, valueSuffix: ' %', formatter: function() {return `<b>${this.point.category}</b>: ${this.y.toFixed(2)} %`;}}, tooltip: {...commonChartOptions.tooltip, formatter: function() {return `<b>${this.series.name}</b>: ${this.y.toFixed(2)}`;}},
plotOptions: {bar: {dataLabels: {enabled: true, style: {color: '#FFFFFF'}, formatter: function() {return this.y.toFixed(2) + ' %';}}}}, plotOptions: {bar: {dataLabels: {enabled: true, style: {color: '#FFFFFF'}, formatter: function() {return this.y.toFixed(2);}}}},
legend: {enabled: false}, legend: {...commonChartOptions.legend, enabled: true},
series: [{name: 'Spike Percentage', data: spikePercentages, colorByPoint: true, colors: colors}] series: [
{name: 'Std. Dev.', data: standardDeviations, color: '#FF5733'},
{name: 'Variance', data: variances, color: '#33FF57'}
]
}); });
}
// Initial render of spikes chart
updateSpikesChart(document.getElementById('spikeThreshold').value);

View File

@ -92,12 +92,7 @@
<div id="densityChart" style="height:250pt;"></div> <div id="densityChart" style="height:250pt;"></div>
<div> <div id="sdvChart" style="height:400pt;"></div>
<label for="spikeThreshold" style="color: #FFFFFF;">Ignore Spike Threshold (%):</label>
<input type="range" id="spikeThreshold" name="spikeThreshold" min="5" max="150" value="50" oninput="updateSpikesChart(this.value)">
<span id="spikeThresholdValue" style="color: #FFFFFF;">50%</span>
<div id="spikesChart" style="height:250pt;"></div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script> <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/exporting.js"></script>