From 37605d57324fb9ca3910ee185cda79c9d6606820 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 11 Nov 2023 08:57:55 +0000
Subject: [PATCH] Improve fee distribution legibility on small screens

---
 .../fee-distribution-graph.component.ts       | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
index c73c20237..178d87897 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -1,4 +1,4 @@
-import { OnChanges, OnDestroy } from '@angular/core';
+import { HostListener, OnChanges, OnDestroy } from '@angular/core';
 import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { TransactionStripped } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
@@ -26,6 +26,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
   simple: boolean = false;
   data: number[][];
   labelInterval: number = 50;
+  smallScreen: boolean = window.innerWidth < 450;
 
   rateUnitSub: Subscription;
   weightMode: boolean = false;
@@ -96,9 +97,9 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
     this.mempoolVsizeFeesOptions = {
       grid: {
         height: '210',
-        right: '20',
+        right: this.smallScreen ? '10' : '20',
         top: '22',
-        left: '40',
+        left: this.smallScreen ? '10' : '40',
       },
       xAxis: {
         type: 'category',
@@ -132,7 +133,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
           }
         },
         axisLabel: {
-          show: true,
+          show: !this.smallScreen,
           formatter: (value: number): string => {
             const unitValue = this.weightMode ? value / 4 : value;
             const selectedPowerOfTen = selectPowerOfTen(unitValue);
@@ -142,7 +143,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
           },
         },
         axisTick: {
-          show: true,
+          show: !this.smallScreen,
         }
       },
       series: [{
@@ -153,6 +154,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
           position: 'top',
           color: '#ffffff',
           textShadowBlur: 0,
+          fontSize: this.smallScreen ? 10 : 12,
           formatter: (label: { data: number[] }): string => {
             const value = label.data[1];
             const unitValue = this.weightMode ? value / 4 : value;
@@ -182,6 +184,16 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
     };
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    const isSmallScreen = window.innerWidth < 450;
+    if (this.smallScreen !== isSmallScreen) {
+      this.smallScreen = isSmallScreen;
+      this.prepareChart();
+      this.mountChart();
+    }
+  }
+
   ngOnDestroy(): void {
     this.rateUnitSub.unsubscribe();
   }