Removed charts.

app.module.ts

@@ -10,7 +10,6 @@ import { ReportsModule } from "@c8y/ngx-components/reports";
 import { SensorPhoneModule } from "@c8y/ngx-components/sensor-phone";
 import { CumulocityTicketingIntegrationViewerWidget } from './src/c8y-ticketing-integration-viewer-widget/c8y-ticketing-integration-viewer-widget.component';
 import { CumulocityTicketingIntegrationViewerWidgetConfig } from './src/c8y-ticketing-integration-viewer-widget/c8y-ticketing-integration-viewer-widget.config.component';
-import { ChartsModule } from "ng2-charts";
 import { PaginationModule } from "ngx-bootstrap/pagination";
 import { TicketCommentModal } from "./src/c8y-ticketing-integration-viewer-widget/modal/ticket-comment-modal.component";
 import { ModalModule } from "ngx-bootstrap/modal";
@@ -28,7 +27,6 @@ import { ModalModule } from "ngx-bootstrap/modal";
  CockpitDashboardModule,
  SensorPhoneModule,
  UpgradeModule,
- ChartsModule,
  PaginationModule,
  ModalModule
  ],

package.json

@@ -29,9 +29,7 @@
  "@c8y/style": "1011.0.12",
  "@nestjs/cli": "7.6.0",
  "angular": "1.6.9",
- "chart.js": "2.9.4",
  "core-js": "3.4.0",
- "ng2-charts": "2.4.2",
  "ngx-bootstrap": "6.2.0",
  "rxjs": "6.6.3",
  "url-search-params-polyfill": "6.0.0",

src/c8y-ticketing-integration-viewer-widget/c8y-ticketing-integration-viewer-widget.component.css

@@ -1,4 +1,3 @@
-.widget-container {
- margin-left: 15px;
- margin-right: 15px;
+.device-link:hover {
+ cursor: pointer;
 }

src/c8y-ticketing-integration-viewer-widget/c8y-ticketing-integration-viewer-widget.component.html

@@ -12,6 +12,7 @@
  <th *ngIf="config.customwidgetdata.table.showColumns.lastUpdateDate">Last update date</th>
  <th *ngIf="config.customwidgetdata.table.showColumns.status">Status</th>
  <th *ngIf="config.customwidgetdata.table.showColumns.priority">Priority</th>
+ <th *ngIf="config.customwidgetdata.table.showColumns.owner">Owner</th>
  <th *ngIf="config.customwidgetdata.table.showColumns.alarmId">Alarm id</th>
  <th *ngIf="config.customwidgetdata.table.showColumns.deviceId">Device id</th>
  <th *ngIf="config.customwidgetdata.table.showColumns.comments" >Comments</th>
@@ -26,27 +27,15 @@
  <td data-label="Last update date" *ngIf="config.customwidgetdata.table.showColumns.lastUpdateDate">{{t.lastUpdateDate}}</td>
  <td data-label="Status" *ngIf="config.customwidgetdata.table.showColumns.status">{{t.status}}</td>
  <td data-label="Status" *ngIf="config.customwidgetdata.table.showColumns.priority">{{t.priority}}</td>
+ <td data-label="Status" *ngIf="config.customwidgetdata.table.showColumns.owner">{{t.owner}}</td>
  <td data-label="Alarm id" *ngIf="config.customwidgetdata.table.showColumns.alarmId">{{t.alarmId}}</td>
- <td data-label="Device id" *ngIf="config.customwidgetdata.table.showColumns.deviceId">{{t.deviceId}}</td>
+ <td data-label="Device id" *ngIf="config.customwidgetdata.table.showColumns.deviceId"><a click="device-link" (click)="redirectToDevicePage(t.deviceId)">{{t.deviceId}}</a></td>
  <td data-label="Comments" *ngIf="config.customwidgetdata.table.showColumns.comments"><button class="btn btn-default" (click)="showTicketComments(t)">View</button></td>
  </tr>
  </tbody>
  </table>
  <pagination [totalItems]="tickets.length" previousText=" " 
  nextText=" " [itemsPerPage]="totalTicketsPerPage" (pageChanged)="ticketsPageChanged($event)"></pagination>
  </div>
- <!-- SHOW CHARTS -->
- <ng-container *ngIf="config.customwidgetdata.chart.show">
- <div>
- <div style="margin-bottom: 20px;">
- <h4 style="margin-bottom: 15px;">Tickets by priority</h4>
- <canvas id="ticketsByPriorityChart"></canvas>
- </div>
- <div>
- <h4 style="margin-bottom: 15px;">Tickets by status</h4>
- <canvas id="ticketsByStatusChart"></canvas>
- </div>
- </div>
- </ng-container>
  </div>
 </div>

src/c8y-ticketing-integration-viewer-widget/c8y-ticketing-integration-viewer-widget.component.ts

@@ -19,13 +19,12 @@
  * @format
  */
 
-import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { IFetchOptions, IFetchResponse } from '@c8y/client';
+import { Component, Input, OnInit } from '@angular/core';
+import { IFetchResponse } from '@c8y/client';
 import { AlertService } from '@c8y/ngx-components';
 import { FetchClient } from '@c8y/ngx-components/api';
-import { Chart } from 'chart.js';
 import * as _ from 'lodash';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { PageChangedEvent } from 'ngx-bootstrap/pagination';
 import { TicketCommentModal } from './modal/ticket-comment-modal.component';
 import { Ticket } from './ticket';
@@ -44,14 +43,6 @@ export class CumulocityTicketingIntegrationViewerWidget implements OnInit {
  public paginatedTickets: Ticket[] = [];
  public totalTicketsPerPage: number = 1;
 
- private countByStatusLabels: string[] = [];
- private countByStatusDatapoints: number[] = []
-
- private countByPriorityLabels: string[] = [];
- private countByPriorityDatapoints: number[]= [];
-
- private chartColors = [];
-
  constructor(private fetchClient: FetchClient, private alertService: AlertService, public modalService: BsModalService) {
  }
 
@@ -62,14 +53,13 @@ export class CumulocityTicketingIntegrationViewerWidget implements OnInit {
  deviceId = this.config.device.id;
  }
  this.totalTicketsPerPage = this.config.customwidgetdata.table.pageSize;
- this.chartColors = this.config.customwidgetdata.chart.colors;
  this.fetchTickets(deviceId);
  } catch(e) {
  console.log("Ticketing Integration Viewer Widget - ngOnInit() "+e);
  }
  }
 
