better sparkline sizing across screen ratios/sizes

lightward · Mar 4, 2024 · 0048710 · 0048710
1 parent a5ca87d
commit 0048710
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -36,10 +36,8 @@
 
       #sparkline-canvas {
         position: absolute;
-        right: 20px;
-        bottom: 20px;
-        width: 300px;
-        height: 100px;
+        right: 1vw;
+        bottom: 1vw;
         opacity: 0.5;
       }
     </style>

diff --git a/src/main.ts b/src/main.ts
@@ -49,6 +49,8 @@ class SphereWithRods {
     this.camera.aspect = window.innerWidth / window.innerHeight;
     this.camera.updateProjectionMatrix();
     this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.sparklineCanvas.width = Math.min(window.innerWidth, window.innerHeight) * 0.5;
+    this.sparklineCanvas.height = this.sparklineCanvas.width * 0.3;
   }
 
   constructSphere(): void {
@@ -68,6 +70,8 @@ class SphereWithRods {
   constructSparkline(): void {
     this.sparklineCanvas = document.getElementById('sparkline-canvas') as HTMLCanvasElement;
     this.sparklineContext = this.sparklineCanvas.getContext('2d')!;
+    this.sparklineCanvas.width = Math.min(window.innerWidth, window.innerHeight) * 0.5;
+    this.sparklineCanvas.height = this.sparklineCanvas.width * 0.3;
     this.startTime = Date.now();
     this.drawSparkline();
   }