Receive element instead of a selector in renderPlots

Author: Kobzol

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

@@ -70,7 +70,7 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
 
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {
-    renderPlots(graphData, selector, "#charts");
+    renderPlots(graphData, selector, document.getElementById("charts"));
   } else {
     // If we select all of them, we expect that there will be a regular grid.
 
@@ -81,15 +81,15 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
       graphData,
       (benchName) => !benchName.endsWith("-tiny")
     );
-    renderPlots(withoutTiny, selector, "#charts");
+    renderPlots(withoutTiny, selector, document.getElementById("charts"));
 
     // 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, "#size-charts");
+    renderPlots(onlyTiny, selector, document.getElementById("size-charts"));
   }
 }
 

site/frontend/src/pages/graphs/plots.ts

@@ -285,7 +285,7 @@ function normalizeData(data: GraphData) {
 export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
-  elementSelector: string
+  plotElement: HTMLElement
 ) {
   normalizeData(data);
 
@@ -377,11 +377,7 @@ export function renderPlots(
         absoluteMode: selector.kind == "raw",
       });
 
-      new uPlot(
-        plotOpts,
-        plotData as any as TypedArray[],
-        document.querySelector<HTMLElement>(elementSelector)
-      );
+      new uPlot(plotOpts, plotData as any as TypedArray[], plotElement);
 
       i++;
     }