From 05af2c42b57d71d375ba2e50fd10a3fd682ea226 Mon Sep 17 00:00:00 2001 From: Sudarshan Kumar Date: Mon, 20 Jul 2020 13:42:49 +0530 Subject: Integrated UI lazy loading and Raptor update Integrated UI lazy loading and Raptor update Issue-ID: PORTAL-902 Change-Id: I0cf9f22a57c2be4e5b83981bdf0984768a5f44a6 Signed-off-by: Sudarshan Kumar --- .../welcome-dashboard.component.ts | 552 +++++++++++++++++++++ 1 file changed, 552 insertions(+) create mode 100644 ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts (limited to 'ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts') diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts new file mode 100644 index 00000000..5a56c9aa --- /dev/null +++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts @@ -0,0 +1,552 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal SDK + * =================================================================== + * Copyright © 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { Component, ElementRef, ChangeDetectionStrategy, ViewChild } from '@angular/core'; +import { map } from 'rxjs/operators'; +import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; +import * as ChartConst from 'ng6-o2-chart'; +import { CloudData, CloudOptions } from 'angular-tag-cloud-module'; +import { GoogleChartComponent } from 'angular-google-charts'; +import { + CompactType, + DisplayGrid, + GridsterComponentInterface, + GridsterConfig, + GridsterItem, + GridsterItemComponentInterface, + GridType +} from 'angular-gridster2'; + +@Component({ + selector: 'app-welcome-dashboard', + templateUrl: './welcome-dashboard.component.html', + styleUrls: ['./welcome-dashboard.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush +}) + + + +export class WelcomeDashboardComponent { + /** Based on the screen size, switch from standard to one column per row */ + + private bar_chart:GridsterItem; + private pie_chart:GridsterItem; + private favorite_reports:GridsterItem; + private gauge_chart:GridsterItem; + private map_chart:GridsterItem; + private word_cloud:GridsterItem; + private sticky_notes:GridsterItem; + private candle_stick_chart:GridsterItem; + + + @ViewChild('googlechart') + googlechart: GoogleChartComponent; + chart = { + type: 'Gauge', + data: [ + ['Central', 57], + ['NorthEast', 72], + ['West', 68], + ['SouthEast', 75], + ], + options: { + width: 400, + height: 200, + greenFrom: 0, + greenTo: 75, + redFrom: 90, + redTo: 100, + yellowFrom: 75, + yellowTo: 90, + minorTicks: 20, + minCols:1, + maxCols:1, + minItemCols:1, + maxItemRows:1 + } + }; + + gridOptions: GridsterConfig; + dashboard: Array; + remove: boolean; + + + notes = []; + recognition:any; + + cards = [ + { title: 'Card 1', cols: 2, rows: 1 }, + { title: 'Card 2', cols: 1, rows: 1 }, + { title: 'Card 3', cols: 1, rows: 2 }, + { title: 'Card 4', cols: 1, rows: 1 } + ]; + + ngOnInit(){ + this.gridOptions = { + minCols: 4, + maxCols: 4, + minRows: 10, + maxRows: 10, + maxItemCols: 50, + minItemCols: 1, + maxItemRows: 50, + minItemRows: 1, + maxItemArea: 2500, + minItemArea: 1, + defaultItemCols: 1, + defaultItemRows: 1, + setGridSize: true, + fixedColWidth: 250, + fixedRowHeight: 250, + gridType: GridType.ScrollVertical, + swap: true, + dynamicColumns: true, + displayGrid: DisplayGrid.None, + draggable: { + enabled: true + }, + pushItems: true, + resizable: { + enabled: true + } + }; + + this.dashboard = [ + {id:1,cols: 2, rows: 2, y: 0, x: 0, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:2,cols: 2, rows: 2, y: 0, x: 2, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:3,cols: 2, rows: 2, y: 1, x: 3, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:4,cols: 2, rows: 2, y: 1, x: 4, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:5,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:6,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}, + {id:7,cols: 1, rows: 2, y: 1, x: 5, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'} + ]; + } + + + removeItem($event, item) { + $event.preventDefault(); + $event.stopPropagation(); + this.dashboard.splice(this.dashboard.indexOf(item), 1); + } + + // addItem() { + // this.dashboard.push({}); + // } + + getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; + } + + options: CloudOptions = { + // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value + width: 20, + height: 20, + overflow: true + }; + + data: CloudData[] = [ + {"text":"PALM BEACH","weight":84, color : this.getRandomColor()} + ,{"text":"ATLANTA","weight":75, color : this.getRandomColor()} + ,{"text":"SCHAUMBURG","weight":70, color : this.getRandomColor()} + ,{"text":"RUSSIA","weight":62, color : this.getRandomColor()} + ,{"text":"REDMOND","weight":50, color : this.getRandomColor()} + ,{"text":"FRISCO","weight":49, color : this.getRandomColor()} + ,{"text":"FARMERS BRANCH","weight":44, color : this.getRandomColor()} + ,{"text":"RAMON","weight":35, color : this.getRandomColor()} + ,{"text":"ALPHARETTA","weight":32, color : this.getRandomColor()} + ,{"text":"HANOVER","weight":29, color : this.getRandomColor()} + ,{"text":"TUSTIN","weight":27, color : this.getRandomColor()} + ,{"text":"SAN ANTONIO","weight":26, color : this.getRandomColor()} + ]; + + chartType: string; + configData: any; + barDataJson: any; + geoMapDataJson: any; + geoOrthographicDataJson: any; + choroplethDataJson: any; + scatterPlotDataJson: any; + lineDataJson: any; + histogramDataJson: any; + pieDataJson: any; + packLayoutDataJson: any; + treeMapDataJson: any; + stackBarDataJson: any; + treeDataJson: any; + forceDataJson: any; + DataSetJson: string; + + lineTypeName: string; + barTypeName: string; + pieTypeName: string; + scatterPlotTypeName: string; + histogramTypeName: string; + stackBarTypeName: string; + geoMapTypeName: string; + geoOrthographicTypeName: string; + treeMapTypeName: string; + packLayoutTypeName: string; + choroplethTypeName: string; + treeTypeName: string; + forceTypeName: string; + breakpointObserver: any; + + constructor(private el:ElementRef) { + this.barTypeName = ChartConst.LINE_CHART_TYPE_NAME; + this.lineTypeName = ChartConst.LINE_CHART_TYPE_NAME; + this.barTypeName = ChartConst.BAR_CHART_TYPE_NAME; + this.pieTypeName = ChartConst.PIE_CHART_TYPE_NAME; + this.scatterPlotTypeName = ChartConst.SCATTER_PLOT_CHART_TYPE_NAME; + this.histogramTypeName = ChartConst.HISTOGRAM_CHART_TYPE_NAME; + this.stackBarTypeName = ChartConst.STACK_BAR_CHART_TYPE_NAME; + this.geoMapTypeName = ChartConst.GEO_MAP_CHART_TYPE_NAME; + this.geoOrthographicTypeName = ChartConst.GEO_ORTHOGRAPHIC_CHART_TYPE_NAME; + this.treeMapTypeName = ChartConst.TREE_MAP_CHART_TYPE_NAME; + this.packLayoutTypeName = ChartConst.PACK_LAYOUT_CHART_TYPE_NAME; + this.choroplethTypeName = ChartConst.CHOROPLETH_CHART_TYPE_NAME; + this.treeTypeName = ChartConst.TREE_CHART_TYPE_NAME; + this.forceTypeName = ChartConst.FORCE_CHART_TYPE_NAME; + + this.initilizeData(); + + this.notes = JSON.parse(localStorage.getItem('notes')) || [{ id: 0,content:'' }]; + + // Commented below code as it works only for chrome browser. + // const {webkitSpeechRecognition} : IWindow = window; + // this.recognition = new webkitSpeechRecognition(); + // this.recognition.onresult = (event)=> { + // console.log(this.el.nativeElement.querySelectorAll(".content")[0]); + // this.el.nativeElement.querySelectorAll(".content")[0].innerText = event.results[0][0].transcript + + // }; + } + + updateAllNotes() { + console.log(document.querySelectorAll('app-note')); + let notes = document.querySelectorAll('app-note'); + + notes.forEach((note, index)=>{ + console.log(note.querySelector('.content').innerHTML) + this.notes[note.id].content = note.querySelector('.content').innerHTML; + }); + + localStorage.setItem('notes', JSON.stringify(this.notes)); + + } + + addNote () { + this.notes.push({ id: this.notes.length + 1,content:'' }); + // sort the array + this.notes= this.notes.sort((a,b)=>{ return b.id-a.id}); + localStorage.setItem('notes', JSON.stringify(this.notes)); + }; + + saveNote(event){ + const id = event.srcElement.parentElement.parentElement.getAttribute('id'); + const content = event.target.innerText; + event.target.innerText = content; + const json = { + 'id':id, + 'content':content + } + this.updateNote(json); + localStorage.setItem('notes', JSON.stringify(this.notes)); + console.log("********* updating note *********") + } + + updateNote(newValue){ + this.notes.forEach((note, index)=>{ + if(note.id== newValue.id) { + this.notes[index].content = newValue.content; + } + }); + } + + deleteNote(event){ + const id = event.srcElement.parentElement.parentElement.parentElement.getAttribute('id'); + this.notes.forEach((note, index)=>{ + if(note.id== id) { + this.notes.splice(index,1); + localStorage.setItem('notes', JSON.stringify(this.notes)); + console.log("********* deleting note *********") + return; + } + }); + } + + record(event) { + this.recognition.start(); + this.addNote(); + } + + private initilizeData() { + // ConfigData = this.httpClient.get('assets/json/ConfigData.json'); + this.configData = { + // tslint:disable-next-line:quotemark + "className": { + 'axis': 'axis', + 'axisXBorder': 'axis_x', + 'axisXText': 'axis-x-text', + 'bar': 'bar', + 'barValue': 'bar-value', + 'line': 'line', + 'multiLinePrefix': 'line-', + 'grid': 'grid', + 'pie': 'pie', + 'pieInnerTitle': 'pie-inner-title', + 'pieInnerRadius': 'total', + 'histogram': 'histogram', + 'histogramBar': 'histogram-bar', + 'treemap': 'treemap', + 'treemapLabel': 'treemap-label', + 'packlayout': 'packlayout', + 'packlayoutLabel': 'packlayout-label', + }, + 'label': { + 'display': true, + }, + 'title': { + 'display': false, + 'name': 'Calls for Cities', + 'className': 'chart-title', + 'height': 30, + 'leftMargin': -20, + 'bottomMargin': 10 + }, + 'maxValue': { + 'auto': true, + 'x': 100, + 'y': 100, + }, + 'legend': { + 'display': true, + 'position':'right', + 'totalWidth': 80, + 'initXPos': 5, + 'initYPos': 10, + 'rectWidth': 10, + 'rectHeight': 10, + 'xSpacing': 2, + 'ySpacing': 2 + }, + 'color': { + 'auto': true, // + 'defaultColorNumber': 10, + 'opacity': 1.0, + 'userColors': [ + 'blue', + 'red', + 'green', + 'yellow', + 'PaleGoldenrod', + 'Khaki', + 'DarkKhaki', + 'Gold', + 'Cornsilk', + 'BlanchedAlmond', + 'Bisque', + 'NavajoWhite', + 'Wheat', + 'BurlyWood', + 'Tan', + 'RosyBrown', + 'SandyBrown', + 'Goldenrod', + 'DarkGoldenrod', + 'Peru', + 'Chocolate' + ], + 'focusColor': 'red', + }, + 'pie': { + 'innerRadius': { + 'percent': 20, + 'title': 'Total' + }, + 'value': { + 'display': true, + }, + 'percent':{ + 'display': false, + } + }, + 'line': { + 'legend': 'lineEnd', + 'interpolate' : 'linear', + }, + 'grid': { + 'x': { + 'display': true, + }, + 'y': { + 'display': true, + }, + }, + 'margin': { + 'top': 30, + 'left': 30, + 'right': 10, + 'bottom': 20, + 'between': 5 + }, + 'axis': { + 'rotation': 0, + 'borderLineWidth': 1, + 'xLabel': { + 'leftMargin': 0, + 'bottomMargin': 5 + }, + 'yLabel':{ + 'leftMargin': 0, + 'bottomMargin': 0 + }, + }, + 'animation': { + 'enable': true, + 'duration': 4000, + }, + }; + + + this.barDataJson = + { + 'series': [ + 'Fixes', + 'Enhancements' + ], + 'data': [ + { + 'x': 'Jan', + 'y': [44, 50], + }, + { + 'x': 'Feb', + 'y': [36, 42], + }, + { + 'x': 'Mar', + 'y': [56, 70], + }, + { + 'x': 'Apr', + 'y': [60, 73], + }, + { + 'x': 'May', + 'y': [47, 82], + }, + { + 'x': 'Jun', + 'y': [53, 45], + }, + { + 'x': 'Jul', + 'y': [54, 61], + }, + { + 'x': 'Aug', + 'y': [53, 71], + }, + { + 'x': 'Sep', + 'y': [55, 51], + }, + { + 'x': 'Oct', + 'y': [18, 16], + }, + ], + }; + + this.histogramDataJson = + { + 'range':[0,100], + 'bins': [0,10,20,30,40,50,60,70,80,90,100], + 'data':[ + 11,95,60,44,60,50,35,20,10,22, + 19,70,65,42,22,33,40,53,52,89, + 90,55,50,55,65,72,45,35,15,45, + 50,95,60,26,60,50,35,20,10,33, + 56,70,65,42,22,33,40,53,52,89, + 90,55,50,55,28,72,45,35,15,28, + 50,95,60,44,60,37,35,20,10,22, + 56,70,65,22,22,37,40,53,52,89, + 90,55,50,55,65,72,45,35,15,45, + ], + }; + + + this.pieDataJson = + { + 'data':[ + { + 'name': 'Data source with Discrepancies', + 'value':31 + }, + { + 'name': 'Report not functioning', + 'value':24 + }, + { + 'name': 'Data missing from source', + 'value':10 + }, + { + 'name': 'Data source reloaded', + 'value':65 + }, + { + 'name': 'User error', + 'value':17 + },{ + 'name': 'NA', + 'value':239 + }, + ], + }; + } +} + +export interface IWindow extends Window { + webkitSpeechRecognition: any; +} -- cgit 1.2.3-korg