Merge pull request #130 from PioneerCode/feature/add-history-option

Add history action to table and update to Angular 8
PioneerCode · Jun 13, 2019 · 8b80f08 · 8b80f08
2 parents 6058dc9 + 664ffba
commit 8b80f08
Show file tree

Hide file tree

Showing 29 changed files with 4,284 additions and 4,214 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
         "pioneercode",
         "polyfills",
         "prismjs",
+        "routerlink",
         "ryancavanaugh",
         "styleext",
         "tooltips",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+<a name="1.0.0"></a>
+# [v1.0.0](https://github.com/PioneerCode/pioneer-charts/releases/tag/1.0.0) (2019-06-13)
+
+### Added
+  - Update to Angular 8, marking a 1.0 release.
+  - Added onHistoryClicked action to Table.   
+
 <a name="0.21.0"></a>
 # [v0.21.0](https://github.com/PioneerCode/pioneer-charts/releases/tag/0.21.0) (2019-02-18)
 

diff --git a/apps/dev/src/app/pages/test/test.component.ts b/apps/dev/src/app/pages/test/test.component.ts
@@ -12,7 +12,7 @@ import { IPcacData } from 'projects/pcac/src/lib/core/public_api';
 export class TestComponent {
   public showModal = true;
 
-  @ViewChild(PcacDialogComponent) dialog: PcacDialogComponent;
+  @ViewChild(PcacDialogComponent, { static: true }) dialog: PcacDialogComponent;
 
   constructor(public pcService: PcService) { }
 

diff --git a/apps/dev/src/assets/mock/table.json b/apps/dev/src/assets/mock/table.json
@@ -3,7 +3,8 @@
   "enableStickyHeader": true,
   "enableStickyFooter": true,
   "hideColumnOne": false,
-  "enableEditAction": false,
+  "enableEditAction": true,
+  "enableHistoryAction": true,
   "enableDeleteAction": true,
   "data": [
     {

diff --git a/apps/dev/src/tsconfig.app.json b/apps/dev/src/tsconfig.app.json
@@ -1,9 +1,8 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "es2015"
-  },
+    "outDir": "../out-tsc/app"
+},
   "include": [
     "**/*.ts"
   ],

diff --git a/apps/dev/src/tsconfig.spec.json b/apps/dev/src/tsconfig.spec.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "baseUrl": "./",
-    "module": "commonjs",
     "types": [
       "jasmine",
       "node"

diff --git a/apps/docs/src/app/pages/charts/charts.component.html b/apps/docs/src/app/pages/charts/charts.component.html
@@ -5,87 +5,100 @@
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Vertical Single: Hide Axis'}"></pcac-header>
-            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartSingleConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
+            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartSingleConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Vertical Grouped'}"></pcac-header>
-            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartGroupConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
+            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartGroupConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Vertical Stacked'}"></pcac-header>
-            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartStackedConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
+            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartStackedConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Vertical Bars'}"></pcac-header>
-            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
+            <pcac-bar-vertical-chart [config]="pcService.barVerticalChartConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-vertical-chart>
           </div>
         </div>
       </div>
       <div class="row pc-row">
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Horizontal Single: Hide Axis & Grid'}"></pcac-header>
-            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartSingleConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
+            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartSingleConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Horizontal Group: Color Override & Spread'}"></pcac-header>
-            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartGroupConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
+            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartGroupConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Horizontal Stacked'}"></pcac-header>
-            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartStackedConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
+            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartStackedConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':' Horizontal Bars'}"></pcac-header>
-            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartConfig" (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
+            <pcac-bar-horizontal-chart [config]="pcService.barHorizontalChartConfig"
+              (barClicked)="pcService.onClicked($event)"></pcac-bar-horizontal-chart>
           </div>
         </div>
       </div>
       <div class="row pc-row">
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Line Chart'}"></pcac-header>
-            <pcac-line-area-chart [config]="pcService.lineChartConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
+            <pcac-line-area-chart [config]="pcService.lineChartConfig" (dotClicked)="pcService.onClicked($event)">
+            </pcac-line-area-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Area Chart'}"></pcac-header>
-            <pcac-line-area-chart [config]="pcService.areaChartConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
+            <pcac-line-area-chart [config]="pcService.areaChartConfig" (dotClicked)="pcService.onClicked($event)">
+            </pcac-line-area-chart>
           </div>
         </div>
       </div>
       <div class="row pc-row">
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Area Chart: Hide Axis & Grid'}"></pcac-header>
-            <pcac-line-area-chart [config]="pcService.areaChartHideConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
+            <pcac-line-area-chart [config]="pcService.areaChartHideConfig" (dotClicked)="pcService.onClicked($event)">
+            </pcac-line-area-chart>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Table'}"></pcac-header>
-            <pcac-table [config]="pcService.tableConfig" (deleteClicked)="onDeleteClicked($event)" (editClicked)="onEditClicked($event)"></pcac-table>
+            <pcac-table [config]="pcService.tableConfig" (deleteClicked)="onDeleteClicked($event)"
+              (editClicked)="onEditClicked($event)" (historyClicked)="onHistoryClicked($event)"></pcac-table>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Pie Chart'}"></pcac-header>
-            <pcac-pie-chart [config]="pcService.pieChartConfig" (sliceClicked)="pcService.onClicked($event)"></pcac-pie-chart>
+            <pcac-pie-chart [config]="pcService.pieChartConfig" (sliceClicked)="pcService.onClicked($event)">
+            </pcac-pie-chart>
           </div>
         </div>
       </div>

diff --git a/apps/docs/src/app/pages/charts/charts.component.ts b/apps/docs/src/app/pages/charts/charts.component.ts
@@ -18,4 +18,8 @@ export class ChartsComponent {
   onDeleteClicked(row: IPcacData): void {
     alert("Delete Row");
   }
+
+  onHistoryClicked(row: IPcacData): void {
+    alert("Show History");
+  }
 }
diff --git a/apps/docs/src/app/pages/docs/components/charts/table/table.component.html b/apps/docs/src/app/pages/docs/components/charts/table/table.component.html
@@ -9,12 +9,13 @@
         <div class="col-sm">
           <div class="pc-chart-container">
             <pcac-header [config]="{'title':'Table'}"></pcac-header>
-            <pcac-table [config]="pcService.tableConfig" (deleteClicked)="onDeleteClicked($event)" (editClicked)="onEditClicked($event)"></pcac-table>
+            <pcac-table [config]="pcService.tableConfig" (deleteClicked)="onDeleteClicked($event)"
+              (editClicked)="onEditClicked($event)" (historyClicked)="onHistoryClicked($event)"></pcac-table>
           </div>
         </div>
       </div>
     </section>
-    <section class="pc-doc-section">
+    <section class=" pc-doc-section">
       <div class="row">
         <div class="col-sm">
           <h3>Markup</h3>
@@ -42,8 +43,8 @@ <h3>API</h3>
               <tr>
                 <td>data</td>
                 <td>
-                  Collection of <a routerlink="/docs/guides/data-contract" ng-reflect-router-link="/docs/guides/data-contract"
-                    href="/docs/guides/data-contract">IPcacData</a>
+                  Collection of <a routerlink="/docs/guides/data-contract"
+                    ng-reflect-router-link="/docs/guides/data-contract" href="/docs/guides/data-contract">IPcacData</a>
                   objects.
                 </td>
               </tr>
@@ -63,6 +64,10 @@ <h3>API</h3>
                 <td>enableDeleteAction</td>
                 <td>Show/Hide delete icon in action row. (deleteClicked)</td>
               </tr>
+              <tr>
+                <td>enableHistoryAction</td>
+                <td>Show/Hide history icon in action row. (historyClicked)</td>
+              </tr>
               <tr>
                 <td>hideColumnOne</td>
                 <td>Often is of value to track an ID that is associated with a row, i.e. record. When that ID is part
@@ -104,6 +109,15 @@ <h3 id="events">Events</h3>
               Associated row data (IPcacData)
             </td>
           </tr>
+          <tr>
+            <td>
+              historyClicked
+            </td>
+            <td>Emitted when "history" icon is clicked inside a row.</td>
+            <td>
+              Associated row data (IPcacData)
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>

diff --git a/apps/docs/src/app/pages/docs/components/charts/table/table.component.ts b/apps/docs/src/app/pages/docs/components/charts/table/table.component.ts
@@ -42,7 +42,7 @@ export class TableComponent {
       level: JumpNavLevel.h2
     }
   ] as IJumpNav[];
-  markupCode = `<pcac-table [config]="config" (deleteClicked)="onDeleteClicked($event)" (editClicked)="onEditClicked($event)"></pcac-table>`;
+  markupCode = `<pcac-table [config]="config" (deleteClicked)="onDeleteClicked($event)" (editClicked)="onEditClicked($event)" (historyClicked)="onHistoryClicked($event)"></pcac-table>`;
   importCode = `import { PcacTableModule } from '@pioneer-code/pioneer-charts';`;
 
   constructor(public pcService: PcService) { }
@@ -54,4 +54,8 @@ export class TableComponent {
   onDeleteClicked(row: IPcacData): void {
     alert("Delete Row");
   }
+
+  onHistoryClicked(row: IPcacData): void {
+    alert("Show History");
+  }
 }
diff --git a/apps/docs/src/app/pages/docs/components/helpers/dialog/dialog.component.ts b/apps/docs/src/app/pages/docs/components/helpers/dialog/dialog.component.ts
@@ -49,7 +49,7 @@ onClosed(): void {
     }
   ] as IJumpNav[];
 
-  @ViewChild(PcacDialogComponent) dialog: PcacDialogComponent;
+  @ViewChild(PcacDialogComponent, {static: false}) dialog: PcacDialogComponent;
 
   constructor(public pcService: PcService) { }
 

diff --git a/apps/docs/src/assets/mock/table.json b/apps/docs/src/assets/mock/table.json
@@ -4,6 +4,7 @@
   "enableStickyFooter": true,
   "enableActionRow": true,
   "enableEditAction": true,
+  "enableHistoryAction": true,
   "enableDeleteAction": true,
   "data": [
     {

diff --git a/apps/docs/src/polyfills.ts b/apps/docs/src/polyfills.ts
@@ -11,70 +11,53 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
diff --git a/apps/docs/src/tsconfig.app.json b/apps/docs/src/tsconfig.app.json
@@ -2,7 +2,6 @@
   "extends": "../../../tsconfig.node.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "types": []
   },
   "exclude": [

diff --git a/apps/docs/src/tsconfig.spec.json b/apps/docs/src/tsconfig.spec.json
@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "module": "commonjs",
     "types": [
       "jasmine",
       "node"

diff --git a/browserslist b/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.