├── projects
    └── lib-dashboard-primeng
    │   ├── ng-package.json
    │   ├── src
    │       ├── lib
    │       │   ├── lib-dashboard-primeng.service.ts
    │       │   ├── lib-dashboard-primeng.module.ts
    │       │   └── lib-dashboard-primeng.component.ts
    │       ├── public-api.ts
    │       └── test.ts
    │   ├── tslint.json
    │   ├── tsconfig.spec.json
    │   ├── tsconfig.lib.json
    │   ├── package.json
    │   ├── karma.conf.js
    │   └── README.md
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── README.md
├── angular.json
├── package.json
└── tslint.json


/projects/lib-dashboard-primeng/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ngx-dashboard-primeng",
4 |   "lib": {
5 |     "entryFile": "src/public-api.ts"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/src/lib/lib-dashboard-primeng.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class LibDashboardPrimengService {
 7 | 
 8 |   constructor() { }
 9 | }
10 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 |  * Public API Surface of lib-dashboard-primeng
3 |  */
4 | 
5 | export * from './lib/lib-dashboard-primeng.service';
6 | export * from './lib/lib-dashboard-primeng.component';
7 | export * from './lib/lib-dashboard-primeng.module';
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "lib",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "lib",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "target": "es2015",
 6 |     "declaration": true,
 7 |     "inlineSources": true,
 8 |     "types": [],
 9 |     "lib": [
10 |       "dom",
11 |       "es2018"
12 |     ]
13 |   },
14 |   "angularCompilerOptions": {
15 |     "annotateForClosureCompiler": true,
16 |     "skipTemplateCodegen": true,
17 |     "strictMetadataEmit": true,
18 |     "fullTemplateTypeCheck": true,
19 |     "strictInjectionParameters": true,
20 |     "enableResourceInlining": true
21 |   },
22 |   "exclude": [
23 |     "src/test.ts",
24 |     "**/*.spec.ts"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone';
 4 | import 'zone.js/dist/zone-testing';
 5 | import { getTestBed } from '@angular/core/testing';
 6 | import {
 7 |   BrowserDynamicTestingModule,
 8 |   platformBrowserDynamicTesting
 9 | } from '@angular/platform-browser-dynamic/testing';
10 | 
11 | declare const require: any;
12 | 
13 | // First, initialize the Angular testing environment.
14 | getTestBed().initTestEnvironment(
15 |   BrowserDynamicTestingModule,
16 |   platformBrowserDynamicTesting()
17 | );
18 | // Then we find all the tests.
19 | const context = require.context('./', true, /\.spec\.ts$/);
20 | // And load the modules.
21 | context.keys().map(context);
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "lib-dashboard-primeng": [
23 |         "dist/lib-dashboard-primeng"
24 |       ],
25 |       "lib-dashboard-primeng/*": [
26 |         "dist/lib-dashboard-primeng/*"
27 |       ]
28 |     }
29 |   },
30 |   "angularCompilerOptions": {
31 |     "fullTemplateTypeCheck": true,
32 |     "strictInjectionParameters": true
33 |   }
34 | }


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@bolt-analytics/ngx-dashboard-primeng",
 3 |   "version": "0.0.1",
 4 |   "peerDependencies": {
 5 |     "@angular/common": "^8.2.14",
 6 |     "@angular/core": "^8.2.14"
 7 |   },
 8 |   "description": "This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.",
 9 |   "directories": {
10 |     "lib": "lib"
11 |   },
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/PT10/primeng-dashboard-lib.git"
18 |   },
19 |   "keywords": [
20 |     "Dashboarding"
21 |   ],
22 |   "author": "Prasad Tenndulkar",
23 |   "license": "ISC",
24 |   "bugs": {
25 |     "url": "https://github.com/PT10/primeng-dashboard-lib/issues"
26 |   },
27 |   "homepage": "https://github.com/PT10/primeng-dashboard-lib#readme"
28 | }
29 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/src/lib/lib-dashboard-primeng.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { LibDashboardPrimengComponent } from './lib-dashboard-primeng.component';
 3 | import { TableModule } from 'primeng/table';
 4 | import { ButtonModule } from 'primeng/button';
 5 | import { InputTextModule } from 'primeng/inputtext';
 6 | import { CalendarModule } from 'primeng/calendar';
 7 | import { BrowserModule } from '@angular/platform-browser'
 8 | import { FormsModule } from '@angular/forms';
 9 | import {InputTextareaModule} from 'primeng/inputtextarea';
