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

[FEATURE] Support formatters when using Template as HoverTool #13599

Open
hoxbro opened this issue Dec 13, 2023 · 1 comment · May be fixed by #13650
Open

[FEATURE] Support formatters when using Template as HoverTool #13599

hoxbro opened this issue Dec 13, 2023 · 1 comment · May be fixed by #13650

Comments

@hoxbro
Copy link
Contributor

hoxbro commented Dec 13, 2023

Problem description

When using Template as a tooltip in a HoverTool. I would like it to be possible to also use formatters.

Feature description

I want these two HoverTools to provide the same output (except styling):

import pandas as pd
import numpy as np

from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure, show
from bokeh.models.dom import Div, Styles, Template, ValueRef


source = ColumnDataSource(
    data=dict(x=[0], y=[0], date=np.array([np.datetime64("2020-01-01")]))
)


def template_tooltips():
    style = Styles(
        display="grid",
        grid_template_columns="auto auto",
        column_gap="10px",
    )
    grid = Div(style=style)
    grid.children = [
        "date",
        ValueRef(field="date{%F}"),
    ]
    return Template(children=[grid])


hovertool1 = HoverTool(
    tooltips=[("date", "@date{%F}")],
    formatters={"@date": "datetime"},
)


hovertool2 = HoverTool(
    tooltips=template_tooltips(),
    formatters={"@date": "datetime"},
)

p = figure(width=400, height=400)
p.add_tools(hovertool1)
p.add_tools(hovertool2)
p.circle("x", "y", size=20, source=source)

show(p)

Normal hover tool:
image

Template hover tool
image

Note: Ignore the styling problem this is because I'm using Firefox. See #13520.

Potential alternatives

As an alternative, I can use custom HTML to get the same effect, but it will quickly be somewhat ugly.

Additional information

For my real purpose, I plan to use this for ImageStack. A rough example is given here: holoviz/holoviews#6015 (comment).

@hoxbro hoxbro added the TRIAGE label Dec 13, 2023
@mattpap
Copy link
Contributor

mattpap commented Dec 13, 2023

ValueRef(field="date{%F}")

ValueRef.field is a field name, so the syntax with formatting would be something along ValueRef(field="date", format="%F).

@mattpap mattpap added this to the 3.4 milestone Dec 13, 2023
@mattpap mattpap linked a pull request Jan 17, 2024 that will close this issue
@mattpap mattpap modified the milestones: 3.4, 3.5 Feb 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants