pepstock-org / Charba

J2CL and GWT Charts library based on CHART.JS
https://pepstock-org.github.io/Charba-Wiki/docs
Apache License 2.0
62 stars 6 forks source link

OOTB crosshair does not show tooltips in all linked charts #100

Open divq opened 4 months ago

divq commented 4 months ago

(related to #88)

The javascript one shows tooltips in all linked charts

截屏2024-05-14 16 07 22

But the OOTB one (created following the guide)only shows the tooltip in the chart under the mouse.

截屏2024-05-14 16 21 05

This is the code for creating the OOTB one (it is an empty GWT 2.11 project using charba-gwt 6.5)

public void onModuleLoad() {
    RootPanel.get().add(createLineChartWidget());
    RootPanel.get().add(createLineChartWidget());
}

private LineChartWidget createLineChartWidget() {
    LineChartWidget chart = new LineChartWidget();
    chart.getData().setLabels("1","2","3");
    LineDataset set1 = chart.newDataset();
    set1.setData(1.1,1.2,2.1);
    chart.getData().setDatasets(set1);
    chart.setHeight("200px");
    chart.getPlugins().add(Crosshair.get());
    CrosshairOptions options = chart.getOptions().getPlugins().getOptions(Crosshair.ID, Crosshair.FACTORY);
    options.setGroup("LinkedGroup");
    options.store();
    Tooltips tooltips = chart.getOptions().getTooltips();
    tooltips.setIntersect(false);
    tooltips.setMode(DefaultInteractionMode.X);
    return chart;
}
stockiNail commented 4 months ago

@divq thank you very much for feedback. The current implementation was the desired one. I think this could be an enhancement for next releases.

stockiNail commented 3 months ago

@divq I'm still thinking about this ehnancement. As you had seen in #88 issue, you can group different chart. As workaround you could use the "activate" elements to show the tooltip: https://pepstock-org.github.io/Charba-Wiki/docs/charts/Api#active-elements

If you need to customize better the "interaction" with tooltip, you could use interaction package to create your own interaction: the https://github.com/pepstock-org/Charba/tree/master/src/org/pepstock/charba/client/interaction

divq commented 3 months ago

@divq I'm still thinking about this ehnancement. As you had seen in #88 issue, you can group different chart. As workaround you could use the "activate" elements to show the tooltip: https://pepstock-org.github.io/Charba-Wiki/docs/charts/Api#active-elements

If you need to customize better the "interaction" with tooltip, you could use interaction package to create your own interaction: the https://github.com/pepstock-org/Charba/tree/master/src/org/pepstock/charba/client/interaction

My understanding of your suggestion is that I should register an event handler that listens to one chart's tooltip popping up and accordingly activate other charts' tooltips.

Let's say there is chart A and B. They are in a List<Chart> chartList

If I register a ExternalCallback by chart.getTooltips().setExternalCallback for each chart, and that callback is:

List<ActiveDatasetElement> activeElements =  chart.getActiveElements();
for(ch in chartList)
{
   if(ch==chart) continue;
   ch.setTooltipActiveElements(activeElements);
}

The problem is that this would lead to an infinite recurrence problem, because when the tooltip wants to pop up on B, it triggers B's ExternalCallback, which sets A's active elements, which again triggers B's ExternalCallback event.

And since this is in front end (compiled into JS code), I don't think there is a proper synchronization mechanism to solve this.

The result of my experiment:

  1. When I use crosshair plugin, and set tooltip setIntersect(false), setMode(DefaultInteractionMode.INDEX), when my mouse is not hovering exactly above a dot in a line chart, the tooltip shows up, but not triggering the ExternalCallback or SortCallback events. Only when the dot is hovering in precise dot site can the tooltip event be triggered.

  2. When my mouse hovers above the exact point, the console says maximum call stack size exceeded, which is the result of the infinite recurrence problem I've mentioned.

stockiNail commented 3 months ago

@divq that's not exactly what I meant but really thank you for your experiments. Let me take time to implement it in a use case of the showcase and I'll come back to you with code (if what I think is possible... otherwise I'll try to enhance the plugin in a next version).