From 62be5939cd57b6ac3b65bfcee14e031bdd7c1a06 Mon Sep 17 00:00:00 2001 From: LeandroTreu Date: Thu, 16 May 2024 19:19:03 +0200 Subject: [PATCH] plots visual improvements --- profile_parser/js/color_cfg.js | 14 ++++++++ profile_parser/js/plot_acc_stats.js | 34 +++++++++++------- profile_parser/js/plot_cpu_util.js | 13 ++++--- profile_parser/js/plot_frametime_histogram.js | 27 +++++++++----- profile_parser/js/plot_stats_comparison.js | 34 +++++++++++++----- profile_parser/src/color_cfg.ts | 14 ++++++++ profile_parser/src/plot_acc_stats.ts | 31 +++++++++------- profile_parser/src/plot_cpu_util.ts | 14 +++++--- .../src/plot_frametime_histogram.ts | 29 ++++++++++----- profile_parser/src/plot_stats_comparison.ts | 35 ++++++++++++++----- 10 files changed, 177 insertions(+), 68 deletions(-) create mode 100644 profile_parser/js/color_cfg.js create mode 100644 profile_parser/src/color_cfg.ts diff --git a/profile_parser/js/color_cfg.js b/profile_parser/js/color_cfg.js new file mode 100644 index 0000000..b95d376 --- /dev/null +++ b/profile_parser/js/color_cfg.js @@ -0,0 +1,14 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const BLUE = "#1976D2"; +const GREEN = "#388E3C"; +const ORANGE = "#F9A825"; +const RED = "#E53935"; +const YELLOW = "#FFB300"; +exports.default = { + BLUE, + GREEN, + ORANGE, + RED, + YELLOW, +}; diff --git a/profile_parser/js/plot_acc_stats.js b/profile_parser/js/plot_acc_stats.js index 7723236..2b95d12 100644 --- a/profile_parser/js/plot_acc_stats.js +++ b/profile_parser/js/plot_acc_stats.js @@ -1,14 +1,18 @@ "use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; Object.defineProperty(exports, "__esModule", { value: true }); const nodeplotlib_1 = require("nodeplotlib"); +const color_cfg_1 = __importDefault(require("./color_cfg")); // Scroll let data = []; let benchmarks = []; -benchmarks.push({ name: "Un-optimized", values: [25.8, 23.4, 24.0], color: "red" }); -benchmarks.push({ name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: "orange" }); -benchmarks.push({ name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: "orange" }); -benchmarks.push({ name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: "green" }); -benchmarks.push({ name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: "green" }); +benchmarks.push({ name: "Un-optimized", values: [25.8, 23.4, 24.0], color: color_cfg_1.default.BLUE }); +benchmarks.push({ name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: color_cfg_1.default.ORANGE }); +benchmarks.push({ name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: color_cfg_1.default.ORANGE }); +benchmarks.push({ name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: color_cfg_1.default.GREEN }); +benchmarks.push({ name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: color_cfg_1.default.GREEN }); for (let i = 0; i < benchmarks.length; ++i) { const benchmark = benchmarks[i]; let values = benchmark.values; @@ -30,7 +34,10 @@ for (let i = 0; i < benchmarks.length; ++i) { symmetric: false, array: [values[2] - values[1]], arrayminus: [values[1] - values[0]], - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); @@ -43,11 +50,11 @@ let layout = { // Panning data = []; benchmarks = []; -benchmarks.push({ name: "Un-optimized", values: [17.4, 18.0, 17.4], color: "red" }); -benchmarks.push({ name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: "orange" }); -benchmarks.push({ name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: "orange" }); -benchmarks.push({ name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: "green" }); -benchmarks.push({ name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: "green" }); +benchmarks.push({ name: "Un-optimized", values: [17.4, 18.0, 17.4], color: color_cfg_1.default.BLUE }); +benchmarks.push({ name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: color_cfg_1.default.ORANGE }); +benchmarks.push({ name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: color_cfg_1.default.ORANGE }); +benchmarks.push({ name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: color_cfg_1.default.GREEN }); +benchmarks.push({ name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: color_cfg_1.default.GREEN }); for (let i = 0; i < benchmarks.length; ++i) { const benchmark = benchmarks[i]; let values = benchmark.values; @@ -69,7 +76,10 @@ for (let i = 0; i < benchmarks.length; ++i) { symmetric: false, array: [values[2] - values[1]], arrayminus: [values[1] - values[0]], - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); diff --git a/profile_parser/js/plot_cpu_util.js b/profile_parser/js/plot_cpu_util.js index 16781f4..d2e88ff 100644 --- a/profile_parser/js/plot_cpu_util.js +++ b/profile_parser/js/plot_cpu_util.js @@ -5,21 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); const fs_1 = __importDefault(require("fs")); const nodeplotlib_1 = require("nodeplotlib"); +const color_cfg_1 = __importDefault(require("./color_cfg")); 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 = 250; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms) +const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 100; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms) +const PLOT_TITLE = "Hover Far CPU Utilization"; const files_in_directory = fs_1.default.readdirSync("results"); let data = []; const layout = { - title: "CPU Utilization", - xaxis: { title: "Time (s)" }, + title: PLOT_TITLE, + xaxis: { title: "Time (s)", autotick: false, dtick: 1 }, yaxis: { title: "Utilization (%)", range: [0, 100] }, }; let plot_index = 0; -let plot_colors = ["green", "red", "orange", "blue", "purple", "black"]; +let plot_colors = [color_cfg_1.default.GREEN, color_cfg_1.default.BLUE, color_cfg_1.default.ORANGE, color_cfg_1.default.RED, color_cfg_1.default.YELLOW]; let line_color = plot_colors[0]; for (let i = 0; i < files_in_directory.length; ++i) { const filename = files_in_directory[i]; @@ -62,7 +64,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { if (plot_index % TRACES_PER_VERSION === 0) { line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)]; } - const plot_filename = filename.replace("result-", ""); + let plot_filename = filename.replace("result-", ""); + plot_filename = plot_filename.replace(".json", ""); const line = { x: x_axis, y: cpu_util_samples, diff --git a/profile_parser/js/plot_frametime_histogram.js b/profile_parser/js/plot_frametime_histogram.js index 99e2fb9..94f22b9 100644 --- a/profile_parser/js/plot_frametime_histogram.js +++ b/profile_parser/js/plot_frametime_histogram.js @@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); const fs_1 = __importDefault(require("fs")); const nodeplotlib_1 = require("nodeplotlib"); +const color_cfg_1 = __importDefault(require("./color_cfg")); // Take tasks as framtimes if they are at least this long in microseconds. // Very short tasks (< 2ms) don't correspond to frames drawn. const MIN_FRAME_DURATION = 2000; @@ -13,6 +14,9 @@ const MAX_BIN_X_VALUE = 200; // Exclusive. All values above are capped to this v // 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 PLOT_TITLE_0 = "Optimized SDFV Frametime Histogram"; +const PLOT_TITLE_1 = "Un-Optimized SDFV Frametime Histogram"; +let plot_colors = [color_cfg_1.default.GREEN, color_cfg_1.default.BLUE, color_cfg_1.default.ORANGE, color_cfg_1.default.RED, color_cfg_1.default.YELLOW]; let sample_index = 0; let x_array = []; const files_in_directory = fs_1.default.readdirSync("results"); @@ -50,14 +54,21 @@ for (let i = 0; i < files_in_directory.length; ++i) { end: 1000 }, marker: { - color: 'green' + color: plot_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1] } }; data.push(hist); - const plot_filename = filename.replace("result-", ""); + let plot_filename = filename.replace("result-", ""); + let plot_title = "Frametime Histogram for " + plot_filename; + if (sample_index === 3) { + plot_title = PLOT_TITLE_0; + } + if (sample_index === 6) { + plot_title = PLOT_TITLE_1; + } const layout = { - title: "Frametime Histogram for " + plot_filename, - xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE] }, + title: plot_title, + xaxis: { title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE], dtick: 10 }, yaxis: { title: "Count" }, shapes: [ // 60 fps line @@ -69,8 +80,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { y1: 1.0, yref: "paper", line: { - color: 'orange', - width: 1, + color: color_cfg_1.default.YELLOW, + width: 1.5, dot: 'dot' } }, @@ -83,8 +94,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { y1: 1.0, yref: "paper", line: { - color: 'red', - width: 1, + color: color_cfg_1.default.RED, + width: 1.5, dot: 'dot' } }, diff --git a/profile_parser/js/plot_stats_comparison.js b/profile_parser/js/plot_stats_comparison.js index b7a3e1c..b263456 100644 --- a/profile_parser/js/plot_stats_comparison.js +++ b/profile_parser/js/plot_stats_comparison.js @@ -5,10 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); const fs_1 = __importDefault(require("fs")); const nodeplotlib_1 = require("nodeplotlib"); +const color_cfg_1 = __importDefault(require("./color_cfg")); // 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 PLOT_TITLE = "Zoom Frametime Comparison"; +const bar_colors = ["#388E3C", "#1976D2", "orange", "blue"]; let sample_index = 0; let avg_frametimes = []; let median_frametimes = []; @@ -28,7 +31,14 @@ for (let i = 0; i < files_in_directory.length; ++i) { const avg_frametime = stats.AvgFrameTime; const median_frametime = stats.MedianFrameTime; const percentile_frametime = stats["95thPercentileFrameTime"]; - const plot_filename = filename.replace("result-", ""); + let plot_filename = filename.replace("result-", ""); + plot_filename = plot_filename.replace(".json", ""); + if (sample_index === 3) { + plot_filename = "Optimized"; + } + if (sample_index === 6) { + plot_filename = "Un-optimized"; + } avg_frametimes.push(avg_frametime); median_frametimes.push(median_frametime); percentile_frametimes.push(percentile_frametime); @@ -52,15 +62,21 @@ for (let i = 0; i < files_in_directory.length; ++i) { y: y_values, type: 'bar', name: plot_filename, - text: y_values.map(String), - textposition: "auto", - hoverinfo: "none", + marker: { + color: bar_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1], + }, + // text: y_values.map(String), + // textposition: "auto", + // hoverinfo: "none", error_y: { type: 'data', symmetric: false, array: plus_deltas, arrayminus: minus_deltas, - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); @@ -72,8 +88,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { } } const layout = { - title: "Frametime Comparison", - yaxis: { title: "Frametime (ms)" }, + title: PLOT_TITLE, + yaxis: { title: "Frametime (ms)", autotick: false, dtick: 5 }, shapes: [ // 60 fps line { @@ -85,7 +101,7 @@ const layout = { y1: 16.7, xref: "paper", line: { - color: 'orange', + color: color_cfg_1.default.YELLOW, width: 1, dot: 'dot' } @@ -100,7 +116,7 @@ const layout = { y1: 33.4, xref: "paper", line: { - color: 'red', + color: color_cfg_1.default.RED, width: 1, dot: 'dot' } diff --git a/profile_parser/src/color_cfg.ts b/profile_parser/src/color_cfg.ts new file mode 100644 index 0000000..6e660bf --- /dev/null +++ b/profile_parser/src/color_cfg.ts @@ -0,0 +1,14 @@ +const BLUE = "#1976D2"; +const GREEN = "#388E3C"; +const ORANGE = "#F9A825"; +const RED = "#E53935"; +const YELLOW = "#FFB300"; + + +export default { + BLUE, + GREEN, + ORANGE, + RED, + YELLOW, +} \ No newline at end of file diff --git a/profile_parser/src/plot_acc_stats.ts b/profile_parser/src/plot_acc_stats.ts index e102fb8..c3863c7 100644 --- a/profile_parser/src/plot_acc_stats.ts +++ b/profile_parser/src/plot_acc_stats.ts @@ -1,14 +1,15 @@ import { plot, Plot } from 'nodeplotlib'; +import colors from "./color_cfg"; // Scroll let data: Plot[] = []; let benchmarks: {name: string, values: number[], color: string}[] = []; -benchmarks.push({name: "Un-optimized", values: [25.8, 23.4, 24.0], color: "red"}); -benchmarks.push({name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: "orange"}); -benchmarks.push({name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: "orange"}); -benchmarks.push({name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: "green"}); -benchmarks.push({name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: "green"}); +benchmarks.push({name: "Un-optimized", values: [25.8, 23.4, 24.0], color: colors.BLUE}); +benchmarks.push({name: "Opt. getImageData", values: [49.8, 51.0, 50.4], color: colors.ORANGE}); +benchmarks.push({name: "Opt. willReadFrequently", values: [52.2, 52.2, 50.4], color: colors.ORANGE}); +benchmarks.push({name: "Opt. GPU default", values: [57.6, 58.2, 58.2], color: colors.GREEN}); +benchmarks.push({name: "Opt. GPU desync", values: [60.0, 60.0, 60.0], color: colors.GREEN}); for (let i = 0; i < benchmarks.length; ++i) { @@ -33,7 +34,10 @@ for (let i = 0; i < benchmarks.length; ++i) { symmetric: false, array: [values[2]-values[1]], arrayminus: [values[1]-values[0]], - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); @@ -51,11 +55,11 @@ plot(data, layout); data = []; benchmarks = []; -benchmarks.push({name: "Un-optimized", values: [17.4, 18.0, 17.4], color: "red"}); -benchmarks.push({name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: "orange"}); -benchmarks.push({name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: "orange"}); -benchmarks.push({name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: "green"}); -benchmarks.push({name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: "green"}); +benchmarks.push({name: "Un-optimized", values: [17.4, 18.0, 17.4], color: colors.BLUE}); +benchmarks.push({name: "Opt. getImageData", values: [25.2, 27.0, 25.8], color: colors.ORANGE}); +benchmarks.push({name: "Opt. willReadFrequently", values: [27.0, 24.6, 27.0], color: colors.ORANGE}); +benchmarks.push({name: "Opt. GPU default", values: [43.2, 42.0, 43.2], color: colors.GREEN}); +benchmarks.push({name: "Opt. GPU desync", values: [40.8, 42.0, 42.0], color: colors.GREEN}); for (let i = 0; i < benchmarks.length; ++i) { @@ -80,7 +84,10 @@ for (let i = 0; i < benchmarks.length; ++i) { symmetric: false, array: [values[2]-values[1]], arrayminus: [values[1]-values[0]], - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); diff --git a/profile_parser/src/plot_cpu_util.ts b/profile_parser/src/plot_cpu_util.ts index 49779cf..f687998 100644 --- a/profile_parser/src/plot_cpu_util.ts +++ b/profile_parser/src/plot_cpu_util.ts @@ -1,24 +1,27 @@ import fs from 'fs'; import { plot, Plot } from 'nodeplotlib'; +import colors from "./color_cfg"; 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 = 250; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms) +const CPU_UTIL_SAMPLE_WINDOW_SIZE_MS = 100; // Adjust for sampling resolution / smoothing (Chrome uses about 500 ms) + +const PLOT_TITLE = "Hover Far CPU Utilization"; const files_in_directory = fs.readdirSync("results"); let data: Plot[] = []; const layout = { - title: "CPU Utilization", - xaxis: {title: "Time (s)"}, + title: PLOT_TITLE, + xaxis: {title: "Time (s)", autotick: false, dtick: 1}, yaxis: {title: "Utilization (%)", range: [0, 100]}, } let plot_index = 0; -let plot_colors = ["green", "red", "orange", "blue", "purple", "black"]; +let plot_colors = [colors.GREEN, colors.BLUE, colors.ORANGE, colors.RED, colors.YELLOW]; let line_color = plot_colors[0]; for (let i = 0; i < files_in_directory.length; ++i) { @@ -73,7 +76,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { if (plot_index % TRACES_PER_VERSION === 0) { line_color = plot_colors[Math.round(plot_index / TRACES_PER_VERSION)] } - const plot_filename = filename.replace("result-", ""); + let plot_filename = filename.replace("result-", ""); + plot_filename = plot_filename.replace(".json", ""); const line: Plot = { x: x_axis, y: cpu_util_samples, diff --git a/profile_parser/src/plot_frametime_histogram.ts b/profile_parser/src/plot_frametime_histogram.ts index 4ec20ea..70c7ca2 100644 --- a/profile_parser/src/plot_frametime_histogram.ts +++ b/profile_parser/src/plot_frametime_histogram.ts @@ -1,5 +1,6 @@ import fs from 'fs'; import { plot, Plot } from 'nodeplotlib'; +import colors from "./color_cfg"; // Take tasks as framtimes if they are at least this long in microseconds. // Very short tasks (< 2ms) don't correspond to frames drawn. @@ -11,6 +12,11 @@ const MAX_BIN_X_VALUE = 200; // Exclusive. All values above are capped to this v 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 PLOT_TITLE_0 = "Optimized SDFV Frametime Histogram"; +const PLOT_TITLE_1 = "Un-Optimized SDFV Frametime Histogram"; + +let plot_colors = [colors.GREEN, colors.BLUE, colors.ORANGE, colors.RED, colors.YELLOW]; + let sample_index = 0; let x_array: number[] = []; @@ -55,15 +61,22 @@ for (let i = 0; i < files_in_directory.length; ++i) { end: 1000 }, marker: { - color: 'green' + color: plot_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1] } }; data.push(hist); - const plot_filename = filename.replace("result-", ""); + let plot_filename = filename.replace("result-", ""); + let plot_title = "Frametime Histogram for " + plot_filename; + if (sample_index === 3) { + plot_title = PLOT_TITLE_0; + } + if (sample_index === 6) { + plot_title = PLOT_TITLE_1; + } const layout = { - title: "Frametime Histogram for " + plot_filename, - xaxis: {title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE]}, + title: plot_title, + xaxis: {title: "Frametime (ms)", range: [0, MAX_BIN_X_VALUE], dtick: 10}, yaxis: {title: "Count"}, shapes: [ // 60 fps line @@ -75,8 +88,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { y1: 1.0, yref: "paper" as "paper", line: { - color: 'orange', - width: 1, + color: colors.YELLOW, + width: 1.5, dot: 'dot' } }, @@ -89,8 +102,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { y1: 1.0, yref: "paper" as "paper", line: { - color: 'red', - width: 1, + color: colors.RED, + width: 1.5, dot: 'dot' } }, diff --git a/profile_parser/src/plot_stats_comparison.ts b/profile_parser/src/plot_stats_comparison.ts index 613e6a9..0934db1 100644 --- a/profile_parser/src/plot_stats_comparison.ts +++ b/profile_parser/src/plot_stats_comparison.ts @@ -1,11 +1,15 @@ import fs from 'fs'; import { plot, Plot } from 'nodeplotlib'; +import colors from "./color_cfg"; // 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 PLOT_TITLE = "Zoom Frametime Comparison"; +const bar_colors = ["#388E3C", "#1976D2", "orange", "blue"]; + let sample_index = 0; let avg_frametimes: number[] = []; let median_frametimes: number[] = []; @@ -32,7 +36,14 @@ 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-", ""); + let plot_filename = filename.replace("result-", ""); + plot_filename = plot_filename.replace(".json", ""); + if (sample_index === 3) { + plot_filename = "Optimized"; + } + if (sample_index === 6) { + plot_filename = "Un-optimized"; + } avg_frametimes.push(avg_frametime); median_frametimes.push(median_frametime); @@ -61,15 +72,21 @@ for (let i = 0; i < files_in_directory.length; ++i) { y: y_values, type: 'bar', name: plot_filename, - text: y_values.map(String), - textposition: "auto", - hoverinfo: "none", + marker: { + color: bar_colors[Math.floor(sample_index / TRACES_PER_VERSION) - 1], + }, + // text: y_values.map(String), + // textposition: "auto", + // hoverinfo: "none", error_y: { type: 'data', symmetric: false, array: plus_deltas, arrayminus: minus_deltas, - visible: true + visible: true, + color: "black", + thickness: 1.0, + width: 10, }, }; data.push(bar); @@ -83,8 +100,8 @@ for (let i = 0; i < files_in_directory.length; ++i) { } const layout = { - title: "Frametime Comparison", - yaxis: {title: "Frametime (ms)"}, + title: PLOT_TITLE, + yaxis: {title: "Frametime (ms)", autotick: false, dtick: 5}, shapes: [ // 60 fps line { @@ -96,7 +113,7 @@ const layout = { y1: 16.7, xref: "paper" as "paper", line: { - color: 'orange', + color: colors.YELLOW, width: 1, dot: 'dot' } @@ -111,7 +128,7 @@ const layout = { y1: 33.4, xref: "paper" as "paper", line: { - color: 'red', + color: colors.RED, width: 1, dot: 'dot' }