Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Timeline Y Axis labels are the wrong colour in dark mode making them very difficult to see #2250

Closed
jgough opened this issue Sep 1, 2022 · 3 comments · Fixed by #3698
Closed

[BUG] Timeline Y Axis labels are the wrong colour in dark mode making them very difficult to see #2250

jgough opened this issue Sep 1, 2022 · 3 comments · Fixed by #3698
Assignees
@joshuarrrr
Labels
bug Something isn't working needs research timeline unified visualization UX v2.7.0 visualizations Issues and PRs related to visualizations

Comments

@jgough
Copy link
Contributor

jgough commented Sep 1, 2022

In dark mode, when creating a visualisation of type Timeline, Y-axis labels are black which means they are difficult to see.

To Reproduce
Create a timeline visualisation with the following expression
.es().yaxis(label="Y AXIS LABEL GOES HERE").title("TITLE GOES HERE")

Note that in the created visualisation the title and legend are in white, but the y axis label is in black and is almost impossible to see.

I expect the y axis label to be white.

OpenSearch Version
1.3.4

Dashboards Version
1.3.4

Screenshots
image

Host/Environment:

  • Docker
  • Firefox 91.13.0esr

Additional context
I haven't been able to verify if this is still an issue in 2.x
@jgough jgough added bug Something isn't working untriaged labels Sep 1, 2022
@ashwin-pc
Copy link
Member

The timeline visualization is using a very old jquery based charting library under the hood (flot). Given that @joshuarrrr is currently looking into unifying the charting experience across the project, this will likely be fixed with that.

@kavilla kavilla removed the untriaged label Sep 27, 2022
@kavilla
Copy link
Member

kavilla commented Sep 27, 2022

[Triage]:

More value would be to migrating this visualization as a priority to the new unifying charting experience. +1 to @joshuarrrr.

@joshuarrrr joshuarrrr added visualizations Issues and PRs related to visualizations unified visualization UX labels Nov 17, 2022
@joshuarrrr joshuarrrr self-assigned this Mar 27, 2023
@joshuarrrr
Copy link
Member

I nerd-sniped myself into investigating and fixing this as part of my research into visualization color palettes. Migrating the timeline visualization rendering from flot.js to vega/vega-lite will be a significant amount of work, so at least @jgough and others can enjoy the fix in the meantime. Will raise PR today.

@joshuarrrr joshuarrrr mentioned this issue Mar 27, 2023
Merged
8 tasks
joshuarrrr added a commit to joshuarrrr/OpenSearch-Dashboards that referenced this issue Mar 27, 2023
@joshuarrrr
chore: update changelog
7322f7f 
Fixes opensearch-project#2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
joshuarrrr added a commit that referenced this issue Mar 31, 2023
@joshuarrrr
fix(timeline): Fix yaxis label color in dark mode (#3698)
868c822 
- 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

Fixes #2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
opensearch-trigger-bot bot pushed a commit that referenced this issue Mar 31, 2023
@github-actions
fix(timeline): Fix yaxis label color in dark mode (#3698)
c08dffa 
- 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

Fixes #2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 868c822)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
abbyhu2000 pushed a commit that referenced this issue Mar 31, 2023
@opensearch-trigger-bot @github-actions
fix(timeline): Fix yaxis label color in dark mode (#3698) (#3757)
c731e7c 
- 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

Fixes #2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit 868c822)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
vagimeli pushed a commit to vagimeli/OpenSearch-Dashboards that referenced this issue Apr 4, 2023
@joshuarrrr @vagimeli
fix(timeline): Fix yaxis label color in dark mode (opensearch-project…
b92d878 
…#3698)

- 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

Fixes opensearch-project#2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: vagimeli <vagimeli@amazon.com>
sikhote pushed a commit to sikhote/OpenSearch-Dashboards that referenced this issue Apr 24, 2023
@joshuarrrr @sikhote
fix(timeline): Fix yaxis label color in dark mode (opensearch-project…
09624b3 
…#3698)

- 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

Fixes opensearch-project#2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: David Sinclair <david@sinclair.tech>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@joshuarrrr joshuarrrr

Labels
bug Something isn't working needs research timeline unified visualization UX v2.7.0 visualizations Issues and PRs related to visualizations
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(timeline): Fix yaxis label color in dark mode joshuarrrr/OpenSearch-Dashboards
4 participants
@jgough @joshuarrrr @kavilla @ashwin-pc