search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

SeriesToolTip not displayed on Chart #3342

Open echarlus opened 2 years ago

echarlus commented 2 years ago

Description

I'm stumbling on a chart issue on Vaadin 23.0.10 and Vaadin 23.1.0. I'm adding tooltip on my Series but it's not being activated (displayed) on the Chart. I've looked at what's being sent to the client and, if I copy the chart creation JSON and use it to create a chart in JS then everything works fine. This seems to point out an issue on Vaadin's HighChart wrapper ... I've created a Java code sample demonstrating the issue, and a JS fiddle showing that the content received by the client works fine when passed directly to HighCharts.

Here's what's received on the client side : 

[[0,4],{"chart":{"styledMode":false},"title":{"text":"Test chart"},"subtitle":{"text":"Tue Jun 14 17:40:56 CEST 2022"},"plotOptions":{},"series":[{"name":"Random Series","tooltip":{"pointFormat":"<span style=\"color:{series.color}\"><b>{point.y}</b></span><br/>","valueDecimals":2,"valueSuffix":"°C"},"data":[9005.365,8047.316,9405.879,4344.0454,1093.4535,4718.843,5500.318,5022.5186,2318.0166,2506.5923]}],"exporting":{"enabled":false}},false,"return $0.updateConfiguration($1,$2)"]

One can see that the Tooltip's definition is sent. See the following fiddle that shows that the above code works as expected when using the HighChart js library.

Expected outcome

Chart is displayed an when one Hovers on a Serie's point, a tooltip is displayed

Minimal reproducible example

Example : 

package org.vaadin.example;

import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.*;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

import java.util.*;

@PageTitle("Chart Test")
@Route(value = "chart", layout = MainLayout.class)
public class ChartView extends VerticalLayout {
    Chart chart;

    public ChartView() {
        final Div cPanel = new Div();
        chart = buildChart();
        cPanel.add(chart);
        cPanel.setSizeFull();
        Label lbl = new Label("Test chart");
        lbl.addClassName("items-center");
        add(cPanel);
        setSizeFull();
    }

    public Chart buildChart() {
        Chart chart = new Chart();
        ListSeries series = new ListSeries("Random Series");
        List<Number> sList = new ArrayList();
        for (int i = 0; i < 10; i++)
            sList.add((float) Math.random() * 10000);
        series.setData(sList);
        final SeriesTooltip sTooltip = new SeriesTooltip();
        sTooltip.setPointFormat("<span style=\"color:{series.color}\"><b>{point.y}</b></span><br/>");
        sTooltip.setValueDecimals(2);
        sTooltip.setValueSuffix("°C");
        final PlotOptionsSeries pos = new PlotOptionsSeries();
        pos.setTooltip(sTooltip);
        series.setPlotOptions(pos);
        chart.getConfiguration().addSeries(series);
        chart.getConfiguration().setTitle("Test chart");
        chart.getConfiguration().setSubTitle(new Date().toString());
        chart.addClassName("self-center");
        chart.setSizeFull();
        return chart;
    }

}

Steps to reproduce

Run the above example using Vaadin 23.0.10 or Vaadin 23.1.0 (I'm running a plain war file on Tomcat, no Springboot etc.) but I believe this should not be of importance ...

Environment

Vaadin version(s): 23.1.0 OS: Mac OS 12.4 / Java dcevm-11.0.11+1 / Tomcat 9.0.62 Chrome : Version 102.0.5005.61 (Build officiel) (x86_64)

Same behavior occurs when runing the war on Tomcat 9 on Linux with OpenJDK Runtime Environment 18.9 (build 11.0.15+10) OpenJDK 64-Bit Server VM 18.9 (build 11.0.15+10, mixed mode, sharing)

Browsers

Chrome, Firefox, Safari

yuriy-fix commented 2 years ago

@DiegoCardoso , could you please take a look if there is an explicit API for wrapping tooltips?

DiegoCardoso commented 2 years ago

Hi @echarlus,

On Charts, the tooltips are disabled by default. To enable it, you can either call chart.getConfiguration().getTooltip().setEnabled(true) or instead of creating a SeriesTooltip, create a Tooltip object and set it through the configuration API.

echarlus commented 2 years ago

Hi @DiegoCardoso, thanks a lot for the reply. That's a change from the Chart version I was using in Vaadin 8 ... What puzzled me is that in my Vaadin App I have several classes using charts and on some of them I was getting the Tooltip but not on others and I could not find any difference in the way I was creating/using the SeriesTooltip. Now that I have your answer, I see the difference ... the simple fact of get the Tooltip from the configuration (for example using conf.getTooltip().setXDateFormat("%A %d %b %Y %H:%M:%S"); ) enables the Tooltip (no need to call setEnabled) bu just creating the Tooltip instance in the configuration which was staying null in the other classes where I was only using Series.setTooltip(). From what I see, there is no need to call the setEnabled(true) method on the configuation's Tooltip object, (even though the enabled instance variable is null by default) just having a Tooltip object different from null is enough for the Tooltips to show on the chart. In my opinion this behavior is odd, having a Series on which one has set Tooltips should automatically enable tooltips at the Chart level .... what do you think ? Anyway, thanks a lot, my problem is now solved !

DiegoCardoso commented 2 years ago

From what I see, there is no need to call the setEnabled(true) method on the configuration's Tooltip object, (even though the enabled instance variable is null by default) just having a Tooltip object different from null is enough for the Tooltips to show on the chart.

Yeah, the difference is when you use the the Tooltip from the Configuration object or through the plot options. Using the later would require to explicitly enable the tooltip from conf.

In my opinion this behavior is odd, having a Series on which one has set Tooltips should automatically enable tooltips at the Chart level .... what do you think ?

It can be not expected, I agree. To be honest, I don't recall the decision to make it disabled by default, since as far as I can tell, it's enabled by the default on Highcharts.

It would a nice enhancement to make it appear automatically if a tooltip is set though plot options.

echarlus commented 2 years ago

From what I see, there is no need to call the setEnabled(true) method on the configuration's Tooltip object, (even though the enabled instance variable is null by default) just having a Tooltip object different from null is enough for the Tooltips to show on the chart.

Yeah, the difference is when you use the the Tooltip from the Configuration object or through the plot options. Using the later would require to explicitly enable the tooltip from conf.

In my opinion this behavior is odd, having a Series on which one has set Tooltips should automatically enable tooltips at the Chart level .... what do you think ?

It can be not expected, I agree. To be honest, I don't recall the decision to make it disabled by default, since as far as I can tell, it's enabled by the default on Highcharts. Yes that's another thing that puzzled me during my debug since, when I was passing the same json config directly to HighCharts then everything was working fine ...

It would a nice enhancement to make it appear automatically if a tooltip is set though plot options. Yes agreed.

echarlus commented 2 years ago

@DiegoCardoso one more thing related to this issue. I've enabled Tooltips on a Chart. On this Chart I have two Series but I need to display Tooltip for only one ... I cannot find a way to disable the Tooltip on the second Series :

Is there a way to do that ? If not it would be great to add this feature... Thanks

echarlus commented 1 year ago

@DiegoCardoso any update on this issue ?

DiegoCardoso commented 1 year ago

Hi @echarlus

First of all, sorry for not replying earlier.

I checked on Highcharts API and I couldn't find any way to disable tooltip per series. It allows you to customize some of the properties as can be seen in their API documentation page, but tooltips can only be enabled/disabled for the whole chart.