+
+
+
+
Hashrate
+
+ {{ hashrates.currentHashrate | amountShortener }}
+ hashes/sec
+
+
+
+
Difficulty
+
+ {{ hashrates.currentDifficulty | amountShortener }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 0254d3175..62903d4f4 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -1,3 +1,11 @@
+.card-header {
+ border-bottom: 0;
+ font-size: 18px;
+ @media (min-width: 465px) {
+ font-size: 20px;
+ }
+}
+
.main-title {
position: relative;
color: #ffffff91;
@@ -10,13 +18,14 @@
}
.full-container {
+ padding: 0px 15px;
width: 100%;
- height: calc(100% - 100px);
+ height: calc(100% - 170px);
@media (max-width: 992px) {
- height: calc(100% - 140px);
+ height: calc(100% - 220px);
};
- @media (max-width: 576px) {
- height: calc(100% - 180px);
+ @media (max-width: 575px) {
+ height: calc(100% - 260px);
};
}
@@ -24,18 +33,41 @@
width: 100%;
height: 100%;
padding-bottom: 20px;
- padding-right: 20px;
+ padding-right: 10px;
+ @media (max-width: 992px) {
+ padding-bottom: 25px;
+ }
+ @media (max-width: 829px) {
+ padding-bottom: 50px;
+ }
+ @media (max-width: 767px) {
+ padding-bottom: 25px;
+ }
+ @media (max-width: 629px) {
+ padding-bottom: 55px;
+ }
+ @media (max-width: 567px) {
+ padding-bottom: 55px;
+ }
}
.chart-widget {
width: 100%;
height: 100%;
- max-height: 293px;
+ max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
+ @media (min-width: 1130px) {
+ position: relative;
+ top: -65px;
+ }
+ @media (min-width: 830px) and (max-width: 1130px) {
+ position: relative;
+ top: 0px;
+ }
@media (min-width: 830px) {
flex-direction: row;
float: right;
@@ -48,3 +80,66 @@
}
}
}
+
+.pool-distribution {
+ min-height: 56px;
+ display: block;
+ @media (min-width: 485px) {
+ display: flex;
+ flex-direction: row;
+ }
+ h5 {
+ margin-bottom: 10px;
+ }
+ .item {
+ width: 50%;
+ margin: 0px auto 10px;
+ display: inline-block;
+ @media (min-width: 485px) {
+ margin: 0px auto 10px;
+ }
+ @media (min-width: 785px) {
+ margin: 0px auto 0px;
+ }
+ &:last-child {
+ margin: 0px auto 0px;
+ }
+ &:nth-child(2) {
+ order: 2;
+ @media (min-width: 485px) {
+ order: 3;
+ }
+ }
+ &:nth-child(3) {
+ order: 3;
+ @media (min-width: 485px) {
+ order: 2;
+ display: block;
+ }
+ @media (min-width: 768px) {
+ display: none;
+ }
+ @media (min-width: 992px) {
+ display: block;
+ }
+ }
+ .card-title {
+ font-size: 1rem;
+ color: #4a68b9;
+ }
+ .card-text {
+ font-size: 18px;
+ span {
+ color: #ffffff66;
+ font-size: 12px;
+ }
+ }
+ }
+}
+
+.skeleton-loader {
+ width: 100%;
+ display: block;
+ max-width: 80px;
+ margin: 15px auto 3px;
+}
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index 382071e37..52954d782 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -61,6 +61,7 @@ export class HashrateChartComponent implements OnInit {
.pipe(
startWith('1y'),
switchMap((timespan) => {
+ this.isLoading = true;
return this.apiService.getHistoricalHashrate$(timespan)
.pipe(
tap((data: any) => {
@@ -109,21 +110,10 @@ export class HashrateChartComponent implements OnInit {
(new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp)
) / 3600 / 24;
- const tableData = [];
- for (let i = data.difficulty.length - 1; i > 0; --i) {
- const selectedPowerOfTen: any = selectPowerOfTen(data.difficulty[i].difficulty);
- const change = (data.difficulty[i].difficulty / data.difficulty[i - 1].difficulty - 1) * 100;
-
- tableData.push(Object.assign(data.difficulty[i], {
- change: change,
- difficultyShorten: formatNumber(
- data.difficulty[i].difficulty / selectedPowerOfTen.divider,
- this.locale, '1.2-2') + selectedPowerOfTen.unit
- }));
- }
return {
availableTimespanDay: availableTimespanDay,
- difficulty: this.tableOnly ? tableData.slice(0, 5) : tableData,
+ currentDifficulty: Math.round(data.difficulty[data.difficulty.length - 1].difficulty * 100) / 100,
+ currentHashrate: data.hashrates[data.hashrates.length - 1].avgHashrate,
};
}),
retryWhen((errors) => errors.pipe(
@@ -155,6 +145,7 @@ export class HashrateChartComponent implements OnInit {
this.chartOptions = {
title: title,
+ animation: false,
color: [
new graphic.LinearGradient(0, 0, 0, 0.65, [
{ offset: 0, color: '#F4511E' },
@@ -166,9 +157,10 @@ export class HashrateChartComponent implements OnInit {
'#D81B60',
],
grid: {
+ top: 30,
right: this.right,
left: this.left,
- bottom: this.widget ? 30 : 60,
+ bottom: this.widget ? 30 : this.isMobile() ? 90 : 60,
},
tooltip: {
show: !this.isMobile() || !this.widget,
@@ -209,7 +201,7 @@ export class HashrateChartComponent implements OnInit {
type: 'time',
splitNumber: (this.isMobile() || this.widget) ? 5 : 10,
},
- legend: data.hashrates.length === 0 ? undefined : {
+ legend: (this.widget || data.hashrates.length === 0) ? undefined : {
data: [
{
name: 'Hashrate',
@@ -241,7 +233,6 @@ export class HashrateChartComponent implements OnInit {
return value.min * 0.9;
},
type: 'value',
- name: 'Hashrate',
axisLabel: {
color: 'rgb(110, 112, 121)',
formatter: (val) => {
@@ -259,7 +250,6 @@ export class HashrateChartComponent implements OnInit {
return value.min * 0.9;
},
type: 'value',
- name: 'Difficulty',
position: 'right',
axisLabel: {
color: 'rgb(110, 112, 121)',
@@ -301,17 +291,18 @@ export class HashrateChartComponent implements OnInit {
type: 'inside',
realtime: true,
zoomLock: true,
- zoomOnMouseWheel: true,
- moveOnMouseMove: true,
maxSpan: 100,
minSpan: 10,
+ moveOnMouseMove: false,
}, {
showDetail: false,
show: true,
type: 'slider',
brushSelect: false,
realtime: true,
- bottom: 0,
+ bottom: this.isMobile() ? 30 : 0,
+ left: 20,
+ right: 15,
selectedDataBackground: {
lineStyle: {
color: '#fff',
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
index 69da008d2..32f6a7b25 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@@ -1,6 +1,7 @@
-