fix(timeline): Fix yaxis label color in dark mode

[joshuarrrr]

Description

• Render label as HTML instead of in the Canvas so that it picks up text color from CSS theme
• Update CSS styles of yaxis label to match chart title
• Update HTML rendering to support custom color overrides via inline styles

Before:

Screen.Recording.2023-03-27.at.6.39.23.PM.mov

After:

Screen.Recording.2023-03-29.at.4.27.19.PM.mov

Explanation

There are a couple things going on here. The timeline vis was previously always setting the property axisLabelUseCanvas to true for the yAxis. Within flot.js, which is the legacy charting library used by timeline, that property causes the yAxis label to be rendered as part of the <canvas> element, which means it doesn't pick up any of the default CSS styles. In contrast, other chart text (such as the chart title) are rendered via HTML, which means they get the appropriate EUI text color applied, regardless of whether the dark or light theme is selected.

As far as I know, we don't currently have any good mechanisms to access theme colors within JS/TS files. If we did, it would be simple to just update the default color to just pull from the current theme text color:

OpenSearch-Dashboards/packages/osd-ui-shared-deps/flot_charts/jquery_flot_axislabels.js

Line 94 in 7322f7f

this.opts.axisLabelColour = 'black';

Instead, the fix was to switch the rendering of the yAxis label to HTML, which flot already supports. Unfortunately, the HTML renderers (HtmlAxisLabel and CssTransformAxisLabel) were missing support for custom colors, which timeline visualizations support as part of the yaxis expression. So I added custom color support to those renderers to be backwards compatible with timeline expressions that had set a custom color for that label. Finally, I styled the axis label to match the chart title.

Issues Resolved

Fixes #2250

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
  • yarn test:ftr
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov-commenter]

Codecov Report

Merging #3698 (348f3b8) into main (7efc231) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main    #3698      +/-   ##
==========================================
- Coverage   66.44%   66.44%   -0.01%     
==========================================
  Files        3209     3209              
  Lines       61633    61633              
  Branches     9507     9506       -1     
==========================================
- Hits        40955    40954       -1     
- Misses      18398    18400       +2     
+ Partials     2280     2279       -1     

Flag	Coverage Δ
Linux	66.39% <100.00%> (-0.01%)	⬇️
Windows	66.39% <100.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...vis_type_timeline/server/series_functions/yaxis.js	71.42% <100.00%> (ø)

... and 1 file with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[ashwin-pc]

The change might be small, but i can tell that you did your homework on this one. Also thanks for the helpful PR description. made this review a lot easier :)

[ananzh]

The change might be small, but i can tell that you did your homework on this one. Also thanks for the helpful PR description. made this review a lot easier :)

+1