- private fetchTickets(deviceId?: string, statusId?: string): void {
+ private fetchTickets(deviceId?: string): void {
  let url: string = "/service/ticketing/tickets";
  if(deviceId !== undefined && deviceId !== null && deviceId !== "") {
  url = url + "?deviceId="+deviceId;
@@ -80,29 +70,6 @@ export class CumulocityTicketingIntegrationViewerWidget implements OnInit {
  resp.json().then((jsonResp) => {
  this.tickets = jsonResp;
  this.paginatedTickets = jsonResp.slice(0, this.totalTicketsPerPage);
-
- if(this.config.customwidgetdata.chart.show) {
- this.tickets.forEach((ticket) => {
- let statusFoundIndex = this.findEntryInStatus(ticket.status);
- if(statusFoundIndex === -1) {
- this.countByStatusLabels.push(ticket.status);
- this.countByStatusDatapoints.push(1);
- } else {
- this.countByStatusDatapoints[statusFoundIndex] = this.countByStatusDatapoints[statusFoundIndex] + 1;
- }
-
- let priorityFoundIndex = this.findEntryInPriority(ticket.priority);
- if(priorityFoundIndex === -1) {
- this.countByPriorityLabels.push(ticket.priority);
- this.countByPriorityDatapoints.push(1);
- } else {
- this.countByPriorityDatapoints[priorityFoundIndex] = this.countByPriorityDatapoints[priorityFoundIndex] + 1;
- }
- });
-
- this.showPriorityChart();
- this.showStatusChart();
- }
  }).catch((err) => {
  console.log("Ticketing Integration Viewer Widget - "+err);
  });
@@ -120,64 +87,6 @@ export class CumulocityTicketingIntegrationViewerWidget implements OnInit {
  this.paginatedTickets = this.tickets.slice(startItem, endItem);
  }
 
- private showPriorityChart() {
- new Chart("ticketsByPriorityChart", {
- type: "pie",
- data: {
- labels: this.countByPriorityLabels,
- datasets: [{
- data: this.countByPriorityDatapoints,
- backgroundColor: this.chartColors
- }]
- },
- options: {
- legend: {
- display: false
- }
- }
- });
- }
-
- private findEntryInStatus(status: string): number {
- let foundIndex: number = -1;
- for(let i=0; i<this.countByStatusLabels.length; i++) {
- if(status === this.countByStatusLabels[i]) {
- foundIndex = i;
- break;
- }
- }
- return foundIndex;
- }
-
- private findEntryInPriority(priority: string): number {
- let foundIndex: number = -1;
- for(let i=0; i<this.countByPriorityLabels.length; i++) {
- if(priority === this.countByPriorityLabels[i]) {
- foundIndex = i;
- break;
- }
- }
- return foundIndex;
- }
-
- private showStatusChart() {
- new Chart("ticketsByStatusChart", {
- type: "pie",
- data: {
- labels: this.countByStatusLabels,
- datasets: [{
- data: this.countByStatusDatapoints,
- backgroundColor: this.chartColors
- }]
- },
- options: {
- legend: {
- display: false
- }
- }
- });
- }
-
  public showTicketComments(ticket: Ticket) {
  let url = "/service/ticketing/tickets/"+ticket.id+"/comments";
  let fetchResp: Promise<IFetchResponse> = this.fetchClient.fetch(url);
@@ -199,4 +108,8 @@ export class CumulocityTicketingIntegrationViewerWidget implements OnInit {
  });
  }
 
+ public redirectToDevicePage(deviceId: string): void {
+ window.open("/apps/devicemanagement/index.html#/device/"+deviceId+"/device-info", "_blank");
+ }
+
 }