10 | 
11 | 
12 | 
13 | @NgModule({
14 |   declarations: [LibDashboardPrimengComponent],
15 |   imports: [
16 |     BrowserModule,
17 |     FormsModule,
18 |     TableModule,
19 |     ButtonModule,
20 |     InputTextModule,
21 |     CalendarModule,
22 |     InputTextareaModule
23 |   ],
24 |   exports: [LibDashboardPrimengComponent]
25 | })
26 | export class LibDashboardPrimengModule { }
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # PrimengDashboard
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.4.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage/lib-dashboard-primeng'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/README.md:
--------------------------------------------------------------------------------
 1 | # LibDashboardPrimeng
 2 | 
 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
 4 | 
 5 | ## Code scaffolding
 6 | 
 7 | Run `ng generate component component-name --project lib-dashboard-primeng` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib-dashboard-primeng`.
 8 | > Note: Don't forget to add `--project lib-dashboard-primeng` or else it will be added to the default project in your `angular.json` file. 
 9 | 
10 | ## Build
11 | 
12 | Run `ng build lib-dashboard-primeng` to build the project. The build artifacts will be stored in the `dist/` directory.
13 | 
14 | ## Publishing
15 | 
16 | After building your library with `ng build lib-dashboard-primeng`, go to the dist folder `cd dist/lib-dashboard-primeng` and run `npm publish`.
17 | 
18 | ## Running unit tests
19 | 
20 | Run `ng test lib-dashboard-primeng` to execute the unit tests via [Karma](https://karma-runner.github.io).
21 | 
22 | ## Further help
23 | 
24 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
25 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "version": 1,
 4 |   "newProjectRoot": "projects",
 5 |   "projects": {
 6 |     "lib-dashboard-primeng": {
 7 |       "projectType": "library",
 8 |       "root": "projects/lib-dashboard-primeng",
 9 |       "sourceRoot": "projects/lib-dashboard-primeng/src",
10 |       "prefix": "lib",
11 |       "architect": {
12 |         "build": {
13 |           "builder": "@angular-devkit/build-ng-packagr:build",
14 |           "options": {
15 |             "tsConfig": "projects/lib-dashboard-primeng/tsconfig.lib.json",
16 |             "project": "projects/lib-dashboard-primeng/ng-package.json"
17 |           }
18 |         },
19 |         "test": {
20 |           "builder": "@angular-devkit/build-angular:karma",
21 |           "options": {
22 |             "main": "projects/lib-dashboard-primeng/src/test.ts",
23 |             "tsConfig": "projects/lib-dashboard-primeng/tsconfig.spec.json",
24 |             "karmaConfig": "projects/lib-dashboard-primeng/karma.conf.js"
25 |           }
26 |         },
27 |         "lint": {
28 |           "builder": "@angular-devkit/build-angular:tslint",
29 |           "options": {
30 |             "tsConfig": [
31 |               "projects/lib-dashboard-primeng/tsconfig.lib.json",
32 |               "projects/lib-dashboard-primeng/tsconfig.spec.json"
33 |             ],
34 |             "exclude": [
35 |               "**/node_modules/**"
36 |             ]
37 |           }
38 |         }
39 |       }
40 |     }},
41 |   "defaultProject": "lib-dashboard-primeng"
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "primeng-dashboard",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~8.2.5",
15 |     "@angular/cdk": "^8.2.3",
16 |     "@angular/common": "~8.2.5",
17 |     "@angular/compiler": "~8.2.5",
18 |     "@angular/core": "~8.2.5",
19 |     "@angular/forms": "~8.2.5",
20 |     "@angular/platform-browser": "~8.2.5",
21 |     "@angular/platform-browser-dynamic": "~8.2.5",
22 |     "@angular/router": "~8.2.5",
23 |     "primeicons": "^1.0.0-beta.7",
24 |     "primeng": "^8.1.1",
25 |     "rxjs": "~6.4.0",
26 |     "tslib": "^1.10.0",
27 |     "zone.js": "~0.9.1"
28 |   },
29 |   "devDependencies": {
30 |     "@angular-devkit/build-angular": "~0.803.29",
31 |     "@angular-devkit/build-ng-packagr": "~0.803.29",
32 |     "@angular/cli": "~8.3.4",
33 |     "@angular/compiler-cli": "~8.2.5",
34 |     "@angular/language-service": "~8.2.5",
35 |     "@types/node": "~8.9.4",
36 |     "@types/jasmine": "~3.3.8",
37 |     "@types/jasminewd2": "~2.0.3",
38 |     "codelyzer": "^5.0.0",
39 |     "jasmine-core": "~3.4.0",
40 |     "jasmine-spec-reporter": "~4.2.1",
41 |     "karma": "~4.1.0",
42 |     "karma-chrome-launcher": "~2.2.0",
43 |     "karma-coverage-istanbul-reporter": "~2.0.1",
44 |     "karma-jasmine": "~2.0.1",
45 |     "karma-jasmine-html-reporter": "^1.4.0",
46 |     "ng-packagr": "^5.4.0",
47 |     "protractor": "~5.4.0",
48 |     "ts-node": "~7.0.0",
49 |     "tsickle": "^0.37.0",
50 |     "tslint": "~5.15.0",
51 |     "typescript": "~3.5.3"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": [
 4 |     "codelyzer"
 5 |   ],
 6 |   "rules": {
 7 |     "array-type": false,
 8 |     "arrow-parens": false,
 9 |     "deprecation": {
10 |       "severity": "warning"
11 |     },
12 |     "import-blacklist": [
13 |       true,
14 |       "rxjs/Rx"
15 |     ],
16 |     "interface-name": false,
17 |     "max-classes-per-file": false,
18 |     "max-line-length": [
19 |       true,
20 |       140
21 |     ],
22 |     "member-access": false,
23 |     "member-ordering": [
24 |       true,
25 |       {
26 |         "order": [
27 |           "static-field",
28 |           "instance-field",
29 |           "static-method",
30 |           "instance-method"
31 |         ]
32 |       }
33 |     ],
34 |     "no-consecutive-blank-lines": false,
35 |     "no-console": [
36 |       true,
37 |       "debug",
38 |       "info",
39 |       "time",
40 |       "timeEnd",
41 |       "trace"
42 |     ],
43 |     "no-empty": false,
44 |     "no-inferrable-types": [
45 |       true,
46 |       "ignore-params"
47 |     ],
48 |     "no-non-null-assertion": true,
49 |     "no-redundant-jsdoc": true,
50 |     "no-switch-case-fall-through": true,
51 |     "no-use-before-declare": true,
52 |     "no-var-requires": false,
53 |     "object-literal-key-quotes": [
54 |       true,
55 |       "as-needed"
56 |     ],
57 |     "object-literal-sort-keys": false,
58 |     "ordered-imports": false,
59 |     "quotemark": [
60 |       true,
61 |       "single"
62 |     ],
63 |     "trailing-comma": false,
64 |     "component-class-suffix": true,
65 |     "contextual-lifecycle": true,
66 |     "directive-class-suffix": true,
67 |     "no-conflicting-lifecycle": true,
68 |     "no-host-metadata-property": true,
69 |     "no-input-rename": true,
70 |     "no-inputs-metadata-property": true,
71 |     "no-output-native": true,
72 |     "no-output-on-prefix": true,
73 |     "no-output-rename": true,
74 |     "no-outputs-metadata-property": true,
75 |     "template-banana-in-box": true,
76 |     "template-no-negated-async": true,
77 |     "use-lifecycle-interface": true,
78 |     "use-pipe-transform-interface": true
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/projects/lib-dashboard-primeng/src/lib/lib-dashboard-primeng.component.ts:
--------------------------------------------------------------------------------
  1 | import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
  2 | import { Table } from 'primeng/table';
  3 | 
  4 | @Component({
  5 |   selector: 'lib-dashboard-primeng',
  6 |   template: `
  7 |   <div #tb style="height: 100%" [ngSwitch]="chartConfig.chartType">
  8 |     <div *ngSwitchCase="'searchbar'" class="ui-g ui-fluid">
  9 |       <div class="ui-g-12 ui-md-12">
 10 |           <div class="ui-inputgroup">
 11 |             <textarea type="text" pInputTextarea autoResize="true" style="width: 90%" [rows]="chartConfig.rows" [placeholder]="chartConfig.emptyText" 
 12 |             (blur)="searchQueryChange.emit(searchQuery);"
 13 |             [(ngModel)]="searchQuery"></textarea> <!-- (blur)="triggerEvent({data: chartConfig.value})" (keyup.enter)="triggerEvent({data: chartConfig.value})" -->
 14 |             <button pButton type="button" [label]="chartConfig.buttonText" (click)="triggerEvent({data: searchQuery})"></button>
 15 |           </div>
 16 |       </div>
 17 |     </div>
 18 |     <div *ngSwitchCase="'single'" class="ui-g ui-fluid">
 19 |       <div class="ui-g-12 ui-md-12" style="text-align: center; position: absolute">
 20 |           <div class="ui-inputgroup" style="align-items: baseline; display: contents">
 21 |             <span [ngStyle]="{'font-size': chartConfig['font-size'], 'font-weight': chartConfig['font-weight']}">{{getSingleStat()}}</span>
 22 |             <label>{{chartConfig.seriesName}}</label>
 23 |           </div>
 24 |       </div>
 25 |     </div>
 26 |     <div *ngSwitchCase="'timerange'" class="ui-g ui-fluid">
 27 |       <div class="ui-g-12 ui-md-12">
 28 |         <div class="ui-inputgroup">
 29 |           <label style="padding-right: 10px; width: 20%">{{chartConfig.label}}</label>
 30 |           <p-calendar [ngStyle]="{'width': '70%', 'border': timeWindow && timeWindow.includes(null) ? '1px solid red': ''}" [(ngModel)]="timeWindow" selectionMode="range" [showTime]="true"
 31 |             (onClose)="timeWindowChange.emit(timeWindow); triggerEvent({data: timeWindow})"
 32 |             [readonlyInput]="false" [showIcon]="true" [appendTo]="'body'"> <!-- (onClose)="dateRange.length === 2 ? triggerEvent({data: dateRange}) : undefined" -->
 33 |           </p-calendar>
 34 |           <span *ngIf="timeWindow && timeWindow.includes(null)" style="width: 10%; color: red; margin-left: 5px" class="glyphicon glyphicon-exclamation-sign" title="Invalid time range"></span>
 35 |         </div>
 36 |       </div>
 37 |     </div>
 38 |     <p-table *ngSwitchCase="'table'" #dt [columns]="chartConfig.columns" [value]="dataset.source" [rowsPerPageOptions]="chartConfig.rowsPerPageOptions" [responsive]="true"
 39 |           [paginator]="chartConfig.pagination" [paginatorPosition]="chartConfig.paginatorPosition" [alwaysShowPaginator]="chartConfig.alwaysShowPaginator" [autoLayout]="chartConfig.autoLayout"
 40 |           [showCurrentPageReport]="chartConfig.showCurrentPageReport" currentPageReportTemplate="Showing {{getFirst()}} to {{getLast()}} of {{dataset.source.length}} records"
 41 |           [rows]="chartConfig.pageSize" [resizableColumns]="chartConfig.resizableColumns"
 42 |           [scrollable]="chartConfig.scrollable" [style]="getTableStyle()" [scrollHeight]="getScrollHeight()" scrollWidth="100%">
 43 |           <ng-template *ngIf="chartConfig.globalSearch" pTemplate="caption">
 44 |             <div style="text-align: right">
 45 |                 <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
 46 |                 <input pInputText type="text" size="50" placeholder="Search"
 47 |                   (input)="dt.filterGlobal($event.target.value, 'contains');" style="width:auto">
 48 |             </div>
 49 |         </ng-template>
 50 |           <ng-template pTemplate="colgroup" let-columns>
 51 |               <colgroup>
 52 |                   <col *ngFor="let col of columns" [style.width]="col.width">
 53 |               </colgroup>
 54 |           </ng-template>
 55 |           <ng-template pTemplate="header" let-columns>
 56 |               <tr>
 57 |                 <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.sortable ? col.field : undefined">
 58 |                     {{col.header}}
 59 |                     <p-sortIcon *ngIf="col.sortable" [field]="col.field" ariaLabel="Activate to sort"
 60 |                     ariaLabelDesc="Activate to sort in descending order"
 61 |                     ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
 62 |                 </th>
 63 |               </tr>
 64 |               <tr *ngIf="chartConfig.columnSearch">
 65 |                 <th *ngFor="let col of columns">
 66 |                   <input *ngIf="col.searchable" type="text"
 67 |                      class="form-control"
 68 |                     (input)="dt.filter($event.target.value, col.field, 'contains')">
 69 |                 </th>
 70 |               </tr>
 71 |           </ng-template>
 72 |           <ng-template pTemplate="body" let-row let-i="rowIndex">
 73 |               <tr>
 74 |                   <td *ngFor="let col of chartConfig.columns">
 75 |                     <span *ngIf="col.type && ['datetime', 'date'].includes(col.type)" style="word-break: break-all">{{row[col.field] | date:'MM-dd-yyyy HH:mm:ss.SSS'}}</span>
 76 |                     <span *ngIf="!col.type || !['datetime', 'date'].includes(col.type)" style="word-break: break-all">{{row[col.field]}}</span>
 77 |                   </td>
 78 | 
 79 |               </tr>
 80 |           </ng-template>
 81 |           <ng-template pTemplate="emptymessage" let-columns>
 82 |               <tr>
 83 |                   <td [attr.colspan]="columns ? columns.length : 4">
 84 |                       No records found
 85 |                   </td>
 86 |               </tr>
 87 |           </ng-template>
 88 |         </p-table>
 89 | </div>
 90 |   `,
 91 |   styles: []
 92 | })
 93 | export class LibDashboardPrimengComponent implements OnInit, AfterViewInit {
 94 | 
 95 |   @Input()
 96 |   chartConfig;
 97 | 
 98 |   @Input()
 99 |   dataset;
100 | 
101 |   @Input()
102 |   searchQuery: string;
103 | 
104 |   @Output()
105 |   searchQueryChange: EventEmitter<any> = new EventEmitter<any> ();
106 | 
107 |   @Input()
108 |   timeWindow: any[]
109 | 
110 |   @Output()
111 |   timeWindowChange: EventEmitter<any> = new EventEmitter<any> ();
112 | 
113 |   @Output()
114 |   onEvent: EventEmitter<any> = new EventEmitter<any> ();
115 | 
116 |   tableHeight;
117 | 
118 |   dateRange: Date[];
119 | 
120 |   @ViewChild('tb', {static: true})
121 |   myIdentifier: ElementRef;
122 | 
123 |   // private tableRef: Table;
124 | 
125 |   // @ViewChild('dt', {static: false}) set content(content: Table) {
126 |   //   if(content) {
127 |   //       this.tableRef = content;
128 |   //   }
129 |   // }
130 | 
131 |   @ViewChild('dt', {static: false})
132 |   private tableRef?: Table
133 |   
134 | 
135 |   constructor() { }
136 | 
137 |   ngOnInit() {
138 |   }
139 | 
140 |   ngAfterViewInit() {
141 |     this.tableHeight = this.myIdentifier.nativeElement.offsetHeight + "px";
142 | 
143 |     if (this.chartConfig.chartType === 'timerange') {
144 |       if (this.timeWindow && this.timeWindow.length === 2) {
145 |         this.timeWindow.map(v => new Date(v));
146 |         this.timeWindowChange.emit(this.timeWindow);
147 |         this.triggerEvent({data: this.timeWindow});
148 |       }
149 |       else if (this.chartConfig.defaultValue) {
150 |         const rx = /NOW-(\d+)(\w)/;
151 |         const vals: any[] = rx.exec(this.chartConfig.defaultValue)
152 |         if (vals && vals.length === 3) {
153 |           this.timeWindow = [];
154 |           const now: Date = new Date();
155 |           const then: Date = new Date(now);
156 | 
157 |           switch (vals[2]) {
158 |             case 'm' :
159 |               then.setMinutes(now.getMinutes() - vals[1])
160 |               this.timeWindow.push(then);
161 |               break;
162 |             case 'h' :
163 |                 then.setHours(now.getHours() - vals[1])
164 |                 this.timeWindow.push(then);
165 |                 break;
166 |             case 's' :
167 |                 then.setSeconds(now.getSeconds() - vals[1])
168 |                 this.timeWindow.push(then);
169 |                 break;
170 |           }
171 | 
172 |           this.timeWindow.push(now);
173 | 
174 |           this.timeWindowChange.emit(this.timeWindow);
175 |           this.triggerEvent({data: this.timeWindow});
176 |         }
177 |       }
178 |     }
179 | 
180 |     if (this.searchQuery && this.timeWindow && this.timeWindow.length === 2) {
181 |       this.triggerEvent({data: {}});
182 |     }
183 |   }
184 | 
185 |   getScrollHeight() {
186 |     return (this.myIdentifier.nativeElement.offsetHeight - (this.chartConfig.columnSearch ? 200 : 150)) + "px";
187 |   }
188 | 
189 |   getTableStyle() {
190 |     return {width:'100%', 'height': (this.myIdentifier.nativeElement.offsetHeight) + "px"}
191 |   }
192 | 
193 |   triggerEvent(data) {
194 |     this.onEvent.emit(data);
195 |   }
196 | 
197 |   getSingleStat() {
198 |     if (!this.dataset.source || !this.dataset.source[0]) {
199 |       return 0;
200 |     }
201 | 
202 |     return this.dataset.source[0][this.dataset.dimensions[0]];
203 |   }
204 | 
205 |   getFirst(): string {
206 |     return this.tableRef ? String(this.tableRef._first + 1) : "";
207 |   }
208 | 
209 |   getLast(): string {
210 |     return this.tableRef ? String(Math.min(this.tableRef._first + this.tableRef.rows, this.dataset.source.length)) : "";
211 |   }
212 | 
213 | }
214 | 


--------------------------------------------------------------------------------