Show overlay with "left value in the back" and dotted line if completely obscured

[samreid]

How did we decide to show the overlay of both? Is it "larger value
in back"? I believe Karina was advocating for showing "left value in
back" and dotted line if it is completely behind but I recall others had
other suggestions and I can't recall if/what we decided.

[samreid]

@krhensberry said:

Yes, left value in back. Let's try with the dotted line also and see how it feels as we move things around.

[samreid]

I added a dotted line for a completely obscured "left" value. It's ready for me to post a dev version for review.

[krhensberry]

The line is really thick and strange-looking (at least on Safari on my Mac). It's hard to tell what it is. See mock-up -- should be a thin dotted line.

[krhensberry]

Also, the edges of the dotted line should line up with the edges of the shape. Right now they go outside of it which makes it seem like the borders of the green shape are bigger than the borders of the blue shape.

[samreid]

I agree the stroke is much too thick--but we'll have to fine tune the colors of each representation to make sure the dotted line is visible. @krhensberry do you want to help me choose colors and stroke parameters or should I work with @gruneich ?

[krhensberry]

I mentioned this in another ticket, but I would start with the colors we have in the mockup (a light blue and pink/magenta color). I also iterated with @gruneich a couple of times in the mockup to try and make the stroke thickness something we were happy with. We'll have to test this on a tablet to make sure that thickness works, but you should start with what we have in the mockup.

[samreid]

Fixes in the commit above, ready for me to post a version for review.

[krhensberry]

This looks good to me for now. I haven't tested it on a tablet though. @gruneich can you see how it looks on the smaller screen?

[gruneich]

I tried on an iPad mini and it looked good to me.