diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html index e4bbfa298..5ec80a140 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html @@ -1,5 +1,23 @@
+
+
+
+
Hashrate
+

+ {{ hashrates.currentHashrate | amountShortener }} + hashes/tx +

+
+
+
Difficulty
+

+ {{ hashrates.currentDifficulty | amountShortener }} +

+
+
+
+
Hashrate & Difficulty
@@ -33,3 +51,20 @@
+ + +
+
+
Hashrate
+

+ +

+
+
+
Difficulty
+

+ +

+
+
+ \ 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 fc455ccd7..62903d4f4 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss @@ -53,7 +53,7 @@ .chart-widget { width: 100%; height: 100%; - max-height: 293px; + max-height: 270px; } .formRadioGroup { @@ -80,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 2c0ac0413..52954d782 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -110,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( @@ -168,6 +157,7 @@ export class HashrateChartComponent implements OnInit { '#D81B60', ], grid: { + top: 30, right: this.right, left: this.left, bottom: this.widget ? 30 : this.isMobile() ? 90 : 60, @@ -211,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', diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html index b9772aa66..cdcd03319 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html @@ -86,9 +86,6 @@
-
- Hashrate (1y) -
View more »
diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index 5c58b7513..529c6be79 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -1,39 +1,26 @@ import { Pipe, PipeTransform } from '@angular/core'; -// https://medium.com/@thunderroid/angular-short-number-suffix-pipe-1k-2m-3b-dded4af82fb4 - @Pipe({ name: 'amountShortener' }) export class AmountShortenerPipe implements PipeTransform { - transform(number: number, args?: any): any { - if (isNaN(number)) return null; // will only work value is a number - if (number === null) return null; - if (number === 0) return null; - let abs = Math.abs(number); - const rounder = Math.pow(10, 1); - const isNegative = number < 0; // will also work for Negetive numbers - let key = ''; - - const powers = [ - { key: 'E', value: 10e18 }, - { key: 'P', value: 10e15 }, - { key: 'T', value: 10e12 }, - { key: 'B', value: 10e9 }, - { key: 'M', value: 10e6 }, - { key: 'K', value: 1000 } - ]; - - for (let i = 0; i < powers.length; i++) { - let reduced = abs / powers[i].value; - reduced = Math.round(reduced * rounder) / rounder; - if (reduced >= 1) { - abs = reduced; - key = powers[i].key; - break; - } + transform(num: number, ...args: number[]): unknown { + if (num < 1000) { + return num; } - return (isNegative ? '-' : '') + abs + key; + const digits = args[0] || 1; + const lookup = [ + { value: 1, symbol: '' }, + { value: 1e3, symbol: 'k' }, + { value: 1e6, symbol: 'M' }, + { value: 1e9, symbol: 'G' }, + { value: 1e12, symbol: 'T' }, + { value: 1e15, symbol: 'P' }, + { value: 1e18, symbol: 'E' } + ]; + const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; + var item = lookup.slice().reverse().find((item) => num >= item.value); + return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'; } } \ No newline at end of file