Support Bar Graphs in Open MCT

[shefalijoshi]

Is your feature request related to a problem? Please describe.
Bar Graphs should display bars with range variable names on the X-axis and values on the Y-axis.

Describe the solution you'd like
Bar Graphs should accept aggregate telemetry.
Metadata should be provided that determines which attributes of the telemetry to use for which axisThis will come later as there is yamcs work to do and nobody to do it right now.

Additional context
Add any other context or screenshots about the feature request here.
See the following issues that make up this feature:
Resolves #4100
Resolves #4101
Resolves #4178
Resolves #4102
Resolves #4191
Resolves #4192
Resolves #4212
Resolves #4217

[shefalijoshi]

Testing instructions:

• Creating a Bar Graph from the Create menu works
• Adding any telemetry endpoint with at least 1 'range' hint works, displays the 'range' metadata names on the X-Axis and respective values on the Y-Axis.
• Adding aggregate telemetry endpoint (detector1PulseHeights/detector2PulseHeights), displays the 'range' metadata names on the X-Axis (ch0, ch1, ch2...ch31) and respective values on the Y-Axis.
• Removing a telemetry endpoint and adding the same or other telemetry endpoint works.
• Historical and Realtime telemetry works
• Resizing vertically and horizontally works
• Static and Conditional Styling works - Except font color/size
• Changing color of bar works
• Zoom is disabled
• Hover text for each bar is disabled

[jvigliotta]

Looks awesome, nice work!

Couple issues I found:

• unable to change colors, click on the color in the inspector (in edit mode) and nothing happens, save and refresh, still nothing
• deleting an item (with multiple items) from a bar chart while editing, deletes all endpoints (seeing this in non-edit mode as well)

[nikhilmandlik]

1. Missing horizontal axis line (marker line) for value '0'

[kobe1104]

Testathon 9/20/2021.

• - Creating a Bar Graph from the Create menu works
• - Adding any telemetry endpoint with at least 1 'range' hint works, displays the 'range' metadata names on the X-Axis and respective values on the Y-Axis.
• - Adding aggregate telemetry endpoint (detector1PulseHeights/detector2PulseHeights), displays the 'range' metadata names on the X-Axis (ch0, ch1, ch2...ch31) and respective values on the Y-Axis.
• - Adding a 2nd telemetry endpoint does NOT work (limited to 1 endpoint) It allows me to add more than 1 telemetry points and both are showing on the bar graph
• - Removing a telemetry endpoint and adding the same or other telemetry endpoint works.
• - Historical and Realtime telemetry works
• - Resizing vertically and horizontally works
• - Static and Conditional Styling works - Except font color/size
• - Changing color of bar works I'm able to change the background color, but not the font and bar color
• - Zoom is disabled
• - Hover text for each bar is disabled

[charlesh88]

Testathon 9-20-21: some problems identified

1. Plot series in Inspector needs proper placement and formatting.
2. 0 value hash line missing, @charlesh88 to look into.
3. Y axis is not displaying values properly. Filed new issue for Y axis labels: Values in Bar Graph display with weird characters in Y axis labels #4237

Should we reopen this for needed fixes?

[charlesh88]

1. Missing horizontal axis line (marker line) for value '0'

Think this is @charlesh88's fault, will look into.

[charlesh88]

Testathon 9-28-21:
Plot series in Inspector formatting still not addressed:

Bar Graph

Should look like Overlay Plot

The series element needs to show the object type icon (line 30 in BarGraphOptions.vue) @shefalijoshi could you add please? For reference, see markup in SeriesForm.vue lines 11 - 20.

[charlesh88]

Just pushed a fix for the hidden 0 line issue to #4270

[shefalijoshi]

@scottbell Please take a look at #4177 (comment)

[scottbell]

Ok, I think I've got the bar graph inspector squared away now:

#4275

[nikhilmandlik]

Observed some issues as follows,

[jvigliotta]

Partially Verified:

• can edit colors
• can remove items without other items being remove
• 0 axis line showing

Issues:

• not seeing plot inspector like overlay plots
• also seeing missing names in inspector (these were dictionary items that were moved to other folders and then dropped into the bar chart)

[scottbell]

@nikhilmandlik @jvigliotta I'm having some problems replicating the issue in 1.7.8. Here's an animation of dropping an SWG onto a bar graph

There may be another way of adding telemetry to a bar graph that I'm missing, or maybe the shape of the telemetry object is different, or I may be testing the wrong version?

Thanks for the help!

[shefalijoshi]

@scottbell
The issue is if the identifier of the domainObject resembles something like this: someNamespace:~OpenMCT~outer.inner.someEndpoint.
Notice the . dots in the key outer.inner.someEndpoint

When the bar styles are being saved to the domain object via objects.mutate() here: https://github.com/nasa/openmct/blob/1.7.8/src/plugins/charts/BarGraphView.vue#L105 the style is being saved as an object hierarchy rather than a string:
this.domainObject....series['someNamespace:~OpenMCT~outer.inner.someEndpoint']:
'someNamespace:~OpenMCT~outer': { inner: { someEndpoint: { color: '#ffffff', name: 'someEndpoint' } } }

Interestingly, there is also the following (but with an empty name):
this.domainObject....series['someNamespace:~OpenMCT~outer.inner.someEndpoint']:
'someNamespace:~OpenMCT~outer.inner.someEndpoint': { color: '#000fff', name: "" }

I suspect we need to convert the ${this.key} to a string when we call mutate

[shefalijoshi]

@scottbell for @nikhilmandlik 's issue, I see the following console error:

So it is almost certainly an old bar graph. I think we can skip this issue and have him retest with a NEW bar graph.

[unlikelyzero]

Verified fixed