Merge pull request #5109 from mempool/natsoni/fix-mining-graphs
Fix widget mining graphs
This commit is contained in:
		
						commit
						9186f664da
					
				| @ -54,8 +54,8 @@ | ||||
|     </form> | ||||
|   </div> | ||||
| 
 | ||||
|   <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" | ||||
|     (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}"> | ||||
|   <div [class]="!widget ? 'chart' : 'chart-widget'" *browserOnly [style]="{ height: widget ? ((height + 20) + 'px') : null, opacity: isLoading ? 0.5 : 1 }" echarts [initOpts]="chartInitOptions" [options]="chartOptions" | ||||
|     (chartInit)="onChartInit($event)"> | ||||
|   </div> | ||||
|   <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading"> | ||||
|     <div class="spinner-border text-light"></div> | ||||
|  | ||||
| @ -349,7 +349,9 @@ export class HashrateChartComponent implements OnInit { | ||||
|               const selectedPowerOfTen: any = selectPowerOfTen(val); | ||||
|               const newVal = Math.round(val / selectedPowerOfTen.divider); | ||||
|               return `${newVal} ${selectedPowerOfTen.unit}H/s`; | ||||
|             } | ||||
|             }, | ||||
|             showMinLabel: false, | ||||
|             showMaxLabel: false, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             lineStyle: { | ||||
| @ -381,7 +383,9 @@ export class HashrateChartComponent implements OnInit { | ||||
|               const selectedPowerOfTen: any = selectPowerOfTen(val); | ||||
|               const newVal = Math.round(val / selectedPowerOfTen.divider); | ||||
|               return `${newVal} ${selectedPowerOfTen.unit}`; | ||||
|             } | ||||
|             }, | ||||
|             showMinLabel: false, | ||||
|             showMaxLabel: false, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             show: false, | ||||
|  | ||||
| @ -29,7 +29,7 @@ | ||||
|       <div class="card"> | ||||
|         <div class="card-body pl-2 pr-2"> | ||||
|           <div class="mempool-graph"> | ||||
|             <app-pool-ranking [height]="graphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking> | ||||
|             <app-pool-ranking [height]="poolGraphHeight" [attr.data-cy]="'pool-distribution'" [widget]=true></app-pool-ranking> | ||||
|           </div> | ||||
|           <div class="mt-1"><a [attr.data-cy]="'pool-distribution-view-more'" [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more »</a></div> | ||||
|         </div> | ||||
| @ -41,7 +41,7 @@ | ||||
|       <div class="card"> | ||||
|         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2"> | ||||
|           <div class="fixed-mempool-graph"> | ||||
|             <app-hashrate-chart [height]="graphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart> | ||||
|             <app-hashrate-chart [height]="hashrateGraphHeight" [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-hashrate-chart> | ||||
|           </div> | ||||
|           <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" fragment="1y" i18n="dashboard.view-more">View more »</a></div> | ||||
|         </div> | ||||
|  | ||||
| @ -12,7 +12,8 @@ import { EventType, NavigationStart, Router } from '@angular/router'; | ||||
|   changeDetection: ChangeDetectionStrategy.OnPush, | ||||
| }) | ||||
| export class MiningDashboardComponent implements OnInit, AfterViewInit { | ||||
|   graphHeight = 375; | ||||
|   hashrateGraphHeight = 335; | ||||
|   poolGraphHeight = 375; | ||||
| 
 | ||||
|   constructor( | ||||
|     private seoService: SeoService, | ||||
| @ -44,11 +45,14 @@ export class MiningDashboardComponent implements OnInit, AfterViewInit { | ||||
|   @HostListener('window:resize', ['$event']) | ||||
|   onResize(): void { | ||||
|     if (window.innerWidth >= 992) { | ||||
|       this.graphHeight = 335; | ||||
|       this.hashrateGraphHeight = 335; | ||||
|       this.poolGraphHeight = 375; | ||||
|     } else if (window.innerWidth >= 768) { | ||||
|       this.graphHeight = 245; | ||||
|       this.hashrateGraphHeight = 245; | ||||
|       this.poolGraphHeight = 265; | ||||
|     } else { | ||||
|       this.graphHeight = 240; | ||||
|       this.hashrateGraphHeight = 240; | ||||
|       this.poolGraphHeight = 240; | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -76,8 +76,8 @@ | ||||
|   </div> | ||||
| 
 | ||||
|   <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0"> | ||||
|     <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null}" echarts [initOpts]="chartInitOptions" [options]="chartOptions" | ||||
|       (chartInit)="onChartInit($event)" [style]="{opacity: isLoading ? 0.5 : 1}"> | ||||
|     <div [class]="widget ? 'chart-widget' : 'chart'" *browserOnly [style]="{ height: widget ? (height + 'px') : null, opacity: isLoading ? 0.5 : 1 }" echarts [initOpts]="chartInitOptions" [options]="chartOptions" | ||||
|       (chartInit)="onChartInit($event)"> | ||||
|     </div> | ||||
| 
 | ||||
|     <div class="text-center loadingGraphs" *ngIf="!stateService.isBrowser || isLoading"> | ||||
|  | ||||
| @ -24,6 +24,7 @@ | ||||
|   @media (max-width: 767.98px) { | ||||
|     max-height: 230px; | ||||
|   } | ||||
|   margin-bottom: 20px; | ||||
| } | ||||
| .chart-widget { | ||||
|   width: 100%; | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user