Add timespan toggle to acceleration dashboard

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -22,12 +22,26 @@
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
-        <span style="font-size: xx-small" i18n="mining.3-months">(3 months)</span>
+        @switch (timespan) {
+          @case ('1w') {
+            <span style="font-size: xx-small" i18n="mining.1-week">(1 week)</span>
+          }
+          @case ('1m') {
+            <span style="font-size: xx-small" i18n="mining.1-month">(1 month)</span>
+          }
+        }
       </div>
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats></app-acceleration-stats>
+            <app-acceleration-stats [timespan]="timespan"></app-acceleration-stats>
+            <div class="widget-toggler">
+              <a href="" (click)="setTimespan('1w')" class="toggler-option"
+                [ngClass]="{'inactive': timespan === '1w'}"><small>1w</small></a>
+              <span style="color: #ffffff66; font-size: 8px"> | </span>
+              <a href="" (click)="setTimespan('1m')" class="toggler-option"
+              [ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
+            </div>
           </div>
         </div>
       </div>
@@ -59,6 +73,7 @@
               [height]="graphHeight"
               [attr.data-cy]="'acceleration-fees'"
               [widget]=true
+              [period]="timespan"
             ></app-acceleration-fees-graph>
           </div>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -172,4 +172,20 @@
     max-height: 430px;
     max-width: 430px;
   }
+}
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: #ffffff66;
 }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -37,6 +37,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   webGlEnabled = true;
   seen: Set<string> = new Set();
   firstLoad = true;
+  timespan: '3d' | '1w' | '1m' = '1w';
 
   graphHeight: number = 300;
   theme: ThemeService;
@@ -148,6 +149,11 @@ export class AcceleratorDashboardComponent implements OnInit {
     }
   }
 
+  setTimespan(timespan): boolean {
+    this.timespan = timespan;
+    return false;
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {