Add "off scale" indicator to barometers

[KatieWoe]

Test device
Samsung
Operating System
Win 11
Browser
Chrome
Problem description
For phetsims/qa#921
The bar graph for the "Slope of Tangent" that appears when you enable the Tangent viewer in the first screen tops out at a high level, but not the highest it can easily go. This is also the case for the Area Under Curve on the second screen. I think it would be good to be able to zoom out on this graph, or at least have an indicator that the bar is now beyond the graph and not just not growing.

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Calculus Grapher‬
URL: https://phet-dev.colorado.edu/html/calculus-grapher/1.0.0-dev.25/phet/calculus-grapher_all_phet.html
Version: 1.0.0-dev.25 2023-03-20 03:37:03 UTC
Features missing: applicationcache, applicationcache, touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Language: en-US
Window: 1536x714
Pixel Ratio: 1.25/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 31 uniform: 4096
Texture: size: 8192 imageUnits: 32 (vertex: 32, combined: 64)
Max viewport: 8192x8192
OES_texture_float: true
Dependencies JSON: {}

[veillette]

Let me tag @amanda-phet as we would need some design input about what to do if we decide to address it.

[pixelzoom]

I think it would be reasonable (and relatively straightforward) to add something to indicates that the value is beyond the range of the barometer. Perhaps an arrow head that appears above/below the barmoeter's bar? And I'm guessing that this may also apply to the "Net Signed Area" barometer.

I feel strongly that we should not add zoom buttons to barmometers.

[pixelzoom]

Here's the "off-scale" representation used in the Micro screen of ph-scale. I don't think we want to get this complicated, but it illustrates the use of an arrow head.

[pixelzoom]

Here's what I had in mind for Calculus Grapher -- a very simply indicator that becomes visible above/below the bar when the value goes off scale. It uses the same color as the bar, and (like the bar) is not stroked. No value is shown.

In context:

[veillette]

Yes I support @pixelzoom proposal. It is relatively easy to implement while addressing the issue raised.

[amanda-phet]

Discussed with @pixelzoom and @veillette

We would like to try either adding a few pixels of arrow "tail" to the triangle arrow head, OR if that's too hard to fit in, I'd like to try an arrow head that is the same width as the tail.

[pixelzoom]

I'll take this one.

[pixelzoom]

@amanda-phet this is ready for review. If you have changes/polishes, please describe. Otherwise OK to close.

Summary of where this is currently at:

I started with a tiny bit of tail on the arrow heads. Unfortunately, it creates an optical illusion, where the tail looks narrower than the bar, and not quite horizontally aligned. Here are screenshots (zoomed in, and in context):

So @veillette and I experiemented with no tail on the arrows. This looks a lot cleaner, eliminates the optical illusion, and feels equally as effective. Here are screenshots (zoomed in, and in context):

[amanda-phet]

Looks good to me. thanks!