From 8ddcd298b0d992b2d1313129076ade4f51b1d0d9 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Fri, 17 Sep 2021 09:40:51 -0300
Subject: [PATCH]  Fix axis labels css.  Change series smooth to false.  Make
 charts margin smaller to match box container.

---
 .../incoming-transactions-graph.component.ts           | 10 +++++++++-
 .../mempool-graph/mempool-graph.component.ts           |  8 +++++++-
 .../components/statistics/statistics.component.html    |  4 ++--
 frontend/src/app/dashboard/dashboard.component.html    |  5 ++++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 68d1744e3..d57ce616e 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -99,10 +99,18 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
       },
       xAxis: {
         type: 'category',
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12
+        },
         data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
       },
       yAxis: {
         type: 'value',
+        axisLabel: {
+          fontSize: 11,
+        },
         splitLine: {
           lineStyle: {
             type: 'dotted',
@@ -115,7 +123,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         {
           data: this.data.series[0],
           type: 'line',
-          smooth: (this.template === 'advanced') ? false : true,
+          smooth: false,
           showSymbol: false,
           lineStyle: {
             width: 3,
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 0b9955ecf..56aa12a92 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -286,7 +286,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         {
           type: 'category',
           boundaryGap: false,
-          axisLine: { onZero: false },
+          axisLine: { onZero: true },
+          axisLabel: {
+            align: 'center',
+            fontSize: 11,
+            lineHeight: 12,
+          },
           data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
         }
       ],
@@ -294,6 +299,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         type: 'value',
         axisLine: { onZero: false },
         axisLabel: {
+          fontSize: 11,
           formatter: (value: number) => (`${this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)}`),
         },
         splitLine: {
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index c06ef4b37..04cfb5548 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -45,7 +45,7 @@
               [template]="'advanced'"
               [limitFee]="500"
               [height]="500"
-              [left]="65"
+              [left]="50"
               [data]="mempoolStats"
             ></app-mempool-graph>
           </div>
@@ -62,7 +62,7 @@
           <div class="incoming-transactions-graph">
             <app-incoming-transactions-graph
               [height]="500"
-              [left]="65"
+              [left]="50"
               [template]="'advanced'"
               [data]="mempoolTransactionsWeightPerSecondData"
             ></app-incoming-transactions-graph>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index b42956b30..2b352aae2 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -51,6 +51,8 @@
               <app-mempool-graph
                 [template]="'widget'"
                 [limitFee]="150"
+                [left]="60"
+                [right]="0"
                 [data]="mempoolStats.mempool"
               ></app-mempool-graph>
             </div>
@@ -65,7 +67,8 @@
             <hr>
             <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
               <app-incoming-transactions-graph
-                [left]="50"
+                [left]="35"
+                [right]="0"
                 [data]="mempoolStats.weightPerSecond"
                 ></app-incoming-transactions-graph>
             </div>