Add hashrate & difficulty chart resolution scaling

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -11,6 +11,7 @@ import { StorageService } from 'src/app/services/storage.service';
 import { MiningService } from 'src/app/services/mining.service';
 import { download } from 'src/app/shared/graphs.utils';
 import { ActivatedRoute } from '@angular/router';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-hashrate-chart',
@@ -47,7 +48,7 @@ export class HashrateChartComponent implements OnInit {
   formatNumber = formatNumber;
   timespan = '';
   chartInstance: any = undefined;
-  maResolution: number =  30;
+  network = '';
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
@@ -57,10 +58,13 @@ export class HashrateChartComponent implements OnInit {
     private storageService: StorageService,
     private miningService: MiningService,
     private route: ActivatedRoute,
+    private stateService: StateService
   ) {
   }
 
   ngOnInit(): void {
+    this.stateService.networkChanged$.subscribe((network) => this.network = network);
+
     let firstRun = true;
 
     if (this.widget) {
@@ -124,17 +128,14 @@ export class HashrateChartComponent implements OnInit {
                   ++diffIndex;
                 }
 
-                this.maResolution = 30;
-                if (["3m", "6m"].includes(this.timespan)) {
-                  this.maResolution = 7;
-                }
+                let maResolution = 15;
                 const hashrateMa = [];
-                for (let i = this.maResolution - 1; i < data.hashrates.length; ++i) {
+                for (let i = maResolution - 1; i < data.hashrates.length; ++i) {
                   let avg = 0;
-                  for (let y = this.maResolution - 1; y >= 0; --y) {
+                  for (let y = maResolution - 1; y >= 0; --y) {
                     avg += data.hashrates[i - y].avgHashrate;
                   }
-                  avg /= this.maResolution;
+                  avg /= maResolution;
                   hashrateMa.push([data.hashrates[i].timestamp * 1000, avg]);
                 }
 
@@ -276,17 +277,17 @@ export class HashrateChartComponent implements OnInit {
             },
           },
           {
-            name: $localize`::Difficulty`,
+            name: $localize`:@@25148835d92465353fc5fe8897c27d5369978e5a:Difficulty`,
             inactiveColor: 'rgb(110, 112, 121)',
-            textStyle: {  
+            textStyle: {
               color: 'white',
             },
             icon: 'roundRect',
           },
           {
-            name: $localize`Hashrate` + ` (MA${this.maResolution})`,
+            name: $localize`Hashrate (MA)`,
             inactiveColor: 'rgb(110, 112, 121)',
-            textStyle: {  
+            textStyle: {
               color: 'white',
             },
             icon: 'roundRect',
@@ -295,11 +296,19 @@ export class HashrateChartComponent implements OnInit {
             },
           },
         ],
+        selected: JSON.parse(this.storageService.getValue('hashrate_difficulty_legend')) ?? {
+          '$localize`:@@79a9dc5b1caca3cbeb1733a19515edacc5fc7920:Hashrate`': true,
+          '$localize`::Difficulty`': this.network === '',
+          '$localize`Hashrate (MA)`': true,
+        },
       },
       yAxis: data.hashrates.length === 0 ? undefined : [
         {
           min: (value) => {
-            return value.min * 0.9;
+            const selectedPowerOfTen: any = selectPowerOfTen(value.min);
+            const newMin = Math.floor(value.min / selectedPowerOfTen.divider / 10);
+            console.log(newMin);
+            return newMin * selectedPowerOfTen.divider * 10;
           },
           type: 'value',
           axisLabel: {
@@ -363,7 +372,7 @@ export class HashrateChartComponent implements OnInit {
         },
         {
           zlevel: 2,
-          name: $localize`Hashrate` + ` (MA${this.maResolution})`,
+          name: $localize`Hashrate (MA)`,
           showSymbol: false,
           symbol: 'none',
           data: data.hashrateMa,
@@ -404,6 +413,10 @@ export class HashrateChartComponent implements OnInit {
 
   onChartInit(ec) {
     this.chartInstance = ec;
+
+    this.chartInstance.on('legendselectchanged', (e) => {
+      this.storageService.setValue('hashrate_difficulty_legend', JSON.stringify(e.selected));
+    });
   }
 
   isMobile() {

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -40,7 +40,7 @@
       <div class="card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <app-hashrate-chart [widget]="true"></app-hashrate-chart>
-          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more &raquo;</a></div>
         </div>
       </div>
     </div>