Peaksware JavaScript Coding Test 

This application finds and maps "Best Effort" Power intervals for the workout data provided by Peaksware. "Best Effort" is defined as the highest continuous average power output for a given period of time.

Power-Interval durations can be: 1, 5, 10, 15, or 20-minute segments.

Step 1:  Select a duration or time-window for the Power Interval to get started.
20 minutes 15 minutes 10 minutes 5 minutes 1 minute

Step 2:  Press the "COMPUTE" button to find the Power-Interval on the GPS Route.
Compute

The full GPS route (or limited segments) of the workout geography are drawn in LIME GREEN while the power intervals are shown in RED on the map. It appears the cyclist was doing sprints on Lookout Road just east of North 75th Street in Gunbarrel, Colorado, starting about 18-20 minutes into their workout.

⇩ See Chart ⇧ See Computation Results

You can search over the entire workout data-set, about 85 minutes worth, or you can limit your search window to any desired length less than the total workout time using the "seconds" time-slider control located above the line-chart.

If you've filtered the Power Output data using the time-slider, you'll need to redraw the route to see a new GPS line on the map and then rerun the algorithm to find the new Power Interval on that filtered/modified workout route.

To run the JavaScript for the Peaksware (MakeMusic) app, you can do the following:

1. Select and copy the following test path string:
   
   flupe.com/code/javascript/makemusic/coding-exercise/testMakeMusic.html
2. Go to the JsUnit TestRunner page.
3. Paste the copied testing path into the test location form input field on the TestRunner page and press the "Run" button.

NOTE: These tests are incomplete and many more could be written for this project. I still, however, have a high degree of confidence that my solution is correct, but I can't say with 100% certainty.

Known Issues/Bugs:

• Major: I chose the wrong testing framework early on for this project: JsUnit. It had been a while since I used it. Turns out the project seems to be defunct. I found this out a few days later. I was, however, able to use JsUnit successfully enough to test and develop an early prototype of my solution to the "find greatest sum subsequence" problem. This was invaluable and gave me the confidence that my algorithm is correct. Since I knew the scope of this project was very large, I decided not to waste time setting up a proper testing framework as I wanted to continue to make progress. I decided it was something that I could towards the end of the project if there was still time.
• Major: I would like to use the Jasmine testing framework or something equivalent to Jasmine, but I'm afraid I've run out of time to get it all setup and working properly. I would really like to write more tests for this application, especially for the findPowerInterval method.
• I decided to leave the two "proof of concept" methods in the project for two reasons:
  1. I wanted Peaksware (MakeMusic) to see them.
  2. JsUnit is calling them and proving that these algorithms are correct.
  Ideally, I'd remove them or move them into their own separate file. The methods I'm referring to here are called:
  1. findStartIndexOfMaxAverage
  2. findMaxAverage
• Minor: If a User resizes the GPS time-line using the TimeSlider and then recomputes a power interval without clicking on the "Redraw GPS Route" button (redrawing the map), the power interval can potentially show correctly on the map but it might not line up with the GPS route. That is, the red line may no longer be on the stale green line.

Google Visualization and Map Resources:

Here are some of the Google resources I used to code the map and line-chart.

• Google Maps JavaScript API
• How to Remove a Polyline from a Map
• Google Visualization API Docs
• Google Charts - Line Chart Example
• Google Charts - Controls and Dashboards - This is how you're able to select a time range on the Power Chart.
• Interacting With a Chart
• Handling Events - Describes how to listen for and handle events fired by a chart.

CSS:

I'm using some of the CSS from my personal www.flupe.com website, hence the dark-themed background. I hope that's okay. I can't get enough of sites that have dark backgrounds. (Easier on the eyes.)

SPA - Single Page App:

I chose to solve this problem using plain old "vanilla" JavaScript, HTML and CSS as I didn't want to deal with any complexities that might arise from using an SPA framework such as Angular or React. In short, I just felt more comfortable using "the basics" to implement my solution and felt I could be more productive with this approach, especially given the scope of the project and the short amount of time allotted to complete it. All and all, one should get a good idea about my coding abilities, style, and approach, etc. from this project.

Learning React and Angular is something I've been tackling in my spare time and it's only a matter of time before I get proficient in these two technologies. I'm also interested in Vue.js.

View Source Files:

1. README.md - Project instructions provided by Peaksware.
2. ./js/power-interval.js - The main JavaScript file that houses most of my solution.
3. ./js/helper.js - A helper and utilities "library".
4. ./js/test-workout-data.js - Test Data file.
5. ./js/workout-data.js - The "production" data provided by Peaksware (MakeMusic).
6. ./css/makemusic.css
7. index.html - The main index.html file for the Power Intervals app, the page you are viewing right now. NOTE: Right-click page to "View Source".
8. map-example.html - A prototype page I used to learn about the Google Maps API. NOTE: You'll have to visit the page and then right-click to "View Source".
9. controls-example.html - A prototype page I used to learn about the Google Chart controls, etc. NOTE: You'll have to visit the page and then right-click to "View Source".
10. testMakeMusic.html - The JsUnit test file. NOTE: You'll have to visit the page and then right-click to "View Source".