Commit- Extra buttons in graph

src/app/view/graph-view/graph-detail/graph-detail.component.html

@@ -61,7 +61,7 @@
     <div class="row">
 
       <div class="col-md-9">
-        <div class="box_shadow_large bg-white p-3">
+        <div class="box_shadow_large bg-white p-3" id ="{{this.id}}" >
           <div class="overflow-hidden">
             <div class="blocks detail_graph">
 

src/app/view/graph-view/graph-detail/graph-detail.component.ts

@@ -20,6 +20,7 @@ export class GraphDetailComponent implements OnInit {
   TimeArr: any;
   public hashdata: any = [];
   public title: any;
+  public id:any;
   public chartType : any = [];
   public selectedItem: Number = 3;
   public selectedItem8: Number = 1;
@@ -66,6 +67,7 @@ export class GraphDetailComponent implements OnInit {
             //this.hashdata.layout.xaxis.domain = [0.1,0.9];
             //this.hashdata.layout.yaxis2.position = 1.25;
             this.title = 'Total Difficulty';
+            this.id= 'total-difficulty';
             this.selectedItem = 6;
             this.titleService.setTitle(
               this.route.snapshot.data.title + ' - ' + this.title,
@@ -83,6 +85,7 @@ export class GraphDetailComponent implements OnInit {
                 // this.hashdata.layout.yaxis2.position = 2.25;
                 this.title = 'Target Difficulty';
                 // this.selectedItem = 6;
+                this.id= 'total-difficulty';
                 this.titleService.setTitle(
                   this.route.snapshot.data.title + ' - ' + this.title,
                 );

src/app/view/home/graph-list/graph-list.component.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-6 col-lg-8 mb-4">
-    <div class="box_shadow">
+    <div class="box_shadow" id="target-difficulty">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.TARGET_DIFFICULTY' | translate}}</h2>
         <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
@@ -71,7 +71,7 @@
     </div>
   </div>
   <div class="col-md-6 col-lg-4 mb-4">
-    <div class="box_shadow">
+    <div class="box_shadow" id="transaction-over-time">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_BY_TIME' | translate}}</h2>
         <div class="chart_show heatmapshow">
@@ -112,7 +112,7 @@
   </div>
 </div>
 <div class="col-md-6 col-lg-4 mb-4">
-  <div class="box_shadow">
+  <div class="box_shadow" id="blocks">
     <div class="blocks">
       <h2 class="chart_heading d-inline-block">{{'home.BLOCKS' | translate}}</h2>
       <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.brg_last">{{
@@ -165,7 +165,7 @@
 </div>
 
 <div class="col-md-6 col-lg-4 mb-4">
-  <div class="box_shadow">
+  <div class="box_shadow" id="supply-growth">
     <div class="blocks">
       <h2 class="chart_heading d-inline-block">{{'home.SUPPLY_GROWTH' | translate}}</h2>
       <span class="txn_count" title="{{'home.SUPPLY_GROWTH_HOVER' | translate}}" *ngIf="this.gg_last">{{
@@ -212,7 +212,7 @@
 </div>
 
 <div class="col-md-6 col-lg-4 mb-4">
-  <div class="box_shadow">
+  <div class="box_shadow" id="transaction-fees">
     <div class="blocks">
       <h2 class="chart_heading d-inline-block">{{'home.TRANSACTION_FEES' | translate}}</h2>
       <span style="display:none;" class="txn_count" title="{{'home.TRANSACTION_FEE_HOVER' | translate}}" *ngIf="this.fg_last">{{this.fg_last |number}}</span>
@@ -258,7 +258,7 @@
 </div>
 </div>
 <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-  <div class="box_shadow">
+  <div class="box_shadow" id="blocks-mined">
     <div class="blocks">
       <h2 class="chart_heading d-inline-block">{{'home.BLOCKS_MINED' | translate}}</h2>
       <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.dg_last">{{
@@ -348,7 +348,7 @@
                   class="fa fa-long-arrow-right"></i></span></a>
           </div>
         </div> -->
-      <div class="box_shadow">
+      <div class="box_shadow" id="blocks-by-algorithm">
           <div class="blocks">
             <h2 class="chart_heading d-inline-block">Blocks by Algorithm</h2>
             <span class="txn_count" title="{{'home.BOCKS_COUNT_HOVER' | translate}}" *ngIf="this.sg_last">{{
@@ -402,7 +402,7 @@
 
 
   <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-    <div class="box_shadow">
+    <div class="box_shadow" id="blocks-interval">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.BLOCKSINTERVAL' | translate}}</h2>
         <span class="txn_count"  title="{{'home.BLOCK_INTERVAL_BW_BLOCKS_HOVER' | translate}}" *ngIf="this.blockinteval_last">{{
@@ -446,7 +446,7 @@
     </div>
   </div>
   <div  *ngIf="viewchartvar" class="col-md-6 col-lg-8 mb-4">
-    <div class="box_shadow">
+    <div class="box_shadow" id="total-difficulty">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.TOTAL_DIFFICULTY' | translate}}</h2>
         <!-- <span class="txn_count" *ngIf="this.lg_last.length > 0"><span *ngFor="let l of lg_last">{{
@@ -527,7 +527,7 @@
     </div>
   </div>
   <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-    <div class="box_shadow">
+    <div class="box_shadow" id="block-interval">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.BLOCK_INTERVAL' | translate}}</h2>
         <span class="txn_count" title="{{'home.BLOCK_INTERVAL_HOVER' | translate}}" *ngIf="this.ag_last">{{ this.ag_last | number }}s</span>
@@ -572,7 +572,7 @@
     </div>
   </div>
   <div *ngIf="viewchartvar" [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
-    <div class="box_shadow">
+    <div class="box_shadow" id="transaction-vs-date">
       <div class="blocks">
         <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2>
         <span class="txn_count" title="{{'home.TRANSACTION_LINECHAT_HOVER' | translate}}" *ngIf="this.tg_last">{{

src/assets/css/style.css

@@ -689,10 +689,26 @@ body.dark_theme {
 .dark_theme .footer_div{border-color: #a5a5a5}
 .dark_theme .view_page_header {background: #222223;}
 .dark_theme .view_content {background-color: #252525;}
-.js-plotly-plot .plotly .modebar,
+.js-plotly-plot .plotly .modebar .modebar-group,
 .zerolinelayer {
   display: none;
 }
+/* #total-difficulty .js-plotly-plot .plotly .modebar .modebar-group{display: block;} */
+#target-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(1){display: block;}
+#target-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(3){display: block;}
+/* #target-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(4){display: block;} */
+/* #target-difficulty .js-plotly-plot .plotly .modebar .modebar-group::nth-child(6){display: block;} */
+
+#total-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(1){display: block;}
+#total-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(3){display: block;}
+/* #total-difficulty .js-plotly-plot .plotly .modebar .modebar-group:nth-child(4){display: block;}
+#total-difficulty .js-plotly-plot .plotly .modebar .modebar-group::nth-child(5){display: block;} */
+
+
+.modebar-btn svg path{fill: #BF9B30 !important;}
+.dark_theme .modebar .modebar-group{ background:#222324 !important; }
+.modebar .modebar-group{ background:#f3f4f2 !important; }
+
 .dark_theme .zibra_grey{background: #252525;}
 .dark_theme .zibra_white{background: #222223;}
 .dark_theme .bg{fill: transparent !important;}