feral-dot-io / leptos-chartistry

Chartistry is an extensible charting library for Leptos
https://feral-dot-io.github.io/leptos-chartistry/
Mozilla Public License 2.0
37 stars 2 forks source link

Added chart tooltip styling #6

Closed VincentBerthier closed 4 months ago

VincentBerthier commented 4 months ago

By default, the tooltip are show on a white background with default color text. Which can be…unfortunate… image

This PR provides a styling mechanism for the tooltip to set the text and background colour, and/or set the tooltip classes (e.g. for Tailwind support).

Which can give this: image

This was achieved by doing:

let tooltip = Tooltip::left_cursor();
let Tooltip { cursor_distance, style, .. } = tooltip;
let tooltip_style = TooltipStyle::new().class("bg-background-1 text-white rounded-lg");
style.update(|style| *style = tooltip_style);

TooltipStyle::default() gives the default style, and for example tooltip_style.background("#111111") and tooltip_style.text_colour("#000000") would set the background to (mostly) black and a white text colour.

feral-dot-io commented 4 months ago

Thanks for the PR and taking a look at this!

It does look like Tooltip is baking in way too many assumptions about styles and needs to change. I'm not sure if this is the way to go for changing CSS options though as it could easily expand to more and more CSS options.

Most of the components have a class like _chartistry_rotated_label. The intention behind this was that you could override things with your own CSS. It looks like this is missing from the Tooltip HTML.

So there are two issues here, that the Tooltip is missing a _chartistry class and that other components have baked in assumptions for a light-background.

I'll get back to you on this as I'm going to deal with SSR in #4 This might be better initially tackled by putting together a dark background themed example.

feral-dot-io commented 4 months ago

I've done something slightly different for tooltips in #10. I've added the missing _chartistry_tooltip class and set up an example of a dark background themed chart. I had added a class signal for Tooltip but this ended up being a semver breaking change so I'll put it off for another release. You've also pointed out that Colour is missing an alpha channel so I'll try and incorporate that in the future too.

Thanks again for your input. Let me know if you have trouble with applying themes on Discord.