Merge pull request #374 from OpenElements/improve-height

Graph should fit in view port
OpenElements · Apr 23, 2024 · 7a9c6bd · 7a9c6bd
2 parents 701ed96 + e56aece
commit 7a9c6bd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 43 deletions.
diff --git a/frontend/src/charts/LineChart.tsx b/frontend/src/charts/LineChart.tsx
@@ -27,7 +27,6 @@ Chart.register(
 
 function LineChart({ data }) {
   const [chart, setChart] = useState(null);
-  const [height, setHeight] = useState("");
   const canvas = useRef(null);
   const legend = useRef(null);
   const containerRef = useRef(null);
@@ -211,27 +210,6 @@ function LineChart({ data }) {
     tooltipBorderColor.light,
   ]);
 
-  useEffect(() => {
-    const windowHeight = window.innerHeight;
-    const windowWidth = window.innerWidth;
-    const handleResize = () => {
-      const notLargeDesktop = windowWidth < 1280;
-
-      if (notLargeDesktop) {
-        setHeight(`${windowHeight - 288}px`);
-      } else {
-        setHeight(`${windowHeight - 234}px`);
-      }
-    };
-
-    handleResize();
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <React.Fragment>
       <div className="px-5 py-3">
@@ -248,11 +226,7 @@ function LineChart({ data }) {
         </div>
       </div>
       {/* Chart built with Chart.js 3 */}
-      <div
-        className="grow h-full"
-        ref={containerRef}
-        style={{ minHeight: height }}
-      >
+      <div className="grow h-full" ref={containerRef}>
         <canvas ref={canvas} />
       </div>
     </React.Fragment>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -39,5 +39,17 @@
 }
 
 main {
-  min-height: 100vh;
+  height: calc(
+    100vh - 98px
+  ); /** minus topBar=66 + top and bottom padding of 1rem **/
+}
+
+canvas {
+  height: calc(100vh - 234px);
+}
+
+@media (max-width: 640) {
+  canvas {
+    height: calc(100vh - 288px);
+  }
 }
diff --git a/frontend/src/pages/benchmark-details-chart-page/index.tsx b/frontend/src/pages/benchmark-details-chart-page/index.tsx
@@ -198,31 +198,30 @@ const BenchmarksDetailsGraph = () => {
         </div>
         <div className="grid grid-cols-4 gap-y-2">
           <Checkbox
-            defaultChecked
             label="Show Value"
             name="ShowValue"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showRealData}
             onChange={(e) => handleChecked("showRealData", e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
           />
           <Checkbox
             label="Show Minimum"
             name="ShowMin"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showRealDataMin}
             onChange={(e) => handleChecked("showRealDataMin", e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
           />
           <Checkbox
             label=" Show Maximum"
             name="ShowMax"
-            value={String(checks.showRealDataMax)}
+            checked={checks.showRealDataMax}
             onChange={(e) => handleChecked("showRealDataMax", e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
           />
           <Checkbox
             label="Show Error"
             name="ShowError"
-            value={String(checks.showRealDataError)}
+            checked={checks.showRealDataError}
             onChange={(e) =>
               handleChecked("showRealDataError", e.target.checked)
             }
@@ -232,14 +231,14 @@ const BenchmarksDetailsGraph = () => {
             defaultChecked
             label="Show Smooth"
             name="ShowSmooth"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showSmoothData}
             onChange={(e) => handleChecked("showSmoothData", e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
           />
           <Checkbox
             label="Smooth Min"
             name="ShowSmoothMin"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showSmoothDataMin}
             onChange={(e) =>
               handleChecked("showSmoothDataMin", e.target.checked)
             }
@@ -248,7 +247,7 @@ const BenchmarksDetailsGraph = () => {
           <Checkbox
             label="Smooth Max"
             name="ShowSmoothMax"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showSmoothDataMax}
             onChange={(e) =>
               handleChecked("showSmoothDataMax", e.target.checked)
             }
@@ -257,19 +256,13 @@ const BenchmarksDetailsGraph = () => {
           <Checkbox
             label="Smooth Error"
             name="ShowSmoothError"
-            value={String(checks.showRealDataMin)}
+            checked={checks.showSmoothDataError}
             onChange={(e) =>
               handleChecked("showSmoothDataError", e.target.checked)
             }
             className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
           />
         </div>
-        {/* <Select
-        label="Units"
-        options={["options"]}
-        valueExtractor={(name) => name}
-        labelExtractor={(name) => name}
-      /> */}
       </div>
       {isLoading ? <div>Loading</div> : <GraphCard data={datasets} />}
     </div>