More code written by chatGPT :D
This commit is contained in:
parent
0c4ddda0d5
commit
e82c2a5d10
@ -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);
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user