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.

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

Colors for embedded existing visuals #827

Open
apop880 opened this issue May 20, 2022 · 0 comments
Open

Colors for embedded existing visuals #827

apop880 opened this issue May 20, 2022 · 0 comments
Labels

Comments

@apop880
Copy link

apop880 commented May 20, 2022

🐛 Bug report

Theming/colors appear to have some issues when it comes to embedding existing visualizations.

Steps to Reproduce

  1. Create a visualization in Qlik Sense.
  2. Embed using nebula.render({ element: elementId, id: vizId })

Expected behavior

Theming should honor what's set in theme file. For example, the straightTable section when embedding a table.

Actual behavior

If no palette is specified in a custom theme file (for example, when using the default theme), colors seem to be applied with little rhyme or reason. Here's an example of a cell being hovered in sn-table:

image

If palettes.ui[0].colors is defined at all, the color scheme appears to fallback to what is actually built for the visualization in Qlik. This is at least somewhat acceptable, but sometimes we want to be able to apply different theming in Qlik itself compared to in a third-party application.

After some trial and error, there seems to be random correlation between palettes.ui[0].colors[x] and a corresponding visualization color. For example, defining `palettes.ui[0].colors[2] modifies the hover color on an embedded table.

Versions

  • nebula.js: (2.10.0)
  • Platform: React
  • Browser: Chrome

Additional context

Perhaps I'm doing something wrong, but if so, the documentation needs to be updated, because I've scoured the docs and source code to see where these values are being applied and have had little luck. I also tried setting properties in object.straightTable and that didn't appear to do anything for hover color, either (but it did work for other properties). Finally, I tried using properties on the visualization itself, as documented at https://qlik.dev/libraries-and-tools/visualizations/table. That only worked when I was creating a table ad-hoc, but it didn't work when embedding an existing visualization.

I did see this line of code:
// Note: Hover colors from Layout have a higher priority than those from theme.
https://github.com/qlik-oss/sn-table/blob/5df9bec1b204b22c92a551e34b76032988975e06/src/table/utils/styling-utils.js#L119

That would potentially explain why modifying object.straightTable did nothing, but it makes very little sense to me that:

  • That only applies to hover colors and not other properties
  • palettes.ui[0].colors can still act as a modifier
@Caele Caele added the themes label Mar 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants