open-innovations / oi-lume-viz

Lume Plugin that enables charting
https://open-innovations.github.io/oi-lume-viz/
6 stars 1 forks source link

SVG legend items show locally but not on built site. #55

Closed luke-strange closed 3 weeks ago

luke-strange commented 1 month ago

I have a legend where the colours appear locally:

Screenshot 2024-09-19 at 14 21 07

But not on the built site:

Screenshot 2024-09-19 at 14 21 37

Weirdly, the inverse is true for the "skip map" and "go to start of map" buttons - they appear on the site but not locally.

Config is here: https://github.com/TheDataCity/techUK-ldi-website/blob/main/src/infrastructure/hv_power_routes.vto

luke-strange commented 1 month ago

I've temporarily fixed the issue by manually including the CSS for the legend icons in src/_includes/css/oi.css

slowe commented 3 weeks ago

@luke-strange There aren't any icons involved if you haven't explicitly set any. Not being able to look at the end result, I will suggest that all the page elements exist but (as you point out) the CSS is not being included. This CSS is what will hide the "Skip map" buttons and is what sets the size of the coloured boxes (they will have an unset width without the CSS).

luke-strange commented 3 weeks ago

@slowe does that mean that you must always manually set CSS for the legend icons on Lume Charts? I'd previously thought there was some styling included by default, which you could override. Maybe this was an incorrect assumption? Or I have just forgotten writing the CSS for it in each project I've worked on (very plausible).

slowe commented 3 weeks ago

@luke-strange I'm writing responses slightly in the dark as I can't see your site. Yes, there is some default styling e.g. styles applied to .oi-legend-inner .oi-legend-icon. That styling should come from legend.css. Is that being included?

luke-strange commented 3 weeks ago

Seems to be fixed. Closing this for now but will keep an eye out if it happens again.