mrdoob/stats.js — pull request #13 by egraether (2012-11-03 08:04:10+00:00)
Title: Determining min and max values of visible graph

I like the `min` and `max` values. They give a good overview of what's happening. But I always find it really annoying that they are all-time values. Most times you get a slow frame-rate after loading the page. And this bad value sticks then as minimum throughout the whole session. Same applies for the milliseconds, where you get a really high value only once sometimes.

If you don't agree to this point then you can skip the next part and goto `refactoring`:

So I implemented a way to measure the `min` and `max` values based on a history of values. My main goal was to make this as efficient as I could. So instead of looping through the whole history in every `update` call and using `push()` and `unshift()` to maintain the history, I came up with a fancy algorithm.

I use a typed `Int16Array` for the `history` if possible, which seems to be the [fastest](http://jsperf.com/combined-read-and-write-in-typed-array/3) of them. An `index` is used to keep track of where the next value gets stored. New values are checked whether they are a new `min` or `max` to avoid looping. And only in the case when the old `min` or `max` value falls out of the history, the `findIndex` function is called and looks for the most recent new extrem. This is the only situation where a loop through the whole history is happening. I was surprised how rarely this happens (only once or twice a second in the basic example).

Ok, this is done really efficient, but I guess you are still concerned about the performance. Some extra conditions in the `update` method were not avoidable. I couldn't really measure a difference though. I really think the extra load can be ignored. The DOM manipulation is a lot worse.

The one thing I can't turn down right now is this that change adds quite a bit of code. The new lines will minify really well though and I have another solution to this:

`refactoring`:

When looking through the code I noticed a lot of similar stuff, where sometimes just the prefix `ms` and `fps` is different. I would suggest creating an object for both like:
```
var ms = {
value: 0,
min: 0,
max: 0
...
}
```
And changing the functions so they would accept these objects:
```
updateGraph(ms);
```
Or even turning them into small classes:
```
ms.updateGraph();
```

I had a look at the minified library. A lot of space is consumed by the CSS styling which can't be minified. The only difference are the color values, which could be turned into parameters of a constructor for example. I think there is a lot room for improvement here.

What do you think?