diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts')
-rw-r--r-- | ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts | 552 |
1 files changed, 0 insertions, 552 deletions
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts deleted file mode 100644 index 5a56c9aa..00000000 --- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/pages/welcome-dashboard/welcome-dashboard.component.ts +++ /dev/null @@ -1,552 +0,0 @@ -/* - * ============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<GridsterItem>; - 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 = <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; -} |