Improve benchmark detail graph on mobile

This improves how the graph in the benchmark detail on the compare page is displayed on mobile devices.

Author: Kobzol

site/frontend/src/graph/render.ts

@@ -395,7 +395,11 @@ function normalizeData(data: GraphData) {
 }
 
 export type GraphRenderOpts = {
+  // Width of the graph
+  width: number;
+  // Render a title above the graph
   renderTitle?: boolean;
+  // Function that can be used to hook into the rendering process
   hooks?: {drawSeries: (uPlot, number) => void};
 };
 
@@ -405,10 +409,11 @@ export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
   plotElement: HTMLElement,
-  opts?: GraphRenderOpts
+  opts: GraphRenderOpts
 ) {
-  const renderTitle = opts?.renderTitle ?? true;
-  const hooks = opts?.hooks ?? {};
+  const renderTitle = opts.renderTitle ?? true;
+  const hooks = opts.hooks ?? {};
+  const width = opts.width;
 
   normalizeData(data);
 
@@ -487,7 +492,7 @@ export function renderPlots(
         cacheStates[Object.keys(cacheStates)[0]].interpolated_indices;
 
       let plotOpts = genPlotOpts({
-        width: Math.floor(window.innerWidth / 4) - 40,
+        width,
         height: 300,
         yAxisLabel,
         series: seriesOpts,

site/frontend/src/pages/compare/compile/table/benchmark-detail.vue

@@ -112,6 +112,7 @@ async function renderGraph() {
   };
   const graphData = await GRAPH_RESOLVER.loadGraph(selector);
   const opts: GraphRenderOpts = {
+    width: Math.min(window.innerWidth - 40, 480),
     renderTitle: false,
   };
   if (date !== null) {

site/frontend/src/pages/graphs/page.vue

@@ -68,9 +68,12 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
   // Then draw the plots.
   await nextTick();
 
+  const width = Math.floor(window.innerWidth / 4) - 40;
+  const opts = {width};
+
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {
-    renderPlots(graphData, selector, document.getElementById("charts"));
+    renderPlots(graphData, selector, document.getElementById("charts"), opts);
   } else {
     // If we select all of them, we expect that there will be a regular grid.
 
@@ -81,15 +84,20 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
       graphData,
       (benchName) => !benchName.endsWith("-tiny")
     );
-    renderPlots(withoutTiny, selector, document.getElementById("charts"));
+    renderPlots(withoutTiny, selector, document.getElementById("charts"), opts);
 
     // Then, render only the size-related ones in their own dedicated section as they are less
     // important than having the better grouping. So, we only include the benchmarks ending in
     // "-tiny" and render them in the appropriate section.
     const onlyTiny = filterBenchmarks(graphData, (benchName) =>
       benchName.endsWith("-tiny")
     );
-    renderPlots(onlyTiny, selector, document.getElementById("size-charts"));
+    renderPlots(
+      onlyTiny,
+      selector,
+      document.getElementById("size-charts"),
+      opts
+    );
   }
 }