summaryrefslogtreecommitdiffstats
path: root/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts')
-rw-r--r--ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts552
1 files changed, 552 insertions, 0 deletions
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<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;
+}