changed to d3js bar chart from table
This commit is contained in:
276
package-lock.json
generated
276
package-lock.json
generated
@@ -4898,8 +4898,7 @@
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
},
|
||||
"commondir": {
|
||||
"version": "1.0.1",
|
||||
@@ -5489,6 +5488,270 @@
|
||||
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
|
||||
"dev": true
|
||||
},
|
||||
"d3": {
|
||||
"version": "5.15.0",
|
||||
"resolved": "https://registry.npmjs.org/d3/-/d3-5.15.0.tgz",
|
||||
"integrity": "sha512-C+E80SL2nLLtmykZ6klwYj5rPqB5nlfN5LdWEAVdWPppqTD8taoJi2PxLZjPeYT8FFRR2yucXq+kBlOnnvZeLg==",
|
||||
"requires": {
|
||||
"d3-array": "1",
|
||||
"d3-axis": "1",
|
||||
"d3-brush": "1",
|
||||
"d3-chord": "1",
|
||||
"d3-collection": "1",
|
||||
"d3-color": "1",
|
||||
"d3-contour": "1",
|
||||
"d3-dispatch": "1",
|
||||
"d3-drag": "1",
|
||||
"d3-dsv": "1",
|
||||
"d3-ease": "1",
|
||||
"d3-fetch": "1",
|
||||
"d3-force": "1",
|
||||
"d3-format": "1",
|
||||
"d3-geo": "1",
|
||||
"d3-hierarchy": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-path": "1",
|
||||
"d3-polygon": "1",
|
||||
"d3-quadtree": "1",
|
||||
"d3-random": "1",
|
||||
"d3-scale": "2",
|
||||
"d3-scale-chromatic": "1",
|
||||
"d3-selection": "1",
|
||||
"d3-shape": "1",
|
||||
"d3-time": "1",
|
||||
"d3-time-format": "2",
|
||||
"d3-timer": "1",
|
||||
"d3-transition": "1",
|
||||
"d3-voronoi": "1",
|
||||
"d3-zoom": "1"
|
||||
}
|
||||
},
|
||||
"d3-array": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
|
||||
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
|
||||
},
|
||||
"d3-axis": {
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
|
||||
"integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
|
||||
},
|
||||
"d3-brush": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
|
||||
"integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-drag": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-selection": "1",
|
||||
"d3-transition": "1"
|
||||
}
|
||||
},
|
||||
"d3-chord": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
|
||||
"integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
|
||||
"requires": {
|
||||
"d3-array": "1",
|
||||
"d3-path": "1"
|
||||
}
|
||||
},
|
||||
"d3-collection": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
|
||||
"integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
|
||||
},
|
||||
"d3-color": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
|
||||
"integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
|
||||
},
|
||||
"d3-contour": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
|
||||
"integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
|
||||
"requires": {
|
||||
"d3-array": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"d3-dispatch": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
|
||||
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
|
||||
},
|
||||
"d3-drag": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
|
||||
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-selection": "1"
|
||||
}
|
||||
},
|
||||
"d3-dsv": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
|
||||
"integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
|
||||
"requires": {
|
||||
"commander": "2",
|
||||
"iconv-lite": "0.4",
|
||||
"rw": "1"
|
||||
}
|
||||
},
|
||||
"d3-ease": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
|
||||
"integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
|
||||
},
|
||||
"d3-fetch": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.2.tgz",
|
||||
"integrity": "sha512-S2loaQCV/ZeyTyIF2oP8D1K9Z4QizUzW7cWeAOAS4U88qOt3Ucf6GsmgthuYSdyB2HyEm4CeGvkQxWsmInsIVA==",
|
||||
"requires": {
|
||||
"d3-dsv": "1"
|
||||
}
|
||||
},
|
||||
"d3-force": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
|
||||
"integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
|
||||
"requires": {
|
||||
"d3-collection": "1",
|
||||
"d3-dispatch": "1",
|
||||
"d3-quadtree": "1",
|
||||
"d3-timer": "1"
|
||||
}
|
||||
},
|
||||
"d3-format": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.3.tgz",
|
||||
"integrity": "sha512-mm/nE2Y9HgGyjP+rKIekeITVgBtX97o1nrvHCWX8F/yBYyevUTvu9vb5pUnKwrcSw7o7GuwMOWjS9gFDs4O+uQ=="
|
||||
},
|
||||
"d3-geo": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.9.tgz",
|
||||
"integrity": "sha512-9edcH6J3s/Aa3KJITWqFJbyB/8q3mMlA9Fi7z6yy+FAYMnRaxmC7jBhUnsINxVWD14GmqX3DK8uk7nV6/Ekt4A==",
|
||||
"requires": {
|
||||
"d3-array": "1"
|
||||
}
|
||||
},
|
||||
"d3-hierarchy": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
|
||||
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
|
||||
},
|
||||
"d3-interpolate": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
|
||||
"integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
|
||||
"requires": {
|
||||
"d3-color": "1"
|
||||
}
|
||||
},
|
||||
"d3-path": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
|
||||
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
|
||||
},
|
||||
"d3-polygon": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
|
||||
"integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
|
||||
},
|
||||
"d3-quadtree": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
|
||||
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
|
||||
},
|
||||
"d3-random": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
|
||||
"integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
|
||||
},
|
||||
"d3-scale": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
|
||||
"integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
|
||||
"requires": {
|
||||
"d3-array": "^1.2.0",
|
||||
"d3-collection": "1",
|
||||
"d3-format": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-time": "1",
|
||||
"d3-time-format": "2"
|
||||
}
|
||||
},
|
||||
"d3-scale-chromatic": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
|
||||
"integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
|
||||
"requires": {
|
||||
"d3-color": "1",
|
||||
"d3-interpolate": "1"
|
||||
}
|
||||
},
|
||||
"d3-selection": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
|
||||
"integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
|
||||
},
|
||||
"d3-shape": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
|
||||
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
|
||||
"requires": {
|
||||
"d3-path": "1"
|
||||
}
|
||||
},
|
||||
"d3-time": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
|
||||
"integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
|
||||
},
|
||||
"d3-time-format": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
|
||||
"integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
|
||||
"requires": {
|
||||
"d3-time": "1"
|
||||
}
|
||||
},
|
||||
"d3-timer": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
|
||||
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
|
||||
},
|
||||
"d3-transition": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
|
||||
"integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
|
||||
"requires": {
|
||||
"d3-color": "1",
|
||||
"d3-dispatch": "1",
|
||||
"d3-ease": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-selection": "^1.1.0",
|
||||
"d3-timer": "1"
|
||||
}
|
||||
},
|
||||
"d3-voronoi": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
|
||||
"integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
|
||||
},
|
||||
"d3-zoom": {
|
||||
"version": "1.8.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
|
||||
"integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-drag": "1",
|
||||
"d3-interpolate": "1",
|
||||
"d3-selection": "1",
|
||||
"d3-transition": "1"
|
||||
}
|
||||
},
|
||||
"damerau-levenshtein": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
|
||||
@@ -7241,7 +7504,6 @@
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
}
|
||||
@@ -12052,6 +12314,11 @@
|
||||
"aproba": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"rw": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
|
||||
@@ -12078,8 +12345,7 @@
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.23.3",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"@angular/router": "~9.0.0",
|
||||
"@angular/service-worker": "~9.0.0",
|
||||
"aws-amplify": "^1.2.2",
|
||||
"d3": "^5.15.0",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.10.2"
|
||||
|
||||
@@ -27,8 +27,6 @@ export class ConfigsComponent implements OnInit {
|
||||
// Setup an API call to get the list of certificate IDs from DDB to store in options
|
||||
options: string[];
|
||||
|
||||
|
||||
|
||||
filteredOptions: Observable<string[]>;
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
@@ -15,116 +15,7 @@
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<mat-divider ></mat-divider>
|
||||
<mat-form-field>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
|
||||
|
||||
<ng-container matColumnDef="location">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Location </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.location}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="company">
|
||||
<th mat-header-cell *matHeaderCellDef> Company </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.company}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="field">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Field </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.field}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="volumeflow">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Flow Rate </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.volumeflow}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="intakepressure">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Intake Pressure </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.intakepressure}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="current">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Current </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.current}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="frequency">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.frequency}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<!-- <div class="container" fxLayout="row wrap" fxLayoutGap="10px">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel *ngFor="let message of serverMessages">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ message.location }}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ message.company }}
|
||||
</mat-panel-description>
|
||||
<mat-panel-description>
|
||||
{{ message.field }}
|
||||
</mat-panel-description>
|
||||
<mat-panel-description>
|
||||
Flow Rate: {{ message.volumeflow }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ngx-gauge
|
||||
[type] = "gaugeType"
|
||||
[cap] = "gaugeCap"
|
||||
[value] = "message.volumeflow"
|
||||
[label] = "gaugeLabel"
|
||||
[append] = "gaugeAppendText"
|
||||
[thick] = "gaugeThick"
|
||||
[min] = "gaugeMin"
|
||||
[max] = "gaugeMax"
|
||||
[thresholds] = "gaugeThresholds">
|
||||
</ngx-gauge>
|
||||
<ngx-gauge
|
||||
[type] = "gaugeType"
|
||||
[cap] = "gaugeCap"
|
||||
[value] = "message.current"
|
||||
[label] = "gaugeLabel"
|
||||
[append] = "gaugeAppendText"
|
||||
[thick] = "gaugeThick"
|
||||
[min] = "gaugeMin"
|
||||
[max] = "gaugeMax"
|
||||
[thresholds] = "gaugeThresholds">
|
||||
<ngx-gauge-label>Current</ngx-gauge-label>
|
||||
<ngx-gauge-append>A</ngx-gauge-append>
|
||||
</ngx-gauge>
|
||||
<ngx-gauge
|
||||
[type] = "gaugeType"
|
||||
[cap] = "gaugeCap"
|
||||
[value] = "message.intakepressure"
|
||||
[label] = "gaugeLabel"
|
||||
[append] = "gaugeAppendText"
|
||||
[thick] = "gaugeThick"
|
||||
[min] = "gaugeMin"
|
||||
[max] = "gaugeMax"
|
||||
[thresholds] = "gaugeThresholds">
|
||||
<ngx-gauge-label>Intake Pressure</ngx-gauge-label>
|
||||
<ngx-gauge-append>PSI</ngx-gauge-append>
|
||||
</ngx-gauge>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div> -->
|
||||
<h2>{{ title }}</h2>
|
||||
<svg width="1600" height="680"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--style="float:left;display:inline-block;height:50px;"-->
|
||||
<!-- [ngStyle]="{'width': 'calc(100% /' + serverMessages.length + ')'}"-->
|
||||
@@ -2,7 +2,9 @@
|
||||
width: 250px;
|
||||
}
|
||||
.container {
|
||||
//display: flex;
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 15px;
|
||||
}
|
||||
.flex-spacer {
|
||||
@@ -11,7 +13,7 @@
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
|
||||
@@ -4,6 +4,13 @@ import Auth from '@aws-amplify/auth';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
|
||||
import * as d3 from 'd3-selection';
|
||||
import * as d3Scale from 'd3-scale';
|
||||
import * as d3Array from 'd3-array';
|
||||
import * as d3Axis from 'd3-axis';
|
||||
import * as d3Color from 'd3-scale-chromatic';
|
||||
|
||||
|
||||
export interface MyJSON {
|
||||
location: string;
|
||||
company: string;
|
||||
@@ -41,36 +48,27 @@ export class HomeComponent implements OnInit, OnDestroy {
|
||||
public serverMessages: MyJSON[] = [];
|
||||
private socket$: WebSocketSubject<any>;
|
||||
private currentMessage = {location: '', company: '', volumeflow: '', field: ''};
|
||||
private totalFlowRate = 0;
|
||||
totalFlowRate = 0;
|
||||
private roles: string[];
|
||||
private groups: string[];
|
||||
private currentRole: string;
|
||||
private token: string;
|
||||
gaugeType = 'arch';
|
||||
gaugeCap = 'round';
|
||||
gaugeValue = this.currentMessage.volumeflow;
|
||||
gaugeLabel = 'Volume Flow';
|
||||
gaugeAppendText = 'gpm';
|
||||
gaugeThick = 10;
|
||||
gaugeMin = 0;
|
||||
gaugeMax = 100;
|
||||
gaugeThresholds = {
|
||||
0 : { color : 'red'},
|
||||
33 : { color : 'orange'},
|
||||
66 : { color : 'green'}
|
||||
};
|
||||
|
||||
displayedColumns: string[] = ['location', 'company', 'field', 'current', 'volumeflow', 'intakepressure', 'frequency'];
|
||||
dataSource = new MatTableDataSource(this.serverMessages);
|
||||
title = 'Bar Chart';
|
||||
private width: number;
|
||||
private height: number;
|
||||
private margin = {top: 20, right: 20, bottom: 30, left: 40};
|
||||
colorScale: any;
|
||||
|
||||
private x: any;
|
||||
private y: any;
|
||||
private svg: any;
|
||||
private g: any;
|
||||
|
||||
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||
|
||||
applyFilter(filterValue: string) {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
this.initSvg();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
@@ -100,8 +98,21 @@ export class HomeComponent implements OnInit, OnDestroy {
|
||||
this.updateList(message);
|
||||
}
|
||||
this.totalFlowRate = this.totalFlowRates();
|
||||
this.dataSource.data = this.serverMessages;
|
||||
// console.log(this.serverMessages);
|
||||
this.serverMessages.sort((a, b) => a.location.localeCompare(b.location));
|
||||
this.g
|
||||
.append('g')
|
||||
.attr('transform', 'translate(0,' + this.height + ')')
|
||||
.attr('class', 'x-axis')
|
||||
.call(d3Axis.axisBottom(this.x));
|
||||
|
||||
// add the y Axis
|
||||
this.g
|
||||
.append('g')
|
||||
.attr('transform', 'translate(0, 0 )')
|
||||
.attr('class', 'y-axis')
|
||||
.call(d3Axis.axisLeft(this.y));
|
||||
this.drawAxis();
|
||||
},
|
||||
(err) => console.error(err),
|
||||
() => console.warn('Completed!')
|
||||
@@ -134,6 +145,10 @@ export class HomeComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
if (index === -1) {
|
||||
this.svg
|
||||
.selectAll('.bar')
|
||||
.remove()
|
||||
.exit();
|
||||
this.serverMessages.push(obj);
|
||||
|
||||
} else {
|
||||
@@ -167,8 +182,41 @@ export class HomeComponent implements OnInit, OnDestroy {
|
||||
this.currentRole = this.roles[index];
|
||||
this.socket$.complete();
|
||||
this.serverMessages = [];
|
||||
this.drawAxis();
|
||||
this.connect();
|
||||
}
|
||||
|
||||
private initSvg() {
|
||||
this.svg = d3.select('svg');
|
||||
this.width = +this.svg.attr('width') - this.margin.left - this.margin.right;
|
||||
this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom;
|
||||
this.g = this.svg.append('g')
|
||||
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
|
||||
this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1);
|
||||
this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
|
||||
this.colorScale = d3Scale.scaleOrdinal(d3Color.schemeCategory10);
|
||||
}
|
||||
|
||||
private drawAxis() {
|
||||
this.x.domain(this.serverMessages.map((d) => d.location));
|
||||
this.y.domain([0, d3Array.max(this.serverMessages, d => d.volumeflow)]).ticks(10);
|
||||
this.colorScale.domain(this.serverMessages.map(d => d.location));
|
||||
this.g
|
||||
.selectAll('.bar,.tick')
|
||||
.remove()
|
||||
.exit()
|
||||
.data(this.serverMessages)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('class', 'bar')
|
||||
.attr('x', d => this.x(d.location))
|
||||
.attr('width', this.x.bandwidth())
|
||||
.attr('y', d => this.y(d.volumeflow))
|
||||
.attr('height', d => this.height - this.y(d.volumeflow))
|
||||
.attr('fill', d => this.colorScale(d.location));
|
||||
this.g.select('.x-axis').call(d3Axis.axisBottom(this.x));
|
||||
this.g.select('.y-axis').call(d3Axis.axisLeft(this.y));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
Reference in New Issue
Block a user