angular component additions in ui poc

apis/core-apis/package.json

@@ -10,9 +10,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "2fa-util": "^1.1.1",
     "@azure/storage-blob": "^12.12.0",
     "@types/speakeasy": "^2.0.7",
-    "2fa-util": "^1.1.1",
     "aws-sdk": "^2.633.0",
     "axios": "^0.19.2",
     "azure-storage": "^2.10.5",
@@ -21,7 +21,7 @@
     "cors": "^2.8.5",
     "csvtojson": "^2.0.10",
     "dotenv": "^8.2.0",
-    "express": "^4.17.1",
+    "express": "^4.18.2",
     "group-array": "^1.0.0",
     "json2csv": "^5.0.6",
     "jsonexport": "^3.0.1",

apis/wrapper-api/index.js

@@ -10,8 +10,8 @@ app.use(cors());
 const client = new Client({
   user: "postgres", // Replace with your PostgreSQL username
   host: "localhost", // Replace with the hostname of your PostgreSQL server
-  database: "POC", // Replace with the name of your database
-  password: "Root@123", // Replace with your password
+  database: "cqube", // Replace with the name of your database
+  password: "postgres", // Replace with your password
   port: 5432, // Replace with the port of your PostgreSQL server (usually 5432)
 });
 

reference-visualization-app/dashboard/package.json

@@ -18,7 +18,7 @@
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
     "@angular/forms": "^14.0.0",
-    "@angular/material": "^14.0.4",
+    "@angular/material": "^14.2.7",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
@@ -32,6 +32,7 @@
     "@ngx-translate/http-loader": "^7.0.0",
     "@project-sunbird/sb-dashlet-v14": "^1.0.6",
     "@project-sunbird/sb-themes": "^0.0.78",
+    "angular-material-datepicker": "^1.0.2",
     "apexcharts": "^3.35.5",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.9.4",
@@ -51,6 +52,7 @@
     "ng-apexcharts": "^1.7.1",
     "ng-circle-progress": "^1.6.0",
     "ngx-bootstrap": "^9.0.0",
+    "ngx-daterangepicker-material": "^6.0.4",
     "ngx-spinner": "^14.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

reference-visualization-app/dashboard/src/app/core/services/wrapper.service.ts

