Chart tooltip with colored legend

[jotak]

Compared to PF3, the chart tooltips are much simpler (and I would say less pretty).
In Kiali we had an issue about that, as it's seen as a regression: kiali/kiali#1792 (see also discussion here: kiali/kiali-ui#1491 )

So we've ended up with a custom implementation: kiali/kiali-ui@ca7a5f1

Not sure what you would want for Patternfly: having a similar implementation for better homogeneity, or leave this topic to the end-user implementation?

[rachael-phillips]

Hi @jotak we've seen this, and we'll get back to your soon with a response!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[mcarrano]

I am going to reopen this issue after discussion with @dlabrecq. Before we can commit to this, we need to perform further investigation and possibly create a PoC to understand what can be accomplished using current Victory chart tooltips of if we need enhancements from Victory (or if there is another way to do this).

@tlabaj @LHinson @dlabrecq what's the best path forward on this? Sounds like we should get a React spike into our roadmap?

[jotak]

For what it's worth, here what we've ended up using in Kiali:

https://github.com/kiali/k-charted/blob/master/web/pf4/src/components/CustomTooltip.tsx

[dlabrecq]

Thank you for sharing the Kiali code, it was very helpful. It potentially could be an example we add to the docs?

A couple of notes / questions for a POC:

1. The tooltip symbol colors appear to use the line color. This would be in sync with the legend, but the symbol itself is hard coded as 'square'.

2. If a particular legend item / line uses the 'dash' symbol; for example, how would that sync with the tooltip?

3. Not clear what happens when one or more data points are not available?

In Cost Management, we have multiple data sets, but one may have a day or more of unavailable data. In that case, Victory does omits that data from the tooltip (i.e., when using voronoiDimension="x").

4. Does Victory provide a null value to preserve the props.text order? If not, would that result in data associated with the wrong symbol?

5. If data was not available, should the tooltip still display the full legend? What would the missing value be -- zero, dash, etc.?

6. Can we depend on the ordering of Victory's prop.text values? What happens with voronoiDimension="x"?

7. Fill capacity uses 0.6 as the opacity, which looks like PF3, but not what we defined for PF4.

8. Should this be a docs example?

[jotak]

A couple of notes / questions for a POC:

1. The tooltip symbol colors appear to use the line color. This would be in sync with the legend, but the symbol itself is hard coded as 'square'.

In our implementation it isn't hard-coded: const symbol = pt.symbol || 'square';. We write the symbol within every datapoint (else, square used by default).

2. If a particular legend item / line uses the 'dash' symbol; for example, how would that sync with the tooltip?

As said above, put that information within datapoint?

3. Not clear what happens when one or more data points are not available?

I think part of the solution comes from what was added in victory 34.x (see FormidableLabs/victory#1474 ) : activePoints props in tooltips allows to safely get datapoints relevant for the tooltip. But to be honest, I haven't tested with having a voronoiDimension, perhaps it works differently in that case.

Also, I thought our implementation in kiali works with multi-line texts, but looking at the code, I should check again, now I've some doubts. The problem being to set the correct colored-item position vertically in front of a text. Currently I was re-using VictoryLabel but perhaps it would be better to reimplement text writing.

In Cost Management, we have multiple data sets, but one may have a day or more of unavailable data. In that case, Victory does omits that data from the tooltip (i.e., when using voronoiDimension="x").

1. Does Victory provide a null value to preserve the props.text order? If not, would that result in data associated with the wrong symbol?

I'm not sure / don't remember, I didn't tested cases with voronoiDimension.

2. If data was not available, should the tooltip still display the full legend? What would the missing value be -- zero, dash, etc.?

3. Can we depend on the ordering of Victory's prop.text values? What happens with voronoiDimension="x"?

4. Fill capacity uses 0.6 as the opacity, which looks like PF3, but not what we defined for PF4.

In Kiali we started without transparency, but it was problematic with very small charts (sparklines) because the tooltip was hiding everything. So, first we re-introduced transparency for Sparklines only, then for consistency we re-introduced it everywhere.

5. Should this be a docs example?

[dlabrecq]

Met with @nlcwong and Ben Clark yesterday to discuss a possible design. Still working thru requirements, but plan to create a basic example when that is nailed down a bit more.