okld / streamlit-gallery

A personal gallery of streamlit apps and components.
https://share.streamlit.io/okld/streamlit-gallery/main
107 stars 142 forks source link

How to create a custom tooltip to be used with Nivo charts #4

Open josevnz opened 1 year ago

josevnz commented 1 year ago

Hello,

I'm trying to create a simple tooltip that only shows the name of the data passed to the method, skipping everything else:

def custom_tooltip(data: dict[str, any]) -> html:
    pprint.pprint(data)
    name = data['data']['name']
    return html.strong(name, style='{{ ...theme.tooltip.container, color }}')

# ... Pass the callable to tooltip
        with elements("nivo_charts"):
            with mui.Box(sx={"height": 500}):
                nivo.Sunburst(
                    data=flavor_data,
                    margin=MARGIN,
                    width=850,
                    height=500,
                    id="name",
                    value="loc",
                    cornerRadius=1,
                    borderColor=BORDER_COLOR,
                    colorBy="id",
                    colors=COLORS,
                    childColor=CHILD_COLOR,
                    inheritColorFromParent=False,
                    enableArcLabels=True,
                    arcLabel='id',
                    arcLabelsSkipAngle=7,
                    arcLabelsTextColor=ARC_LABELS_TEXT_COLOR,
                    tooltip=custom_tooltip
                )

But it causes the following exception:

    self._session_state.on_script_will_rerun(rerun_data.widget_states)
  File "/home/josevnz/virtualenv/Streamlit/lib/python3.11/site-packages/streamlit/runtime/state/safe_session_state.py", line 68, in on_script_will_rerun
    self._state.on_script_will_rerun(latest_widget_states)
  File "/home/josevnz/virtualenv/Streamlit/lib/python3.11/site-packages/streamlit/runtime/state/session_state.py", line 474, in on_script_will_rerun
    self._call_callbacks()
  File "/home/josevnz/virtualenv/Streamlit/lib/python3.11/site-packages/streamlit/runtime/state/session_state.py", line 487, in _call_callbacks
    self._new_widget_state.call_callback(wid)
  File "/home/josevnz/virtualenv/Streamlit/lib/python3.11/site-packages/streamlit/runtime/state/session_state.py", line 242, in call_callback
    callback(*args, **kwargs)
  File "/home/josevnz/virtualenv/Streamlit/lib/python3.11/site-packages/streamlit_elements/core/callback.py", line 71, in dispatch
    raise ElementsFrontendError(f"In elements frame '{self._key}': {frontend_data.error}")
streamlit_elements.core.exceptions.ElementsFrontendError: In elements frame 'streamlit_elements.core.frame.elements_frame.nivo_charts': Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=tooltip for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The react website says the following:

tooltip(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

it seems than I'm missing wrapper around the html.strong element but I cannot figure out the right way to do it or I stumbled in a bug.

Please let me know if you need more information,

Thanks!.

IndigoWizard commented 11 months ago

@josevnz hello, Im facing an issue ( #6 ) with the tooltip in the nivo chart (pie) as well, any update so far?