Color the chart lines green or red based on the visible line.

[sentientmachine]

Before all the charts had grey lines like this:

So I changed it so that when the viewable window has lines that go up, it is colored blue:

And like this:

What I do is get the date of the this.props leftmost position on the viewable window on the SVG. I was able to get the indexes of the points to its left and right, and I was able to get the y values at those points. I got the percentage the date is between the two dates, and then apply that same ratio to the y values to get the final leftmost y value. Then I compare that to the rightmost value and apply a color between green and red for how much it went up or down.

[sentientmachine]

This addresses: #133

[alexsoble]

@sentientmachine Thanks for the PR Eric!

When I pulled down this branch to my local machine, I noticed that some of the sparklines got colors but others didn't, even when there seemed to be a trend:

Could you take a look to see if you can reproduce this for the seed demo on your own machine? Thanks!

[sentientmachine]

I was able to reproduce your observation. To address your concern I doubled the sensitivity of the colorization of the line, that way small moves will show as partially red, and large moves will be fully red.

[kevinrobinson]

From talking with @sentientmachine @alexsoble @erose in person at Code for Boston, some other feedback that's come up from user testing this week impacts this work and has become higher priority. So we decided to leave this be for now, and revisit it after those other design improvements land.

@sentientmachine thanks for all your help with this, and for embracing the beautiful and messy process that is new product development! 😄