Download request stats as png (#235)

ludeknovy · Feb 27, 2022 · 019bdad · 019bdad
1 parent 56f53eb
commit 019bdad
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "deepmerge": "^4.2.2",
     "highcharts": "^9.2.2",
     "highcharts-angular": "^2.10.0",
+    "html2canvas": "^1.4.1",
     "moment": "^2.24.0",
     "ngx-spinner": "^12.0.0",
     "ngx-timeago": "^2.0.0",

diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.css b/src/app/item-detail/request-stats/request-stats-compare.component.css
@@ -1,3 +1,7 @@
 .label-focus {
   margin-left: 5px;
 }
+
+#download {
+  display: none;
+}
diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.html b/src/app/item-detail/request-stats/request-stats-compare.component.html
@@ -27,6 +27,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               ngbDropdownItem><span class="compare-desc-btn">
                 Compare to base run</span></button>
             <app-stats-compare (itemDetailToCompare)="itemToCompare($event)"></app-stats-compare>
+            <button class="quick-base-comparison btn btn-sm" (click)="downloadAsPng()" ngbDropdownItem>Download as png</button>
           </div>
         </div>
       </div>
@@ -48,7 +49,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
 
     </div>
     <div class="labels-detail table-responsive">
-      <table class="table" [mfData]="labelsData" #mf="mfDataTable">
+      <table #screen class="table" [mfData]="labelsData" #mf="mfDataTable">
         <thead>
           <tr>
             <th scope="col" class="hd jtl-head-color">
@@ -84,9 +85,9 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
             <th scope="col" class="hd jtl-head-color">
               <mfDefaultSorter by="errorRate">error rate</mfDefaultSorter>
             </th>
-            <th scope="col" class="hd jtl-head-color">
+            <th scope="col" class="hd jtl-head-color" data-html2canvas-ignore="true">
             </th>
-            <th scope="col" class="hd jtl-head-color">
+            <th scope="col" class="hd jtl-head-color" data-html2canvas-ignore="true">
             </th>
           </tr>
         </thead>
@@ -124,15 +125,15 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
                 [className]="comparedData ? _.errorRate > 0 ? 'value-positive' : 'value-negative' : ''">{{_.errorRate | number: '1.0-2'}}</span>
             </td>
             <td>
-                <app-label-health *ngIf="_.statusCodes && _.statusCodes.length > 0" [statusCodes]="_.statusCodes" [responseFailures]="_.responseMessageFailures" [labelName]="_.label" [errorRate]="_.errorRate">
+                <app-label-health *ngIf="_.statusCodes && _.statusCodes.length > 0" [statusCodes]="_.statusCodes" [responseFailures]="_.responseMessageFailures" [labelName]="_.label" [errorRate]="_.errorRate" data-html2canvas-ignore="true">
               </app-label-health>
             </td>
             <td>
-              <app-label-trend *ngIf="!isAnonymous"
+              <app-label-trend *ngIf="!isAnonymous" data-html2canvas-ignore="true"
                 [trendInput]="{ environment: itemData.environment, labelName: _.label }" [params]="params">
               </app-label-trend>
 
-              <a class="jtl-a-primary label-focus" (click)="focusLabel(_.label)"><i
+              <a class="jtl-a-primary label-focus" (click)="focusLabel(_.label)" data-html2canvas-ignore="true"><i
                   class="fas fa-search-location fa-sm"></i></a>
             </td>
           </tr>
@@ -174,3 +175,8 @@ <h5 class="modal-title" id="modal-basic-title">Search help</h5>
   </div>
 
 </div>
+
+<div id="download">
+  <img #canvas>
+  <a #downloadLink></a>
+</div>
diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.ts b/src/app/item-detail/request-stats/request-stats-compare.component.ts
@@ -1,10 +1,11 @@
-import { Component, Input, OnInit, OnDestroy } from "@angular/core";
+import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
 import { ItemParams } from "src/app/scenario/item-controls/item-controls.model";
 import { bytesToMbps, roundNumberTwoDecimals } from "../calculations";
 import { AnalyzeChartService } from "../../analyze-chart.service";
 import { ItemsApiService } from "src/app/items-api.service";
 import { ToastrService } from "ngx-toastr";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import html2canvas from "html2canvas";
 
 
 
@@ -19,6 +20,10 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy {
   @Input() isAnonymous: boolean;
   @Input() params: ItemParams;
 
+  @ViewChild("screen") screen: ElementRef;
+  @ViewChild("canvas") canvas: ElementRef;
+  @ViewChild("downloadLink") downloadLink: ElementRef;
+
   comparingData;
   comparedData;
   comparedDataMs;
@@ -258,4 +263,13 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy {
   openSearchHelp(content) {
     this.modalService.open(content, { ariaLabelledBy: "modal-basic-title" });
   }
+
+  downloadAsPng() {
+    html2canvas(this.screen.nativeElement).then(canvas => {
+      this.canvas.nativeElement.src = canvas.toDataURL();
+      this.downloadLink.nativeElement.href = canvas.toDataURL("image/png");
+      this.downloadLink.nativeElement.download = "request-stats.png";
+      this.downloadLink.nativeElement.click();
+    });
+  }
 }