fix clipping of charts on small devices (eg iPhone)

bitmagnet-io · Feb 10, 2025 · 539fcba · 539fcba
1 parent 8c4a5c3
commit 539fcba
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/webui/src/app/charting/chart.component.html b/webui/src/app/charting/chart.component.html
@@ -16,15 +16,21 @@ <h4>
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <canvas
-        baseChart
-        [data]="chartConfig.data"
-        [options]="chartConfig.options"
-        [type]="chartConfig.type"
-        [height]="height"
-        [width]="width"
+      <div
+        [class]="
+          breakpoints.sizeAtLeast('Large') ? 'app-chart' : 'app-chart-small'
+        "
       >
-      </canvas>
+        <canvas
+          baseChart
+          [data]="chartConfig.data"
+          [options]="chartConfig.options"
+          [type]="chartConfig.type"
+          [height]="height"
+          [width]="width"
+        >
+        </canvas>
+      </div>
     </mat-card-content>
   </mat-card>
 </ng-container>
diff --git a/webui/src/app/charting/chart.component.scss b/webui/src/app/charting/chart.component.scss
@@ -8,3 +8,12 @@
     opacity: 1;
   }
 }
+
+.app-chart {
+  position: relative;
+}
+
+.app-chart-small {
+  position: relative;
+  width: calc(40vw + 100px);
+}
diff --git a/webui/src/app/charting/chart.component.ts b/webui/src/app/charting/chart.component.ts
@@ -12,6 +12,7 @@ import {
 import { MatIcon } from "@angular/material/icon";
 import { MatTooltip } from "@angular/material/tooltip";
 import { ThemeInfoService } from "../themes/theme-info.service";
+import { BreakpointsService } from "../layout/breakpoints.service";
 import { ChartAdapter } from "./types";
 
 @Component({
@@ -35,6 +36,7 @@ export class ChartComponent<Data = unknown, Type extends ChartType = ChartType>
 {
   private themeInfo = inject(ThemeInfoService);
   private transloco = inject(TranslocoService);
+  breakpoints = inject(BreakpointsService);
 
   @Input() title: string;
   @Input() $data: Observable<Data> = new Observable();