From e770520f0e8c989ec520726f2077a45af85ae41d Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 22 Feb 2022 00:17:41 +0900
Subject: [PATCH] Add data zoom to difficulty

---
 backend/src/repositories/BlocksRepository.ts  |  2 +-
 .../src/repositories/HashratesRepository.ts   |  2 +-
 .../difficulty-chart.component.html           | 10 +++----
 .../difficulty-chart.component.scss           | 17 +++++++++++
 .../difficulty-chart.component.ts             | 29 +++++++++++++++++--
 5 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts
index 9c7e9b778..235dc9ebd 100644
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@@ -274,7 +274,7 @@ class BlocksRepository {
     }
 
     query += ` GROUP BY difficulty
-      ORDER BY blockTimestamp DESC`;
+      ORDER BY blockTimestamp`;
 
     const [rows]: any[] = await connection.query(query);
     connection.release();
diff --git a/backend/src/repositories/HashratesRepository.ts b/backend/src/repositories/HashratesRepository.ts
index 0e8f1477e..fd4340d4e 100644
--- a/backend/src/repositories/HashratesRepository.ts
+++ b/backend/src/repositories/HashratesRepository.ts
@@ -41,7 +41,7 @@ class HashratesRepository {
       query += ` WHERE hashrate_timestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
     }
 
-    query += ` ORDER by hashrate_timestamp DESC`;
+    query += ` ORDER by hashrate_timestamp`;
 
     const [rows]: any[] = await connection.query(query);
     connection.release();
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 ca005f2d4..eb34d4075 100644
--- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html
+++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.html
@@ -1,10 +1,5 @@
 <div [class]="widget === false ? 'container-xl' : ''">
 
-  <div *ngIf="difficultyObservable$ | async" class="" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
-    <div class="spinner-border text-light"></div>
-  </div>
-
   <div class="card-header mb-0 mb-lg-4" [style]="widget ? 'display:none' : ''">
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(difficultyObservable$ | async) as diffChanges">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
@@ -30,6 +25,11 @@
     </form>
   </div>
 
+  <div *ngIf="difficultyObservable$ | async" class="mb-5" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
+  <div class="text-center loadingGraphs" *ngIf="isLoading">
+    <div class="spinner-border text-light"></div>
+  </div>
+
   <table class="table table-borderless table-sm text-center" *ngIf="!widget">
     <thead>
       <tr>
diff --git a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss
index c3a63e9fa..4205c9db7 100644
--- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss
+++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.scss
@@ -8,3 +8,20 @@
   text-align: center;
   padding-bottom: 3px;
 }
+
+.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;
+    }
+  }
+}
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 3262c1023..4bbc9520a 100644
--- a/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts
+++ b/frontend/src/app/components/difficulty-chart/difficulty-chart.component.ts
@@ -63,9 +63,9 @@ export class DifficultyChartComponent implements OnInit {
                 ) / 3600 / 24;
 
                 const tableData = [];
-                for (let i = 0; i < data.adjustments.length - 1; ++i) {
+                for (let i = data.adjustments.length - 1; i > 0; --i) {
                   const selectedPowerOfTen: any = selectPowerOfTen(data.adjustments[i].difficulty);
-                  const change = (data.adjustments[i].difficulty / data.adjustments[i + 1].difficulty - 1) * 100;
+                  const change = (data.adjustments[i].difficulty / data.adjustments[i - 1].difficulty - 1) * 100;
 
                   tableData.push(Object.assign(data.adjustments[i], {
                     change: change,
@@ -149,6 +149,31 @@ export class DifficultyChartComponent implements OnInit {
           width: 2,
         },
       },
+      dataZoom: this.widget ? null : [{
+        type: 'inside',
+        realtime: true,
+        zoomLock: true,
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        maxSpan: 100,
+        minSpan: 10,
+      }, {
+        showDetail: false,
+        show: true,
+        type: 'slider',
+        brushSelect: false,
+        realtime: true,
+        bottom: 0,
+        selectedDataBackground: {
+          lineStyle: {
+            color: '#fff',
+            opacity: 0.45,
+          },
+          areaStyle: {
+            opacity: 0,
+          }
+        },
+      }],
     };
   }