@@ -8,11 +8,14 @@ export class WrapperService {
 
   constructor(private readonly _commonService: CommonService) { }
 
-  constructFilters(filters: any, filtersConfig: any): any {
-    filtersConfig.forEach((filter, index) => {
+  async constructFilters(filters: any, filtersConfig: any): Promise<any> {
+    // filtersConfig.forEach((filter, index) => {
+    for (let index = 0; index < filtersConfig.length; index++) {
+      let filter = filtersConfig[index]
       let query = this.parseQuery(filtersConfig, filters, index);
       if (query) {
-        this._commonService.getReportDataNew(query).subscribe((res: any) => {
+        let res = await this.runQuery(query);
+        if (res) {
           let { rows } = res;
           let findFilter = filters.find(fil => fil.valueProp === filter.valueProp);
           if (findFilter) {
@@ -33,9 +36,19 @@ export class WrapperService {
               }))
             });
           }
-        });
+        }
+
       }
-    });
+    };
+    return filters;
+  }
+
+  runQuery(query: string): any {
+    return new Promise((resolve, reject) => {
+      this._commonService.getReportDataNew(query).subscribe((res: any) => {
+        resolve(res);
+      });
+    })
   }
 
   formatToolTip(tooltipTemplate: string, record: any): string {
@@ -51,38 +64,38 @@ export class WrapperService {
     const strArr = tooltipTemplate.split('');
     let counter = 0;
     for (let i = 0, len = strArr.length; i < len; i++) {
-       if (strArr[i] === "{") {
-          counter++;
-       } else if (strArr[i] === "}") {
-          counter--;
-       };
-       if (counter < 0) {
-          return false;
-       };
+      if (strArr[i] === "{") {
+        counter++;
+      } else if (strArr[i] === "}") {
+        counter--;
+      };
+      if (counter < 0) {
+        return false;
+      };
     };
     if (counter === 0) {
-       return true;
+      return true;
     };
     return false;
   };
 
   substituteValues(tooltipTemplate: string): any {
-    
+
   };
 
   parseQuery(filtersConfig, filters, index): string {
     const filter = filtersConfig[index];
     let { query } = filter;
     let startIndex = query.indexOf('{');
     let endIndex = query.indexOf('}');
-    
+
     if (query && startIndex > -1) {
       while (startIndex > -1) {
         let propertyName = query.substring(startIndex + 1, endIndex);
         let parentFilter = filters.find(filter => filter.valueProp === propertyName);
         if (parentFilter && parentFilter.value) {
           let re = new RegExp(`{${propertyName}}`);
-          query = query.replace(re, parentFilter.value);
+          query = query.replace(re, '\'' + parentFilter.value + '\'');
         } else {
           query = null;
           break;
@@ -95,4 +108,19 @@ export class WrapperService {
 
     return query;
   }
+
+  constructTooltip(tooltipMetrics: any, row: any, selectedMetricValue: any): string {
+    let tooltip = '';
+    tooltipMetrics.forEach((metric: any) => {
+      if (row[metric.value] !== undefined && row[metric.value] !== null) {
+        if (metric.value === selectedMetricValue) {
+          tooltip += '<b><i>' + metric.valuePrefix.replace(/\n/g, '</br>') + (isNaN(row[metric.value]) ? row[metric.value] : Number(row[metric.value])) + metric.valueSuffix.replace(/\n/g, '</br>') + '</i></b>'
+        }
+        else {
+          tooltip += metric.valuePrefix.replace(/\n/g, '</br>') + '<b>' + (isNaN(row[metric.value]) ? row[metric.value] : Number(row[metric.value])) + '</b>' + metric.valueSuffix.replace(/\n/g, '</br>')
+        }
+      }
+    });
+    return tooltip;
+  }
 }

reference-visualization-app/dashboard/src/app/shared/components/big-number/big-number.component.html

@@ -0,0 +1,25 @@
+<div class="report-wrapper">
+    <div class="report-name text-center">
+        {{bigNumberReportData?.reportName}}
+    </div>
+    <div class="average-wrapper">
+        <h1 class="average-percentage">{{averagePercentage + this.valueSuffix}}</h1>
+    </div>
+    <div class="difference-wrapper">
+        <div *ngIf="differenceInPercentage !== undefined">
+            <h4 class="difference-percentage">{{differenceInPercentage + this.valueSuffix}}</h4>
+        </div>
+        <div [ngSwitch]="differenceIndicator">
+            <div *ngSwitchCase="true">
+                <i class="fa fa-arrow-up" aria-hidden="true"></i>
+            </div>
+            <div *ngSwitchCase="false">
+                <i class="fa fa-arrow-down" aria-hidden="true"></i>
+            </div>
+            <div *ngSwitchDefault>
+                <i class="fa fa-minus" aria-hidden="true"></i>
+            </div>
+        </div>
+    </div>
+
+</div>

reference-visualization-app/dashboard/src/app/shared/components/big-number/big-number.component.scss

@@ -0,0 +1,60 @@
+.fa-arrow-down{
+    color: rgb(246, 49, 49);
+}
+
+.fa-arrow-up{
+    color: rgb(53, 185, 53);
+}
+
+.fa-minus{
+    color: black;
+}
+
+.report-wrapper{
+    border-radius: 14px;
+    width: 100px;
+    padding: 5px;
+    margin-bottom: 20px;
+    width: auto;
+    background-color: #4c30f5;
+    display: flex;
+    flex-direction: column;
+}
+
+.average-wrapper{
+    // margin: 30px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    padding: 5px;
+    align-items: center;
+    justify-content: center;
+}
+
+.difference-wrapper{
+    padding: 5px;
+    justify-content: end;
+    display: flex;
+    flex-direction: row;
+}
+
+.difference-percentage{
+    margin-right: 3px;
+    font-size: medium;
+    font-weight: bolder;
+    color: white; 
+}
+
+.average-percentage{
+    font-size: 40px;
+    font-weight: bolder;
+    color: white; 
+}
+
+.report-name{
+    margin: 5px 0px;
+    font-size: medium;
+    color: white;
+}

reference-visualization-app/dashboard/src/app/shared/components/big-number/big-number.component.spec.ts

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

reference-visualization-app/dashboard/src/app/shared/components/big-number/big-number.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-big-number',
+  templateUrl: './big-number.component.html',
+  styleUrls: ['./big-number.component.scss']
+})
+export class BigNumberComponent implements OnInit, OnChanges {
+
+  @Input() bigNumberReportData: any;
+  averagePercentage: any;
+  differenceInPercentage: any;
+  differenceIndicator: boolean = undefined;
+  valueSuffix: any;
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+  ngOnChanges(): void {
+    this.updateValues();
+  }
+
+  updateValues(): void {
+    this.averagePercentage = this.bigNumberReportData?.averagePercentage;
+    this.valueSuffix = this.bigNumberReportData.valueSuffix ? this.bigNumberReportData.valueSuffix : '';
+    if(this.bigNumberReportData && this.bigNumberReportData.differencePercentage && this.bigNumberReportData.averagePercentage) {
+      this.differenceInPercentage = (this.bigNumberReportData.averagePercentage - this.bigNumberReportData.differencePercentage).toFixed(2);
+    }
+    if(this.differenceInPercentage > 0){
+      this.differenceIndicator = true;
+    }
+    else if(this.differenceInPercentage < 0) {
+      this.differenceIndicator = false;
+      this.differenceInPercentage = Math.abs(this.differenceInPercentage)
+    }
+    else {
+      this.differenceIndicator = undefined;
+    }
+  }
+
+}

reference-visualization-app/dashboard/src/app/shared/components/buttons/material-button-group/material-button-group.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="buttons">
     <div class="button-group-container">
         <ng-container *ngFor="let button of buttons; let i = index">
-            <button mat-flat-button [color]="button.selected ? 'primary' : 'basic'" id="button-{{i}}" name="button-{{i}}" (click)="onSelect(buttons, i)">{{button.name}}</button>
+            <button mat-flat-button [color]="button.selected ? 'primary' : 'basic'" id="button-{{i}}" name="button-{{i}}" [hidden]="button.hidden" (click)="onSelect(buttons, i)">{{button.name}}</button>
         </ng-container>
     </div>
 </ng-container>

reference-visualization-app/dashboard/src/app/shared/components/filter-panel/filter-panel.component.ts

@@ -9,7 +9,7 @@ export class FilterPanelComponent implements OnInit, OnChanges {
 
   @Input() filters: any = [];
   @Input() colSize: any = "md:col-span-3 xs:col-span-12 xmd:col-span-4 4k:col-span-2";
-  @Input() resetOthers = true;
+  @Input() resetOthers = false;
 
   @Output() filtersUpdated = new EventEmitter<any>();
 
@@ -22,16 +22,17 @@ export class FilterPanelComponent implements OnInit, OnChanges {
   }
 
   onSelectOption(event: any, ind: number): void {
-    // if (this.resetOthers) {
-    //   this.filters = this.filters.map((filter: any, filterInd: number) => {
-    //     if (filterInd > ind) {
-    //       filter.options = [];
-    //       filter.value = null;
-    //     }
-
-    //     return filter;
-    //   });
-    // }
+    if (this.resetOthers) {
+      this.filters = this.filters.filter((filter: any, filterInd: number) => {
+        if (filterInd > ind) {
+          // filter.options = [];
+          // filter.value = null;
+          return false;
+        }
+
+        return true;
+      });
+    }
 
     this.filtersUpdated.emit(this.filters);
   }

reference-visualization-app/dashboard/src/app/shared/components/level-n-metric-filter-panel/level-n-metric-filter-panel.component.html

@@ -1,8 +1,8 @@
-<div class="grid grid-cols-12 align-items-center">
-    <div class="xmd:col-span-5" *ngIf="levels">
+<div class="grid grid-cols-12 align-items-center filter-wrapper">
+    <div class="xmd:col-span-6 filter-wrapper" *ngIf="levels">
         <app-material-button-group [buttons]="levels" (select)="onSelectLevel($event)"></app-material-button-group>
     </div>
-    <div class="xmd:col-span-7 xs:col-span-12" *ngIf="metricFilter">
+    <div class="xmd:col-span-6 xs:col-span-12 filter-wrapper" *ngIf="metricFilter">
         <ng-select class="mx-2" dropdownPosition="bottom" placeholder="{{metricFilter.name}}" [id]="'metricFilter-'+metricFilter.name" [name]="'metricFilter-'+metricFilter.name" [(ngModel)]="metricFilter.value" (change)="onSelectMetricFilter($event)">
             <ng-option *ngFor="let option of metricFilter.options" [value]="option.value">{{ option.label }}</ng-option>
         </ng-select>

reference-visualization-app/dashboard/src/app/shared/components/level-n-metric-filter-panel/level-n-metric-filter-panel.component.scss

@@ -0,0 +1,3 @@
+.filter-wrapper{
+    padding: 0px 5px;
+}