push a working code
This commit is contained in:
parent
8668d82748
commit
00775d3514
@ -276,3 +276,135 @@ Highcharts.chart('fpsStddevVarianceChart', {
|
|||||||
{name: 'Variance', data: variances, color: '#33FF57'}
|
{name: 'Variance', data: variances, color: '#33FF57'}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ===========================================================================================
|
||||||
|
// Frametime-related charts
|
||||||
|
|
||||||
|
// Calculate and render min, max, and average Frametime
|
||||||
|
const frametimeCategories = [];
|
||||||
|
const minFrametimeData = [];
|
||||||
|
const avgFrametimeData1 = [];
|
||||||
|
const maxFrametimeData = [];
|
||||||
|
|
||||||
|
frameTimeDataArrays.forEach(dataArray => {
|
||||||
|
frametimeCategories.push(dataArray.label);
|
||||||
|
minFrametimeData.push(calculatePercentile(dataArray.data, 1));
|
||||||
|
avgFrametimeData1.push(calculateAverage(dataArray.data));
|
||||||
|
maxFrametimeData.push(calculatePercentile(dataArray.data, 97));
|
||||||
|
});
|
||||||
|
|
||||||
|
Highcharts.chart('frametimeMinMaxAvgChart', {
|
||||||
|
...commonChartOptions,
|
||||||
|
chart: {...commonChartOptions.chart, type: 'bar'},
|
||||||
|
title: {...commonChartOptions.title, text: 'Min/Avg/Max Frametime'},
|
||||||
|
subtitle: {...commonChartOptions.subtitle, text: 'Less is better'},
|
||||||
|
xAxis: {...commonChartOptions.xAxis, categories: frametimeCategories},
|
||||||
|
yAxis: {...commonChartOptions.yAxis, title: {text: 'Frametime (ms)', align: 'high', style: {color: '#FFFFFF'}}},
|
||||||
|
tooltip: {...commonChartOptions.tooltip, valueSuffix: ' ms', formatter: function() {return `<b>${this.series.name}</b>: ${this.y.toFixed(2)} ms`;}},
|
||||||
|
plotOptions: {bar: {dataLabels: {enabled: true, style: {color: '#FFFFFF'}, formatter: function() {return this.y.toFixed(2) + ' ms';}}}},
|
||||||
|
legend: {...commonChartOptions.legend, reversed: true, enabled: true},
|
||||||
|
series: [{name: '97th', data: maxFrametimeData, color: '#00FF00'}, {name: 'AVG', data: avgFrametimeData1, color: '#0000FF'}, {name: '1%', data: minFrametimeData, color: '#FF0000'}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate average Frametime for each filename
|
||||||
|
const avgFrametimeData2 = frameTimeDataArrays.map(dataArray => calculateAverage(dataArray.data));
|
||||||
|
|
||||||
|
// Calculate Frametime as a percentage of the first element
|
||||||
|
const firstFrametime = avgFrametimeData2[0];
|
||||||
|
const percentageFrametimeData = avgFrametimeData2.map(frametime => (frametime / firstFrametime) * 100);
|
||||||
|
|
||||||
|
// Ensure the minimum Frametime percentage is 100%
|
||||||
|
const minFrametimePercentage = Math.min(...percentageFrametimeData);
|
||||||
|
const normalizedPercentageFrametimeData = percentageFrametimeData.map(percentage => percentage - minFrametimePercentage + 100);
|
||||||
|
|
||||||
|
// Create an array of objects to sort both categories and data together
|
||||||
|
const sortedFrametimeData = frameTimeDataArrays.map((dataArray, index) => ({
|
||||||
|
label: dataArray.label,
|
||||||
|
percentage: normalizedPercentageFrametimeData[index]
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Sort the array by percentage
|
||||||
|
sortedFrametimeData.sort((a, b) => a.percentage - b.percentage);
|
||||||
|
|
||||||
|
// Extract sorted categories and data
|
||||||
|
const sortedFrametimeCategories = sortedFrametimeData.map(item => item.label);
|
||||||
|
const sortedPercentageFrametimeData = sortedFrametimeData.map(item => item.percentage);
|
||||||
|
|
||||||
|
// Create bar chart for Frametime percentage
|
||||||
|
Highcharts.chart('frametimeAvgChart', {
|
||||||
|
...commonChartOptions,
|
||||||
|
chart: {...commonChartOptions.chart, type: 'bar'},
|
||||||
|
title: {...commonChartOptions.title, text: 'Avg Frametime comparison in %'},
|
||||||
|
subtitle: {...commonChartOptions.subtitle, text: 'Less is better'},
|
||||||
|
xAxis: {...commonChartOptions.xAxis, categories: sortedFrametimeCategories},
|
||||||
|
yAxis: {...commonChartOptions.yAxis, min: 95, title: {text: 'Percentage (%)', align: 'high', style: {color: '#FFFFFF'}}},
|
||||||
|
tooltip: {...commonChartOptions.tooltip, valueSuffix: ' %', formatter: function() {return `<b>${this.point.category}</b>: ${this.y.toFixed(2)} %`;}},
|
||||||
|
plotOptions: {bar: {dataLabels: {enabled: true, style: {color: '#FFFFFF'}, formatter: function() {return this.y.toFixed(2) + ' %';}}}},
|
||||||
|
legend: {enabled: false},
|
||||||
|
series: [{name: 'Frametime Percentage', data: sortedPercentageFrametimeData, colorByPoint: true, colors: colors}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to count occurrences of each Frametime value
|
||||||
|
function countFrametime(data) {
|
||||||
|
const counts = {};
|
||||||
|
data.forEach(frametime => {
|
||||||
|
const roundedFrametime = Math.round(frametime);
|
||||||
|
counts[roundedFrametime] = (counts[roundedFrametime] || 0) + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
let frametimeArray = Object.keys(counts).map(key => [parseInt(key), counts[key]]).sort((a, b) => a[0] - b[0]);
|
||||||
|
|
||||||
|
while (frametimeArray.length > 100) {
|
||||||
|
let minDiff = Infinity;
|
||||||
|
let minIndex = -1;
|
||||||
|
|
||||||
|
for (let i = 0; i < frametimeArray.length - 1; i++) {
|
||||||
|
const diff = frametimeArray[i + 1][0] - frametimeArray[i][0];
|
||||||
|
if (diff < minDiff) {
|
||||||
|
minDiff = diff;
|
||||||
|
minIndex = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
frametimeArray[minIndex][1] += frametimeArray[minIndex + 1][1];
|
||||||
|
frametimeArray[minIndex][0] = (frametimeArray[minIndex][0] + frametimeArray[minIndex + 1][0]) / 2;
|
||||||
|
frametimeArray.splice(minIndex + 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return frametimeArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate counts for each dataset after filtering outliers
|
||||||
|
const frametimeDensityData = frameTimeDataArrays.map(dataArray => ({name: dataArray.label, data: countFrametime(filterOutliers(dataArray.data))}));
|
||||||
|
|
||||||
|
// Create the chart
|
||||||
|
Highcharts.chart('frametimeDensityChart', {
|
||||||
|
...commonChartOptions,
|
||||||
|
chart: {...commonChartOptions.chart, type: 'areaspline'},
|
||||||
|
title: {...commonChartOptions.title, text: 'Frametime Density'},
|
||||||
|
xAxis: {...commonChartOptions.xAxis, title: {text: 'Frametime (ms)', style: {color: '#FFFFFF'}}, labels: {style: {color: '#FFFFFF'}}}, // Show X-axis labels in white
|
||||||
|
tooltip: {...commonChartOptions.tooltip, shared: true, formatter: function() {return `<b>${this.points[0].series.name}</b>: ${this.points[0].y} points at ~${Math.round(this.points[0].x)} ms`;}},
|
||||||
|
plotOptions: {areaspline: {fillOpacity: 0.5, marker: {enabled: false}}},
|
||||||
|
legend: {...commonChartOptions.legend, enabled: true},
|
||||||
|
series: frametimeDensityData
|
||||||
|
});
|
||||||
|
|
||||||
|
const frametimeSdvCategories = frameTimeDataArrays.map(dataArray => dataArray.label);
|
||||||
|
const frametimeStandardDeviations = frameTimeDataArrays.map(dataArray => calculateStandardDeviation(dataArray.data));
|
||||||
|
const frametimeVariances = frameTimeDataArrays.map(dataArray => calculateVariance(dataArray.data));
|
||||||
|
|
||||||
|
Highcharts.chart('frametimeStddevVarianceChart', {
|
||||||
|
...commonChartOptions,
|
||||||
|
chart: {...commonChartOptions.chart, type: 'bar'},
|
||||||
|
title: {...commonChartOptions.title, text: 'Frametime Stability'},
|
||||||
|
subtitle: {...commonChartOptions.subtitle, text: 'Measures of Frametime consistency (std. dev.) and spread (variance). Less is better.'},
|
||||||
|
xAxis: {...commonChartOptions.xAxis, categories: frametimeSdvCategories},
|
||||||
|
yAxis: {...commonChartOptions.yAxis, title: {text: 'Value', align: 'high', style: {color: '#FFFFFF'}}},
|
||||||
|
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);}}}},
|
||||||
|
legend: {...commonChartOptions.legend, enabled: true},
|
||||||
|
series: [
|
||||||
|
{name: 'Std. Dev.', data: frametimeStandardDeviations, color: '#FF5733'},
|
||||||
|
{name: 'Variance', data: frametimeVariances, color: '#33FF57'}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
@ -78,6 +78,10 @@
|
|||||||
<!-- Frametime tab -->
|
<!-- Frametime tab -->
|
||||||
<div class="tab-pane fade" id="frametime" role="tabpanel" aria-labelledby="frametime-tab">
|
<div class="tab-pane fade" id="frametime" role="tabpanel" aria-labelledby="frametime-tab">
|
||||||
<div id="frameTimeChart2" style="height:250pt;"></div>
|
<div id="frameTimeChart2" style="height:250pt;"></div>
|
||||||
|
<div id="frametimeMinMaxAvgChart" style="height:500pt;"></div>
|
||||||
|
<div id="frametimeDensityChart" style="height:250pt;"></div>
|
||||||
|
<div id="frametimeAvgChart" style="height:250pt;"></div>
|
||||||
|
<div id="frametimeStddevVarianceChart" style="height:400pt;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Summary tab -->
|
<!-- Summary tab -->
|
||||||
|
Loading…
Reference in New Issue
Block a user