You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As a programmer you need to always leverage between several possible different solutions the one that would be most efficient. One common problem is the sorting, inserting or accessing data. To solve this problem, along programming history, several algorithms have been created. This project attempts to help a fellow programmer to choose which algorithm shall be used by providing a benchmarking operationg and plotting the results in a variety of graphs.
6
7
@@ -18,13 +19,12 @@ It is also expected that the website will be desktop-first, as the main audience
18
19
19
20
- As a user, I want to be able to see different tables of algorithm efficiency, so I can pick the best suited to my project.
20
21
- As a user, I want to be able to run different benchmarks for predefined algorithms, so I can be certain that the results adjust to my specific use case.
21
-
- As a user, I would like to be able to use my very own data sets or algorithms so I can compare with the predefined ones and have a clearer picture of my options.
22
22
23
23
### Wireframes
24
24
25
25
Basic Wireframe Setup for Mobile view and Desktop View
26
-
@@ -39,74 +39,143 @@ Basic Wireframe Setup for Mobile view and Desktop View
39
39
- Other type of algorithms (accessors, indexing, data structures, etc...)
40
40
- Option to run the algorithms out of the browser using the full capabilities of the computer's processors.
41
41
- Option to run algorithms in a VM on a cloud provider, to obtain a best-case computer setups.
42
+
- Option to be able to use my very own data sets or algorithms.
42
43
43
44
## Technologies Used
44
45
45
-
In this section, you should mention all of the languages, frameworks, libraries, and any other tools that you have used to construct this project. For each, provide its name, a link to its official site and a short sentence of why it was used.
46
+
### Libraries
46
47
47
-
- This project was scaffolded by [Angular CLI](https://github.com/angular/angular-cli) version 8.0.2.
48
-
- Project organization and task management provided by [GitHub and GitHub Projects](https://github.com)
49
-
50
-
## Testing
51
-
52
-
In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.
53
-
54
-
Whenever it is feasible, prefer to automate your tests, and if you've done so, provide a brief explanation of your approach, link to the test file(s) and explain how to run them.
55
-
56
-
For any scenarios that have not been automated, test the user stories manually and provide as much detail as is relevant. A particularly useful form for describing your testing process is via scenarios, such as:
48
+
- This project was scaffolded by [Angular CLI](https://github.com/angular/angular-cli) version 8.0.2 which installs the following technologies (among others):
49
+
-[rxjs](https://github.com/ReactiveX/rxjs): Introduces the concept of reactive programming and observables with the ReactiveX library.
50
+
-[Typescript](https://www.npmjs.com/package/typescript): Adds typing and additional constructs not present on the JavaScript language but common to other languages to increase resilience to your code.
51
+
-[Jasmine](https://jasmine.github.io/) and [Karma](https://www.npmjs.com/package/karma) for testing
52
+
- The angular cli tooling itself which provides compilation, bundling and minification of the JavaScript code, as well as support to older browsers via Polyfills.
53
+
-[Bootstrap 4](https://getbootstrap.com/) was used for styling and providing page structure and responsiveness
54
+
-[Highcharts](https://www.highcharts.com/) library for generating graphs and plotting data.
55
+
-[Highlight.js](https://highlightjs.org/) library to convert preformatted text into code with syntax highlighting.
57
56
58
-
1. Contact form:
59
-
1. Go to the "Contact Us" page
60
-
2. Try to submit the empty form and verify that an error message about the required fields appears
61
-
3. Try to submit the form with an invalid email address and verify that a relevant error message appears
62
-
4. Try to submit the form with all inputs valid and verify that a success message appears.
57
+
### Other tools
63
58
64
-
In addition, you should mention in this section how your project looks and works on different browsers and screen sizes.
65
-
66
-
You should also mention in this section any interesting bugs or problems you discovered during your testing, even if you haven't addressed them yet.
59
+
- This project has been created using [Visual Studio Code](https://code.visualstudio.com/) IDE in a [Node v.10.13](https://nodejs.org/en/) environment
60
+
- Project organization and task management provided by [GitHub and GitHub Projects](https://github.com)
61
+
- Continuous Integration/Development automation provided by [Travis CI](http://travis-ci.com)
62
+
- Code quality and analysis provided by [SonarQube](https://www.sonarqube.org/) via its cloud service [SonarCloud](https://sonarcloud.io/)
67
63
68
-
If this section grows too long, you may want to split it off into a separate file and link to it from here.
64
+
Click on the badges at the top of this file to check the build status and quality metrics.
69
65
70
-
### Running unit tests
66
+
##Testing
71
67
72
-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
68
+
The services and algoritms implementations have been automated and can be run by following the instructions below. The UI interaction is not automated, please follow the Test Cases described in the appropriate section.
69
+
70
+
### Running automated unit tests
71
+
72
+
Run `npm run test` to obtain a report of the tests with the no-watch option enabled.
73
+
74
+
The command `ng test` is also available just to execute the unit tests via [Karma](https://karma-runner.github.io) with the watch option enabled, useful for development purposes.
75
+
76
+
A Code Coverage report is also available in [SonarCloud](https://sonarcloud.io/component_measures?id=Narshe1412_Code-Institute-Interactive-Frontend-Algorithms&metric=coverage&view=list)
77
+
78
+
### Manual Test Plan
79
+
80
+
1. Running Benchmarks:
81
+
1. Go to the "Benchmarks" page
82
+
2. Click on the "Run Benchmark" button below the graph
83
+
3. Verify a spinning icon appears and the previous chart gets unloaded
84
+
4. Verify that after a few seconds it will start populating data points
85
+
5. Verify that when the spinning icon stops, all data points have been drawn and made a line per algorithm out of them
86
+
2. Run Benchmark button:
87
+
1. Go to the "Benchmarks" page
88
+
2. Try to click on the "Run Benchmark" button on the navigation bar.
89
+
3. Verify this button is not available on the Benchmarks page (greyed out).
90
+
4. Nagivate to "Setup" or "Resources"
91
+
5. Verify than clicking the button the steps from Test 1 execute
92
+
3. Resetting the chart:
93
+
1. Go to the "Benchmarks" page
94
+
2. Verify that clicking the "Reset Chart" button resets the chart
95
+
3. Click on "Run Benchmark"
96
+
4. Verify that the "Reset Chart" button is not available while the simulation is executing.
97
+
4. Benchmark configuration:
98
+
1. List of Algorithms:
99
+
1. Go to "Setup" page
100
+
2. Modify the list of algorithms
101
+
3. Click on Run Benchmark
102
+
4. Verify that only the marked algorithms are running by checking the chart legend and results
103
+
2. Collection Size:
104
+
1. Go to "Setup" page
105
+
2. Add or delete items from the collection list
106
+
3. Click on Run Benchmark
107
+
4. Verify that there's a data point per algorithm and item in the collection list drawn on the chart
108
+
3. List of Repetitions:
109
+
1. Go to "Setup" page
110
+
2. Modify the number of repetitions to a bigger number
111
+
3. Click on Run Benchmark
112
+
4. Verify that the simulation takes longer and the numbers are more accurate than previous runs.
113
+
4. Sad path testing:
114
+
1. Go to "Setup" page
115
+
2. Delete all items on the simulation list
116
+
3. Click on Run Benchmark
117
+
4. Verify that no results are displayed.
118
+
5. Refresh the page
119
+
6. Uncheck all algorithms from the list
120
+
7. Click on Run Benchmark
121
+
8. Verify no results are displayed
122
+
9. Refresh the page
123
+
10. Verify that no input below 1 can be entered in the Repetitions field
124
+
5. Responsiveness:
125
+
1. Pages Resources and Home are static and fully responsive but no test case is necessary
126
+
2. Nagivate to any of the routes "Home", "Benchmarks", "Setup", "Resources"
127
+
3. Verify by using different devices or your browser sizing feature that all pages are responsive and redimension correctly for different sizes
128
+
129
+
### Browser Compatibility
130
+
131
+
The application should be compatible with the latest versions in all browsers thanks to the use of polyfills. Due to memory limitations, the Benchmark runner may block the UI in Internet Explorer or mobile browsers.
| Internet Explorer | 11.885.17134 | Not Recommended: Blocks the UI while running big simulations. Very slow. |
73
140
74
-
### Running end-to-end tests
141
+
##Deployment
75
142
76
-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
143
+
This project was created using the Angular CLI which implements webpack under the hood to bundle all the files and create several JS files that contain the whole project structure.
77
144
78
-
## Deployment
145
+
I used TravisCI to automate the deployment process. On each push and pull request, Travis will create a container where it will do a fresh deployment of my app, run all the tests, create a production build and deploy it to the gh-pages branch. This is all configured on the file `.travis.yml`.
79
146
80
-
This section should describe the process you went through to deploy the project to a hosting platform (e.g. GitHub Pages or Heroku).
147
+
As no environment variables are needed there's no need to host this project in a SaaS provider like Heroku.
81
148
82
-
In particular, you should provide all details of the differences between the deployed version and the development version, if any, including:
149
+
### Local Deployment
83
150
84
-
- Different values for environment variables (Heroku Config Vars)?
85
-
- Different configuration files?
86
-
- Separate git branch?
151
+
In order to run your project locally, assuming you have the latest version of Node or NPM just do:
152
+
`npm install`
153
+
`npm start`
154
+
This will run the project in **development mode**. To get a production build after `npm install` run:
155
+
`npm run build`
87
156
88
-
In addition, if it is not obvious, you should also describe how to run your code locally.
157
+
Further configuration can be done in terms of building and deploying. See the [Angular Documentation](https://angular.io/) for more details.
89
158
90
159
## Credits
91
160
92
161
### Content
93
162
94
-
- The text for section Y was copied from the [Wikipedia article Z](https://en.wikipedia.org/wiki/Z)
163
+
- The algorithm implementations in Javascript was obtained from the following articles:
164
+
-[JS: Interview Questions by thatJSDude](https://khan4019.github.io/front-end-Interview-Questions/sort.html)
165
+
- Sorting Algorithms with Javascript by Kinyanjui Wangonya
-[JavaScript exercises for Shell Sort by W3Resource](https://www.w3resource.com/javascript-exercises/searching-and-sorting-algorithm/searching-and-sorting-algorithm-exercise-6.php)
169
+
-[Radix Sort implementation by Lior Elrom (Stackoverflow)](https://stackoverflow.com/a/52236574/5866637)
170
+
-[Fisher-Yates shuffle algorithm posted by CoolAJ86 in Stackoverflow](https://stackoverflow.com/a/2450976/5866637)
171
+
- I have also used the following libraries to implement Introsort and Timsort into the application:
172
+
-[Javascript Introsort by Arnohs](https://github.com/arnorhs/js-introsort)
173
+
-[TimSort implementation by LXSMNSYC](https://github.com/LXSMNSYC/TimSort)
95
174
96
175
### Media
97
176
98
-
-The photos used in this site were obtained from ...
177
+
-Home and Favicon Icons made by Good Ware from www.flaticon.com under CC 3.0 BY license
99
178
100
179
### Acknowledgements
101
180
102
-
- I received inspiration for this project while assisting some students I tutor through GrindsCentre.
- I received inspiration for this project while assisting some students I tutor through GrindsCentre and the research and resources found in [BigOCheatsheet page](http://bigocheatsheet.com/)
0 commit comments