Upgraded to angular 11

package.json

@@ -1,7 +1,7 @@
 {
  "name": "gp-event-chart-application",
- "version": "1.0.0",
- "description": "This is an Angular 8 widget, which is designed to display the chart for the specific event type. ",
+ "version": "2.0.0",
+ "description": "This is an Angular widget, which is designed to display the chart for the specific event type. ",
  "author": "Khushi Khanna - Software AG, Global Presales",
  "license": "Apache 2.0",
  "scripts": {
@@ -19,53 +19,53 @@
  },
  "private": true,
  "dependencies": {
- "@angular/animations": "~8.2.9",
- "@angular/common": "~8.2.9",
- "@angular/compiler": "~8.2.9",
- "@angular/core": "~8.2.9",
- "@angular/forms": "~8.2.9",
- "@angular/material": "8.2.3",
- "@angular/platform-browser": "~8.2.9",
- "@angular/platform-browser-dynamic": "~8.2.9",
- "@angular/router": "~8.2.9",
- "@angular/upgrade": "8.2.13",
- "@c8y/client": "^1006.6.8",
- "@c8y/ng1-modules": "^1006.6.8",
- "@c8y/ngx-components": "^1006.6.8",
- "@c8y/style": "^1006.3.0",
+ "@angular/animations": "~11.1.2",
+ "@angular/cdk": "^11.2.13",
+ "@angular/common": "~11.1.2",
+ "@angular/compiler": "~11.1.2",
+ "@angular/core": "~11.1.2",
+ "@angular/forms": "~11.1.2",
+ "@angular/platform-browser": "~11.1.2",
+ "@angular/platform-browser-dynamic": "~11.1.2",
+ "@angular/material": "^11.2.13",
+ "@angular/router": "~11.1.2",
+ "@angular/upgrade": "11.1.2",
+ "@c8y/client": "^1011.0.12",
+ "@c8y/ng1-modules": "1011.0.12",
+ "@c8y/ngx-components": "1011.0.12",
+ "@c8y/style": "1011.0.12",
  "chart.js": "^2.9.3",
- "gp-event-chart": "file:dist/gp-event-chart",
  "gulp-inject-string": "^1.1.2",
+ "gp-event-chart": "file:dist/gp-event-chart",
  "moment": "^2.27.0",
- "ng2-charts": "^2.2.3",
- "rxjs": "~6.4.0",
- "tslib": "^1.10.0",
- "zone.js": "~0.9.1"
+ "ng2-charts": "^2.4.3",
+ "ngx-bootstrap": "6.2.0",
+ "rxjs": "~6.6.3",
+ "tslib": "^2.0.0",
+ "zone.js": "~0.11.3"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "~0.803.8",
- "@angular-devkit/build-ng-packagr": "~0.803.27",
- "@angular/cli": "~8.3.8",
- "@angular/cdk": "8.2.3",
- "@angular/compiler-cli": "~8.2.9",
- "@angular/language-service": "~8.2.9",
- "@types/node": "~8.9.4",
- "@types/jasmine": "~3.3.8",
+ "@angular-devkit/build-angular": "~0.1102.18",
+ "@angular-devkit/build-ng-packagr": "~0.803.28",
+ "@angular/cli": "~11.1.2",
+ "@angular/compiler-cli": "~11.1.2",
+ "@angular/language-service": "~11.1.2",
+ "@types/node": "~12.11.1",
+ "@types/jasmine": "~3.6.0",
  "@types/jasminewd2": "~2.0.3",
- "codelyzer": "^5.0.0",
- "jasmine-core": "~3.4.0",
- "jasmine-spec-reporter": "~4.2.1",
- "karma": "~4.1.0",
- "karma-chrome-launcher": "~2.2.0",
+ "codelyzer": "^6.0.0",
+ "jasmine-core": "~3.6.0",
+ "jasmine-spec-reporter": "~5.0.0",
+ "karma": "~5.2.0",
+ "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
- "karma-jasmine": "~2.0.1",
- "karma-jasmine-html-reporter": "^1.4.0",
- "ng-packagr": "^9.1.1",
- "protractor": "~5.4.0",
- "ts-node": "~7.0.0",
- "tsickle": "^0.37.0",
- "tslint": "~5.15.0",
- "typescript": "~3.5.3",
+ "karma-jasmine": "~4.0.0",
+ "karma-jasmine-html-reporter": "^1.5.0",
+ "ng-packagr": "^11.0.0",
+ "protractor": "~7.0.0",
+ "ts-node": "~8.3.0",
+ "tslint": "~6.1.0",
+ "typescript": "~4.1.2",
  "css-loader": "^3.5.3",
  "del": "^5.1.0",
  "delay": "^4.3.0",
@@ -76,6 +76,7 @@
  "gulp-zip": "^5.0.1",
  "url-loader": "^4.1.0",
  "webpack": "^4.43.0",
+ "gulp-inject-string": "^1.1.2",
  "webpack-cli": "^3.3.11",
  "webpack-external-import": "^2.2.3"
  }

projects/gp-event-chart/package.json

@@ -1,11 +1,11 @@
 {
  "name": "gp-event-chart",
- "version": "1.5.0",
- "description": "This is an Angular 8 widget, which is designed to display the chart for the specific event type. ",
+ "version": "2.0.1",
+ "description": "This is an Angular 11 widget, which is designed to display the chart for the specific event type. ",
  "author": "Khushi Khanna - Software AG, Global Presales",
  "license": "Apache 2.0",
  "peerDependencies": {
- "@angular/common": "^8.2.14",
- "@angular/core": "^8.2.14"
+ "@angular/common": "^11.1.2",
+ "@angular/core": "^11.1.2"
  }
 }

projects/gp-event-chart/src/lib/color-picker/color-picker-component.html

@@ -1,7 +1,11 @@
-<mat-radio-group aria-label="Select an option" (change) ="colorType = $event.value" >
+<!-- <mat-radio-group aria-label="Select an option" (change) ="colorType = $event.value" >
  <mat-radio-button checked="true" value="rgba">RGBA</mat-radio-button>
  <mat-radio-button value="hexa">HEXA</mat-radio-button>
-</mat-radio-group>
+</mat-radio-group> -->
+<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel" [disabled]="modelGroupDisabled">
+ <label btnRadio="Select an option">Select an option</label>
+
+</div>
 <div class="color-wrapper">
 
  <app-color-palette [hue]="hue" (color)="color = $event" ></app-color-palette> 

projects/gp-event-chart/src/lib/gp-lib-event-chart.component.css

@@ -6,6 +6,7 @@
 .date-input{
  margin: 5px;
  width: 150px;
+
 }
 .datePickerDiv{
  margin-left: 15px;

projects/gp-event-chart/src/lib/gp-lib-event-chart.component.html

@@ -1,3 +1,4 @@
+
 <div > 
  <div style="height: 40px;">
  <div style ="float: right; margin-right: 10px;">
@@ -8,7 +9,41 @@
  <button mat-icon-button style="color:#1776BF;" type="button" class="button" (click) = "refresh()" ><span class="fa fa-refresh"></span></button>
  </div>
  </div>
- <div class="datePickerDiv">
+
+ <div class="datePickerDiv">
+ <input
+ class="date-input"
+ placeholder="From"
+ [bsConfig]="{ customTodayClass: 'today' }"
+ (ngModelChange)="dateChanged('from',$event)" 
+ [(ngModel)]="fromDate"
+ [maxDate]="minCurrentDate"
+ title="From Date"
+ [value]="fromDate"
+ bsDatepicker />
+
+
+ <input
+ class="date-input"
+ placeholder="To"
+ [bsConfig]="{ customTodayClass: 'today' }"
+ (ngModelChange)="dateChanged('from',$event)" 
+ [(ngModel)]="toDate"
+ [minDate]="minToDate" 
+ [maxDate]="currentDate"
+ title="To Date"
+
+ [value]="toDate"
+ bsDatepicker
+ />
+
+ <button type="button" title="Filter date range" class="btn btn-default " (click)="filter()">
+ <i c8y-icon="filter" class="fa fw fa-filter"></i>
+ </button>
+ </div>
+
+
+ <!-- <div class="datePickerDiv">
  <mat-form-field appearance="outline" class="date-input">
  <input matInput [matDatepicker]="fromPickerEventChart" placeholder="From" (dateInput) ="dateChanged('from',$event)" [value]="fromDate"/>
  <mat-datepicker-toggle matSuffix [for]="fromPickerEventChart"></mat-datepicker-toggle>
@@ -22,7 +57,7 @@
  <button type="button" title="Filter date range" class="btn btn-default " (click)="filter()">
  <i c8y-icon="filter" class="fa fw fa-filter"></i>
  </button>
- </div>
+ </div> -->
  <div *ngIf="dataLoaded | async">
  <div style="display: block">
  <canvas baseChart

projects/gp-event-chart/src/lib/gp-lib-event-chart.component.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation, OnDestroy, isDevMode } from '@angular/core';
 import { EventService, InventoryService, Realtime } from '@c8y/client';
 import * as moment_ from 'moment';
 import { DatePipe } from '@angular/common';
@@ -64,7 +64,26 @@ export class GpLibEventChartComponent implements OnInit, OnDestroy {
  ) {}
 /** Sets the barchart type and barchart options for canvas and calls device list */
  ngOnInit() {
+ if (isDevMode()) {
+
+ // // configuration for sandbox-ar.eu-latest.cumulocity.com
+
+ this.config = {
+ "legend": "Top",
+ "groupby": "c8y_Hardware.model",
+ //"eventType":"",
+ "type": "Vertical Bar Chart",
+ "device": {
+ "name": "Storage Facility 1-Tank 1",
+ "id": "86971793"
+ },
+
+ }
+ }
+
+
  this.barChartType = this.config.type;
+
  if (this.config.type === 'stackChart') {
  this.barChartType = 'bar';
  // tslint:disable-next-line: no-string-literal
@@ -174,6 +193,7 @@ export class GpLibEventChartComponent implements OnInit, OnDestroy {
  }
  /** when filter button is clicked device list is called for the selected dates */
  filter() {
+ this.fromDate = this.datepipe.transform(this.fromDate, 'yyyy-MM-dd');
  this.fromDate = this.datepipe.transform(this.fromDate, 'yyyy-MM-dd');
  this.toDate = this.datepipe.transform(this.toDate, 'yyyy-MM-dd');
  this.getDeviceList();

projects/gp-event-chart/src/lib/gp-lib-event-chart.config.html

@@ -47,4 +47,8 @@
  </div>
 </div>
 
+<div>
 
+ <input type="submit" (click)="SubmitData()" value="Submit" />
+
+</div>

projects/gp-event-chart/src/lib/gp-lib-event-chart.config.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
  // tslint:disable-next-line: component-selector
@@ -27,6 +27,7 @@ import { Component, OnInit, Input } from '@angular/core';
 // tslint:disable-next-line: component-class-suffix
 export class GpLibEventChartConfig implements OnInit {
  @Input() config: any = {};
+ @Output() configData: EventEmitter<any> = new EventEmitter();
  isOpenCP = false;
  borderCP = false;
 
@@ -68,4 +69,9 @@ export class GpLibEventChartConfig implements OnInit {
  this.config.borderColor = value;
  }
  }
+ SubmitData() {
+
+ this.configData.emit(this.config);
+
+ }
 }

projects/gp-event-chart/src/lib/gp-lib-event-chart.module.ts

@@ -21,10 +21,17 @@ import { NgModule } from '@angular/core';
 import { GpLibEventChartComponent } from './gp-lib-event-chart.component';
 import { ChartsModule } from 'ng2-charts';
 import { GpLibEventChartConfig } from './gp-lib-event-chart.config';
-import {MatInputModule, MatFormFieldModule, MatNativeDateModule, MatDatepickerModule, MatButtonModule, MatRadioModule } from '@angular/material';
+import { Component } from '@angular/core';
+
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatRadioModule} from '@angular/material/radio';
+
+
 import { DatePipe } from '@angular/common';
 import * as preview from './preview-image';
-
+import {MatInputModule} from '@angular/material/input';
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import { ColorPickerComponent } from './color-picker/color-picker-component';
 import { ColorSliderComponent } from './color-picker/color-slider/color-slider-component';
 import { ColorPaletteComponent } from './color-picker/color-palette/color-palette-component';
@@ -36,10 +43,9 @@ import { ColorPaletteComponent } from './color-picker/color-palette/color-palett
  ChartsModule,
  MatInputModule,
  // MatFormFieldModule,
- MatDatepickerModule,
- MatNativeDateModule,
- MatButtonModule,
- MatRadioModule
+ MatRadioModule,
+ ButtonsModule.forRoot(),
+ BsDatepickerModule.forRoot()
  ],
  exports: [GpLibEventChartComponent, GpLibEventChartConfig, ColorPickerComponent],
  entryComponents: [GpLibEventChartComponent, GpLibEventChartConfig, ColorPickerComponent],

projects/gp-event-chart/src/lib/gp-lib-event-chart.service.ts

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
 
+import { Injectable } from '@angular/core';
+import {InventoryService} from '@c8y/client';
 @Injectable()
 export class GpLibEventChartService {
 
- constructor() { }
+ constructor(public inventory: InventoryService) { }
 }

runtime/gulpfile.js

@@ -8,17 +8,14 @@ const execSync = require('child_process').execSync;
 const replace = require('gulp-replace');
 const path = require('path');
 const inject = require('gulp-inject-string');
-const pkgJson = require('./dist/widget-library/package.json');
-
-
-
+const pkgJson = require('./package.json');
 function clean() {
  return del(['dist']);
 }
 
 const compile = series(
  function buildAngularLibrary() { return ngPackagr.build({project: './ng-package.json'}) },
- function separateWebpackBuildSrc() { return fs.copy('./dist/widget-library/fesm5', './dist/bundle-src') },
+ function separateWebpackBuildSrc() { return fs.copy('./dist/widget-library/fesm2015', './dist/bundle-src') },
  function importCustomCss() {
  return src(['./dist/bundle-src/custom-widget.js'])
  .pipe(inject.before('import', "import '~styles/index.css';\n"))

runtime/package.json

@@ -4,7 +4,7 @@
  "dist\\bundle-src\\custom-widget.js": "event-chart-runtime-widget-CustomWidget",
  "dist/bundle-src/custom-widget.js": "event-chart-runtime-widget-CustomWidget"
  },
- "version": "1.0.0",
+ "version": "2.0.0",
  "description": "Runtime package.json for library widget (written by Software AG Global Presales)",
  "author": "Darpankumar Lalani - Software AG, Global Presales",
  "license": "Apache 2.0"

src/app/app.component.html

@@ -1 +1,4 @@
-<lib-gp-lib-event-chart></lib-gp-lib-event-chart>
+<lib-gp-lib-event-chart></lib-gp-lib-event-chart>
+ <div>
+ <event-chart-config> </event-chart-config>
+</div>