tango-app-ui-analyse-report 3.3.1-alpha.2 → 3.3.1-alpha.3

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tango-analyse-report",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,25 +1,12 @@
-{
-  "name": "tango-app-ui-analyse-report",
-  "version": "3.3.1-alpha.2",
-  "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/tango-app-ui-analyse-report.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tango-app-ui-analyse-report.mjs",
-      "esm": "./esm2022/tango-app-ui-analyse-report.mjs",
-      "default": "./fesm2022/tango-app-ui-analyse-report.mjs"
-    }
-  }
-}
+{
+  "name": "tango-app-ui-analyse-report",
+  "version": "3.3.1-alpha.3",
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/get-download-report/get-download-report.component.html

@@ -0,0 +1,15 @@
+<div class="card border-0">
+    <div class="card-header">
+        <span class="card-title">Report History</span>
+    </div>
+    <div *ngIf="!noData" class="card-body">
+        <div *ngFor="let list of reportList">
+            <div class="DownloadReport mb-5 cursor-pointer" (click)="downLoadData(list?.Key)">{{list?.Key.split('/').splice(1).join('/')}}||{{list?.LastModified}}</div>
+        </div>
+    </div>
+    <div *ngIf="noData" class="card-body border-0">
+        <div class="card-body d-flex justify-content-center align-items-center flex-column">
+            <img class="img-src w-25" src="./assets/tango/Icons/Nodata.svg" alt="">
+        </div> 
+    </div>
+</div> 

package/src/lib/components/get-download-report/get-download-report.component.scss

@@ -0,0 +1,6 @@
+.DownloadReport{
+    font-size: 16px;
+    font-weight: 600;
+    text-decoration: underline;
+    color: #00A3FF;
+}

package/src/lib/components/get-download-report/get-download-report.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetDownloadReportComponent } from './get-download-report.component';
+
+describe('GetDownloadReportComponent', () => {
+  let component: GetDownloadReportComponent;
+  let fixture: ComponentFixture<GetDownloadReportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GetDownloadReportComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GetDownloadReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/get-download-report/get-download-report.component.ts

@@ -0,0 +1,61 @@
+import { Component,Input, OnInit } from '@angular/core';
+import { AnalysereportService } from '../../service/analysereport.service';
+
+@Component({
+  selector: 'lib-get-download-report',
+  templateUrl: './get-download-report.component.html',
+  styleUrl: './get-download-report.component.scss'
+})
+export class GetDownloadReportComponent implements OnInit {
+  @Input() data:any;
+  activeData: any;
+  reportList: any;
+  noData:boolean = false;
+
+constructor(private service:AnalysereportService){
+
+}
+
+ngOnInit(){
+  this.getReportList();
+}
+
+getReportList(){
+  let payload = {
+    fileDate : this.data?.fileDate,
+    clientId : this.data?.clientId
+  }
+  this.service.getReportList(payload).subscribe({
+    next:(res:any) => {
+      if(res && res.code === 200){
+        this.reportList = res?.data?.result;
+      }else{
+        this.noData = true;
+      }
+    },
+    complete:()=>{
+        
+    },
+    error:(err)=>{
+      this.noData = true;
+    },
+  })
+}
+
+downLoadData(type:any){
+  this.service.downloadReport(type).subscribe((res)=>{
+    this.saveFile(res, type.split('/').pop())
+  })
+}
+
+ saveFile(buffer: ArrayBuffer, filename: string) {
+  const blob = new Blob([buffer], { type: 'application/octet-stream' });
+  const url = window.URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  window.URL.revokeObjectURL(url);
+}
+
+}

package/src/lib/components/tango-analyse-report/tango-analyse-report.component.html

@@ -0,0 +1 @@
+<lib-user-report></lib-user-report>

package/src/lib/components/tango-analyse-report/tango-analyse-report.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TangoAnalyseReportComponent } from './tango-analyse-report.component';
+
+describe('TangoAnalyseReportComponent', () => {
+  let component: TangoAnalyseReportComponent;
+  let fixture: ComponentFixture<TangoAnalyseReportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TangoAnalyseReportComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TangoAnalyseReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/tango-analyse-report/tango-analyse-report.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PageInfoService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-tango-analyse-report',
+  templateUrl: './tango-analyse-report.component.html',
+  styleUrl: './tango-analyse-report.component.scss'
+})
+export class TangoAnalyseReportComponent implements OnInit {
+
+  constructor(public pageInfo:PageInfoService) {}
+
+  ngOnInit(): void {
+    this.setPageData();
+  }
+
+   setPageData() {
+    this.pageInfo.setTitle('Reports')
+    this.pageInfo.setDescription('Reports')
+    this.pageInfo.setBreadcrumbs([
+      { title: 'Analyze', path: '/manage/traffic', isActive: false, isSeparator: false },
+      { title: 'Analyze', path: '/manage/traffic', isActive: false, isSeparator: true },
+    ])
+  }
+
+}

package/src/lib/components/user-report/user-report.component.html

@@ -0,0 +1,241 @@
+<div class="row mb-5">
+  <div [ngClass]="showsidenav ? 'col-sm-3':'d-none'">
+     <div class="card position-relative h-100">
+         <div class="card-body p-0">
+            <div ngbAccordion [closeOthers]="true">
+                <!-- Standard Template Start  -->
+
+                <div ngbAccordionItem [collapsed]="openAccordian">
+                    <div class="d-flex" ngbAccordionHeader>
+                        <button class="mainheading" ngbAccordionButton (click)="reset()">
+                            <div class="d-grid">Standard Template</div>
+                            <div class="divider"></div>
+                        </button>
+                    </div>
+                    <div ngbAccordionCollapse>
+                        <div ngbAccordionBody class="pt-0 border-0">
+                            <ng-template class="d-flex flex-column justify-content-between">
+                                <div class="card-body h-auto p-0">
+                                    <div class="card-label">
+                                        Please select a report to preview 
+                                    </div>
+                                    <div *ngFor="let data of standardData" class="mt-5 cursor-pointer">
+                                         <div (click)="selectRadio(data)" class="d-flex align-items-center">
+                                            <input [checked]="selectedData.name === data.name" type="radio" class="radio">
+                                            <span class="ms-5 standard">{{data.name}}</span>
+                                         </div>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </div>
+                    </div>
+                </div>
+                <!-- Standard Template End  -->
+                <!-- Custom Template Start  -->
+                <!-- *ngIf="!openCustom" -->
+                <div  ngbAccordionItem [collapsed]="!openCustom">
+                    <div class="d-flex" ngbAccordionHeader>
+                        <button class="mainheading pt-0" ngbAccordionButton (click)="resetValues()">
+                            <div class="d-grid">Custom Template</div>
+                            <div class="divider"></div>
+                        </button>
+                    </div>
+                    <div ngbAccordionCollapse>
+                        <div ngbAccordionBody>
+                            <ng-template>
+                                <div class="card-body h-100px p-0">
+                                    <div class="card-label">
+                                        Please select your data points to add into the reports
+                                    </div>
+                                    <div class="btnheader w-100 p-2 mt-5">
+                                    <span class="cursor-pointer px-2" (click)="customOption(button)" [ngClass]="this.custombtn === button ? 'btn px-3':'px-3'" *ngFor="let button of costomButtons">{{button}}</span>
+                                    </div>
+                                    <div [ngClass]="!infraTable.length ? 'h-100 overflow-auto' : ''">
+                                        <div *ngIf="custombtn === 'Metrics'">
+                                            <div *ngFor="let data of metricsData" class="mt-5">
+                                                <div>
+                                                    <input type="checkbox" class="mt-2 cursor-pointer" [(ngModel)]="data.checked">
+                                                    <span class="ms-5 standard fs-4">{{data.name}}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div *ngIf="custombtn === 'Comparision'">
+                                            <div *ngFor="let data of comparisionData" class="mt-5">
+                                                <div class="cursor-pointer d-flex align-items-center" (click)="getComparision(data)">
+                                                    <input [checked]="comparisionFilter === data" type="radio" class="radio">
+                                                    <span class="ms-5 standard fs-4">{{data}}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div *ngIf="custombtn === 'Time Filter'">
+                                            <div *ngFor="let data of filterData" class="mt-5">
+                                                <div class="cursor-pointer d-flex align-items-center" (click)="getFilter(data)">
+                                                    <input [checked]="filterDataList === data" type="radio" class="radio">
+                                                    <span class="ms-5 standard fs-4">{{data === 'hour' ? 'By Hour' : 'By Date'}}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+    
+                                    </div>
+                                    <div *ngIf="openCustom" class="d-flex w-100" [ngClass]="!loading ? 'mt-5':''">
+                                        <button class="btn btn-default btn-outline w-50 me-3" [ngClass]="custombtn === 'Metrics' ? 'hidden' : ''" (click)="movetoBack()">Back</button>
+                                        <button *ngIf="custombtn !== 'Time Filter'" (click)="movetoNext()" class="btn btn-default btn-primary w-50 ms-3">Next</button>
+                                        <button *ngIf="custombtn === 'Time Filter'" (click)="customCreate()" class="btn btn-default btn-primary w-50 ms-3">View</button>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </div>
+                    </div>
+                  
+                </div>
+                <!-- Custom Template End  -->
+            
+            </div>
+
+           
+         </div>
+         <div class="card-footer border-0 mt-5">
+             <!-- <button *ngIf="!openAccordian" (click)="createCustom()" class="btn btn-primary w-100">
+                 Create Custom Template
+             </button> -->
+             <!-- <div *ngIf="openCustom" class="d-flex w-100 mt-5">
+                <button class="btn btn-default btn-outline w-50 me-3" [ngClass]="custombtn === 'Metrics' ? 'hidden' : ''" (click)="movetoBack()">Back</button>
+                <button *ngIf="custombtn !== 'Time Filter'" (click)="movetoNext()" class="btn btn-default btn-primary w-50 ms-3">Next</button>
+                <button *ngIf="custombtn === 'Time Filter'" (click)="customCreate()" class="btn btn-default btn-primary w-50 ms-3">View</button>
+            </div> -->
+         </div>
+         <div *ngIf="showsidenav" (click)="sidenav()" class="backButtonright text-center pt-1 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path d="M8.27259 12.6363L4.63623 8.99989L8.27259 5.36353M13.3635 12.6363L9.72714 8.99989L13.3635 5.36353" stroke="#101828" stroke-width="1.45455" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+     </div>
+  </div>
+  <div [ngClass]="showsidenav ? 'col-sm-9':'col-sm-12'">
+     <div class="card position-relative h-100">
+        <div *ngIf="!showsidenav" (click)="sidenav()" class="backButtonleft text-center pt-1 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path d="M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377" stroke="#101828" stroke-width="1.45455" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+        <div class="card-header border-0">
+             <div class="card-title">
+                <span class="card-label">{{selectedData?.name || 'Custom Template'}}</span>
+             </div>
+             <div class="card-toolbar">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none">
+                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546"
+                                height="2" rx="1" transform="rotate(45 17.0365 15.1223)"
+                                fill="currentColor"></rect>
+                            <path
+                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                fill="currentColor"></path>
+                        </svg>
+                    </span>
+                    <input type="text" class="form-control ps-14 me-2" (change)="searchData()" [(ngModel)]="searchValue" placeholder="Search"
+                        autocomplete="off"/>
+                </div> 
+                <button class="btn btn-default btn-outline me-3" (click)="ExportasXlsx()" [disabled]="!infraTable.length"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                   <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                   </svg> <span  class="ms-3">Export</span></button>
+                <!-- <button class="btn btn-default btn-outline" (click)="shareData()">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                       <g clip-path="url(#clip0_10164_5579)"><path d="M18.3332 1.66675L9.1665 10.8334M18.3332 1.66675L12.4998 18.3334L9.1665 10.8334M18.3332 1.66675L1.6665 7.50008L9.1665 10.8334" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                       </g><defs><clipPath id="clip0_10164_5579"><rect width="20" height="20" fill="white"/></clipPath></defs></svg><span *ngIf="!showsidenav" class="ms-3">Share</span>
+                </button> -->
+             </div>
+        </div>
+        <div class="card-body"> 
+            <ng-container *ngIf="loading">
+                <div class="row loader card  d-flex justify-content-center align-items-center">
+                    <div class="shimmer">
+                        <div class="wrapper">
+                            <div class="stroke animate title"></div>
+                            <div class="stroke animate link"></div>
+                            <div class="stroke animate description"></div>
+                        </div>
+                    </div>
+                    <div class="shimmer">
+                        <div class="wrapper">
+                            <div class="stroke animate title"></div>
+                            <div class="stroke animate link"></div>
+                            <div class="stroke animate description"></div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+            <div class="row" *ngIf="!loading && noData">
+                <div class="col-lg-12">
+                    <div class="card-body my-8 d-flex justify-content-center align-items-center flex-column">
+                        <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                        <div class="nodatamaintext mt-3">No data found</div>
+                        <div class="nodatasubtext">There is no result for Report Analysis</div>
+                    </div>
+                </div>
+            </div>
+            <div class="table-responsive" *ngIf="!loading && !noData &&  infraTable.length">
+                <table class="table bottom-border text-nowrap w-100">
+                    <thead>
+                        <tr>
+                            <th *ngFor="let column of displayedColumns;let i=index">
+                                <div class="cursor-pointer" (click)="sortData(column)">
+                                    <span>{{column}}</span>
+                                    <span *ngIf="sortColumName === column && sortBy !== 1 || sortColumName !== column" class="ms-3">
+                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                                [attr.stroke]="sortColumName === column ? '#00A3FF' :'#667085'" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span *ngIf="sortColumName === column && sortBy !== -1" class="ms-3">
+                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                                [attr.stroke]="sortColumName === column ? '#00A3FF' :'#667085'" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let data of infraTable; let i = index">
+                            <td *ngFor="let key of displayedColumns">
+                                <span>{{key === 'date' ? (data[key] | date:'dd MMM, YYYY') : (data[key]) }}</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <lib-pagination [itemsPerPage]="dynamicData.limit"
+                [currentPage]="(dynamicData.offset + 1)" [totalItems]="totalCount"
+                [paginationSizes]="[10,20,30]" [pageSize]="dynamicData.limit"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)" *ngIf="!loading && !noData && infraTable.length"></lib-pagination>
+
+        </div>
+     </div>
+  </div>
+</div>
+
+<ng-template #confirmationModal let-modal>
+    <div class="card border-0">
+        <div class="card-body">
+          <img src="./assets/tango/Images/custompopup-icon.png">
+          <div class=" mt-5">
+              <span class="header fw-bold">Custom Template Name</span>
+             <div class="mt-3 sub-header fw-semibold">Are you sure you want to delete the user globally?</div>
+          </div>
+          <div class="mt-10">
+               <label class="sub-header" style="color: #344054; font-weight: 400;" for="custom-name">Template Name</label>
+               <input type="text" [(ngModel)]="customName" class="form-control mt-2" id="custom-Name">
+          </div>
+          <div class="d-flex justify-content-between mt-10">
+            <button type="button" class="btn btn-default btn-outline w-50 me-2" (click)="modal.dismiss()">Cancel</button>
+            <button type="button" class="btn btn-primary w-50 ms-2" [disabled]="customName === ''" (click)="modal.close()">Apply</button>
+          </div>
+        </div>
+    </div>
+  </ng-template>