Skip to content

N
ng-plot-test
Commit 564b8899 authored by Georg Wechslberger's avatar Georg Wechslberger
Browse files
Options

initial example

parent a13894b9
Show whitespace changes
Inline Side-by-side
Showing with 583 additions and 25 deletions
package-lock.json
View file @ 564b8899
...@@ -275,6 +275,40 @@ ...@@ -275,6 +275,40 @@
"semver-intersect": "1.3.1" "semver-intersect": "1.3.1"
} }
}, },
"@swimlane/ngx-charts": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-7.4.0.tgz",
"integrity": "sha512-RcZas49AbHmKCX3PHiEI+VS2dgutfEzw7CvK/LXU1Plp8rMb+ly/zUoRIDJnyzBVuuy1z05miKUK6UolQlCzxQ==",
"requires": {
"d3-array": "1.2.1",
"d3-brush": "1.0.4",
"d3-color": "1.1.0",
"d3-force": "1.1.0",
"d3-format": "1.2.2",
"d3-hierarchy": "1.1.6",
"d3-interpolate": "1.1.6",
"d3-scale": "1.0.7",
"d3-selection": "1.3.0",
"d3-shape": "1.2.0",
"d3-time-format": "2.1.1"
},
"dependencies": {
"d3-scale": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
"integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
"requires": {
"d3-array": "1.2.1",
"d3-collection": "1.0.4",
"d3-color": "1.1.0",
"d3-format": "1.2.2",
"d3-interpolate": "1.1.6",
"d3-time": "1.0.8",
"d3-time-format": "2.1.1"
}
}
}
},
"@types/jasmine": { "@types/jasmine": {
"version": "2.8.7", "version": "2.8.7",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.7.tgz", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.7.tgz",
...@@ -1688,8 +1722,7 @@ ...@@ -1688,8 +1722,7 @@
"commander": { "commander": {
"version": "2.15.1", "version": "2.15.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
"integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
"dev": true
}, },
"common-tags": { "common-tags": {
"version": "1.7.2", "version": "1.7.2",
...@@ -2130,6 +2163,270 @@ ...@@ -2130,6 +2163,270 @@
"es5-ext": "0.10.42" "es5-ext": "0.10.42"
} }
}, },
"d3": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/d3/-/d3-5.1.0.tgz",
"integrity": "sha512-2ltUUsAuolg5+AfgRBkZBFOUcR+UsWc2vAixBSiw6cFqdSCEufPavYI6lPdL68dgNOaMp4sggwJ3BnJElm7tyQ==",
"requires": {
"d3-array": "1.2.1",
"d3-axis": "1.0.8",
"d3-brush": "1.0.4",
"d3-chord": "1.0.4",
"d3-collection": "1.0.4",
"d3-color": "1.1.0",
"d3-contour": "1.2.0",
"d3-dispatch": "1.0.3",
"d3-drag": "1.2.1",
"d3-dsv": "1.0.8",
"d3-ease": "1.0.3",
"d3-fetch": "1.1.0",
"d3-force": "1.1.0",
"d3-format": "1.2.2",
"d3-geo": "1.10.0",
"d3-hierarchy": "1.1.6",
"d3-interpolate": "1.1.6",
"d3-path": "1.0.5",
"d3-polygon": "1.0.3",
"d3-quadtree": "1.0.3",
"d3-random": "1.1.0",
"d3-scale": "2.0.0",
"d3-scale-chromatic": "1.2.0",
"d3-selection": "1.3.0",
"d3-shape": "1.2.0",
"d3-time": "1.0.8",
"d3-time-format": "2.1.1",
"d3-timer": "1.0.7",
"d3-transition": "1.1.1",
"d3-voronoi": "1.1.2",
"d3-zoom": "1.7.1"
}
},
"d3-array": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
"integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
},
"d3-axis": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
"integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
},
"d3-brush": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
"integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
"requires": {
"d3-dispatch": "1.0.3",
"d3-drag": "1.2.1",
"d3-interpolate": "1.1.6",
"d3-selection": "1.3.0",
"d3-transition": "1.1.1"
}
},
"d3-chord": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
"integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
"requires": {
"d3-array": "1.2.1",
"d3-path": "1.0.5"
}
},
"d3-collection": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
"integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
},
"d3-color": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.1.0.tgz",
"integrity": "sha512-IZVcqX5yYFvR2NUBbSfIfbgNcSgAtZ7JbgQWqDXf4CywtN7agvI7Kw6+Q1ETvlHOHWJT55Kyuzt0C3I0GVtRHQ=="
},
"d3-contour": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.2.0.tgz",
"integrity": "sha512-nDzZ2KDnrgTrhMjV8TH0RNrljk6uPNAGkG/v/1SKNVvJa2JU8szjh7o2ZYTX8yufA2oCI5HyeMqbzwiB+oDoIA==",
"requires": {
"d3-array": "1.2.1"
}
},
"d3-dispatch": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
"integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
},
"d3-drag": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
"integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
"requires": {
"d3-dispatch": "1.0.3",
"d3-selection": "1.3.0"
}
},
"d3-dsv": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
"integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
"requires": {
"commander": "2.15.1",
"iconv-lite": "0.4.19",
"rw": "1.3.3"
}
},
"d3-ease": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
"integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
},
"d3-fetch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.0.tgz",
"integrity": "sha512-j+V4vtT6dceQbcKYLtpTueB8Zvc+wb9I93WaFtEQIYNADXl0c1ZJMN3qQo0CssiTsAqK8pePwc7f4qiW+b0WOg==",
"requires": {
"d3-dsv": "1.0.8"
}
},
"d3-force": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
"integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
"requires": {
"d3-collection": "1.0.4",
"d3-dispatch": "1.0.3",
"d3-quadtree": "1.0.3",
"d3-timer": "1.0.7"
}
},
"d3-format": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
"integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
},
"d3-geo": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.10.0.tgz",
"integrity": "sha512-VK/buVGgexthTTqGRNXQ/LSo3EbOFu4p2Pjud5drSIaEnOaF2moc8A3P7WEljEO1JEBEwbpAJjFWMuJiUtoBcw==",
"requires": {
"d3-array": "1.2.1"
}
},
"d3-hierarchy": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
"integrity": "sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g=="
},
"d3-interpolate": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
"integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
"requires": {
"d3-color": "1.1.0"
}
},
"d3-path": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
"integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
},
"d3-polygon": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
"integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
},
"d3-quadtree": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
"integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
},
"d3-random": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
"integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
},
"d3-scale": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
"integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
"requires": {
"d3-array": "1.2.1",
"d3-collection": "1.0.4",
"d3-format": "1.2.2",
"d3-interpolate": "1.1.6",
"d3-time": "1.0.8",
"d3-time-format": "2.1.1"
}
},
"d3-scale-chromatic": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz",
"integrity": "sha512-qQUhLi8fPe/F0b0M46C6eFUbms5IIMHuhJ5DKjjzBUvm1b6aPtygJzGbrMdMUD/ckLBq+NdWwHeN2cpMDp4Q5Q==",
"requires": {
"d3-color": "1.1.0",
"d3-interpolate": "1.1.6"
}
},
"d3-selection": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
"integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
},
"d3-shape": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
"integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
"requires": {
"d3-path": "1.0.5"
}
},
"d3-time": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
"integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
},
"d3-time-format": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
"integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
"requires": {
"d3-time": "1.0.8"
}
},
"d3-timer": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
"integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
},
"d3-transition": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
"integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
"requires": {
"d3-color": "1.1.0",
"d3-dispatch": "1.0.3",
"d3-ease": "1.0.3",
"d3-interpolate": "1.1.6",
"d3-selection": "1.3.0",
"d3-timer": "1.0.7"
}
},
"d3-voronoi": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
"integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
},
"d3-zoom": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
"integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
"requires": {
"d3-dispatch": "1.0.3",
"d3-drag": "1.2.1",
"d3-interpolate": "1.1.6",
"d3-selection": "1.3.0",
"d3-transition": "1.1.1"
}
},
"dashdash": { "dashdash": {
"version": "1.14.1", "version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
...@@ -4724,8 +5021,7 @@ ...@@ -4724,8 +5021,7 @@
"iconv-lite": { "iconv-lite": {
"version": "0.4.19", "version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==", "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
"dev": true
}, },
"ieee754": { "ieee754": {
"version": "1.1.11", "version": "1.1.11",
...@@ -8284,6 +8580,11 @@ ...@@ -8284,6 +8580,11 @@
"aproba": "1.2.0" "aproba": "1.2.0"
} }
}, },
"rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
},
"rxjs": { "rxjs": {
"version": "5.5.10", "version": "5.5.10",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.10.tgz", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.10.tgz",
......
package.json
View file @ 564b8899
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
"@angular/platform-browser": "^5.2.0", "@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0", "@angular/router": "^5.2.0",
"@swimlane/ngx-charts": "^7.4.0",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"d3": "^5.1.0",
"rxjs": "^5.5.6", "rxjs": "^5.5.6",
"zone.js": "^0.8.19" "zone.js": "^0.8.19"
}, },
......
src/app/app.component.css
View file @ 564b8899
.plot1, .plot2, .plot3 {
height: 50vh;
}
\ No newline at end of file
src/app/app.component.html
View file @ 564b8899
<!--The content below is only a placeholder and can be replaced.--> <!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"> <div style="text-align:center">
<h1> <h1>
Welcome to {{ title }}! {{ title }}!
</h1> </h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div> </div>
<h2>Here are some links to help you start: </h2> <div class="plot1">
<ul> <h2>static data</h2>
<li> <app-plot-example></app-plot-example>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> </div>
</li> <div class="plot2">
<li> <h2>dynamically loaded from python</h2>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> <app-plot-example-dynamic></app-plot-example-dynamic>
</li> </div>
<li> <div class="plot3">
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> <h2>dynamically loaded from python with configurable options</h2>
</li> <app-plot-example-options></app-plot-example-options>
</ul> </div>
src/app/app.component.ts
View file @ 564b8899
...@@ -6,5 +6,5 @@ import { Component } from '@angular/core'; ...@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
title = 'app'; title = 'Plotting Tests';
} }
src/app/app.module.ts
View file @ 564b8899
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { LineChartModule } from '@swimlane/ngx-charts';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { PlotExampleComponent } from './plot-example/plot-example.component';
import { PlotExampleDynamicComponent } from './plot-example-dynamic/plot-example-dynamic.component';
import { PlotDataService} from './plot-data.service';
import { PlotExampleOptionsComponent } from './plot-example-options/plot-example-options.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
PlotExampleComponent,
PlotExampleDynamicComponent,
PlotExampleOptionsComponent
], ],
imports: [ imports: [
BrowserModule BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
LineChartModule
], ],
providers: [], providers: [PlotDataService],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }
src/app/plot-data.service.spec.ts 0 → 100644
View file @ 564b8899
import { TestBed, inject } from '@angular/core/testing';
import { PlotDataService } from './plot-data.service';
describe('PlotDataServiceService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [PlotDataService]
});
});
it('should be created', inject([PlotDataService], (service: PlotDataService) => {
expect(service).toBeTruthy();
}));
});
src/app/plot-data.service.ts 0 → 100644
View file @ 564b8899
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { PlotData2D } from './plot-data';
@Injectable()
export class PlotDataService {
private apiUrl = environment.apiUrl;
constructor(private http: HttpClient) { }
// get 2D PlotData from python api
get2D(plot: string, options) {
return this.http.post<PlotData2D>(this.apiUrl + 'plot/' + plot, options);
}
}
src/app/plot-data.ts 0 → 100644
View file @ 564b8899
// generic plot data class
export class PlotData {
constructor(
public type: string
) { }
}
// 2D data to generate a plot
export class PlotData2D extends PlotData {
constructor(
public x: number[],
public y: number[]
) {
super('2D');
}
// convert x, y arrays into the data structure format used by ngx-charts
public static toNGxChart(data: PlotData2D, name: string) {
const plotData = {'name': name, 'series': [] };
for (let i = 0; i < data.x.length; i++) {
plotData.series.push({'name': data.x[i], 'value': data.y[i]});
}
console.log(plotData);
return plotData;
}
}
src/app/plot-example-dynamic/plot-example-dynamic.component.html 0 → 100644
View file @ 564b8899
<ngx-charts-line-chart *ngIf="plotData.length != 0" [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true"></ngx-charts-line-chart>
src/app/plot-example-dynamic/plot-example-dynamic.component.spec.ts 0 → 100644
View file @ 564b8899
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlotExampleDynamicComponent } from './plot-example-dynamic.component';
describe('PlotExampleDynamicComponent', () => {
let component: PlotExampleDynamicComponent;
let fixture: ComponentFixture<PlotExampleDynamicComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlotExampleDynamicComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlotExampleDynamicComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/plot-example-dynamic/plot-example-dynamic.component.ts 0 → 100644
View file @ 564b8899
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { PlotDataService } from '../plot-data.service';
import { PlotData2D } from '../plot-data';
@Component({
selector: 'app-plot-example-dynamic',
templateUrl: './plot-example-dynamic.component.html',
styleUrls: ['./plot-example-dynamic.component.css']
})
export class PlotExampleDynamicComponent implements OnInit, AfterViewInit {
public plotData = [ ];
constructor( private plotDataService: PlotDataService) { }
ngOnInit() {}
ngAfterViewInit() {
// load plot data from python
this.plotDataService.get2D('test1', {}).subscribe( data => {
this.plotData[0] = PlotData2D.toNGxChart(data, 'test');
console.log(this.plotData);
});
}
}
src/app/plot-example-options/plot-example-options.component.css 0 → 100644
View file @ 564b8899
div {
height: 50vh;
}
\ No newline at end of file
src/app/plot-example-options/plot-example-options.component.html 0 → 100644
View file @ 564b8899
<div>
<span>k=</span><input type="number" name="k" [(ngModel)]="options.k" (change)="updatePlot()"/>
<ngx-charts-line-chart *ngIf="plotData.length != 0" [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true" [animations]="false"></ngx-charts-line-chart>
</div>
src/app/plot-example-options/plot-example-options.component.spec.ts 0 → 100644
View file @ 564b8899
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlotExampleOptionsComponent } from './plot-example-options.component';
describe('PlotExampleOptionsComponent', () => {
let component: PlotExampleOptionsComponent;
let fixture: ComponentFixture<PlotExampleOptionsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlotExampleOptionsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlotExampleOptionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/plot-example-options/plot-example-options.component.ts 0 → 100644
View file @ 564b8899
import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { PlotDataService } from '../plot-data.service';
import { PlotData2D } from '../plot-data';
@Component({
selector: 'app-plot-example-options',
templateUrl: './plot-example-options.component.html',
styleUrls: ['./plot-example-options.component.css']
})
export class PlotExampleOptionsComponent implements OnInit, AfterViewInit {
public plotData = [ ];
public options = {'k': 2};
constructor(
private plotDataService: PlotDataService,
private cdRef: ChangeDetectorRef
) { }
ngOnInit() {
}
ngAfterViewInit() {
this.updatePlot();
}
updatePlot() {
// load plot data from python
this.plotDataService.get2D('test2', this.options).subscribe( data => {
this.plotData[0] = PlotData2D.toNGxChart(data, 'sin(' + this.options.k + 'x)');
// notify change detector that the plot should be redrawn
this.plotData = [ ...this.plotData ];
});
}
}
src/app/plot-example/plot-example.component.html 0 → 100644
View file @ 564b8899
<ngx-charts-line-chart [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true"></ngx-charts-line-chart>
\ No newline at end of file
src/app/plot-example/plot-example.component.spec.ts 0 → 100644
View file @ 564b8899
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlotExampleComponent } from './plot-example.component';
describe('PlotExampleComponent', () => {
let component: PlotExampleComponent;
let fixture: ComponentFixture<PlotExampleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlotExampleComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlotExampleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/plot-example/plot-example.component.ts 0 → 100644
View file @ 564b8899
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-plot-example',
templateUrl: './plot-example.component.html',
styleUrls: ['./plot-example.component.css']
})
export class PlotExampleComponent implements OnInit {
public plotData = [ ];
constructor() { }
ngOnInit() {
// generate data for a sin plot
this.plotData.push( {'name': 'sin', 'series': [] } );
for (let i = 0; i <= 100; i++) {
const x = 4 * Math.PI * i / 100;
this.plotData[0].series.push( { 'name': x, 'value': Math.sin(x) } );
}
// generate data for a cos plot
this.plotData.push( {'name': 'cos', 'series': [] } );
for (let i = 0; i <= 100; i++) {
const x = 4 * Math.PI * i / 100;
this.plotData[1].series.push( { 'name': x, 'value': Math.cos(x) } );
}
console.log(this.plotData);
}
}
src/environments/environment.prod.ts
View file @ 564b8899
export const environment = { export const environment = {
production: true production: true,
apiUrl: 'http://localhost:5000/'
}; };
src/environments/environment.ts
View file @ 564b8899
...@@ -4,5 +4,6 @@ ...@@ -4,5 +4,6 @@
// The list of which env maps to which file can be found in `.angular-cli.json`. // The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = { export const environment = {
production: false production: false,
apiUrl: 'http://localhost:5000/'
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment