PatternFly-React preview: https://patternfly-react-pr-2796.surge.sh

linking #94 related (and started today in Insights Subscriptions)

(apologies for late and possibly misplaced comment) Not sure where to note this, but i think overlapping area charts with transparency makes this trickier. I'd like to see this applied to a stacked area chart as well. Speaking of which.. we don't seem to have one?

Note that a threshold line can be applied on top of other areas / lines, grids, etc. to be more visible. It's simply a matter of ordering.

We don't have a stacked area chart example, but that would be easy to create. Simply wrap the ChartArea components with ChartStack.

Hey, working on getting a stacked chart example for you here, and I'll try to answer those questions:

What color themes do we think appropriate for indicators?

• I guess this depends on the context of the indicators... If they're directly related to the values like above, I'd make them the same color but with a dashed line exactly as you have. If they're not, I almost feel like they should be treated the same as the values, just the next colors in the color order. So if you have three values and 2 threshold indicators, you'd have something like this:

Value 1 = Color 1
Value 2 = Color 2
Value 3 = Color 3
Threshold 1 = Color 4
Threshold 2 = Color 5

Is something like the above possible?

What stroke width do we find legible for indicators?

• It looks like you have 2px which should be a good choice here. What variables can we control for the dotted line with victory? i.e. do we have control over dash length + gap size?

Should indicators be connected lines or independent line segments?

• I'm not sure I'm following this one, but I like the dashed line style which differentiates from the solid line style we use for values in line charts.

How should we handle mobile legends gracefully?

• I'd be curious if victory offers any solutions or has any examples of solutions for this. It seems like a problem universal to charts in general, but there's definitely a few solutions we could explore. One is a simple wrapping list under the chart, similar to what you have above in the mobile example but "birds threshold" would wrap to a second line.
  example:
  

Do we need custom threshold tooltip behavior?

• I don't think it would hurt for thresholds to have the same tooltip behavior as the values do, but if that's a technical challenge I don't think it's necessary by any means.

Considering the threshold is just another line, the ChartLine component would simply apply the next color in the color scale / family. Threshold colors are explicitly set in this example.

I believe we can customize the dash length and gap size. However, if a threshold requires different properties, we may need to consider creating a new component?

Regarding the dashed lines, Cost Management uses both solid and dashed lines to show the difference between the current and previous month's data. Can the dash symbol be optional depending on your usage? Perhaps we can suggest possible alternatives?

Custom tooltips are a definitely a technical challenge. What did you have in mind?

This looks really great, and the proposed rules @mceledonia has here would work for the use case I am aware of for Subscriptions UI (one threshold line not specifically related to any of the 2-3 area values).

@dlabrecq I don't think the tooltips are necessary for the thresholds (chime in if anyone disagrees here) but figured if they're easy to toss in, they wouldn't hurt. I'm thinking the juice isn't worth the squeeze there.

For the dashed lines, since we have control over gap length and size, it's possible we recommend a dash style for values and a dash style for thresholds. They can be distinguishable enough to work I think, here's a quick example:

@mceledonia We can easily add a tooltip for thresholds -- no problem there. I just thought you were hinting at something different about the tooltip layout.

A different dashed line can be implemented for thresholds. Although, we should create a new component in that case, so everyone could apply the same threshold styling. We may also need to create a new legend symbol? I created the dash myself for use in Cost Management -- not easy to customize.

i've started a ChartThreshold component just now alongside this PR. No visual changes yet for the dash style, but it would be defaulted inside the ChartThreshold component and overridable by the consumer.

@dlabrecq @cdcabrera - please weigh in and give a bit more specific feedback here once ready. I am happy to move forward however best!

IMO, we need a different dash style for thresholds. That's the main reason for creating a new ChartThreshold component (i.e., so users won't need to override styling).

Users won't be able to override the dash symbol for legends. We must create a new legend symbol for thresholds that folks can easily apply.

//cc @mceledonia

Took the liberty of creating a POC, showing how to create a new legend symbol for thresholds. You can find the code here: #2884

New threshold symbol

Existing dash symbol

ok, after chatting w/ @dlabrecq - the proposal is to use the new threshold legend symbol created in #2884 instead of dash symbol. Also, we can move ChartThreshold towards a theme for adding the default strokeDashArray and add a getThresholdTheme function (similar to ChartDonut's getDonutTheme function here)

thanks for the extensive feedback, and finally circling back here....here's my updates on this:

• added new threshold symbol for legend
• made legend multi-line using itemsPerRow
• added new ChartThresholdTheme and made default strokeDasharray 6,6 instead of 3,3
• rebased latest Victory updates here
• updated screenshots above

Noted that this should still be safe to consume later in Subscriptions (current usage here):
https://github.com/RedHatInsights/curiosity-frontend/blob/ci/src/components/chartArea/chartArea.js#L216

LGTM!