Skip to content

Commit

Permalink
plots combine samples of a version
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeandroTreu
LeandroTreu committed May 3, 2024
1 parent 49f8eb2 commit 5bba0d9
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 131 deletions.
14 changes: 13 additions & 1 deletion profile_parser/js/plot_cpu_util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = __importDefault(require("fs"));
const nodeplotlib_1 = require("nodeplotlib");
const PLOT_FILES_IN_ONE_GRAPH = true;
// The files should be ordered according to version benchmarked
// Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
const TRACES_PER_VERSION = 3; // Number of samples/traces per version
const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 500; // Adjust for sampling resolution / smoothing
const files_in_directory = fs_1.default.readdirSync("results");
let data = [];
Expand All @@ -14,6 +18,9 @@ const layout = {
xaxis: { title: "Time (s)" },
yaxis: { title: "Utilization (%)", range: [0, 100] },
};
let plot_index = 0;
let plot_colors = ["green", "red", "orange", "blue", "purple", "black"];
let line_color = plot_colors[0];
for (let i = 0; i < files_in_directory.length; ++i) {
const filename = files_in_directory[i];
const filenamejsonsuffix = filename.substring(filename.length - 5, filename.length);
Expand Down Expand Up @@ -52,6 +59,9 @@ for (let i = 0; i < files_in_directory.length; ++i) {
window_start = window_start + window_size;
window_end = window_start + window_size;
}
if (plot_index % TRACES_PER_VERSION === 0) {
line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)];
}
const plot_filename = filename.replace("result-", "");
const line = {
x: x_axis,
Expand All @@ -60,13 +70,15 @@ for (let i = 0; i < files_in_directory.length; ++i) {
name: plot_filename,
mode: 'lines',
line: {
width: 1
width: 1,
color: line_color,
}
};
data.push(line);
if (!PLOT_FILES_IN_ONE_GRAPH) {
(0, nodeplotlib_1.plot)(data, layout);
}
plot_index++;
}
}
if (PLOT_FILES_IN_ONE_GRAPH) {
Expand Down
116 changes: 64 additions & 52 deletions profile_parser/js/plot_frametime_histogram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ const nodeplotlib_1 = require("nodeplotlib");
// Very short tasks (< 2ms) don't correspond to frames drawn.
const MIN_FRAME_DURATION = 2000;
const MAX_BIN_X_VALUE = 200;
// The files should be ordered according to version benchmarked
// Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
const TRACES_PER_VERSION = 3; // Number of samples/traces per version
let sample_index = 0;
let x_array = [];
const files_in_directory = fs_1.default.readdirSync("results");
for (let i = 0; i < files_in_directory.length; ++i) {
const filename = files_in_directory[i];
Expand All @@ -19,8 +25,7 @@ for (let i = 0; i < files_in_directory.length; ++i) {
const file_data = fs_1.default.readFileSync(file_path, { encoding: 'utf8' });
const timeline = JSON.parse(file_data);
const frames = timeline.tasks;
let data = [];
let x_array = [];
// Push data to x_array
for (let i = 0; i < frames.length; ++i) {
const event = frames[i];
if (event.dur > MIN_FRAME_DURATION) {
Expand All @@ -31,56 +36,63 @@ for (let i = 0; i < files_in_directory.length; ++i) {
x_array.push(event_dur_ms);
}
}
const hist = {
x: x_array,
type: 'histogram',
autobinx: false,
xbins: {
start: 0,
size: 1,
end: 1000
},
marker: {
color: 'green'
}
};
data.push(hist);
const plot_filename = filename.replace("result-", "");
const layout = {
title: "Frametime Histogram for " + plot_filename,
xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE] },
yaxis: { title: "Count" },
shapes: [
// 60 fps line
{
type: "line",
x0: 16.7,
y0: 0,
x1: 16.7,
y1: 1.0,
yref: "paper",
line: {
color: 'orange',
width: 1,
dot: 'dot'
}
},
// 30 fps line
{
type: "line",
x0: 33.4,
y0: 0,
x1: 33.4,
y1: 1.0,
yref: "paper",
line: {
color: 'red',
width: 1,
dot: 'dot'
}
sample_index++;
// Plot aggregated x_array data if all samples have been parsed
if (sample_index !== 0 && sample_index % TRACES_PER_VERSION === 0) {
let data = [];
const hist = {
x: x_array,
type: 'histogram',
autobinx: false,
xbins: {
start: 0,
size: 1,
end: 1000
},
]
};
(0, nodeplotlib_1.plot)(data, layout);
marker: {
color: 'green'
}
};
data.push(hist);
const plot_filename = filename.replace("result-", "");
const layout = {
title: "Frametime Histogram for " + plot_filename,
xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE] },
yaxis: { title: "Count" },
shapes: [
// 60 fps line
{
type: "line",
x0: 16.7,
y0: 0,
x1: 16.7,
y1: 1.0,
yref: "paper",
line: {
color: 'orange',
width: 1,
dot: 'dot'
}
},
// 30 fps line
{
type: "line",
x0: 33.4,
y0: 0,
x1: 33.4,
y1: 1.0,
yref: "paper",
line: {
color: 'red',
width: 1,
dot: 'dot'
}
},
]
};
(0, nodeplotlib_1.plot)(data, layout);
// Reset array
x_array = [];
}
}
}
59 changes: 48 additions & 11 deletions profile_parser/js/plot_stats_comparison.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = __importDefault(require("fs"));
const nodeplotlib_1 = require("nodeplotlib");
// The files should be ordered according to version benchmarked
// Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
const TRACES_PER_VERSION = 3; // Number of samples/traces per version
let sample_index = 0;
let avg_frametimes = [];
let median_frametimes = [];
let percentile_frametimes = [];
const files_in_directory = fs_1.default.readdirSync("results");
let data = [];
for (let i = 0; i < files_in_directory.length; ++i) {
Expand All @@ -21,17 +29,46 @@ for (let i = 0; i < files_in_directory.length; ++i) {
const median_frametime = stats.MedianFrameTime;
const percentile_frametime = stats["95thPercentileFrameTime"];
const plot_filename = filename.replace("result-", "");
const y_values = [avg_frametime, median_frametime, percentile_frametime];
const bar = {
x: ["Average", "Median", "95th Percentile"],
y: y_values,
type: 'bar',
name: plot_filename,
text: y_values.map(String),
textposition: "auto",
hoverinfo: "none"
};
data.push(bar);
avg_frametimes.push(avg_frametime);
median_frametimes.push(median_frametime);
percentile_frametimes.push(percentile_frametime);
sample_index++;
if (sample_index !== 0 && sample_index % TRACES_PER_VERSION === 0) {
avg_frametimes.sort((a, b) => a - b);
median_frametimes.sort((a, b) => a - b);
percentile_frametimes.sort((a, b) => a - b);
const median_avg_ft = avg_frametimes[Math.floor(avg_frametimes.length / 2)];
const median_m_ft = median_frametimes[Math.floor(median_frametimes.length / 2)];
const median_p_ft = percentile_frametimes[Math.floor(percentile_frametimes.length / 2)];
const minus_deltas = [median_avg_ft - avg_frametimes[0],
median_m_ft - median_frametimes[0],
median_p_ft - percentile_frametimes[0]];
const plus_deltas = [avg_frametimes[avg_frametimes.length - 1] - median_avg_ft,
median_frametimes[median_frametimes.length - 1] - median_m_ft,
percentile_frametimes[percentile_frametimes.length - 1] - median_p_ft];
const y_values = [median_avg_ft, median_m_ft, median_p_ft];
const bar = {
x: ["Average", "Median", "95th Percentile"],
y: y_values,
type: 'bar',
name: plot_filename,
text: y_values.map(String),
textposition: "auto",
hoverinfo: "none",
error_y: {
type: 'data',
symmetric: false,
array: plus_deltas,
arrayminus: minus_deltas,
visible: true
},
};
data.push(bar);
// Reset arrays for next bucket of samples
avg_frametimes = [];
median_frametimes = [];
percentile_frametimes = [];
}
}
}
const layout = {
Expand Down
16 changes: 14 additions & 2 deletions profile_parser/src/plot_cpu_util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import fs from 'fs';
import { plot, Plot } from 'nodeplotlib';

const PLOT_FILES_IN_ONE_GRAPH = true;
// The files should be ordered according to version benchmarked
// Each consecutive TRACES_PER_VERSION number of files get put in the same bucket
const N_VERSIONS = 2; // Number of different benchmark versions to compare (each version gets a color in the graph)
const TRACES_PER_VERSION = 3; // Number of samples/traces per version
const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 500; // Adjust for sampling resolution / smoothing

const files_in_directory = fs.readdirSync("results");
Expand All @@ -13,6 +17,10 @@ const layout = {
yaxis: {title: "Utilization (%)", range: [0, 100]},
}

let plot_index = 0;
let plot_colors = ["green", "red", "orange", "blue", "purple", "black"];
let line_color = plot_colors[0];

for (let i = 0; i < files_in_directory.length; ++i) {
const filename = files_in_directory[i];
const filenamejsonsuffix = filename.substring(filename.length - 5, filename.length)
Expand Down Expand Up @@ -62,7 +70,9 @@ for (let i = 0; i < files_in_directory.length; ++i) {
window_end = window_start + window_size;
}


if (plot_index % TRACES_PER_VERSION === 0) {
line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)]
}
const plot_filename = filename.replace("result-", "");
const line: Plot = {
x: x_axis,
Expand All @@ -71,14 +81,16 @@ for (let i = 0; i < files_in_directory.length; ++i) {
name: plot_filename,
mode: 'lines',
line: {
width: 1
width: 1,
color: line_color,
}
};
data.push(line);
if (!PLOT_FILES_IN_ONE_GRAPH) {
plot(data, layout);
}

plot_index++;
}

}
Expand Down
Loading

0 comments on commit 5bba0d9

Please sign in to comment.