No tool tips for Histogram with time x_scale

[mtanco]

Wave SDK Version, OS

h2o_wave 0.22.0

Actual behavior

tool tip hover for linear scale

no tool tip hover for time scale ( I can make a gif as needed since it's not really showing that my curser is on the plot...)

Expected behavior

Tool tip to work for all scale times

Please note I did not test other x_scale types or other plot types with time scale

Steps To Reproduce

from h2o_wave import main, app, Q, ui, data


@app('/')
async def serve(q: Q):
    q.page['ex1'] = ui.plot_card(
        box='1 1 4 3',
        title='Dates',
        data=data('low high price', 3, rows=[
            ("2022-01-01", "2022-01-31", 100),
            ("2022-02-01", "2022-02-28", 150),
            ("2022-03-01", "2022-03-31", 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="time"
        )])
    )
    q.page['ex2'] = ui.plot_card(
        box='1 4 4 3',
        title='Numbers',
        data=data('low high price', 3, rows=[
            (1, 2, 100),
            (2, 3, 150),
            (3, 4, 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="linear"
        )])
    )

    await q.page.save()

[marek-mihok]

The problem lies in tooltip.ts:L98 in titleScale.getText(originData[titleField]) where

originData: {
  high: "2022-03-31"
  low: "2022-03-01"
  low - high: ['2022-03-01', '2022-03-31']
  price: 200
}

and titleField: "low - high".

When x_scale="time" the data are treated as a date objects. In our ranged low - high data an array is passed to the G2 date parsing function and it throws error as seen on the picture below:

However, in the second example there is no x_scale specified and therefore the data are not passed to date parsing function and therefore there is no error while showing the tooltip.

originData: {
  high: 4
  low: 3
  low - high: (2) [3, 4]
  price: 200
}

Looking on the G2 examples and API I couldn't find a direct support for histogram ranged data. Probably we need to find a different way how to refactor data passed to chart.

@lo5 you are an expert here. How do you think we should proceed?

cc @mturoci

[mturoci]

@marek-mihok one way to fix this is providing our own string for the tooltip title instead of having it computed by G2. This can basically be any string since we overwrite the tooltip with our custom React component without a title anyway. Wdyt?

Solution:

chart.tooltip({
    title: ' ', // HACK: Ignore tooltip title computation by G2 since we overwrite it anyway.
    showCrosshairs: true,
    crosshairs: { type: 'xy' },
    ...
)}

[marek-mihok]

Thanks @mturoci. That's a perfect idea!