From 1630ff717efa85b82076d234c49889cbbc27cbad Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 17 Feb 2022 10:15:41 +0900
Subject: [PATCH] On mobile, show power of ten difficulty instead of full
 number

---
 .../difficulty-chart.component.html           |  3 ++-
 .../difficulty-chart.component.ts             | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html
index 78350d5d5..1cdd90576 100644
--- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html
+++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html
@@ -43,7 +43,8 @@
       <tr *ngFor="let diffChange of diffChanges.data">
         <td><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a></td>
         <td>&lrm;{{ diffChange.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
-        <td>{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
+        <td class="d-none d-md-block">{{ formatNumber(diffChange.difficulty, locale, '1.2-2') }}</td>
+        <td class="d-block d-md-none">{{ diffChange.difficultyShorten }}</td>
         <td [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
       </tr>
     </tbody>
diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts
index 97be13f78..47e0d9ea4 100644
--- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts
+++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts
@@ -44,6 +44,13 @@ 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'),
@@ -62,8 +69,20 @@ export class DifficultyChartComponent implements OnInit {
                 const tableData = [];
                 for (let i = 0; i < data.adjustments.length - 1; ++i) {
                   const change = (data.adjustments[i].difficulty / data.adjustments[i + 1].difficulty - 1) * 100;
+                  let selectedPowerOfTen = { divider: powerOfTen.terra, unit: 'T' };
+                  if (data.adjustments[i].difficulty < powerOfTen.mega) {
+                    selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling
+                  } else if (data.adjustments[i].difficulty < powerOfTen.giga) {
+                    selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' };
+                  } else if (data.adjustments[i].difficulty < powerOfTen.terra) {
+                    selectedPowerOfTen = { divider: powerOfTen.giga, unit: 'G' };
+                  }
+
                   tableData.push(Object.assign(data.adjustments[i], {
-                    change: change
+                    change: change,
+                    difficultyShorten: formatNumber(
+                      data.adjustments[i].difficulty / selectedPowerOfTen.divider,
+                      this.locale, '1.2-2') + selectedPowerOfTen.unit
                   }));
                 }
                 return {