style(xy): Update area and line chart style

[andrimal]

Summary

This PR updates the style of area and line charts.

Details

The updated style:

• line stroke width: 1.5px
• area opacity: 0.2
• points/ dots:
  • stroke width: 1.5px
  • fill color: colors.backgroundBasePlain
  • isolated points: keep the same style for isolated points when line/area points are not visible
  • dimmed fill color: same as the fill color -> backgroundBasePlain
  • focused stroke width: same as the line/area focused stroke width
  • highlight logic:
    • hover-highlighting: keep the same highlighting logic when pointer is over a geometry
    • bucket-highlighting: fill all the area/line points of the hovered bucket with the same stroke color
• brush opacity in dark theme: 0.2

Screenshots

Line Chart Screenshots

• Light theme (Before):
  

• Light theme (After):
  

• Dark theme (Before):
  

• Dark theme (After):
  

Area Chart Screenshots

• Light theme (Before):
  

• Light theme (After):
  

• Dark theme (Before):
  

• Dark theme (After):
  

Issues

fix #2721

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• New public API exports have been added to packages/charts/src/index.ts
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated
• The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
• Visual changes have been tested with light and dark themes

[andrimal]

buildkite update vrt

[andrimal]

buildkite update vrt

[andrimal]

buildkite update vrt

[andrimal]

buildkite test this

[gvnmagni]

A detail that I noticed when we do NOT display dots:

isolated data points are now represented with a white dot with stroke colored as the line. It might be better to keep as it was, a filled dot with no stroke

The overall logic for isolated point is: they should be as similar as possible to the line, because they are basically a little point of that line isolated from the rest of the series

How it is with this update:

How it should be:

[andrimal]

A detail that I noticed when we do NOT display dots:

isolated data points are now represented with a white dot with stroke colored as the line. It might be better to keep as it was, a filled dot with no stroke

The overall logic for isolated point is: they should be as similar as possible to the line, because they are basically a little point of that line isolated from the rest of the series

Thank you @gvnmagni! Yes I checked that the isolated points actually inherit the normal point style. I'll proceed with the changes to decouple them.

[andrimal]

buildkite update vrt

[andrimal]

buildkite test this

[andrimal]

buildkite update vrt

[andrimal]

buildkite test this

[gvnmagni]

The update is looking good, thank you @andrimal for the effort! I'll write down a few details that I would love to check (either next release or next days, I'll check what we can do) because there are a few tiny pieces that I would love to improve, but these are NOT a blocker from my perspective

1. Hover state for points. We re-introduced that transparent bigger dot whenever we hover a single point, works perfectly but I will probably explore an alternative where it is even bigger. Especially on light lines it is very hard to be depicted. Again, the PR works perfectly, it is just an improvement that we can do in term of style

2. Interactions: when we isolate a dataseries through the legend, the stroke-width of that line increase of a pixel (or so..), that increase is not reflected on the dot stroke-width (as you can see in the folowing image)

3. Interactions: when we isolate a dataseries, all the other dots get to be in grey colors and transparent. While I would expect the stroke of many overlapped dots to be darker, I am not understanding why their fill seem to get darker too. Like, if it has a white fill, how does it become darker when overlapped with additional white fills? I am sure I am missing something 🙇‍♂️

[andrimal]

1. We re-introduced that transparent bigger dot whenever we hover a single point, works perfectly but I will probably explore an alternative where it is even bigger.

Yes I agree on this. When re-introduced the transparent bigger point I used the original highlighter style with radius 5. But we could definitely increase this easily, unless you want to rethink the overall highlighter style then we could later proceed to a follow up fix. :)

opacity: 0.5,
fill: ColorVariant.Series,
stroke: ColorVariant.None,
strokeWidth: 0,
radius: 5,

2. Interactions: when we isolate a dataseries through the legend, the stroke-width of that line increase of a pixel (or so..), that increase is not reflected on the dot stroke-width (as you can see in the folowing image)

Until now, there wasn't a focused style for the dots. I introduced it now -> 7f63cee

3. Interactions: when we isolate a dataseries, all the other dots get to be in grey colors and transparent. While I would expect the stroke of many overlapped dots to be darker, I am not understanding why their fill seem to get darker too. Like, if it has a white fill, how does it become darker when overlapped with additional white fills? I am sure I am missing something 🙇‍♂️

This was actually not transparent. There was a dimmed point style applied to dimmed line/area charts. I changed the fill color from light gray to background base plain here -> 9484300

[andrimal]

buildkite update vrt

[gvnmagni]

Looking good, I noticed this while playing around (#2752) but it is not a problem related to this specific PR, it already existed before all this

[andrimal]

Looking good, I noticed this while playing around (#2752) but it is not a problem related to this specific PR, it already existed before all this

Yes I noticed that too. I can definitely take this as a follow up fix along with this #1921 :)

[elastic-datavis]

✅ Successful Deployment (build#5226) - ada5e61

• Docs
• Storybook
• e2e server
• Playwright VRT report
• Playwright A11Y report

[markov00]

Looking good, I noticed this while playing around (#2752) but it is not a problem related to this specific PR, it already existed before all this

I believe this is connected: we are now showing all the dots in the highlighter, but they are sorted in a different way then the way its sorted in the rendered. Note the blue series is ontop of the light green one, when hovering the highlighter shows the light green on top of the blue one. I believe is a matter of aligning the rendered point to the actual series order.
can be done also on a subsequent PR

[andrimal]

Looking good, I noticed this while playing around (#2752) but it is not a problem related to this specific PR, it already existed before all this

I believe this is connected: we are now showing all the dots in the highlighter, but they are sorted in a different way then the way its sorted in the rendered. Note the blue series is ontop of the light green one, when hovering the highlighter shows the light green on top of the blue one. I believe is a matter of aligning the rendered point to the actual series order. can be done also on a subsequent PR

Hey @markov00 you are right, this is the other issue #1921 that I mentioned here and would be nice to handle as a fix!