Tweak charts color - Apply mempool tooltip style

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

@@ -1,5 +1,5 @@
 import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { EChartsOption } from 'echarts';
+import { EChartsOption, graphic } from 'echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
@@ -47,13 +47,6 @@ export class DifficultyChartComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    const powerOfTen = {
-      terra: Math.pow(10, 12),
-      giga: Math.pow(10, 9),
-      mega: Math.pow(10, 6),
-      kilo: Math.pow(10, 3),
-    }
-
     this.difficultyObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
       .pipe(
         startWith('1y'),
@@ -94,6 +87,13 @@ export class DifficultyChartComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      color: new graphic.LinearGradient(0, 0, 0, 0.65, [
+        { offset: 0, color: '#D81B60' },
+        { offset: 0.25, color: '#8E24AA' },
+        { offset: 0.5, color: '#5E35B1' },
+        { offset: 0.75, color: '#3949AB' },
+        { offset: 1, color: '#1E88E5' }
+      ]),
       title: {
         text: this.widget? '' : $localize`:@@mining.difficulty:Difficulty`,
         left: 'center',
@@ -104,6 +104,17 @@ export class DifficultyChartComponent implements OnInit {
       tooltip: {
         show: true,
         trigger: 'axis',
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+        },
+        borderColor: '#000',
+        formatter: params => {
+          return `<b style="color: white">${params[0].axisValueLabel}</b><br>
+            ${params[0].marker} ${formatNumber(params[0].value[1], this.locale, '1.0-0')}`
+        }
       },
       axisPointer: {
         type: 'line',
@@ -137,9 +148,6 @@ export class DifficultyChartComponent implements OnInit {
         lineStyle: {
           width: 2,
         },
-        areaStyle: {
-          opacity: 0.25
-        },
       },
     };
   }

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

@@ -1,5 +1,5 @@
 import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
-import { EChartsOption } from 'echarts';
+import { EChartsOption, graphic } from 'echarts';
 import { Observable } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from 'src/app/services/api.service';
@@ -78,6 +78,13 @@ export class HashrateChartComponent implements OnInit {
 
   prepareChartOptions(data) {
     this.chartOptions = {
+      color: new graphic.LinearGradient(0, 0, 0, 0.65, [
+        { offset: 0, color: '#F4511E' },
+        { offset: 0.25, color: '#FB8C00' },
+        { offset: 0.5, color: '#FFB300' },
+        { offset: 0.75, color: '#FDD835' },
+        { offset: 1, color: '#7CB342' }
+      ]),
       grid: {
         right: this.right,
         left: this.left,
@@ -92,6 +99,17 @@ export class HashrateChartComponent implements OnInit {
       tooltip: {
         show: true,
         trigger: 'axis',
+        backgroundColor: 'rgba(17, 19, 31, 1)',
+        borderRadius: 4,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+        textStyle: {
+          color: '#b1b1b1',
+        },
+        borderColor: '#000',
+        formatter: params => {
+          return `<b style="color: white">${params[0].axisValueLabel}</b><br>
+            ${params[0].marker} ${formatNumber(params[0].value[1], this.locale, '1.0-0')} H/s`
+        }
       },
       axisPointer: {
         type: 'line',
@@ -125,9 +143,6 @@ export class HashrateChartComponent implements OnInit {
         lineStyle: {
           width: 2,
         },
-        areaStyle: {
-          opacity: 0.25
-        },
       },
       dataZoom: this.widget ? null : [{
         type: 'inside',

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

@@ -4,9 +4,9 @@
 
     <!-- pool distribution -->
     <div class="col">
-      <div class="main-title" i18n="mining.pool-share">Mining Pools Share (1w)</div>
       <div class="card">
         <div class="card-body">
+          <h5 class="card-title" i18n="mining.pool-share">Mining Pools Share (1w)</h5>
           <app-pool-ranking [widget]=true></app-pool-ranking>
           <div class="text-center"><a href="" [routerLink]="['/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
@@ -16,9 +16,9 @@
 
     <!-- hashrate -->
     <div class="col">
-      <div class="main-title" i18n="mining.hashrate">Hashrate (1y)</div>
       <div class="card">
         <div class="card-body">
+          <h5 class="card-title" i18n="mining.hashrate">Hashrate (1y)</h5>
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
           <div class="text-center"><a href="" [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
@@ -28,9 +28,9 @@
 
     <!-- difficulty -->
     <div class="col">
-      <div class="main-title" i18n="mining.difficulty">Difficulty (1y)</div>
       <div class="card">
         <div class="card-body">
+          <h5 class="card-title" i18n="ning.difficulty">Difficulty (1y)</h5>
           <app-difficulty-chart [widget]=true></app-difficulty-chart>
           <div class="text-center"><a href="" [routerLink]="['/mining/difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>

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

@@ -15,6 +15,11 @@
   height: 100%;
 }
 
+.card-title {
+  color: #4a68b9;
+  font-size: 1rem;
+}
+
 .card-wrapper {
   .card {
     height: auto !important;

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -121,21 +121,24 @@ export class PoolRankingComponent implements OnInit {
         value: pool.share,
         name: pool.name + (this.isMobile() ? `` : ` (${pool.share}%)`),
         label: {
-          color: '#FFFFFF',
+          color: '#b1b1b1',
           overflow: 'break',
         },
         tooltip: {
-          backgroundColor: '#282d47',
+          backgroundColor: 'rgba(17, 19, 31, 1)',
+          borderRadius: 4,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
           textStyle: {
-            color: '#FFFFFF',
+            color: '#b1b1b1',
           },
+          borderColor: '#000',
           formatter: () => {
             if (this.poolsWindowPreference === '24h') {
-              return `<u><b>${pool.name} (${pool.share}%)</b></u><br>` +
+              return `<b style="color: white">${pool.name} (${pool.share}%)</b><br>` +
                 pool.lastEstimatedHashrate.toString() + ' PH/s' +
                 `<br>` + pool.blockCount.toString() + ` blocks`;
             } else {
-              return `<u><b>${pool.name} (${pool.share}%)</b></u><br>` +
+              return `<b style="color: white">${pool.name} (${pool.share}%)</b><br>` +
                 pool.blockCount.toString() + ` blocks`;
             }
           }