Make hashrate chart more responsive

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

@@ -1,11 +1,6 @@
-<div [class]="widget === false ? 'container-xl' : ''">
+<div [class]="widget === false ? 'full-container' : ''">
 
-  <div *ngIf="hashrateObservable$ | async" class="" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="card-header mb-0 mb-lg-4" [style]="widget ? 'display:none' : ''">
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
-    <div class="spinner-border text-light"></div>
-  </div>
-  
-  <div class="card-header mb-0 mb-lg-4 mt-3" [style]="widget ? 'display:none' : ''">
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as hashrates">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="hashrates.availableTimespanDay >= 90">
@@ -29,4 +24,10 @@
       </div>
     </form>
   </div>
+
+  <div *ngIf="hashrateObservable$ | async" [class]="widget === false ? 'chart' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+  
 </div>

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

@@ -8,3 +8,37 @@
   text-align: center;
   padding-bottom: 3px;
 }
+
+.full-container {
+  width: 100%;
+  height: calc(100% - 100px);
+  @media (max-width: 992px) {
+    height: calc(100% - 140px);
+  };
+  @media (max-width: 576px) {
+    height: calc(100% - 180px);
+  };
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  padding: 1.25rem;
+}
+
+.formRadioGroup {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 830px) {
+    flex-direction: row;
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 9px;
+    @media (min-width: 830px) {
+      font-size: 14px;
+    }
+  }
+}

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

@@ -22,12 +22,16 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 })
 export class HashrateChartComponent implements OnInit {
   @Input() widget: boolean = false;
+  @Input() right: number | string = 10;
+  @Input() left: number | string = 75;
 
   radioGroupForm: FormGroup;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
-    renderer: 'svg'
+    renderer: 'svg',
+    width: 'auto',
+    height: 'auto',
   };
 
   hashrateObservable$: Observable<any>;
@@ -73,6 +77,10 @@ export class HashrateChartComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      grid: {
+        right: this.right,
+        left: this.left,
+      },
       title: {
         text: this.widget ? '' : $localize`:@@mining.hashrate:Hashrate`,
         left: 'center',